Help needed - site looks fine in all major browsers but IE6 for some reason
 

I have a mainstream Wordpress site up (on ht**tp**://www.bla**mmo**.com - remove the *s) that looks fine in FF, Opera, Safari, IE7+, etc but looks like complete shit in IE6 for some reason. I'm guessing it's probably some CSS stuff that perhaps IE6 doesn't recognize?

Hopefully it's something that could easily be fixed so the site looks fine everywhere AND IE6 since surprisingly a significant % of people still use IE6 (over 18%). Unfortunately I had outsourced the design/development and the developer has been extremely unresponsive and excuse-giving lately.

Thanks in advance for any input anyone can give on this.

For some reason? Yeah, it's called IE6 sucks.
Netscape 1.0 was a better browser. :2 cents:

its called you get what you pay for LOLZ

simple layout like that should look just fine in IE6, although IE6 known to be a bitch)

it is not a 5 min job for someone who didn't produce the code and may require some html/css restructuring

Why would you care about IE6? Who fucking uses that? IE 7 has been out for 2 years and IE 8 is about to come out.

I see about 20% of surfers still using IE6

Rage is right, it's close to 20% still, though dropping by a half a percent or more each month. You would have to be a complete idiot to not care about 20% of your visitors.

IE always fucks things up...

Just put a text on your site sayin..

WHAT! You still use IE6 you know IE8 is almost out.. Go back to Windows for dummies

That's kind of what I was afraid of. I would love to say screw it, screw IE6 users but given one of our target markets are mommy types, who perhaps may have a 4 year old computer and never update anything, I have to expect a decent % of visitors may use IE6 and the way the site looks on it, they would likely not be returning. :(

That's tempting, but thinking back to a couple years ago when I first tried IE7 and didn't like it much (was not feeling the tabs initially and now I love them), and thinking about how many people are 2 years behind on technology all the time, I don't think I want to do that. :)

Judging by the way it looks in IE6 here, it's simply a failure to clear a float up around the header that is causing your main container to collapse. Try sticking "overflow: auto:" on all your major holding containers (header, body, footer, etc.).

Prompt something, this site is viewable in higher IE version.

Try to replace this
#main { min-height: 400px; margin: 0px; padding: 15px; overflow: hidden; }
with
#main { min-height: 400px; height: 400px; overflow: visible; margin: 0px; padding: 15px; overflow: hidden; }
in your style.css file and see if it works

IE6 may suck but 20% of surfers are still using it and for all you CSS gurus who are coding sites for clients and not checking them in IE6 you're selling your clients short. There are workarounds for IE6 but they are a bitch and take a lot of time wandering around the Net looking for the IE6 fixes.

IE6 is fucked but surfers use it large!

:thumbsup

people get carried away over complicating simplest things, I see alot people do crazy nesting with divs, which I admit, I used to do as well after switching from tables.. My suggestion to anyone doing html coding - don't do unnecessary nesting, use absolute positioning within relative divisions. only keep content related stuff in html and move everything else in css. K.I.S.S. :)

If every site owner in the world would do this then our webmaster lives would get much easyer.

We need a sort of massive global anti IE6 campaign...
Like every site in the world would just go blank for IE6.

Most things that happend on internet are invented on porn sites.. Who's with me??

:thumbsup

That certainly helped the egregious visual errors (and thanks a ton for that!) but there's some other stuff wrong, all with the right side:

- The title in the top area isn't showing for me but is still there if I click n drag to highlight the area ("Freebie By Email")
- Also in that top area on the right side, the botton is above the field/"Subscribe Now" instead of to the side of it...that plus some extra space seems to really elongate that section
- The bottom section on the right side gets cut off

Also, I take it .png's don't show right in IE6 correct? That's not a huge issue - I just noticed they're showing with white background instead of the actual background color but it doesn't really look that off and gif's tend to look crappy in comparison so I wouldn't change that just for IE6.

I need to learn CSS. :helpme Thanks again for the help!

I wasn't sure where that would be put and the other suggestion a couple posts below was simple enough to give a quick try to and it fixed the major error at least - if you look and see what is currently wrong now with the right side, would this fix the errors and where exactly would I put that within those files? Sorry if I sound retarded but my CSS knowledge is very limited.

May be the problem is with the negative margins with IE. Try adding position:relative on these styles (you can replace them with the ones listed below):
.menu h3 { margin: -10px -10px 10px -10px; padding: 3px 10px; font-size: 14px; font-weight: bold; background-color: #cbb370; color: #ffffff; position:relative;}

.menu li a { display: block; margin: 0px -10px; padding: 3px 10px; color: #76633c; position:relative;}

.menu .rss { margin-top: -5px; font-size: 18px; font-weight: bold; position:relative;}

And sorry for the previous post, try using this for style main:
#main { min-height: 400px; height: 400px; overflow: visible; margin: 0px; padding: 15px; }

I think there are more problem styles but lets' see first if this will help