SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Zealot
    Join Date
    Mar 2003
    Location
    dublin
    Posts
    103
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    IE6 Jumping Links problem

    Hi

    The links in my right-hand column jump upwards when I hover over them.

    After doing some reading online I understand that this is an IE6 bug but I haven't been able to fix it. I believe I need to change my CSS, can anyone help with where I need to change it and what I need to change it to? Many thanks

    @charset "UTF-8";
    /* CSS Document */

    body {
    font: 15px/20px lucida grande, arial, verdana;
    color: #000;
    }

    * {
    margin: 0px;
    padding: 0px;
    }

    .clear {
    clear: both;
    }

    .container {
    width: 100%;
    text-align: center;
    }

    .container1 {
    width: 900px;
    text-align: left;
    margin: 0px auto;
    }

    .maincontent {
    margin-top: 25px;
    }

    #header {
    background: url(images/header.gif) 0px 0px repeat-x;
    height: 140px;
    }

    #footer {
    height: 170px;
    text-align: center;
    background: url(images/footer.gif) 0px 0px repeat-x;
    }

    #header .logo {
    text-align: right;
    padding-top: 10px;
    }

    /* main Navigation */


    #navigation {
    width: 700px;
    text-align: center;
    margin: 1px auto 0px auto;
    }

    #navigation ul {
    list-style: none;
    margin: 0px;
    }

    #navigation ul li {
    float: left;
    width: 133px;
    text-align: center;
    padding: 0px 2px;
    background: none;
    margin: 0px;
    }

    #navigation ul li a {
    background: url(images/othertab.gif) 0px 0px no-repeat;
    display: block;
    width: 133px;
    height: 42px;
    line-height: 42px;
    margin-top: 11px;
    color: #fff;
    text-decoration: none;
    }

    #navigation ul li a#current {
    background: url(images/currenttab.gif) 0px 0px no-repeat;
    display: block;
    width: 133px;
    color: #052F41;
    height: 53px;
    line-height: 53px;
    margin-top: 0px;
    font-weight: bold;
    }

    #navigation ul li a:hover {
    background: url(images/currenttab.gif) 0px 0px no-repeat;
    display: block;
    width: 133px;
    color: #052F41;
    height: 53px;
    line-height: 53px;
    margin-top: 0px;
    }

    /* end navigation */


    /* footer navigation */
    #footer-navigation {
    width: 550px;
    text-decoration: center;
    margin: 10px auto 0px auto;
    padding: 20px 0px 0px 0px;
    }

    #footer-navigation ul {
    margin: 0px;
    }

    #footer-navigation ul li {
    float: left;
    width: auto;
    list-style: none;
    background: url(images/spacer.gif) 100% 50% no-repeat;
    margin: 0px;
    padding: 0px;
    }

    #footer-navigation ul li.end {
    background: none;
    }

    #footer-navigation ul li a, #footer-navigation ul li a:visited {
    color: #fff;
    text-decoration: none;
    font-family: trebuchet ms;
    padding: 0px 20px;
    }
    #footer-navigation ul li a.current {
    color: #07455F;
    background: #688EA5;
    margin-left: -1px;
    padding-left: 21px;
    }


    #footer-navigation ul li a:hover {
    color: #07455F;
    background: #688EA5;
    margin-left: -1px;
    padding-left: 21px;
    }
    /* basic styles */

    p {
    margin: 10px 0px 20px 0px;
    }

    a, a:link {
    color: #07455F;
    text-decoration:underline;
    cursor: pointer;
    }

    a:visited {
    color: #0A5676;
    }

    a:hover {
    background: #07455F;
    color: #fff;
    text-decoration: none;
    }

    ul {
    list-style: none;
    margin-bottom: 20px;
    }

    ul li {
    background: url(images/bullet.gif) 0px 1px no-repeat;
    padding-left: 35px;
    margin: 0px 0px 6px 10px;
    line-height: 22px;
    }

    ul.nostyle li {
    background: none;
    padding-left: 0px;
    margin: 0px 0px 6px 0px;
    line-height: 20px;
    }

    a.red-email-button, a.red-email-button:visited, a.green-button, a.green-button:visited, a.red-button, a.red-button:visited, .red-button {
    display: block;
    width: 268px;
    height: 50px;
    background: url(images/red-button-email.gif) 0px 0px no-repeat;
    text-align: center;
    margin: 20px auto;
    color: #fff;
    font-weight: bold;
    text-decoration: none;
    line-height: 50px;
    cursor: pointer;
    }

    a.red-button, a.red-button:visited, .red-button {
    background: url(images/red-button.gif) 0px 0px no-repeat;
    border: 0px;
    }


    a.green-button, a.green-button:visited {
    background: url(images/green-button.gif) 0px 0px no-repeat;
    }

    a.red-email-button:hover {
    display: block;
    width: 268px;
    height: 50px;
    background: url(images/red-button-email.gif) 0px 0px no-repeat;
    text-align: center;
    margin: 20px auto;
    color: #fff;
    font-weight: bold;
    text-decoration: none;
    line-height: 50px;
    }

    a.green-button:hover {
    display: block;
    width: 268px;
    height: 50px;
    background: url(images/green-button.gif) 0px 0px no-repeat;
    text-align: center;
    margin: 20px auto;
    color: #fff;
    font-weight: bold;
    text-decoration: none;
    line-height: 50px;
    }

    ul.ticks li {
    list-style: none;
    background: url(images/tick.gif) 0px 1px no-repeat;
    margin-bottom: 5px;
    padding-left: 30px;
    line-height: 23px;
    font-size: 110%;
    }

    .link-follow {
    padding-left: 27px;
    font-weight: bold;
    background: url(images/bullet.gif) 0px 0px no-repeat;
    }

    a img {
    border: 0px;
    }

    .highlight {
    background: #D4D8AD;
    }

    h1, h2, h3, h4, h5 {
    font-family: trebuchet ms;
    }

    h2 {
    font-size: 130%;
    margin: 15px 0px 10px 0px;
    }

    .faq h2 {
    margin-top: 40px;
    }

    h1.pageintro {
    color: #000;
    font-size: 190%;
    line-height: 120%;
    width: 750px;
    text-align: center;
    margin: 0px auto 20px auto;
    }


    .info, .question {
    color: #344B54;
    font-size: 170%;
    background: url(images/info-header.gif) 0px 0px no-repeat;
    height: 57px;
    line-height: 57px;
    padding-left: 70px;
    margin: 20px 0px 10px 0px;
    }

    .question {
    background: url(images/question-header.gif) 0px 0px no-repeat;
    }


    .info-long, .question-long, .email-long {
    color: #344B54;
    font-size: 170%;
    background: url(images/info-header-long.gif) 0px 0px no-repeat;
    height: 57px;
    line-height: 57px;
    padding-left: 70px;
    margin: 20px 0px 10px 0px;
    }

    .question-long {
    background: url(images/question-header-long.gif) 0px 0px no-repeat;
    }

    .email-long {
    background: url(images/email-header-long.gif) 0px 0px no-repeat;
    }


    #footer h2 {
    color: #CAD9DF;
    font-size: 150%;
    padding-top: 10px;
    text-align: center;
    }

    .big {
    color: #404040;
    font-size: 110%;
    }

    .top-margin {
    margin-top: 30px;
    }

    /* end basic styles */

    /* 2 column pages */
    .left-column {
    width: 48%;
    float: left;
    }

    .left-column-long {
    width: 64%;
    float: left;
    }

    .right-column {
    width: 48%;
    float: right;
    }

    .right-column-short {
    width: 268px;
    float: right;
    }

    /* copntact us page */
    .contact-label {
    width: 100px;
    float: left;
    font-weight: bold;
    margin-bottom: 10px;

    }
    .contact-field {
    width: 450px;
    margin-bottom: 10px;
    float: left;
    }

    /* apply page */

    ul.nostyle h2 {
    line-height: 27px;
    margin-bottom: 5px;
    }
    ul.nostyle li.one, ul.nostyle li.two, ul.nostyle li.three, ul.nostyle li.four {
    background: url(images/one.gif) 0px 0px no-repeat;
    padding-left: 35px;
    }

    ul.nostyle li.two {
    background: url(images/two.gif) 0px 0px no-repeat;
    }

    ul.nostyle li.three {
    background: url(images/three.gif) 0px 0px no-repeat;
    }

    ul.nostyle li.four {
    background: url(images/four.gif) 0px 0px no-repeat;
    }

    /* input boxes */
    .inputbox {
    border: 1px solid #ccc;
    padding: 5px;
    width: 400px;

    }

  2. #2
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The CSS isn't much use without seeing the HTML it applies to.

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Sounds like a "haslayout" (see faq) issue but we'd need to see the code.

    Possibly this element:

    Code:
    .maincontent {
    margin-top: 25px;
    }
    * html .maincontent{height:1%}
    However that's just a guess as it could be many other things

  4. #4
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    And if that is the case Paul, then I doubt the hack would even be necessary. He may be able to get away with in-lining the 1% height with the rest of the style rule (though testing to ensure this also helps).

  5. #5
    SitePoint Zealot
    Join Date
    Mar 2003
    Location
    dublin
    Posts
    103
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry - Do you need the html of the whole page or just the effected area? This is the right hand menu html

    <div class="right-column-short">


    <a class="green-button" href="apply.html">Apply for a licence</a>

    <div class="link-follow" style="margin-bottom: 15px;"><a href="about.html" title="About the Licence">Find out more about a licence</a></div>
    <div class="link-follow"><a href="consultations.html" title="Consultations and feedback">Give Feedback</a></div>



    </div><!-- end right column -->
    Thanks
    Last edited by tinggg; Nov 6, 2007 at 15:51.

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    HI,

    The jump is caused because you have left an inline element hanging in mid air and IE gets a bit confused. Make sure inline elements have a block level structure around then before another block level element starts.

    Code:
    <div class="right-column-short"><p><a class="green-button" href="apply.html">Apply for a licence</a></p>
    However you should consider using a proper list structure for those links anyway as that section is suffering from "divitis". Using the correct semantic code would have solved the problem also because your anchors would be contained within list pairs.

  7. #7
    SitePoint Zealot
    Join Date
    Mar 2003
    Location
    dublin
    Posts
    103
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You are a genius! thanks so much - i've spent hours on this and you fixed it.

    thankyou thankyou thankyou


Bookmarks

Posting Permissions

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