getting css to display properly in IE

I think you should take another look. On my 24" screen in both Firefox and Safari (Mac & Wndows) it doesn't look too good.

You haven't set a width for body. Try

Code:

body {
    .........
    width: 900px;
}

You also have a lot of empty <p> tags causing lots of blank space. I suggest you get rid of these.

In fact only IE6 & 7 seem to be displaying it correctly, or maybe I misunderstand what you intend it to look like.

 

Yeaa....whats with:
<p> </p>

<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>

 

That happens sometimes in some WYSIWYG editors where a user presses the enter key repeatedly to insert a series of blank lines. Some IDE's allow P to be substituted for <br> and know to put a space as an HTML entity so it passes validation (no empty P tags).

Good catch - this kind of thing causes the types of problems this topic is about when used for positioning purposes - i.e. font size affects the size of the space, the P tag might be overridden by other CSS, the client's browser might resize the font, etc. Such sequences can be found sometimes within actual content itself but CSS is all about separating content from style. Setting line-height is useful for content spacing, as one quick example.

For layout it's common to wrap div's around things and then use the convenient CSS properties such width, height, margin and padding for alignment and spacing of content blocks or content. Line-height can be used in this manner as well. That's why all these properties exist and are well supported cross platform.

-jim

 

Maybe have a look at Sticky Footer?: http://www.cssstickyfooter.com/

 

And this is why I prefer hand-coding everything

PS: I have no clue about your problem, sorry