I made a menu for my site using firefox as my primary browser but when i went to check my menu in IE 8, the menu is at the top of the main background menu bar. So i pressed compatibility view and it worked fine. Here is some of my code..
<div id="menuwrapper">
<div id="menu">
<ul>
<li><a href="index.html" style="color: #4dff24">HOME</a></li>
<li><a href="gallery.html">GALLERY</a></li>
<li><a href="submit.html">SUBMIT</a></li>
<li><a href="about.html">ABOUT</a></li>
<li><a href="help.html">HELP</a></li>
</ul>
</div>
</div>
#menuwrapper{
background-image: url(../images/mainbar3.png);
height: 22px;
width: 960px;
position: relative;
}
#menu{
position:relative;
height:22px;
}
#menu ul{
font-family: arial;
list-style: none;
padding: 0;
margin: 0;
margin-left: 10px;
}
#menu li{
float: left;
margin: 0;
vertical-align: middle;
}
#menu li a{
background-image: url(../images/line.png);
background-repeat: no-repeat;
background-position: center right;
height: 22px;
padding-right: 10px;
padding-left: 10px;
text-align: center;
}
#menu li a:link,
#menu li a:visited{
color: #d4ffca;
text-decoration: none;
font-size: x-small;
top: 0px;
}
#menu li a:hover{
color: #91ff78;
font-size: x-small;
}
Im sure a lot of it is redundant code but oh well. someone please help though.
<div id="menuwrapper">
<div id="menu">
<ul>
<li><a href="index.html" style="color: #4dff24">HOME</a></li>
<li><a href="gallery.html">GALLERY</a></li>
<li><a href="submit.html">SUBMIT</a></li>
<li><a href="about.html">ABOUT</a></li>
<li><a href="help.html">HELP</a></li>
</ul>
</div>
</div>
#menuwrapper{
background-image: url(../images/mainbar3.png);
height: 22px;
width: 960px;
position: relative;
}
#menu{
position:relative;
height:22px;
}
#menu ul{
font-family: arial;
list-style: none;
padding: 0;
margin: 0;
margin-left: 10px;
}
#menu li{
float: left;
margin: 0;
vertical-align: middle;
}
#menu li a{
background-image: url(../images/line.png);
background-repeat: no-repeat;
background-position: center right;
height: 22px;
padding-right: 10px;
padding-left: 10px;
text-align: center;
}
#menu li a:link,
#menu li a:visited{
color: #d4ffca;
text-decoration: none;
font-size: x-small;
top: 0px;
}
#menu li a:hover{
color: #91ff78;
font-size: x-small;
}
Im sure a lot of it is redundant code but oh well. someone please help though.