CSS - Boxes Do Not Line Up In Ie7

Hi

I am creating a new site for a friend in Wordpress

ilovelifebecause.com

I can usually muddle through in css to make changes, but i'm stumped at the moment.

What I am trying to do is swap around the two cream coloured boxes so the larger one is on the right, the thinner one on the left and the blue box in the middle still. I've tried a number of things in the css file but can't seem to find the right method - can anyone help?

many thanks in advance
Paul

Im trying to replicate the vertical navigation style that is used on the Mozilla Firefox Website (as seen to the left). I have sucessfully done this useing images, with the exclusion of a space problem between the items and the end images in FireFox. I am using the strict.dtd and am frustrated with this problem. Iff anyone can help me create a nav with this style that would be wonderful. Here is the css im using:

Code:

.cssnavend	{
	position:relative;
	font-family: arial, verdana, helvetica, sans-serif;
	display: block;
	width: 209px;
	height: 9px;
	margin: 0; 
	margin-bottom:0px;
	padding: 0;
}
.cssnav	{
	position:relative;
	font-family: arial, verdana, helvetica, sans-serif;
	background-image: url(images/but-over.jpg);
	background-repeat: no-repeat;
	display: block;
	width: 209px;
	height: 31px;
	margin: 0; 
	margin-bottom:0px;
	padding: 0;
}
.cssnav a {
	display:block;
	font-size: 11px;
	width: 209px;
	height: 31px;
	display: block;
	float: left;
	margin: 0;
	padding: 0;
	color: #096CCE; 
	text-decoration: none; 
}
.cssnav img {
	width: 100%; 
	height: 100%;
	border: 0;
}
.cssnav a:hover{
	color: #000;
	}
* html a:hover {
	visibility:visible
}
.cssnav a:hover img{
	visibility:hidden
}
.cssnav span {	
	position:absolute;
	left:7px;	
	top:7px;	
	margin:0;	
	cursor: pointer;
	}
#box {
	margin-top: 10px;
	padding: 0;
	width: 209px;
	display: block;
	}
#boxtop {
	width: 209px;
	height: 11px;
}
#boxcontent {
	width: 209px;
	background: #DFE5EB;
}
#boxbottom {
	width: 209px;
	height: 11px;
}
#boxtext {
	width: 209px;
	background: #DFE5EB;
	padding: 2px;
}

The following code is me testing my css. The first group is useing the cssnav styles. The 2nd group is using the box styles. The 3rd group is a try at making a content box with rounded corners that is a spacific width. Unfortunatly, the content of the box will not wrap to the width of the box, instead it continues on 1 line and outside the box.

Code:

<div class="cssnavend"><img src="images/but-top.jpg"></div>
<div class="cssnav"><a href="index.php"><img src="images/but-up.jpg" /><span>Home</span></a></div>
<div class="cssnav"><a href="#"><img src="images/but-up.jpg" /><span>This is a test</span></a></div>
<div class="cssnav"><a href="phpbb/index.php" target=_blank><img src="images/but-up.jpg" /><span>Forum</span></a></div>
<div class="cssnavend"><img src="images/but-bot.jpg"></div>

<br><br>

<div class="box">
	<div class="boxtop"><img src=images/but-top.jpg></div>
	<div content="boxcontent">
		<div class="cssnav"><a href="#"><img src="images/but-up.jpg" /><span>Home</span></a></div>
		<div class="cssnav"><a href="#"><img src="images/but-up.jpg" /><span>This is a test</span></a></div>
		<div class="cssnav"><a href="#"><img src="images/but-up.jpg" /><span>Forum</span></a></div>
	</div>
	<div class="boxbottom"><img src=images/but-bot.jpg></div>
</div>

<br><br>

<div class="box">
	<div class="boxtop"><img src=images/box-top.jpg></div>
	<div class="boxcontent">
		<div class="boxtext">This is some text inside of the box. This text should wrap and be padded.</div>
	</div>
	<div class="boxbottom"><img src=images/box-bot.jpg></div>
</div>

Thank you all who help.

hi,

Im making a site, and i decided to use CSS instead of tables. I have used basic CSS before, but it gets abit harder when i start making boxes etc.

Here is my code so far -

layout.css - (one that gets included on each page)

Code:

@import "style.css";
	
body {
	margin:10px 10px 0px 10px;
	padding:0px;
}
	
#leftcontent {
	position: absolute;
	left:10px;
	top:50px;
	width:200px;
	background:#fff;
	border:1px solid #000;
}

#centercontent {
	
	background:#fff;
 		margin-left: 199px;
 		margin-right:199px;
	border:1px solid #000;		
	voice-family: "\"}\"";
	voice-family: inherit;
  	margin-left: 201px;
  	margin-right:201px;
}

#shoutbox {
	position: absolute;
	right:10px;
	top:50px;
	width:200px;
	background:#fff;
	border:1px solid #000;
}

