Once IE Refreshed Menu Renders Correctly

IE render issues menu display

[sspoerke]

Here's the CSS and chunk of html code for the menu I'm having problems with. I've checked the menu in several browsers and only seem to have this problem in IE...

The problem is that on the initial load in IE, the menu text displays to the left of the menu buttons instead of layered on top of them. As soon as I refresh the page, it renders just fine. Any tips would be greatly appreciated.

Thanks!

-Skip-

The html source code appears like this:
<div id="menu">
<ul>
<li><a href="#" title="New Twist Images Homepage"><span class="link">Home</span></a></li>
<li><a href="#" title="Photography Rates and Packages"><span class="link">Rates</span></a></li>
<li><a href="#" title="Photo Gallery of Selected Work"><span class="link">Gallery</span></a></li>
<li><a href="#" title="About New Twist Images Photographers and Equipment"><span class="link">About Us</span></a></li>
<li><a href="#" title="Download Catalogs and Contracts"><span class="link">Downloads</span></a></li>
<li><a href="#" title="Contact Us"><span class="link">Contact Us</span></a></li>
</ul>
</div>

The CSS is below:

#menu ul {
list-style: none;
margin: 0;
padding: 0;
}

#menu li {
padding: 0 0 10px 5px;
}

#menu a {
background-image: url(img.src);
background-position: left top;
background-repeat: no-repeat;
color: #4C0A00;
display: block;
font-size: 14px;
font-weight: bold;
height: 40px;
text-align: left;
text-decoration: none;
width: 190px;
}

#menu a:hover {
background-image: url(img.src);
background-position: left top;
background-repeat: no-repeat;
color: #1D2A4D;
display: block;
font-size: 14px;
font-weight: bold;
height: 40px;
text-decoration: none;
width: 190px;
}

#menu a:active {
background-image: url(img.src);
background-position: left top;
background-repeat: no-repeat;
color: #1D2A4D;
display: block;
font-size: 14px;
font-weight: bold;
height: 40px;
text-decoration: none;
width: 190px;
}

.link {
left: 15px;
margin: 0;
padding: 0;
position: relative;
top: 10px;
width: 125px;
}

[whyyi]

Try not using "position:relative;" on your classes or id's, use margin and padding to position elements instead. That's a common fix to the weird "refresh bug"

[sspoerke]

Your suggestion worked miracles. By creating a separate style sheet for IE7 and another for older versions of IE, I was able to "fix" the bug without any trouble at all.

In the event that someone else experiences the same problem here's what to do:

1. assign separate style sheets for versions 7 and older of IE using if statements

2. only save anything you make changes to for the version(s) of IE you're troubleshooting to those style sheets - you don't need to specify things that remain constant from your default style sheet

3. Test, test, and retest to make sure everything renders as best IE will allow

Things to keep in mind:

1. IE6 and older IE versions don't automatically render transparency with PNG. You can use JavaScript to help, but the real fix is either to eliminate those transparent images all together in your CSS for IE6 or convert them to GIF. I usually eliminate them if they're nothing more than fluff.

2. IE7 is hopefully the last of the IE evils, as IE8 is supposed to be up to standards. So, when specifying your "if statements" don't generalize IE, but be specific by using IE 7 and lte (less than or equal to) IE 6 at a minimum. You can be more specific if you want.
for example:
<!--[if lte ie 6]>
<link rel="stylesheet" type="text/css" href="css/ie6.css" />
<![endif]-->
<!--[if ie 7]>
<link rel="stylesheet" type="text/css" href="css/ie7.css" />
<![endif]-->

3. IE6 and older versions have some rather bizarre problem areas that you will need to troubleshoot especially if using "float", "padding", and/or "margins". Visit sites like positioniseverything.net for some of the common problems and their solutions. IE7 is better, but as you know, it's still not up to standards.

4. You may also find it useful to include a special div id only visible in nonstandard browsers using {display: none;} in your default and other CSS. Many Web users aren't technologically savvy and may not realize that their browser is out-of-date and may not be as secure as a newer version or different browser all together.

Sorry to be so long-winded and I'll end here. but, I hope this helps anyone who stumbles here while trying to figure out how to fix IE rendering problems.

Best,

Skip