IE: p elements not moving tables to their own rows, Tables are aligning next to each other in IE, but not FF Options

[zombionaleash]

Hey everyone!

I'm having a hell of a time here. I've built a website entirely in HTML (minus a couple bits of isolated flash programs) and tables. On every page, the website looks great in FF. But in IE, two pages are all messed up. I've tracked the problem down to tables not being on separate lines, even though all content around them is inside their own paragraph elements. It looks fine in FF, but IE shunts them off to the right and hides/removes the content. By adding multiple "enters", everything can be aligned again, but then it looks like crap in FF (which is obviously a smarter program). I'm using DreamWeaver CS3, and the tables look terrible in Design view too, yet there are no browser compatibility issues. I ran the pages through your online error checker, and all it gave me was "ALT attribute required in images!" which I don't really believe is required at all.
Anyway, here's the two pages. I appreciate any help you can give me.

http://www.srtuckerquarterhorses.com/foals.html

http://www.srtuckerquarterhorses.com/forsale.html
(Signature Ride's information is half-missing)

[Darin McGrew]

I ran the pages through your online error checker, and all it gave me was "ALT attribute required in images!" which I don't really believe is required at all.

Yes, it is required in HTML 4. See also Use of ALT texts in IMGs.

There are also some other errors that indicate structural problems. You can't put block-level elements inside paragraphs, for example.

[zombionaleash]

Alright, thanks for the advice. I'll include it after all.

As for the block-level elements, does that include the < p > paragraph elements? Is there a better alternative?

And..... I fixed the problem with my table alignments. By setting the tables as a whole to align center, it fixed it. I feel really really dumb now, but at least it works.

[Darin McGrew]

As for the block-level elements, does that include the < p > paragraph elements? Is there a better alternative?

A paragraph can contain only inline (text-level) content. See P - Paragraph in our HTML 4 reference, especially the "Contents" section, which explains what you can put in it. The "Contained in" section for each element tells you what you can put it in.

It looks like you can just delete the unnecessary paragraph tags. For example, replace

CODE

<p><h1>Simply All That</h1></p>

with just

CODE

<h1>Simply All That</h1>

[zombionaleash]

The header elements are left-over code. I haven't uploaded the new version, where I replaced them with font size.

Okay, I'll check out the reference link you gave me. Thanks again for the help!

[pandy]

The fact that youn float the tables left is part of the problem. I didn't figure out why it affects only Ruby and only in IE. There's no point in floating the tables on your page.

CODE

<table width="70%" border="0" cellspacing="0" cellpadding="8" align="left">

[Darin McGrew]

The header elements are left-over code. I haven't uploaded the new version, where I replaced them with font size.

That is a step in the wrong direction if the text is logically a heading. Don't use <font>. Use markup that means something, like headings, paragraphs, lists, etc.