CSS question


#1

I’m making an XHTML page template and validating it agains W3C’s HTML and CSS validators. The code checks out perfectly. Yet, I’ve got two questions:

  1. IE renders wrong: http://g-b.dk/sample1.htm
    I’ve made the entire layout by hand so that it checks out fine with W3C. It works fine with Mozilla (Firefox v0.9.2 on WinNT) but looks horrible with IE (v6.0.2800 on WinNT). Can you recommend a way to make this IE-friendly while keeping the code valid? If the short answer is “no” then so be it. :expressionless:

  2. Valid code but weird whitespace: http://g-b.dk/sample2.htm
    There’s a 4px gap under the image in this sample block, but there’s no obvious whitespace in the code. How can I close the gap while keeping the code valid? I’ve put the relevant CSS directly inline for easy reviewing.


TorbenGB . . . Get a free WebID and try out DreamHost hosting


#2

[quote]2) Valid code but weird whitespace: http://g-b.dk/sample2.htm
There’s a 4px gap under the image in this sample block, but there’s no obvious whitespace in the code. How can I close the gap while keeping the code valid? I’ve put the relevant CSS directly inline for easy reviewing.[/quote]
This one is easy. There are mainly two types of boxes: block-level and inline. An inline element is designed to flow along with text. And of course with text, you have a baseline. The baseline is the invisible line that the letters appear to sit on, and letters like j, y and g have parts of their glyphs drawn below the baseline. This concept of a baseline is represented in HTML in each line box (an invisible horizontal box in which each line of text resides.) Thus when you have an image in a line box, the image rests on the baseline for that linebox. And this happens even if the image is the only thing in the linebox.

Unless you make the image block-level. To do that, you need to do something like <img style="display: block;" >
:cool: Perl / MySQL / HTML+CSS


#3

Bingo – that did the trick!

Atropos, you get this week’s “award for good explanations”! DreamHost, couldn’t we have something like that?


TorbenGB . . . Get a free WebID and try out DreamHost hosting