curious CSS/IE problem

March 14, 2005 1:25 PM

Italicizing one certain paragraph in a page with CSS layout causes IE to break the layout. Moz/Firefox, however, remain unfazed.

As a favor to a friend, I'm converting his clunky website to an (only slightly less clunky) CSS/Dreamweaver template. I've been going through changing pages to the template, checking for odd behaviors, and uploading them to another friend's account so they could be tested on various browser/OS combos before being sent live. I've found one odd thing that's had me puzzled for the last three days.

One page that I've converted consistently breaks the layout in IE 5.0 for win2000. By "break," I mean inserting about 30 pages worth of blank vertical space between the end of the sidebar and the start of the right-column content, as well as another two after it.

I've narrowed the problem down to one certain paragraph: inserting this paragraph in italics (tagged either "i" or "em"), causes IE to break the layout. Inserting it without the italics does not. It does not matter if that paragraph (or the entire page) is justified or left-aligned.

I've tried Googling for discussions of this bug/feature and have had no luck.

Any ideas why this is happening? (and please, no snarks about the colors or debates about the politics; I'm just here to put each page into a working template mimicking what he already has.)

posted by Tuwa to computers & internet (9 comments total)

D'oh! And I should have posted a link directly to the CSS I've cobbled together.... Any tips on this are greatly appreciated.
posted by Tuwa at 1:27 PM on March 14, 2005

Have you tried using CSS classes to make it italic, instead of using the HTML?

<p class="italic">
Insert paragraph here
</p>

Then in the CSS:

.italic { font-style: italic; }
posted by gaby at 1:45 PM on March 14, 2005

Sorry, should have said, that's fairly hacky and swift css but should do the job.

The general rule of thumb with CSS is to keep it simple. If things aren't working try and slim down the CSS and HTML as much as you can. Simple is better in these scenarios. This philosophy has solved many CSS problems for me in the past.

You should try and avoid using <i> and <em> tags and should instead put a class on the paragraph that you want to style, as per my previous posting. These tags are inline, not block styles. If you were to use them, you would need:

<p><em>
Insert para here
</em></p>
posted by gaby at 1:51 PM on March 14, 2005

IE5 in general has problems dealing with width/heights and padding correctly. The underlying problem is with the padding in the #right-col div. I don't know why adding the italics sets it off, but there are just some things Man was not meant to know.

In any case, removing the padding-right and padding-left from the #right-col declaration seems to fix the problem.

If you want to keep the layout as the original, you can add in a left and right margin to the p and h3 elements within the #right-col:

#right-col p, #right-col h3 {
margin-right: 1.8em;
margin-left: 1.8em;
}
posted by chrismear at 1:52 PM on March 14, 2005

As an aside...

You should try and avoid using <i> and <em> tags and should instead put a class on the paragraph that you want to style, as per my previous posting.

Sorry gaby, but I disagree with this. Using <em> to indicate that a section of text is to be emphasised is perfectly sensible semantic mark-up. Of course it shouldn't be used as a block-level element, but it's misleading to say that it should be generally avoided.

Markup like <p class="italic"> is just mixing up presentation with content, and defeats the purpose of using CSS.

Of course, if you were designing a document that contained, for example, hints and tips interspersed in the main text, and you had decided that you wanted these types of paragraph to appear in italics, then

<p class="hint">

would be appropriate, since you're indicating what the purpose of that paragraph is.
posted by chrismear at 2:00 PM on March 14, 2005

gaby, chrismear, your answers both work.

chrismear, thanks for pointing out IE's padding problem again; I'd run afoul of it before and thought I'd worked out all the inter-browser issues. Now I'll be going through the CSS with an eye towards workarounds.

Thank you both for the prompt responses.
posted by Tuwa at 2:22 PM on March 14, 2005

Yes, I completely agree with you there. As I said:

Sorry, should have said, that's fairly hacky and swift css but should do the job.

<em> is ok and <i> should be avoided. I can't recall if this was in the CSS or the HTML 4.0 guidelines but it's certainly in there somewhere as a W3C recommendation.

I think I was in the 'just get it done' frame of mind rather than 'get it absolutely right'. I usually aim for separation of content and presentation and agree with what you're saying, class names should be chosed to describe what the content is rather than what it should look like. It's the actual CSS itself that defines how it looks.
posted by gaby at 2:24 PM on March 14, 2005

For what it's worth, I'm pretty sure that this is your bug; there's some discussion there of how to work around it.
posted by ubernostrum at 3:35 PM on March 14, 2005

Thanks, ubernostrum, that explains a bit and looks like a useful site in general.
posted by Tuwa at 4:07 PM on March 14, 2005