IE problem on navigation menu

HTML & CSS
1

The page I am referring to is:

[link removed at OP’s request]

The navigation I am referring to is:

Dashboard - Profile - Marketplace - Resources

If you view this page in Firefox/Chrome/Safari the navigation is correct.

When viewing in IE 7/8/9 you will see that the top-right corners of the buttons are messed up as well as the hovering.

I’ve been at it for awhile but can’t seem to figure it out. Any help is appreciated!

Also, the text looks very different in viewing in IE. Any suggestions on where to start with that?

Thanks!

2

Hi,
The first thing I would suggest is to fix your validation errors.

The second thing I would suggest is to clean out all your IE CC’s on the html element. I can’t imagine why you would need all of that. True you may need to give IE6/7 some special attention with “haslayout” triggers but you should not be needing to target every version of IE separately.

It’s also best not to run compatibility mode either COLOR=Black[/COLOR].

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
[COLOR=DarkGreen]<!--[if lt IE 7 ]> <html lang="en" class="ie6"> <![endif]-->
<!--[if IE 7 ]>    <html lang="en" class="ie7"> <![endif]-->
<!--[if IE 8 ]>    <html lang="en" class="ie8"> <![endif]-->
<!--[if IE 9 ]>    <html lang="en" class="ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!-->[/COLOR] [COLOR=Blue]<html lang="en">[/COLOR] [COLOR=DarkGreen]<!--<![endif]-->[/COLOR]
<head>
<meta charset="utf-8">
<title>FishList - Guest</title>
<meta content="Thank you for using FishList.com" name="description">
[COLOR=Red]<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />[/COLOR]

Sorry, but I was afraid to look any further than that.
I will say this though, a lot of times if you fix one error it will fix several others automatically.

3

When viewing in IE 7/8/9 you will see that the top-right corners of the buttons are messed up as well as the hovering.

After looking at this further it was a lack of “haslayout” after all. You need to trip “haslayout” on the #tabnav div since it contains floats in the ul#dash-nav.

fishlink.css- line 2427


[B]#tabnav[/B] {
    position: relative;
   [COLOR=Blue] zoom:1;[/COLOR] /*haslayout IE6/7*/
}

Any haslayout trigger will work, I just used zoom.

Now get it out of compatibility mode and clean out all those CCs’ :slight_smile: