View Full Version : sidenav not showing correctly in IE6

11-20-2008, 09:59 PM

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:

#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


11-20-2008, 10:30 PM
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.

<div container width=800>
<div sidebar width=200></div>
<div content width=590px></div>

Just play around with the width/padding.

11-21-2008, 04:21 AM

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

11-21-2008, 04:39 AM
Validate your code. Your HTML is fine.

Check out the following on floating and <div> arrangement.