- Impact
- 3
On my site in progress (CSS Design Blog) the hover over is messed up in Internet Explorer 6 and 7. I've tried a lot of things to try and fix it and nothing's done it. Please let me know what you can do to help.
HTML:
Main CSS:
IE7 CSS:
IE6 CSS:
What it should look like:
What it does look like in IE6/7:
Thanks,
Sam
HTML:
Code:
<body>
<div id="header">
<a href="http://answersforpilots.com/images/test/cssd">
<img src="http://www.namepros.com/images/header_logo.gif" alt="CSS Design Blog" />
</a>
<ul class="nav">
<li><a href="#" class="about">About</a></li>
<li><a href="#" class="job_board">Job Board</a></li>
<li><a href="#" class="directory">Directory</a></li>
<li><a href="#" class="resources">Resources</a></li>
<li><a href="#" class="contact">Contact</a></li>
</ul>
</div>
</body>Main CSS:
Code:
body{margin:0;padding:0;font:11pt Arial, Arial;color:#fff;background:#09274e url('../images/header_bg.gif') repeat-x top}
#header{background:url('../images/header.gif') no-repeat;height:87px;width:959px;margin:9px auto 0 auto;padding:11px;padding-left:20px}
#header img{border:none}
ul.nav{list-style-type:none;width:550px;float:right;margin-right:-76px;margin-top:37px}
ul.nav li{float:left;font-size:11pt;color:#fff;padding-right:38px;letter-spacing:0px}
ul.nav a{color:#fff;text-decoration:none}
ul.nav li a:hover{font-weight:bold;padding:6px 24px 6px 24px;margin:0 -26px}
ul.nav li a.about:hover{background:url('../images/about_hover.gif')}
ul.nav li a.job_board:hover{background:url('../images/job_board_hover.gif');margin-left:-26px;margin-right:-29px}
ul.nav li a.directory:hover{background:url('../images/directory_hover.gif');padding:6px 25px 6px 23px;margin-right:-28px}
ul.nav li a.resources:hover{background:url('../images/resources_hover.gif');padding:6px 25px 6px 23px;margin-left:-26px}
ul.nav li a.contact:hover{background:url('../images/contact_hover.gif');padding:6px 25px 6px 23px;margin-right:-27px}
#wrapper{width:960px;margin:0 auto;padding:0}
#body{margin-left:-5px}
#top_bar{width:960px;height:56px;margin:0;padding:15px 17px;float:left;background:url('../images/top_bar.gif') no-repeat}
#top_bar input.search_inp{background:url('../images/search_inp_bg.gif') no-repeat;width:270px;position:absolute;height:27px;border:none;margin-left:-5px;padding-left:9px;font-size:9pt;color:#676155}IE7 CSS:
Code:
ul.nav{margin-top:-52px}IE6 CSS:
Code:
ul.nav{margin-top:-61px}
ul.nav li{margin-top:8px}What it should look like:
What it does look like in IE6/7:
Thanks,
Sam
Last edited:
Thanks for looking. Mods can close x]
![un4given[MAD]](https://nameproscdn.com/data/avatars/s/106/106611.jpg?1549825740){kind=avatar}
