How do I get Safari to treat this CSS like IE?

November 2, 2004 1:22 PM

HTML/CSS question. [MI]

Link to the offending page (My server)

There are supposed to be three boxes, each containing a small image, and some text. It looks fine on IE6 for Windows, but on Safari v1.2.3 for Mac OS X, the boxes aren't high enough, and the image extends out of the top of the box.

Why?

posted by Mwongozi to computers & internet (5 comments total)

A link to the CSS might also be useful
posted by Mwongozi at 1:23 PM on November 2, 2004

Just so you know that it's wrong on firefox 1.0 on XP too. The span seems to be the box according to the DOM inspector.

Sorry not to be more help, just thought you might want to know
posted by Flat Feet Pete at 1:28 PM on November 2, 2004

It's an inline display thing. The span borders wrap to the text dimensions; the inline image bleeds out of the text dimensions. It's how it's supposed to work.

If you change the span to display:block and float:left, it works the way you want it to. Or use left-floating divs instead of spans.
posted by DrJohnEvans at 1:38 PM on November 2, 2004

Okay, doing the block/float thing works, but then "Stuff down here" ends up next to my boxes, instead of underneath...

Plus I can't help feeling I've just done an ugly hack.
posted by Mwongozi at 1:42 PM on November 2, 2004

Yeah, you'll have to use clear to move the offending "Stuff down here". I'm not sure exactly what you're planning on putting down there, but it shouldn't be too tricky.

If you want it to be more elegant, why not make your series of spans/divs an unordered list, and style the <li> elements?
posted by DrJohnEvans at 2:00 PM on November 2, 2004