CSS and IE problems (Big Surprise)

[Siberys]

So, I'm re-coding my site for an upcoming revamp to the very small selection of PDFs I have for sale. I decided I'd try my hand at having it use CSS layouts. All was peachy keen... Until I started checking browsers other than Chrome and Firefox.

My particular problem is with IE8. Here's how the page looks in FF;

[sblock]

[/sblock]

And here's how it looks in IE (a mock-up; I don't actually have IE on my box, and the only IE-using computer I have access to is currently unavailable);

[sblock]

[/sblock]

It looks like that div on the right 50px off to the right, or else everything else is 50px off to the left (in the actual, I can't tell). 50px is the width of the div.

I've tried everything I could find on the web, but none of it worked. I intend to use comment if tags to differentiate the IE-specific styles, but I have no idea what needs changing. display: inline didn't work, changing the margins didn't work... so on and so forth.

The actual web site, if you want to see it and the source, is HERE

Anybody know what I can do?

EDIT: I should mention; that left div also moves 50px to the right, but setting margin-left to -50px fixes that. It just can't be easy for the right side, though.

 

[Thanee]

I'm not entirely sure if that is fixed in current IE versions, but position: fixed has always been problematic.

The best solution is to redirect to mozilla.org, if the website detects any version of the IE as a browser.

Bye
Thanee

 

[Siberys]

If only it were that simple.

Position: fixed is supposed to work if my doctype is declared.

Maybe if I change from transitional to strict?

EDIT: I found a workaround. I have it set so that in IE, the width of the fixed sidebars is 0px. The site looks ugly in IE, but it works.

Thing is, I've only been able to verify this on IE8. I think it should work on IE7, but older browser likely need even more hacking.

 

[CAFRedblade]

Siberys, try looking up IE and Conditional statements, or IE hacks regarding css. IE went from bad, (ie6) to poor(ie7) to confused(ie8, although better than previous). With a conditional statement you can import specific css sheets for ie8, 7 and so forth.

just Google something like
ie conditional statements css
for some examples.

And there is always QuirksMode - for all your browser quirks
where you can do some research for cross compatibility and issues.

 

[Siberys]

I'm using the IE conditional statements right now - it's how I'm removing the broken side bars. I'm just not sure what I need to put in for older incarnations of IE...

Thanks for the link! That'll save me the trouble of hunting down computers with out-of-date browsers...

 

[ssampier]

Ah, IE, always fixing itself, but yet, still breaking other things. Sort of like the dog chasing his tail. The worst part is IE still has the lead in the browser market.

Generally the advice is--as you have done--create your page to work in Firefox and Safari, then create conditional IE hacks.

 

[Thanee]

At least Firefox is constantly gaining ground.

Bye
Thanee

 

[Elephant]

What's depressing is that IE *6* still has around 20% of the browser market

Also - Siberys - if you're still struggling on that layout, message me on one of the IM services (in addition to the links under my username, I'm elephantium in gchat). I've been doing a fair amount of struggling with IE-isms in my day job recently (I work as a web developer).