Can someone check out my site and tell me why they think my content section is falling below my nav bar in IE6 works fine in all other browsers. www.mwelectricgates.com/brett/web Many Thanks.
Well, a few things going on here: you've got your navigation box as position: fixed. Ie6 doesn't support that well. I forget what it will do instead, but it is NOT positioning it fixed. Likely it's treating it like some regular static block, which could explain why your content would drop: normally that's what happens when you have a float next to a static block, since the static block claims the whole "line" it's taking up, even if it's not 100% wide. Static blocks make newlines, basically. To test, you could float that #navigation just for IE6: * html #navigation { float: left; } (it should be able to take your other properties from your regular #navigation declaration) You might also need to set position: static before the float: left, so try that as well: I'm not very sure what IE thinks of a "position" it doesn't support, and position: static before the "float: left" (which, yes, contradicts the position: static) would effectively undo any weird positioning done by position: fixed. Anyway, what most of us do with someone we want to make fixed is give IE6 position: absolute, which means the element in question will indeed scroll offscreen... But I have a question. Your site is incredibly wide. Are you planning on making some sort of horizontal site? Because if you are, there's a nifty way to fake position: fixed for all browsers, using a horizontal site technique. I must warn you though, using the technique means you must relinquish any use of position: relative on the right side of the page (this also means, you don't get to keep your image replacement over there either : ( If that's acceptable (since position: relative in the right box in this technique is treated by IE6 and 7 as position: fixed which is Bad), then you could take a look at a horizontal site I've made: http://stommepoes.nl/Guisy I stole the basic idea from a gallery site of Stephane Tartelin, except mine is not in Quirks Mode. Your entire page becomes a 100% height page. So both the html tag and the body tag are height: 100%; This has the disadvantage of having content higher than your users' computer screens being completely inaccessible (because the min-height trick, I seem to recall didn't work well with IE here) so you would maybe write the page with your lowest-common-denominator in mind (mine was the 600px by 800px screen), so nothing on the left side in #navigation is taller than 600px on average font sizes. The left side (#navigation) and the right side (#content I think was yours... whatever wraps everyone on the right) become 100% high, and they are written to be direct children of the body tag (otherwise they cannot get that % height). Your left box (#navigation in your case) is floated left and has whatever width you wanted. Your right box has the height: 100%, a width of "auto", and overflow set to auto. This gives your users scrollbars (in both directions if the stuff inside your right box are too tall). The trick to get around needing to set some real width on any inner box is to use a negative right margin: .boxhouder { float: left; margin: 0 -999em 20px 0; white-space: nowrap; } Code (markup): That's from my example, where the .boxhouder is inside the right side (called on my page #sliderwrap). The negative right margin allows children inside to stack up, instead of being dropped down to the next line (since floats normally shrink-wrap if you don't set a width on them). Opera has a limit on how high you can make this, and Konqueror of course doesn't work at all. But that's a worthless browser currently and nobody uses it (I do hope they get back to regular updates, bug fixes and whatnot, but it seems abandoned or something....) You make boxes inside this .boxholder box, and those contain your content, have heights, widths, etc. It's an elaborate technique, one which requires a lot of testing, but if that was your goal, it's really fun I think. Be aware this kills the workings of in-page skip links (they don't work the way you want in most browsers) and many user hate scrollbars (I said, tough). It's not quite as usable as a vertical site. Those who do use mice with scrollwheels often don't have any wheel capability to go sideways (mine doesn't). Mostly it's best with galleries, which is kinda what your site looked like to me. You could also make an alternate stylesheet which is vertical as well. Anyway, did that answer it for you? : )
That response was amazing. Thank you so much. I am attempting to build a side scroll gallery site yes. I think I will try and re-code using your method. With regards to the image replacement on the header. Would this work if I included my header as a list item in my un-ordered list navigation?
No don't do that. What I did with my header was, it's actually my floated left box. Besides, header text doesn't belong in a list : ) See the cat on the url I linked? The one with the url in the name? That's image replaced there. And IE6 users get something special : ) So I have <html> <body> <header> (floated left part of the page) header stuff here, which also includes the menu too </header> <sliderwrap> (this is the overflow box) <boxhouder> (Dutch, for box holder... this is the guy getting the neg right margin trick and is also floated) all the inner boxes are in here </boxhouder> </sliderwrap> </body> </html> So, I could do all the image replacement I wanted to in the left floated box, but I couldn't do it in the right-side overflow box, nor in anyone inside that box. Since I had wanted initially to do image replacement for the h2's inside the page, that kinda sucked. There might be an elaborate hack for that... but I don't know it. Or, do image replacement, and use IE-specific code to remove it, so IE6 and 7 can't see the images, just the text, and the Better Browsers get the nice image replacement. That's always an option. Beware, this is a tricky setup, and like I said, be very aware of your reduced usability etc. and you will want to do a lot of testing, esp of smaller browser sizes (if you have FF's window resizer, that's a nice tool I like to use for checking 600x800 screens until I bother firing up the old computer for better testing). If you need in-page links (links going to #someIDhere) then know that I could only get FF to kinda do it the way I wanted. Most browsers only bring the left side of the element you are referencing onscreen, and that means barely onscreen (so the whole box you want to see is still off to the right). You could maybe smear a Javascript scroller on top of the HTML so that folks with JS get an easier time of it. This site does this, but it loads slow and could have worked a bit better for no-JS surfers... http://hautes.mynes.free.fr/v2/homev2.html You can see many different techniques for horizontalness at The Horizontal Way.com (including the Tartelin page I ripped my ideas from).
I appreciate all of your help. I did have a thought that would actually save me re-coding my whole site. Could I make a different set of simpler styles for IE6 users (strange people!) where my content just flows down rather than across.
You can indeed make different styles for IE6, though I managed to make my site generally work for IE6 without too many hacks. However, my forms needed way too many hacks, so I ended up giving IE6 different CSS for forms (made IE6 have regular, vertical forms instead of horizontal ones). You can use the if IE Conditional Comments to give IE6 its own stylesheet, in the <head> part of your pages.