View Full Version : IE7 problem with adjusting margins on :hover in a ul

07-21-2007, 09:53 PM

When i apply this rule in IE7 it messes up the positioning of the floats on the page, the nav jumps to the top when i hover over the list and all the other floats below it crumble.

#nav ul li a:hover { color:#FFF; background-color: #69bb45; margin-top: -0.2em; padding-top:0.2em; padding-bottom:0.4em; }

Any ideas anyone?

If i set the containing div to position:absolute it stops it messing everything up but it causes other positioning problems.

07-21-2007, 10:52 PM
It's always a good idea to post all of the code. Surely you must have more than that...

07-21-2007, 11:12 PM
Yeah sorry forgot about the rest...


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">

html,body,div,ol,ul,li,h1,h2,h3,h4,h5,h6,p,form,fieldset { margin: 0; padding: 0; font-size: 1em; font-weight: normal;}

body { font: 76% Tahoma, Verdana, Arial, sans-serif; color: #2c4ea5; text-align: center; background-color: #ffcd7f; }

p { margin: 0 1em; padding: .5em 0; }

div#borderWrapper { width: 800px; margin: 0 auto; padding: 0; text-align: center; background: #f6c372; }
div#darkBorderWrapper { width: 784px; margin: 0 auto; padding: 0; text-align: center; background: #b08a4d; }
div#container { font-size: 1em; width: 780px; margin: 0 auto; padding: 0; text-align: left; background: #FFFFFF url(top_bg.png) repeat-x; position: relative; }

div#branding { height: 118px; }
div#branding h1 { width: 281px; height: 98px; background: url(title.png) no-repeat; text-indent: -9999px; }

#nav { font-size:16px; width:100%; }
#nav ul { padding-left: 50px; padding-top: 0px; background-color: #69bb45; color: White; float: left; width:730px; font-family: arial, helvetica, sans-serif; }
#nav li { display: inline; }
#nav li a { padding: 0.2em 1em; color: White; text-decoration: none; float: left; border-right: 1px solid #90d77f; border-top: 1px solid #90d77f; }

#nav #current a{ color:#FFF; background-color: #90d77f; margin-top: -0.4em; padding-top:0.4em; padding-bottom:0.4em; }
#nav ul li a:hover { color:#FFF; background-color: #69bb45; margin-top: -0.2em; padding-top:0.2em; padding-bottom:0.4em; }
#nav #current { }
#nav ul .first { border-left: 1px solid #90d77f; }
/* SUBNAV */
div#subnav { }

#subnav ul { padding-top: 0px; padding-left: 50px; margin-left: 0; background-color: #90d77f; float: left; width:730px; font-family: arial, helvetica, sans-serif; }
#subnav li { display: inline; }
#subnav li a { padding: 0.2em 1em; color: #3a7122; text-decoration: none; float: left; border-right: 1px solid #69bb45; }
#subnav ul .first { border-left: 1px solid #69bb45; }
#subnav ul li a:hover { background-color: #bde7b2; }
#subnav #current a { background-color: #bde7b2; }

div#title { float:left; width:100%; background: #27488d url(images/title_bg_top.png) repeat-x top left; }
div#title span { float:left; width:100%; background: url(images/title_bg_bottom.png) repeat-x bottom left; }
div#title h1 { font-family: "Times New Roman", Times, serif; font-weight:normal; padding-top: 0.7em; padding-bottom: 0.7em; padding-left: 1em; font-size: 2em; color: #FFF;}

div#content { float:left; width: 100%; background-color: #FFFFFF; letter-spacing:.1em; line-height:180%; word-spacing:.15em; }

div#content_main { float: left; width: 540px; margin: 0; padding: 0; background-color: #FFFFFF; }
div#content_main p { padding: 1em 1.2em; }
div#content_sub { float: right; width: 230px; margin: 0; padding: 0.5em 0; background-color: #f0f6fc; border-left: 1px solid #d1dfec; }
div#content_sub p { padding: 1em 1em; }
div#site_info { width: 100%; }
div#footer { width: 100%; letter-spacing:.1em; line-height:180%; word-spacing:.15em; background: #FFF url(images/footer.png) repeat-x bottom left }
div#footer p { padding: 0 1em; }

div#content_sub h1 { font: bold 1.5em "Times New Roman", Times, serif; color: #f1aa39; text-transform: uppercase; padding: .5em 1em; }

.login { padding: .5em 1.5em; }
.login label, .login label span { display:block; padding-bottom: .25em; }
.login label { float:left; width:100%; }
.login label span { float:left; width:45%; text-align:left; margin:0; padding:0;}

.login fieldset input { margin:0; padding:0;float:left; width:45%; border:1px solid #27488d; }
/*.login fieldset input:hover { border-color: #000; }*/
.login fieldset input:active, .login fieldset input:focus { border-color:#17284b; }

.login fieldset { border: 0; }
.login form div{ text-align:center;}

.login div { padding: .5em; }
.login div input { background-color: #27488d; color: #FFF; border: 2px solid #254077; border-top-color: #4165ad; padding: 0 .25em; text-transform:uppercase; font: bold 92% Tahoma, Verdana, Arial, sans-serif; }
.login div input:hover { background-color: #4165ad; }

<div id="borderWrapper">
<div id="darkBorderWrapper">
<div id="container">

<div id="branding"><div id="b2"><a href="#"><h1><BodyTrack</h1></a>
<div id="login">

<div id="nav">
<li ><a href="#" class="first">Your Profile</a></li>
<li id="current"><a href="#">X</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
<div id="subnav">
<li><a href="#" class="first">Home</a></li>
<li><a href="#">Login</a></li>
<li><a href="#">Logout</a></li>
<div id="title"><span><h1>Welcome</h1></span></div>
<div id="content">
<div id="content_main"><p>content_main: dfsdsdfdf sdf dfds fsdfdsfsdf dsfsfd sdfdsfdsf sdfdsf sdfdsfdsdfsdf dsfsdf sdfdsfsd dfsfsdf sdfdsfs ddsfsdfsdfds dsfdsfdsf dsfdfsdf</p></div>

<div id="content_sub"><h1>Login</h1>
<div id="l2">
<div class="login">
<form id="login" method="post" action="#">
<label for="UserID"><span>User ID</span>
<input type="text" name="UserID" id="UserID" /></label>
<label for="Password"><span>Password</span>
<input type="text" name="Password" id="Password" /></label>
<div><input type="submit" value="submit" /></div>

<div id="site_info"><div id="footer"><p>...</p></div></div>


07-21-2007, 11:33 PM
Change this

<a href="#">
to this

<h1><a href="#">BodyTrack</a></h1>

07-21-2007, 11:34 PM
I can't work out why IE does what it does. If i cant get it working ill just have to take out the tabbed effect and leave it plain. Is there a way to apply a rule to all browsers except IE?

I haven't tried this in any version below 7.

07-21-2007, 11:39 PM
I've already posted the solution. Its because your coding was invalid. Look at my last post.

07-21-2007, 11:42 PM
Such a simple error i would have spent hours on the css and not even thought about validating the xhtml since it worked in firefox. Its strange how it only affected the document when that specific rule was applied. Thanks for your help.