Works on Firefox and Chrome; not on IE8
I am trying to create a very simple website using Kompozer. I have a horizontal menu that works fine in Chrome and FF but not in IE8. The HTML for the menu is:
<div id="hmenu">
<ul>
<li>Home</li>
<li><a href="Portfolio.html">Portfolio</a></li>
<li><a href="Sounds.html">Sounds</a>
</li>
<li>Contact </li>
</ul>
</div>
The relevant bits in the CSS are:
#hmenu {
border-style: none;
text-align: center;
width: 364px;
height: 2.5em;
margin-left: auto;
line-height: 2.5em;
margin-right: auto;
font-family: Bauhaus;
padding-bottom: 0px;
font-size: 1em;
}
#hmenu *|ul {
border-style: none;
margin: 0;
padding: 0;
list-style-type: none;
}
#hmenu *|li {
border-style: none;
color: #009999;
float: left;
width: 85px;
}
#hmenu *|a {
border-style: none;
text-decoration: none;
display: block;
}
#h开发者_如何学Pythonmenu *|a:hover {
border-style: none;
background-color: #66ffff;
I would be very grateful if someone could show me how to make this work on all three browsers. Thank you. Chris.
Use simple css selectors: http://jsfiddle.net/nyxyh/5/
#hmenu {
border-style: none;
text-align: center;
width: 364px;
height: 2.5em;
margin-left: auto;
line-height: 2.5em;
margin-right: auto;
font-family: Bauhaus;
padding-bottom: 0px;
font-size: 1em;
}
#hmenu ul {
border-style: none;
margin: 0;
padding: 0;
list-style-type: none;
}
#hmenu ul li {
border-style: none;
color: #009999;
float: left;
width: 85px;
}
#hmenu ul li a {
border-style: none;
text-decoration: none;
display: block;
}
#hmenu ul li a:hover {
border-style: none;
background-color: #66ffff;
}
IE usually will have these issues. What you can try to do (may be easier then trying to make all browsers work with the same css file) is to make a special css file for IE 8 only. To add that css file just use this code:
<!--[if IE 8]><link rel="stylesheet" href="CSSForIE8.css" type="text/css" media="screen, projection"/><![endif]-->
This will work only if IE 8 is the browser.
精彩评论