IE broke my CSS
in Internet Explorer
anyone have a clue why this is happening??
i have a post below about the same thing – the columns are not in the right place, everything is shifted over to the right…
I’m sorry for the extremely unhelpful comment, but: I laughed out loud when I saw this topic’s title. “IE broke my CSS” would make a great t-shirt, or a band name.
I know exactly what you mean. IE has always been terrible with standards and full of bugs.
Make sure you remove any commented out selectors from your CSS as IE ignores the fact that you commented them out.
Your best bet is to use a separate style sheet for IE browsers. You can do this by adding conditional comments inside <head>
put you stylesheet link here for IE 6 only
or you could use this to detect browser higher than IE6
<!--[if gte IE 6]>
put you IE 6 and above stylesheet here.
Only IE parses these conditional comments so firefox, chrome etc will ignore them.
This works pretty well and allows you to support many browsers. Remember Firefox is more of a power user thing. Most lay people tend to use what comes in the box ie IE. So you can expect to see a lot of IE6 and IE7 browsers visiting your site.
hmm.. i cant seem to get this to work?? it shows up when I view the page source, but it dosent pull the link..
<html xmlns=”http://www.w3.org/1999/xhtml” <?php language_attributes(); ?>>
<link rel= “stylesheet” type= “text/css” href=” http://hoopsjones.com/wp-content/themes/bp-sn-parent/IE_6_style.css” />
<link rel= “stylesheet” type= “text/css” href=” http://hoopsjones.com/wp-content/themes/bp-sn-parent/IE_7_style.css” />
How do you know it’s not reading those files? Did you try something obvious like changing a background color to something ugly like #cf0… just to make sure your IE6/7 tweaks are coming in in IE6/7?
So you can expect to see a lot of IE6 and IE7 browsers visiting your site.
Although you can expect about half of the users who visit your site to be using IE, very few will be using IE6. This of course varies with the type of site. If your site is focused on PC-only based issues, then of course a larger percentage of users will be using some version of IE.
As of September 2009, IE6 accounted for only 12% of browser use:
This is why many corporate websites have stopped worrying about supporting IE6.
But I digress. Back to the OP’s issue. As Boone intimated above, it is all too common to have issues with IE breaking your site’s design. Ironically, your best bet is to use Firefox with the FireBug Add-on to investigate what is causing the problem. If it is only an IE6 issue, then you need to decide if it is worth your time figuring out a CSS work around.
IE6 should just go to hell, if your so worried, put a IE6 notice for them to install Google Chrome. Much easier than to try fiddling with it?
If you are wanting to work it out, check out firebug lite, which works in IE. It’s probably the double margin float bug.
its a totally different style sheet, i just shoved it in there to make it obvious if the link was working..
Firefox and Safari work fine, IE 6 shoves everything over about 40px, and the navigation css is broken in both IE 6 and 7
I agree… without looking at the code… I would guess it’s the double float margin bug. Try sticking “display: inline;” on any floated column that has a left margin set.
This site is a godsend for IE bug fixes http://www.positioniseverything.net/
Also… in some case… you have no case but to support IE6. A lot of corporate networks for instance still use XP and as such still run older versions of certain web applications… some of which will only work properly on IE6. I know where I work (company of 3,500 people)… the entire company is forced to stick with IE6 because otherwise there is a lot of legacy software that will break. So all of my web development HAS to be IE6 friendly.
If you’re not concerned about that… you may want to check this out too
- The topic ‘IE broke my CSS’ is closed to new replies.