Stupid IE.
June 28, 2012 7:21 PM Subscribe
CSS gurus: Please help me understand why IE is doing this stupid thing, and how I can fix it.
I'm designing a website for a friend, using Wordpress and the awesome Karma theme. So far, so good. But I want to be able to highlight/callout specific bits of text within a page, so I've done this little bit of custom CSS.
Works great in Firefox! Does exactly what I want it to do! See here.
But in IE - which is the primary browser for most people - it does this stupid thing, where it ignores both font size and bold face, leaves an extra line break after the bold text, and draws a horizontal line through said bold text. Stupid IE!
So, any help would be much appreciated. Kinda at my wits end.
I'm designing a website for a friend, using Wordpress and the awesome Karma theme. So far, so good. But I want to be able to highlight/callout specific bits of text within a page, so I've done this little bit of custom CSS.
Works great in Firefox! Does exactly what I want it to do! See here.
But in IE - which is the primary browser for most people - it does this stupid thing, where it ignores both font size and bold face, leaves an extra line break after the bold text, and draws a horizontal line through said bold text. Stupid IE!
So, any help would be much appreciated. Kinda at my wits end.
Response by poster: Yes, meant to include the link to the actual site staging area and forgot. Here it is.
I'm testing in IE9.
posted by jbickers at 7:37 PM on June 28, 2012
I'm testing in IE9.
posted by jbickers at 7:37 PM on June 28, 2012
It looks like your HTML is a bit wonky. You open a STRONG before the H4 while it's all inside a P and then close the STRONG before closing the H4.
posted by FreezBoy at 7:44 PM on June 28, 2012
posted by FreezBoy at 7:44 PM on June 28, 2012
Yikes. Do you need that much `!important`?
Anyway, I've been fixing shit in IE for a long time. While IE debugging sometimes descends into "wtf" territory, there are some "usual suspects". Based on what I can see of your code, here's some possible causes that you can investigate:
1. Try removing the `position: relative` from the #main container. IE frequently has issues handling relative positioning especially on container elements.
2. You've got a float enclosing rule on the .main-holder div. I don't think this needs to be applied for all browsers. You should put the IE7-only hack selector in front of it.
3. You're setting `display: table` on #wrapper. Often this will cause awful, unexpected things to happen in IE.
Barring those, I'd say try going through your CSS and finding instances of `position: relative` and other superfluous bits that might be tripping up IE. IE9 is generally pretty good at CSS, but it doesn't 'guess' the correct behavior as often as nicer browsers do, so try to understand what all your CSS rules are meant to do, and use that a guide for where IE might be getting confused by something complicated.
posted by deathpanels at 8:15 PM on June 28, 2012 [1 favorite]
Anyway, I've been fixing shit in IE for a long time. While IE debugging sometimes descends into "wtf" territory, there are some "usual suspects". Based on what I can see of your code, here's some possible causes that you can investigate:
1. Try removing the `position: relative` from the #main container. IE frequently has issues handling relative positioning especially on container elements.
2. You've got a float enclosing rule on the .main-holder div. I don't think this needs to be applied for all browsers. You should put the IE7-only hack selector in front of it.
3. You're setting `display: table` on #wrapper. Often this will cause awful, unexpected things to happen in IE.
Barring those, I'd say try going through your CSS and finding instances of `position: relative` and other superfluous bits that might be tripping up IE. IE9 is generally pretty good at CSS, but it doesn't 'guess' the correct behavior as often as nicer browsers do, so try to understand what all your CSS rules are meant to do, and use that a guide for where IE might be getting confused by something complicated.
posted by deathpanels at 8:15 PM on June 28, 2012 [1 favorite]
Oh, and I apologize for not just testing these out myself – my VMs are on my work computer. ;)
posted by deathpanels at 8:15 PM on June 28, 2012
posted by deathpanels at 8:15 PM on June 28, 2012
Check out the first line of this section:
You're opening a <p> and not closing it. While that's not always 100% required, you should just do it anyhow. This is probably compounding the issue of <strong> that gets opened on the first line is closed in the second -- but it's getting closed inside an <h4> that was opened after it.
Here's my triage:
posted by the jam at 8:40 PM on June 28, 2012
<p><strong><br />
<h4>Buck’s</strong><br />
425 W. Ormsby Ave.<br />
637-5284<br />
www.buckslou.com<br />
Owner Curtis Rader makes your dining experience unique in this elegant restaurant that serves both lunch and dinner in an Old Louisville neighborhood setting. $$$</h4>You're opening a <p> and not closing it. While that's not always 100% required, you should just do it anyhow. This is probably compounding the issue of <strong> that gets opened on the first line is closed in the second -- but it's getting closed inside an <h4> that was opened after it.
Here's my triage:
- Remove that <p> entirely. If you need the extra space, add it in the css.
- Move that opening <strong> and put it just after the opening <h4>
posted by the jam at 8:40 PM on June 28, 2012
Good advice above.
Also, you want your HTML like this:
Then get rid of the margin-top: -40px line from your CSS. I haven't tested that on IE (broken VMs right now), but it should be a start.
posted by Magnakai at 2:19 AM on June 29, 2012
Also, you want your HTML like this:
<h4><strong>Buck’s</strong><br>
425 W. Ormsby Ave.<br>
637-5284<br>
www.buckslou.com<br>
Owner Curtis Rader makes your dining experience unique in this elegant restaurant that serves both lunch and dinner in an Old Louisville neighborhood setting. $$$</h4>
Then get rid of the margin-top: -40px line from your CSS. I haven't tested that on IE (broken VMs right now), but it should be a start.
posted by Magnakai at 2:19 AM on June 29, 2012
How about using a dl block instead of wrapping the entire thing in a heading? That's not what a heading is for. Set the entire dl to have the background and border you want, set dt to be bold, and dd to be not bold. That should work fine, I use the same approach for similar formatting on my own site.
posted by caution live frogs at 5:36 AM on June 29, 2012
posted by caution live frogs at 5:36 AM on June 29, 2012
Oh and obvs the dt would be the first line and dd all the text after.
posted by caution live frogs at 5:37 AM on June 29, 2012
posted by caution live frogs at 5:37 AM on June 29, 2012
« Older No Christmas this year, maybe not ever again | Making the most of a layover in Iceland? Newer »
This thread is closed to new comments.
So:
Which version of IE were you testing it on?
Can you post an example of the HTML that it's being applied to?
Even better, can you post a link to the actual page?
posted by Magnakai at 7:35 PM on June 28, 2012