How to get this drop-down menu to center in IE8? [closed]
This question is unlikely to help any future visitors; it is only relevant to a small geographic area, a specific moment in time, or an extraordinarily narrow situation that is not generally applicable to the worldwide audience of the internet. For help making this question more broadly applicable, visit the help center.
Closed 10 years ago.
ive managed to center it in firefox and chrome but it doesnt work in IE8. Also a scrollbar appers att the bottom in IE8. Here the site hugoth
and heres the css:
ul {
font-family: Arial, Verdana;
font-size: 14px;
display:block;
padding: 0;
list-style: none;
width: 100%;
margin: 0px 0px 0px 40px;
padding: 0px 0px 0px 30px;
text-align: center
}
ul li {
display: block;
position: relative;
float: left;
}
li ul { display: none; }
ul li a {
display: block;
text-decoration: none开发者_如何学JAVA;
color: #ffffff;
border-top: 1px solid #ffffff;
padding: 5px 15px 5px 15px;
background: #2C5463;
margin-left: 1px;
white-space: nowrap;
}
ul li a:hover { background: #617F8A; }
li:hover ul {
display: block;
position: absolute;
}
li:hover li {
float: none;
font-size: 11px;
}
li:hover a { background: #617F8A; }
li:hover li a:hover { background: #95A9B1; }
Thanks in advance
Alex
I was feeling generous, so I remade your entire page with better code (no more nested tables for layout).
Live Demo
Oh, and I centered your menu for you.
If you have any questions, let me know.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>hugoth</title>
<style type="text/css">
html, body {
margin: 0;
padding: 0;
border: 0
}
body {
font: 12px Tahoma, sans-serif
}
#container {
margin: 0 auto;
width: 754px;
border-left: 2px solid #333;
border-right: 2px solid #333;
}
#header {
background: url(http://hugoth.com/test2/images/top.jpg) no-repeat;
height: 150px
}
#header h1 {
display: none
}
#content {
background: #666
}
#menu {
height: 40px
}
#middle {
clear: both;
margin: 0 auto;
width: 474px;
padding: 15px;
background: #fff;
text-align: center;
font-family: Tahoma, sans-serif;
font-size: 11px
}
#middle p {
margin: 21px 0
}
#middle .important {
font-family: Verdana, sans-serif;
font-size: 12px;
font-weight: bold
}
#footer {
padding: 11px 0;
text-align: center;
color: #fff;
font-size: 11px
}
#footer a {
color: #f90;
text-decoration: none
}
#footer a:hover {
text-decoration: underline
}
/* dropdown section */
#menu {
font: 14px Arial, Verdana, sans-serif;
list-style: none;
margin: 0;
padding: 0;
text-align: center;
margin-left: 73px;
}
#menu ul {
margin: 0;
padding: 0;
width: 100%;
list-style: none
}
#menu li {
display: block;
position: relative;
float: left
}
#menu li ul {
display: none
}
#menu li a {
display: block;
text-decoration: none;
color: #fff;
border-top: 1px solid #fff;
padding: 5px 15px 5px 15px;
background: #2C5463;
margin-right: 1px;
/*white-space: nowrap*/
}
#menu li a:hover {
background: #617f8a
}
#menu li:hover ul {
display: block;
position: absolute
}
#menu li:hover li {
float: none;
font-size: 11px
}
#menu li:hover a {
background: #617f8a
}
#menu li:hover li a:hover {
background: #95a9b1
}
</style>
</head>
<body>
<div id="container">
<div id="header"></div>
<div id="content">
<ul id="menu">
<li><a href="#">Home</a></li>
<li><a href="#">Our Firm</a>
<ul>
<li><a href="#">About Us</a></li>
<li><a href="#">Executive</a></li>
<li><a href="#">Board</a></li>
</ul>
</li>
<li><a href="#">Client Services</a>
<ul>
<li><a href="#">Internationalization</a></li>
<li><a href="#">Business Thriving Advisory Board</a></li>
<li><a href="#">Venture Engine: supporting start-ups and smaller companies</a></li>
<li><a href="#">Financial Services</a></li>
</ul>
</li>
<li><a href="#">Industry Practices</a>
<ul>
<li><a href="#">Clean Technology</a></li>
<li><a href="#">Med Technology</a></li>
<li><a href="#">Other</a></li>
</ul>
</li>
<li><a href="./" class="dir">Useful Links</a></li>
<li><a href="./" class="dir">Contact</a></li>
</ul>
<div id="middle">
<p class="important">This site is under construction</p>
<p class="important">Hügoth AB<br />Scheelevägen 15<br />223 70 Lund, Sweden</p>
<p>For questions or other matters please contact any of the below: </p>
<p>Bo Unéus • + 46 (0)70 - 6773656 • bo.uneus@hugoth.com</p>
<p>Lottie Norrsén • + 46 (0)70 - 4248321 • lottie.norrsen@hugoth.com</p>
<p>org.nr. 556306-0986</p>
</div>
<div id="footer">
www.hugoth.com © 2011 • Privacy Policy • <a href="mailto:webmaster@hugoth.com">webmaster@hugoth.com</a>
</div>
</div>
</div>
</body>
</html>
Not sure about the centering issue. Have you tried using the XHTML doctype instead of the HTML docytype?
As far as the scroll bar, it looks like the banner is too wide. Try either trimming the image or widening the div
加载中,请稍侯......
精彩评论