Grow your CSS skills. Land your dream job.

Problem with sidebar disappearing in IE6

  • # December 3, 2009 at 10:52 am

    Hello all,

    This is my first post so please bear with me if it seems a little vague.

    I have a site with a left navigation sidebar in the fixed position and my content resides to the right of it. I have the nav buttons in the sidebar scroll the page using the ‘scrollTo’ plug-in and everything works cool in almost everything but IE6.

    In IE6, when a nav button is clicked, the page scrolls to the intended content, however, once I am no longer hovering over the nav button, my sidebar disappears completely. I have checked almost everything and can’t seem to find a solution.

    You can check out the live version here: http://www.christiantate.net

    I am currently testing in FF 3.0.15, which works fine, and IE6, which causes the problem.
    Any feedback would be much appreciated.

    Code:

    Portfolio of Christian Tate, Web Designer & Developer


    Focus Financial Partners – Creation of a microsite for financial services company. Microsite consisted of 4 pages with jQuery and Flash elements implemented by me.

    View my web portfolio

    I am a New York City-based web designer & developer specializing in creating accessible, user-friendly & aesthetically pleasing websites. With proficiency in CSS, XHTML, jQuery implementation, basic PHP scripting & Flash, I can help you enhance your web-presence whether it be personal or commercial.

    Being based in NYC, I have some clients I have never even met, so whether you’re in the tri-state area or not and have a job you think I could help you with, please contact me. I will make it a priority to get back to you within 24 hours.

    Code:
    #wrap{width:700px; margin:0 auto}

    #scrollable{float:right; padding-top:100px; width:500px}

    .container{clear:both; font-size:1.1em; line-height:1.7em; margin-bottom:800px; width:500px}

    .container img{margin-bottom:10px}

    .container ul.buttons li{display:inline; float:left; margin-right:5px}

    .container ul.buttons li a{background-image:url(“../img/btns-sprite.jpg”); background-position:0 0; color:#fff; display:block; height:23px; line-height:2em; padding-left:1em; text-decoration:none; width:99px}

    .column-left{float:left; width:240px}

    .column-left IMG.displayed{display:block; margin-bottom:18px; margin-left:auto; margin-right:auto}

    .column-right{float:right; width:240px}

    #sidebar{float:left; height:400px; position:fixed; width:200px}

    * html #sidebar{position:absolute}

    # December 3, 2009 at 12:53 pm

    Might be an issue with the float:left on your sidebar. You could remove that and see if it helps (it would be easier if there were a firebug for ie6).

    Or, since you’re using absolute positioning, you could specify a top value ("top:100px") which might fix your sidebar.

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".