DIV won't stay in container in Firefox 2

[wendyp]

I'm converting a table-based layout to CSS. This is my first attempt. So far I've managed to find answers to all my problems by searching and studying, but I haven't come across this.

In IE, this works just as I'd expect it to.

http://www.mesaartschool.com/dev/testcss1.php

But in Firefox, the boxes that should be contained are overflowing on the right side.

I've set the borders so that I can see what's happening. In IE, they're all contained, but in Firefox, they are wider than they should be.

* { padding:0; margin:0; }
body,td,tr,select, input {
		font-family:Arial; 
		font-size: 11px; 
		color: #392643;
		margin: 0px;
		line-height:14px;
		/* center main_div on the page in IE : */
                text-align        : center;
}
#side {
	border: medium solid #66FF33;
	position: absolute;
	top: 175px;
	bottom: 195px;
	left: 0px;
	right: 615px;
	width: 210px;
	height: 450px;
}
#sidenotice {
	border: medium solid #66FF33;
	position: normal;
	left: 0px;
	width: 100%;
	height: 50px;
	padding-left: 50px;
}
#sidemenutags {
	border: medium solid #66FF33;
	position: normal;
	left: 0px;
	width: 100%;
	height: 170px;
	padding-left: 1px;
	padding-top: 5px;
}
#sidemenutext {
	border: medium solid #66FF33;
	position: normal;
	left: 0px;
	width: 100%;
	height: 200px;
	padding-left: 35px;
}

Any ideas on what I've missed or where I can look would be appreciated.

/Wendy

 

[dkdude]

The property

position: normal;

does not exists. Have a look at this (BTW very useful) reference :

http://www.w3schools.com/css/pr_class_position.asp

Regards

 

[wendyp]

Thanks. I must have read that static meant normal position and when I didn't receive an error, didn't catch it. I also ran it through a markup validation and that didn't show up as an error.

And I've changed it to "static" now and it still does the same thing. I took out the "left" property on one of the problem styles, but it didn't seem to make a difference either.

#sidenotice {
	border: medium solid #66FF33;
	position: static;
	width: 100%;
	height: 50px;
	padding-left: 50px;
}
#sidemenutags {
	border: medium solid #66FF33;
	position: static;
	left: 0px;
	width: 100%;
	height: 170px;
	padding-left: 1px;
	padding-top: 5px;
}

Anyone have any other ideas on why it won't stay in its container in Firefox?

/Wendy

 

[dkdude]

Okay Wendy, think I spotted your problem ...

In IE, the displayed/screen width and height of an element is

width/height

But in FF the displayed/screen is

width/height + the padding.

So in FF your #sidenotice will have the width of 100% of it's parent (#side) + the left-padding <=> 210px+50px.

To give you a hard earned tip : the "trick" is margin. So this should work:

#sidenotice {
    border: medium solid #66FF33;
    position: static;
    width: [COLOR=red]150px[/color];
    height: 50px;
    [COLOR=red]margin-left : 50px;[/color]
}

Now, about the "absolute" related properties : if you specify top, you can't specify bottom -- if specify left you can't specify right. Only one property per axis.

The latter is also why I sometimes still have to use the table layout style - f.ex. for full screen layouts like this one I recently made:

http://www.isaksen-design.dk

Hope this helps ;-)

 

[ChrisHunt]

No, they're not wider than they should be, they're just wider than you meant them to be. It's to do with the box model: an element's [tt]width[/tt] does not include any padding it might have. So when you say

    width: 100%;
    padding-left: 50px;
[code]
You'll end up with an element that's 100% of the width of its parent [i]plus[/i] 50 pixels of padding.

The solution is just not to specify a width - then it will just fill up the space available. I'd take out the heights too, unless you really need them.

-- Chris Hunt
[url=http://www.mcgonagall-online.org.uk][i]Webmaster &  Tragedian[/i][/url]
[url=http://www.extraconnections.co.uk]Extra Connections Ltd[/url]

 

[wendyp]

Thank you all so much. The clue was the "padding" I changed it to margin, but it didn't fix it. I had to remove width: 100%; to get it to stay in the box.

/Wendy

 

[Vragabond]

And, unless you are trying to make IE render your page in quirks mode, I would remove all the comments above the doctype. If IE finds anything above the doctype, it will ignore the doctype and revert to quirks mode. This also makes the distinction between IE and FF, since IE in standards mode uses the same box model as every other browser, while it uses the wrong one in the quirks mode. That should really be your first step in fixing this.

 

[tsdragon]

If IE finds anything above the doctype, it will ignore the doctype and revert to quirks mode

Does that apply to blank lines too?

Tracy Dryden

Meddle not in the affairs of dragons,
For you are crunchy, and good with mustard.