Box Model Problem

Forum Moderators: not2easy

Message Too Old, No Replies

Box Model Problem

Chaddycakes

4:42 am on Jul 31, 2004 (gmt 0)

I'm using both IE6 and Mozilla to design a site. I have this box...

#subnav{
position: relative;
margin: 10px 0 0 34px;
padding: 0;
background: #DDD;
border: 1px dashed;
width: 160px;
voice-family: "\"}\"";
voice-family:inherit;
width: 158px
}

Mozilla displays this properly with a total width of 160px(including borders). When viewed in IE6 it displays it with a width of 158px (including borders).

So IE6 seems to be displaying the whole width AND borders inside the 158px width. Mozilla seems to display correctly with a width of 158px and then adding the 2px for the left and right borders.

What are some possible ways to resolve this problem other than getting rid of my borders?

benj0323

7:35 am on Jul 31, 2004 (gmt 0)

I've had the same problem before as well. The only way to get around that problem is with a css hack. Also you have 2 width attributes in your id class. Try using the * html hack. Where IE only see the * html and mozilla doesnt.

* html #somename {
}

like that.

I hope this helps.

Chaddycakes

12:14 am on Aug 2, 2004 (gmt 0)

Aaahhhh thank you

*Bows down*

karthik

7:16 am on Aug 22, 2004 (gmt 0)

Hi,

I'm having a problem with IE6 and Firefox.


#rightbar {
padding: 5px;
float:right;
text-align:center;
border-left: 1px solid #DADADA;
height: 100%;
width: 150px;
voice-family: "\"}\""; 
 voice-family:inherit;
width:139px;
}
html>body #rightbar {
 width:139px;
}

The width of my rightbar is 139 + 10(padding) + 1(left border) = 150 total width. Displaying perfectly in Firefox/Mozilla. But only displaying 139px total width with padding, borders inside in IE6. I checked the Doctype, its correct.

If I add the line


* html #rightbar {
 width:150px;
}

it works correctly both in IE6 and Firefox. But I afraid it'll break in IE5.x.

I dont know what to do...

my doctype is
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Is my IE6 still in quirks mode and rendering the box model like IE5.x?

Please anybody help......

createErrorMsg

3:07 pm on Aug 22, 2004 (gmt 0)

Chaddy, if IE6 is rendering with the borders INSIDE of your width setting, that means it has kicked into Quirks mode and is using IE5.x's broken box model.

To fix it just for IE6, simply make sure you have a valid DOCTYPE on the very first line of your page. This will cause IE6 to enter Standards mode and use the correct, compliant box model.

If you then want to fix it for IE5.x (which is incapable of using the right box model), do the star hack as suggested above...

* html YOURSELECTOR {
width: IE_WIDTHVALUE; /* add width + margins + padding + borders*/
w\idth: ORIGINAL_WIDTH_VALUE; /*the one Moz gets*/
}

The second width with the \ in it is a way to give IE6 back the correct, compliant width value (Ie5.x can't read past the escape character (\) and ignores it. Ie6 can.) It's necessary because, with the DOCTYPE fixed, IE6 is working compliantly.