CSS - Universal Haslayout Fix?

My navigation looks fine in Firefox(of course), but I can't figure out how to fix it for IE7. Is it a height or width issue? Thanks in advance.
Quote:
.art-menu
{
padding: 0px 0px 0px 0px;
}

.art-nav
{
position: relative;
height: 29px;
z-index: 100;
float:right;
margin-top:58px;
}

.art-nav .l, .art-nav .r
{
position: absolute;
z-index: -1;
top: 0;
height: 29px;
background-image: url('images/nav.png');

}

.art-nav .l
{
left: 0;
right:0px;
}

.art-nav .r
{
right: 0;
width: 790px;
clip: rect(auto, auto, auto, 790px);
}

Hi all

I often have to add height: 1%; to my CSS to fix weird bugs in IE6 where it miscalculates dimensions etc. (I do it in a fix-ie6.css). The adding of this property then quite often fixes the problem.
I read quite a lot about the hasLayout problem in IE, and I guess most often this is the problem. So I'd like to have a rule of thumb, when to use this hasLayout in general? An "Always add hasLayout to the following elements under the following conditions" would be cool. ;-)

Another question: in what cases do IE6 and IE5.5 differ related to this problem?

Thanks a lot for help
Josh

Hey guys.

Does anyone know how to trigger haslayout when nesting floats inside other floats? I've been using a span parent with zoom:1 but there's probably a more robust way of doing so.

Any thoughts?

Hi all

I'm stumbling over the oddities of IE's hasLayout again and again, and often I can fix it using the properties overflow:auto and display:inline-block:

Code:

div#container {
  overflow: hidden; /* For clearing floating inner elements */
  display: inline-block; /* For regarding margins of inner elements etc. */
}

(Of course I only assign the display value to IE only.)

As far as I could see so far, assigning these properties does not affect the expected behavior of the element in any negative way.

Now I thought: why not assign them to all div elements as default?

Code:

div {
  overflow: auto;
  display: inline-table;
}

I didn't test this yet, but as long as the whole website's other CSS and the whole XHTML structure are clean (speak: the elements are only used for purposes they are intended to be used), this shouldn't have any negative consequences, should it?

Thanks for your opinion,
Josh

I'm trying to change my site to have a css for easy changing. I've gotten 1 written that encompasses all styles, however I'm trying to do data as well. Navigational menu, header etc. I'm assuming I ought to be able to have css1 for styles, css2 for data and html page that pulls from each?

Here's my style css:
body {
margin : 0;
padding : 0;
}

body {
background-image:
url('PrairieWindbkg.gif')
}

body {background-color: #0000FF;}




p, ul, ol, li {
font : 10pt Arial,geneva,helvetica;
}

h2 {
font : bold 12pt Arial, Helvetica, geneva;
}


#leftnavigation {
position : absolute;
left : 0;
width : 240px;
margin-left : 10px;
margin-top : 140px;
color : #FFFFFF;
padding : 3px;
}
a:link, a:visited { color: #FFFFFF; }
a:hover, a:active { color: #FFFFFF; }


#leftnavigation {
font : 15pt Arial, Helvetica, geneva;
}


#headnavigation {
position : absolute;
left : 0;
width : 550px;
margin-left : 220px;
margin-top : 10px;
color : #ffffff;
padding : 3px;
}
#headnavigation {
font : 40pt Vivaldi, Helvetica, white, geneva;
}


#content {
margin-left : 10px;
margin-top : 80px;
padding : 3px;
color : #000000;
}

#content h1, #content h2 {
color : #cc0000;
}

#productnavigation {
position : absolute;
left : 0;
width : 950px;
margin-left : 263px;
margin-top : 35px;
color : #ffffff;
padding : 3px;
}
#productnavigation {
font : 25pt Arial, Helvetica, geneva;
}

#counternavigation {
position : absolute;
left : 0;
width : 150px;
margin-left : 350px;
margin-top : 700px;
color : #ffffff;
padding : 3px;
}

It can be seen on http://jewelrybydawn.com/TestCss.html in use.

Now the parts I'm trying to make dynamic/static (?) (ok, universal!) are the left menu, top heading, top menu. Then I want each page to have the jewelry items that apply to it.

I tried making another css along the lines of:
#navbar {
<br><A HREF="Shows.html" TARGET="">Current 2005-2006 Show Schedule!</A>
<P><A HREF="Lampwork.html" TARGET="">Lampwork Beads</A>
<p><A HREF="JewelryClub.html" TARGET="">Jewelry of the Month Club</A>
<P><A HREF="Necklaces.html" TARGET="">Necklaces</A>
<P><A HREF="Bracelets.html" TARGET="">Bracelets</A>
<P><A HREF="Earrings.html" TARGET="">Earrings</A>
<P><A HREF="Personalized_Jewelry.html" TARGET="">Personalized Bracelets</A>
<P><A HREF="Gift_Certificates.html" TARGET="">Gift Certificates</A>
<P><A HREF="samples.html" TARGET="">Jewelry & Bead Gallery</A>
<P><A HREF="Katrina.html" TARGET="">My Hurricane Katrina House Update!</A>
<P><A HREF="Newsletter.html" TARGET="_blank">Current Newsletter</A>
<P></p>

}

so that on each actual page I would have:
<link href="Test.css" rel="stylesheet" type="text/css" />
<link href="TestNavbar.css" rel="stylesheet" type="text/css" />
</head>

<div id="leftnavigation">
<div id="navbar">
</div></div>

OR something to this effect... that way if I kill the Katrina link for example, I don't have to revise every single page, just the TestNavbar.css.

Can anyone help? Thanks!
Dawn