getting css to display properly in IE

[livewire71]

I've completed my first site using Dreamweaver, www.caninescontent.net, and validated it. Everything looks fine in Safari and Firefox, but IE does not appear to be adhering to the the Box settings I used (fixed width, float left). I've read that IE does not adhere to standards as well as other browsers, but haven't found a fix for this specific problem. Specifically, I need the footer on all pages to float left (so it truly appears as a footer) and I need the main copy on the homepage to float left. Any help would be appreciated (and my understanding of CSS is limited)!

 

[nuxx]

Everything looks fine in Safari and Firefox

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

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.

 

[Sdashiki]

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

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

 

[SrWebDeveloper]

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

 

[star-fish]

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

 

[JohnDoe8450]

And this is why I prefer hand-coding everything

PS: I have no clue about your problem, sorry