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 4 of 4
  1. #1
    New Coder
    Join Date
    Aug 2008
    Location
    Liverpool
    Posts
    53
    Thanks
    37
    Thanked 0 Times in 0 Posts

    Internet Explorer sidenav not showing correctly in IE6

    Hi,

    I'm working on a site at the moment, and have been stumped by the sidenav floating bottom left of the screen in IE6 & IE7. It appears fine in Firefox, Opera, Safari etc.

    Here is a snippet of the CSS used:

    Code:
    #featuredpanel { width: 210px; height: 449px; float: left; margin: 27px 0 0 60px; }
    .fixednav-about { background: url(images/right-nav-back1.jpg) no-repeat; }
    #sidenav { width: 210px; margin: 6px 0 0 0; padding: 0; border-bottom: 7px solid #3B5975; }
    #sidenav ul {list-style-type: none;  }
    #sidenav li {margin: 0; padding: 0; list-style: none; background: #294D67 url(images/sidebull1.gif) 8px 12px no-repeat; border-top: #617C8F 1px solid; }
    #sidenav li ul {margin: 0; padding: 0px; }
    #sidenav li ul li {margin: 0 0 0 5px; padding: 0 0 0 5px; list-style: none; background: #294D67 url(images/sidebull1.gif) 8px 12px no-repeat; }
    #sidenav li, #sidenav a { display: block; }
    #sidenav a:link, #sidenav a:visited { color: #FFFFFF; text-decoration: none; padding: 5px 5px 5px 21px;  } 
    #sidenav a:hover, #sidenav a.sidenav-on { color: #FFFFFF; text-decoration: none; background: #C1731C url(images/sidebull2.gif) 8px 12px no-repeat; display: block; }
    I'm sure this should be an easy fix, but I'm having no luck at the moment, any help would be greatly appreciated.

    The website is: www.wsi-preview.co.uk/lindstrand/our-products/

    Many Thanks


  • #2
    Senior Coder twodayslate's Avatar
    Join Date
    Mar 2007
    Location
    VA
    Posts
    1,042
    Thanks
    67
    Thanked 39 Times in 39 Posts
    I don't have ie but here is what I think is the issue....
    If the sidebar is going under the content but to the right then the width is wrong.
    For some reason IE needs a few extra pixles for the container in order for the floating to work.
    Code:
    <div container width=800>
    <div sidebar width=200></div>
    <div content width=590px></div>
    </div>
    Just play around with the width/padding.
    twitter | Quality Hosting - $5.95/mo*
    Feel free to PM me!

  • #3
    New Coder
    Join Date
    Aug 2008
    Location
    Liverpool
    Posts
    53
    Thanks
    37
    Thanked 0 Times in 0 Posts
    Hi,

    Thanks for the quick reply.

    I've tried playing with the padding and width, but still no joy. I didn't build this site, just updating it. Do you think I need to move/nest the #featuredpanel div?

    I'm not getting anywhere fast with this one I'm afraid.

    If you view the source, you'll see what I mean.

    Many Thanks

  • #4
    Senior Coder twodayslate's Avatar
    Join Date
    Mar 2007
    Location
    VA
    Posts
    1,042
    Thanks
    67
    Thanked 39 Times in 39 Posts
    http://jigsaw.w3.org/css-validator/v...ur-products%2F
    Validate your code. Your HTML is fine.

    Check out the following on floating and <div> arrangement.
    http://www.quirksmode.org/css/clearing.html
    http://bonrouge.com/2c-hf-fixed.php
    twitter | Quality Hosting - $5.95/mo*
    Feel free to PM me!


  •  

    Tags for this Thread

    Posting Permissions

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