Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New to the CF scene
    Join Date
    Jul 2007
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    IE7 problem with adjusting margins on :hover in a ul

    Hi,

    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.

  • #2
    Regular Coder Jutlander's Avatar
    Join Date
    Jun 2007
    Location
    In my own sick little world :P
    Posts
    425
    Thanks
    1
    Thanked 12 Times in 12 Posts
    It's always a good idea to post all of the code. Surely you must have more than that...
    .
    .

  • #3
    New to the CF scene
    Join Date
    Jul 2007
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Yeah sorry forgot about the rest...

    XHTML & CSS

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

    <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; }

    /* NAVIGATION */
    #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; }
    </style>
    </head>

    <body>
    <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>
    </div>
    </div>
    <div id="nav">
    <ul>
    <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>
    </ul>
    </div>
    <div id="subnav">
    <ul>
    <li><a href="#" class="first">Home</a></li>
    <li><a href="#">Login</a></li>
    <li><a href="#">Logout</a></li>
    </ul>
    </div>
    <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="#">
    <fieldset>
    <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>
    </fieldset>
    <div><input type="submit" value="submit" /></div>
    </form>
    </div>
    </div>
    </div>
    </div>

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

    </div>
    </div>
    </div>
    </body>
    </html>
    Last edited by rahbe; 07-21-2007 at 11:18 PM.

  • #4
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Change this
    Code:
    <a href="#">
    					<h1><BodyTrack</h1>
    					</a>
    to this
    Code:
    					<h1><a href="#">BodyTrack</a></h1>
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #5
    New to the CF scene
    Join Date
    Jul 2007
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #6
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    I've already posted the solution. Its because your coding was invalid. Look at my last post.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #7
    New to the CF scene
    Join Date
    Jul 2007
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •