ctasik
asked on
Why my horizontal menu becomes vertical in IE?
How can I keep it horizontal in IE?
html-----
<div id="header">
<h1>Armina La Manna's portfolio</h1>
<ul>
<li><a href="index.htm" id ="first" class="current">HOME</a></li>
<li><a href="curr_act.htm" id ="second" >CURRENT ACTIVITIES</a></li>
<li><a href="gallery.htm" id="third">GALLERY</a></li>
<li><a href="theatre.htm" id="fouth">THEATRE</a></li>
<li><a href="teaching.htm" id = "fifth">TEACHING</a></li>
<li><a href="contact.htm" id = "sixth">CONTACT</a></li>
</ul>
</div>
---------css-------------------
/* ---------------- header specific styles ----------------*/
#header h1 {
text-indent: -1000em;
height: 150px;
width: 800px;
position: absolute;
background: url(imgs/name.png) no-repeat right center;
display: block;
padding: 1px;
}
#header {
height:180px;
width:800px;
position: relative;
padding: 0;
margin: 0;
}
/* -------------------main navigation menu -----------------------*/
#header ul {
list-style: none;
position: relative;
width:700px;
font-size: 16px;
padding: 0;
bottom: 0px;
right: 0px;
margin-top: 150px;
float:right;
}
#header li {display:inline;
}
#header li a {display:block;
}
#header li a:link, #header li a:visited {
background: #FFFFFF;
/*padding: .2em 12px;*/
text-decoration: none;
color:#000000;
font-family: Arial, Helvetica, sans-serif;
float: left;
}
#header li a:hover, #header li a:active {
color:#666666;
background:#FFFFFF;
}
#header li a.current, #header li a.current:hover, #header li a.current:active {
color:#999999;
background: #FFFFFF;
cursor: default;
font-weight: bold;
}
#container #header #first {
width: 90px;
}
#container #header #second {
width: 202px;
}
#container #header #third {
width: 112px;
}
#container #header #fouth {
width: 112px;
}
#container #header #fifth {
width: 92px;
}
#container #header #sixth {
width: 92px;
}
#container #header ul li #sixth {
text-align: right;
}
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.