web development issue, I believe I am fucking IE6 with bad code...

designMcGee

First, I'm only really at a novice level when it comes to my development skills, and I've been getting advice from many different sources. I'm well aware my code probably isn't very professional looking right now.

However, I'd like you help when it comes to a specific problem I'm having with this site:

http://factory.webgoblin.net/schostak/interior.html

and how it displays in IE6.

I have it looking how I want it to look in IE7, Firefox and Safari. I know that IE6 requires different approaches and hacks at times, but I've never come across a site that got so completely broken from one browser to another.

I think it has something to do the method I'm using to center the structural divs, (#wrapper, #shell,#mainContent?) or with the Navigation.

I'm kind of lost, so I'm sorry if I'm not being more specific. I'll be checking this thread pretty frequently.

Any advice you could give me as to where you think I might be going wrong, how my code looks, or anything of that nature would be very helpful.

Feel free to blast me, I'm more interested in learning what I did wrong and not making the same mistakes in the future.

krl

First thought when looking at the css: you use a weird method of horizontal centering, which makes the menu disappear and unreachable on very small windows.

Instead of

	position:absolute;
	left:50%;
	margin-left: -455px;
	width:910px;
	background:url(images/bg_fade.gif) no-repeat;
	float:left;

try

	width:910px;
	margin:0 auto;
	background:url(images/bg_fade.gif) no-repeat;

powerss

Yeah, you can try conditional comments too.

See "underscore hack" for IE6 and "asterix hack" for IE7.

Welcome to the wonderful world of garbage browsers.

Site looks nice, by the way!

Jasconius

Microsoft is slowly sniping away at the selector bugs in IE7.

Conditional comments are the safer, albeit more annoying way to go.

Server side browser detection is the real way to go if you are fighting serious wars with browser compatability.. but your site doesn't appear to require that.

I guess you were using that left: 50%, and negative left margin to center your page? but left: and margin-left: are redundant attributes so IE6 was likely not able to resolve it as well as IE7.

The above posted margin:0 auto; is the way to go.

krl

This is awesome.

IE7 is a JavaScript library to make IE behave like a standards-compliant browser. It fixes many CSS issues and makes transparent PNG work correctly under IE5 and IE6