In search of a CSS wizard

by Volker Weber

hipposaf.png hippoie.png

I am having an alignment problem with Internet Explorer. Once again. Please take a look at this site. The left picture shows how the site is supposed to render, and that works with all other browsers except Internet Explorer, which renders the site as shown in the right picture.

There is one fixed width container with margin:auto containing the site. Inside that container is one box for the header, which contains one box for the logo and one for the title. Below that box there are two floats left and right (this one empty for now) and one fixed center box. Below is a footer.

The center box hangs in IE. What do I need to change?

Update: The solution is to add a class descriptor to the first element in each of the three columns, like this <p class="firstline"> and then define .firstline with margin-top: 0 in the CSS file. Thanks to all of you for your patience while explaining this to me, and to Sascha in particular for finding the extra "-". ;-)


margin: 0px;

to the h3-definition in hippo.css

HTH, Sascha

Sascha Carlin, 2004-11-02

It might also help to use display: inline; with h3 and then use a regular line break.

Heiko Hebig, 2004-11-02

Well, margin-top: 0px; would of coure suffice. 't was late ;)

Sascha Carlin, 2004-11-02

Why would I do this to h3, if center starts with p as in the picture above?

I think this is a box model error. And I need the workaround for this without going to tables or the humongous IE7 hack.

Volker Weber, 2004-11-02

Well, thats h3 and not p, if I do not miss something obvious ;)


Wir kommen wieder

And headings do have margins in IE's default template, so we need to disable this by setting al least margin-top to zero pixels.

Sascha Carlin, 2004-11-02

<div id="center">
<h3>Wir kommen wieder</h3>

Sorry ;)

Sascha Carlin, 2004-11-02

Go to this page. Center starts with p.

Volker Weber, 2004-11-02

If send you an email regarding your request for help :-)

Dirk Bartkowiak, 2004-11-02

For the sake of completeness:

It seems IE adds an extra top (and bottom) margin to headers and paragraphs by default (and to other tags maybe, too).

So we need to override this by setting margin-top (margin-bottom) to zero pixels.

But we do not want all headings and paragraphs to have no top/bottom margin, so we create a CSS class called first-line with margin: 0px; We apply this class to the blocklevel elements our content divs begin with.

I don't know whether there are other possibilties to achieve/circumvent this -- I am no CSS guru but a CSS pragmatist. This solution works and validates, and this is enough for the time being ;)

Sascha Carlin, 2004-11-02

Old archive pages

I explain difficult concepts in simple ways. For free, and for money. Clue procurement and bullshit detection.


Paypal vowe