IE 6.7 and 8 messes up my navigation menu

[rfitton]

Hi IE 6,7 and 8 messes up my navigation menu, this is shown by making the cursor not change into a hand when hovered over, this only works on the ones with the blue background. And the contact link on the nav bar has a hyper link but IE does not show this, its easier to look at here: http://www.ryanfitton.co.uk/new/nav_bar_test.php

:dunno:

 

[zen-r]

Hi IE 6,7 and 8 messes up my navigation menu, this is shown by making the cursor not change into a hand when hovered over, this only works on the ones with the blue background. And the contact link on the nav bar has a hyper link but IE does not show this, its easier to look at here: http://www.ryanfitton.co.uk/new/nav_bar_test.php

:dunno:

Was there a question in there somewhere?

 

[zapzack]

IE makes their own web standards, while all the other browsers use the same.. I know, Microsoft made a poor choice.. But, that leaves you with only one option, using a ton of if IE's to correct the style.. For how to do this, use google..

 

[rfitton]

grr! IE is annoying i've used "cusor: hand" this fixes the problem except the contact link still has the same problem :rant2:

 

[eltonyliu]

I had the same problem with IE7 if you download IETester (Search on google) you can view multiple versions of IEs. Generally I used as many browsers as I can when developing a web site.

I've added some code to help you although it dosn't work well in IE6

XHTML

<div id="menu">
<ul>
<li><a href="#nogo1">Menu 1</a></li>
<li><a href="#nogo1">Menu 2</a></li>
<li><a href="#nogo1">Menu 1</a></li>
<li><a href="#nogo1">Menu 2</a></li>
</ul>
</div>

CSS

#menu{
position: relative;
width: 400px;
height: 30px;
}

#menu ul{
list-style-type:none; /*No list style*/
width: 400px;
height: 30px;
}

#menu li{ /*Style a button for each list item*/
float: left; /*Make the list item to go on a single line */
display: block; /*Convert a inline element into a block*/
width: 100px;
height: 30px;
text-align: center;
background: url(images/image.png);/*Use a background image for the list*/
}

#menu li a{
text-decoration:none; /*Get rid of the default link style*/
color: #000000; /* Font Colour Black*/
display: block;
width: 100px;
height: 30px;
}

#menu li a:hover{ /*Use CSS for hover link text*/
color: #00CCFF; /* Font Colour Blue*/
}

#menu li:hover{ /*Use CSS for hover list (Button)*/
background: url(images/rollover.png); /*Use a background image for the list when hover */
}

 

[zen-r]

If you want to test how your Web design looks in many different browsers, try ;

http://browsershots.org/

It's a bit slow to get all the results, but it works.