IE7 eats my menu

So I was < this > close to calling the "working out the kinks" finished. ONe I can handle. The other one is real bizarre. My right side navigation is getting chewed up in an odd way by IE7. I keep looking at it and can't figure out exactly what it's doing so I'm sure where to even start correcting.

http://tugbucket.net/index.php

I've tested on:

FF 2.0.0.7
Opera 9.22
Safari 3.0.3
IE 6
IE 7

All PC.

They all seem to play along fine except IE7.

style sheet for ease:
http://tugbucket.net/wp-content/themes/walking/style.css

Any help is appreciated of course. If you've seen something like this before, a little knowledge on the issue would be nice as well.

Thanks,
Alan

Hey Alan,

After futzing with it for awhile I found something of a workaround…if you move the float and clear rules from ".nav li" to ".nav li a" it seems to take care of it.

It's kind of a conceptual hack—since you would then be setting up the full width of the li and moving the link box around within it (put a border on ".nav li" and you'll see what I mean)—but it works. ;)

.nav li {
margin-bottom: 12px;
overflow: hidden;
position: relative;
}

.nav li a:link, .nav li a:visited {
background: #8C1703;
border: 3px solid #F7F7DF;
border-right: none;
display: block;
color: #FCEDE2;
text-indent: 12px;
text-transform: lowercase;
width: 100px;
text-decoration: none;
padding: 3px 0;
font: 600 120% "trebuchet ms", tahoma, arial, sans-serif;
float: right;
clear: right;
}

yeah Richard, I thanked you. what of it ;)

The code worked great for FF, Safari and IE7 but Opera ate it ( the nav disappeared completely). IE6 had the nav slide under the "tb" ( i can fix that ;) ).

so your code became:

.nav li {
margin-bottom: 12px;
overflow: hidden;
position: relative;
z-index: 100;
}

.nav li a:link, .nav li a:visited {
background: #8C1703;
border: 3px solid #F7F7DF;
border-right: none;
display: block;
color: #FCEDE2;
text-indent: 12px;
text-transform: lowercase;
width: 100px;
text-decoration: none;
padding: 3px 0;
font: 600 120% "trebuchet ms", tahoma, arial, sans-serif;
float: right;
clear: right;
position: relative;
z-index: 100;
}
/* opera goodness :-) */
@media all and (min-width: 0px){

.nav li {
margin-bottom: 12px;
float: right;
clear: right;
overflow: hidden;
position: relative;
}

.nav li a:link, .nav li a:visited {
background: #8C1703;
border: 3px solid #F7F7DF;
border-right: none;
display: block;
color: #FCEDE2;
text-indent: 12px;
text-transform: lowercase;
width: 100px;
text-decoration: none;
padding: 3px 0;
font: 600 120% "trebuchet ms", tahoma, arial, sans-serif;
}
}


so then i relative positioned everything in the nav and z-indexed the crap out of it and IE6 played nice.

drum on Richard, drum on :D

Woo hoo…glad it worked :D

But, instead of adding all the hacks for Opera and IE6, why not just add the alternate rules for IE7 in conditional comments?


<!--[if lte IE 7]>
<style type="text/css" media="screen">
hr {
padding: 30px 0;
color: #F7F7DD;
height: 2px;
}
</style>
<![endif]-->

<!--[if IE 7]>
<style type="text/css" media="screen">
.nav li {
float: none;
clear: none;
}

.nav li a {
float: right;
clear: right;
}
</style>
<![endif]-->


Or maybe that's what I would have done seeing as how I am too lazy to try and figure out language behind most Opera hacks. ;)