#rightcontent {
	position: absolute;
	right:10px;
	top:50px;
	width:200px;
	background:#fff;
	border:1px solid #000;
}
	
#banner, #footer {
  background:#fff;
	height:40px;
	border-top:1px solid #000;
	border-left:1px solid #000;
	border-right:1px solid #000;
	voice-family: "\"}\"";
	voice-family: inherit;
	height:39px;
}

#footer {
  background:#fff;
	height:40px;
	border-bottom:1px solid #000;
	border-left:1px solid #000;
	border-right:1px solid #000;
	voice-family: "\"}\"";
	voice-family: inherit;
	height:39px;
}

#banner h1 {
	font-size:16px;
	padding:10px 10px 0px 10px;
	margin:0px;
}
	
#shoutbox, #rightcontent p {
	font-size:10px
}

style.css - text formatting etc.

Code:

body {
	font:	12px/1.2 Tahoma;
	background:#ddd;
	padding:0px;
	margin:0px;
}
	
a {
	text-decoration:none;
	font-weight:bold;
	color:#c00;
}
	
pre {
	font-size:11px;
	color:blue;
}
	
ol {
	margin-right:40px;
}
li {
	margin-bottom:10px;
}

p,h1,pre {
	margin:0px 10px 10px 10px;
}
		
h1 {
	font-size:14px;
	padding-top:10px;
}

it produces a good layout, with a header, 3 coloums and a footer. whoever, the boxes expand at different rates and the footer doesnt move down. the header also doesnt expand. i know how i can fix this, but i dont know how to fix it without making it so that its locked at a resolution. i would like the site to exapand as the window is made larger.

here is an image of what i get -



and this is what i am aiming to acheive -



as you can see, i want all the boxes to be the same length, which is defined by the size of the largest box. also, i want to create 2 or more boxes on the left, only the bottom of which gets made longer. on the first image you cannot see the extra box because it is covered by the other one :-/

i would be greatful for any help you guys can provide me

thanks,

dynamyt

Hello,

I created a site with floating frames and it looks good in IE6 and FF/Mozilla.

But I have one problem:
I use in my dynamic layout an ID more then once
(thats not OK according w3 validation)

I tried to do something with pseudo classes but this works not really goed. My "uni" thumb box is used on two diff. pages
The skyscraper: http://www.all4yourwebsite.com/
and the result/search page: http://www.all4yourwebsite.com/search.php

I know there is a solution, but because the tumbbox have to be much flexible the solution must be simple as the current (wrong) solution. Anyone an idea?

Hello:

I'm trying to place two drop down boxes at the right of my page.

When I view the pages in Firefox and Internet Explorer, they are so far off.

You can view the page yourself by visiting:
http://www.informedmortgage/100-financing.html

I've tried changing widths, margins, etc and am having no luck.

I can use some help. I hope someone can help me out.

Thank you.
Back to top

Hallo,

I have in several cases serious problems with floating boxes. Not with the standard layout's like here described http://css.maxdesign.com.au/floatutorial/
but with more complicated layouts. I know to place the float attribute but have problems with setting the clear attribute.

Does some know a good source where I find more information or documented examples ?

Finally I can fix my problems, but it take so much time of testing...

Thnaks

I'm brand new to CSS. I pieced together the following CSS style sheet:

body {
margin-top:5px;
margin-bottom:5px;
padding:0;
background:#ccffff;
}

t{line-height:36px;}

#wrap {
position:50%;
width:613px;
margin:0 auto;
background:#ffffff;
margin-left:auto;
margin-right:auto;
align:center;
}

#sidebar {
position:absolute;
float:left;
width:150px;
border: 1px solid #000033;
padding:15px;
background:#ffffff;
height:370px;
z-index:1;
}

#main {
float:right;
width:390px;
border: 1px solid #000033;
overflow: auto;
font-family: "Times New Roman", serif;
font-size: 13px;
padding-top:12px;
padding-right:20px;
padding-bottom:20px;
padding-left:20px;
background:#ffffff;
background-repeat:no-repeat;
background-position:75% 535px;
background-image:url(smalljester.jpg);
height:750px;
z-index:2;
}

