Border layout not closing in IE

[cfsponge]

We're using a tableless CSS format for one of our site menus. It's using a combination of 3 DIVs to place images around a menu so that it is boxed in. It works in Firefox but fails in IE and am stumped why. Here's the link:

http://stage.crossbowstudio.com/index.php?option=com_content&task=blogsection&id=3&Itemid=4

And here are the style attributes used for it (only showing the non-bg image portions):

.subnavcontainer {position:relative;margin:0 0 1em;padding:0;}
.subnavcontainer div {margin:0;padding:2px 0 0 0;}
.subnavcontainer div div {padding:0 0 0 11px;margin:0;}
.subnavcontainer div div div {padding:0 0px 11px 0;margin: 0px; height:auto!important;height:1%;}

I've tried messing around with the padding and margins to no avail.

 

[BillyRayPreachersSon]

Why do you specify the height twice in the last row?

Get your HTML and CSS to validate before trying to fix any errors.

Hope this helps,
Dan

Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[krigbert]

Sounds like box model trouble. If you have margins and such on a div, IE won't count those when calculating the with and height of it. The only solution is to provide different code for IE, e.g. by linking to a special IE stylesheet between these:

<!--[if IE]><![endif]-->

 

[cfsponge]

BillyRayPreachersSon, the second height specification is and IE only box model fix. Using "height:auto!important;height:1%;" allows a minimal height in IE to work correctly since it doesn't recognize the min-height CSS attribute.

 

[BillyRayPreachersSon]

That doesn't sound right to me - the first height declaration will set the height to auto, the second will set it to 1% - you won't ever have both. You should be able to remove the first without affecting the second.

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[Vragabond]

However, the first one has the !important added to it, so you could get rid of the second one actually. I guess that could be a fix for some ancient browser that does not support !important.