CSS Compatibility Issues with Older Versions of IE

I’m working on trying to get my business’s site working as universal possible. I’ve tried so many ways to get it work, but for some reason, I’m missing something. The bg image isn’t aligning with the text the way I want it to on older versions of Internet Explorer (at least 6 and 7), but it works perfectly on Firefox, Chrome, and the newest release of IE. I need help, as some of you can attest, that I’m still relatively new with working in CSS. I’ve been moderately successful in getting a few sites up utilizing CSS, but this roadblock on my own site is just annoying me.

https://h20webhosting.com

Any help will be greatly appreciated.

Here are snap shots:

What it’s supposed to look like:

and what it’s doing in older versions of IE:


Edit: Never mind. I figured it out. You know, it’s the simplest of things that will set off inconsistencies between browsers, that and my inexperience with cascading style sheets. lol. I suppose I asked prematurely, but for the record, I spent a lot of time on trying to figure it out, and I just recently found the solution.

i find that counter strike source works pretty well alongside the old IE

Bad sersoft.

And how are you helping?

Web designers should just adhere to the proper standards and let the users of the old shitty versions of Internet Explorer fuck off and die.

Just use HTML5 so only chrome, firefox beta and opera users get to see the page, no low-fi version.

That’s internet trolling at it’s finest. lol

I’m not gonna lie, but it took me way too long to get that. I like to play with FPS, tho.

HAHAHAHAHAHAHA. That’s all I have to say. CSS and IE 6/7 do NOT go well together.

When I was making my website, I found that were serious issues with the placement of various things on the website (text, images, etc.) because of the way the older versions of IE completely fail to handle the align, etc., functions in CSS. The best way I found to overcome this was to use various issues was to use CSS hacks and just trial and error my way through it. These ‘hacks’ effectively force specific CSS commands to apply to specific browsers, but not others. So if IE has particular issue with a margin or something, then you can set IE 6 to handle that particular margin differently from every other browser. This will get you started, but there are loads more pages on the internet that you can look at.

As for the cause of the problem, I think it has something to do with the margin/align/float commands being wonky. See here, but also continue Googling around for hints on how to fix your specific problem beyond just trial and erroring you way through it.

Awesome, thanks for the sources, and solid answers. However, I did find a legitimate solution to my problem without having to resort to hacks.

See, it all came down to the ‘left’ attribute in the “steps-container” class, which also forced me to have extraneous negative values for the text inside it, to make them align, even in Firefox.

By switching the ‘left’ attribute to ‘margin-left’ and separating each step into individual containers, I was able to align everything correctly with a ‘padding-left’ applied to the “steps-txt” class.

It’s the simple stuff that sets off inconsistencies, which also creates excellent learning experiences.

The only “issues” with the W3C Standards, is that I’m using javascript that isn’t Standard compliant to facilitate my links. If those are my only “issues”, then everything is good as gold. I mean, for frak’s sake, even my Flash is Standard compliant, what more do you want?

Don’t even get me started on the ridiculousness of the and attributes.

Nicely done. Glad to see you’ve been able to sort out your issues with a lot less pain than I had to go through. I just hope that IE 6 will drift into insignificance fast enough so that we can stop worrying about it.

Once Microsoft stops supporting Windows XP.

Founded in 2004, Leakfree.org became one of the first online communities dedicated to Valve’s Source engine development. It is more famously known for the formation of Black Mesa: Source under the 'Leakfree Modification Team' handle in September 2004.