It works fine on most browsers, but not of course in IE/Win. I think there's something basic I'm not understanding about style sheets. The page is meant to be (and is on most browsers I've tried and on Macs) centered (the two boxes centered), the two boxes are meant to have white backgrounds with thin solid borders, and the boxes are meant to overlap perfectly (the right border of the left box should exactly overlap the left border of the right box). Right now in IE(8)/Win(XP) it's not centered, the two boxes are not connected (separated by white space on a light blue background), and the white background extends the full height of the #main box (where it's not meant to go below the bottom of the left column). Any help appreciated.

I came across this site with a google search. I have been trying to make a website for my new business and I've been trying to learn CSS. Everything went fine until I tested resolutions out yesterday, I noticed they changed. I've been trying to place a text box in middle of an image but I can't get it to work correctly... a perfect example of what I'm trying to achieve is found he http://www.myspace.com/nourotika

I have tried and tried and this is the website that came closest to my problem...

My code would be:

Code:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
body {
   background-color: #000;
}
-->


</style></head>


<body><center>
<p style="position: absolute; top: 735px; right: 314px; width: 537px; padding: 4px; background-color: #000; font-weight: bold; font-size: 11px; font-xolor: #F00; height: 548px; color: #909; overflow: visible; z-index: 1;">content goes here</p>
</div>

http://i158.photobucket.com/albums/t108/Katouuffxi/regular.jpg
This would be the regular resolution I'm looking for

http://i158.photobucket.com/albums/t108/Katouuffxi/resproblem.jpg
And this would be my screen resolution problem Sad

I really don't know how in the world to do it and I'm just so close from finishing everything... help would be much much appreciated.

i have got two areas created with css one above the other but there is a large white gap between i have tried playing arond with the CSS file but cant gt them closer together im still only learning css but i thought id be able to do this.... if someone could advise that would be really great...

here is the page so you can see what is happeneing
http://www.justtaps.com/test/admintemplate.php

and this is a link to the css file
http://www.justtaps.com/test/css/main.css

thanks in advanced to anyone who replies..

RF

I am trying to color in radio boxes itself, ( example where I want to use it he http://scygro.ath.cx/index.php?option=customize ) but somehow I cannot figure out how to do this. I would like a proper result on both Internet Explorer and Mozilla?

Anyone know? I tried to search for this, maybe I'm just blind, but couldn't find anything, only how to color a little block on which the radio button is on top of, which needless to say didn't help much!

I have 6 boxes in the body- 3 floating to right and three to the left.

The 3 to the right are fine- at top of border and stacked one on top of the other, but the 3 to the left and pushed all the way down past below the 3 to the left.

I've tried all the positioning options but can't get the left boxes up to the top. Do I need to set-up a table for it to work?

Thanks for any help!

I'm new to css. I learned how to center a layout so it stays in the center of the browser when the browser is resized, but now I am having trouble trying to place elements inside the boxes I create. When I create a box and put it inside my main layout box i give it a position as to where I want it to go, but when I go into the browser and resize the browser the box stays where it is, and doesn't move with the rest of the page. the same happens for the text i put inside boxes. I guess I'm not supposed to assign an absolute value to the boxes, but how else to I get it where I want it? It's driving me crazy!

this is my html:<body>
<div id="container">
<div class="box">
<h1>Silver City Food Co-op</h1>
<p1>520 North Bullard Street - Silver City - New Mexico - 88061 - Phone: 575-388-2343 - Monday-Saturday: 9am-7pm</p1></div>
<div class="box1"><p>The Silver City Food Co-op is a member owned full-line grocery store featuring natural, organic, and local foods, everyone can shop the Co-op, anyone can become part owner of the Co-op!</p></div>

<div class="box2"><div class="box3"><p2>Food News</p2></div></div>
</div>
</body>
</html>

this is my CSS

body{background-color: #69916D}
h1{color: #FFF; Font-family: Georgia, "Times New Roman", Times, serif; font-size: 46px; letter-spacing: 7px; font-weight: normal; margin: 0 0 0 130px}
p1{font: Arial, Helvetica, sans-serif; letter-spacing: 2px; font-size: 10px; color:#FFF; margins: 0 0 0 30px}
p{font: Arial, Helvetica, sans-serif; margin: 0 0 0 10px}

div.box {height: 150px; width:750px; border: 0px solid; border-color: #000; background-color: #166501}
div.box1 {height: auto; width: 750px; border: 1px solid black;background-color: #FFF; position: absolute; Top: 200px; z-index:2}
div.box2 {height: 500px; width:750px; border: 0px solid; border-color:#000; background-color: #FFF9F6; z-index: 1}
div.box3{height:auto; width: 200px; border:1px solid; border-color:#000; background-color: #FFF; position:absolute; top: 300px; left:152px}


body {
text-align: center;
}

#container {margin: 0 auto;
width: 750px; text-align: left
}

Thanks for the help!!

I am new to using CSS for more than just text, and I have run into a problem. What I want to do is to have an image with a margin of 3px around it. The problem occus with the background color and border in Mozilla (Fire Fox). The box dosn't fit around the image properly. Does anyone have an idea why this is?

--xenite

Hi. im used to using tables for things like this, trying to get it all into css, im having a little trouble creating like module boxes,

with tables i would slice the corners up, etc and put arrange them in a table,
Row 1: 3 columns //header
Row 2: 1 column spanning 3 //content
Row 2: 3 columns //footer corners

heres a diagram of what im trying to do will make it easier to understand,



appreciate anyones help.
Cheers
Rob