In search of a CSS wizard
by Volker Weber
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 "-". ;-)
Comments
Add
margin: 0px;
to the h3-definition in hippo.css
HTH, Sascha
It might also help to use display: inline; with h3 and then use a regular line break.
Well, margin-top: 0px; would of coure suffice. 't was late ;)
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.
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.
<div id="center">
<h3>Wir kommen wieder</h3>
Sorry ;)
Go to this page. Center starts with p.
If send you an email regarding your request for help :-)
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 ;)
