...

View Full Version : CSS ... weird boxes in Firefox AND IE



zrosen88
06-29-2007, 06:14 PM
Hey, so I'm making a website and need some help with CSS plllllease!

The site is located at http://www.zackrosen.com/zfiles/cbulletin/temp2.php

In Firefox, it's ALMOST perfect -- except for the grey box. Why is that there and how do I get rid of it??

And in IE, the white main content area is extended too far!

Please help!!!

Thanks so much,

Zack

koyama
06-30-2007, 11:05 PM
In Firefox, it's ALMOST perfect -- except for the grey box. Why is that there and how do I get rid of it??
There is no such thing as “half a pixel”


#middleleft {
width:12.5px;
padding:0px;
float:left;
}
Firefox is rounding up the width to 13px which is why you have float dropping.

And in IE, the white main content area is extended too far!
It is the white background from #bigkahunaframe that you are seeing on the sides. While developing, I suggest that you give each div a separate background color so you know the size and position of each div. These things are not obvious. For example floats do not expand their container which is why some of your divs have a smaller height than you may expect. Another problem is IE's float auto-containment bug. Read more about float containment: http://www.complexspiral.com/publications/containing-floats/

As a side issue, are you aware that your page is rendered in quirks mode (http://www.quirksmode.org/css/quirksmode.html)? This may give you major problems. For example auto margins won't be working in Internet Explorer.

To avoid quirks mode I recommend that you use this document type:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/REC-html40/strict.dtd">



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum