some (undesired) white space in Firefox but not IE

[amandadev]

Hi there,

Please take a look at:

bluecelery.amandadevries.com/index.html

as well as the CSS and tell me why there is a white space in the table
in Firefox (that looks like a white horizontal line running through the
entire layout) which isn't present in IE (which, by the way, is the way
I want it to be).

Ignore the pixelated images (if that's how they show up for you), among
other things.

Thanks,
Amanda

[David E. Ross]

am*******@gmail.com wrote:

Hi there,

Please take a look at:

bluecelery.amandadevries.com/index.html

as well as the CSS and tell me why there is a white space in the table
in Firefox (that looks like a white horizontal line running through the
entire layout) which isn't present in IE (which, by the way, is the way
I want it to be).

Ignore the pixelated images (if that's how they show up for you), among
other things.

Thanks,
Amanda

Your HTML has 7 errors. Among them is a closing </divwithout a
corresponding open <div>.

Your CSS has 2 errors. Both of them relate to specifying a margin of
1.5empx. It must be either 1.5em or 1.5px. You can't combine em and px
into a single unit.

You should not be using tables unless you are presenting data in a
tabular form. Don't use tables to create boxes or margins.

Finally, your HTML is quite difficult to read, scattered back and forth
across the screen. For finding a bug, it's impossible to read.

Fix the errors. Use CSS and not tables to format the page. Reformat
the HTML. Then, if you still have a problem, ask again.

--

David E. Ross
<http://www.rossde.com/>

Concerned about someone (e.g., Pres. Bush) snooping
into your E-mail? Use PGP.
See my <http://www.rossde.com/PGP/>

[Ben C]

On 2006-11-06, am*******@gmail.com <am*******@gmail.comwrote:

Hi there,

Please take a look at:

bluecelery.amandadevries.com/index.html

as well as the CSS and tell me why there is a white space in the table
in Firefox (that looks like a white horizontal line running through the
entire layout) which isn't present in IE (which, by the way, is the way
I want it to be).

add

td.logo img { vertical-align: bottom; }

to your stylesheet.

Or

td.logo img { display: block; }

should work as well.

What you have there is an inline image in a table cell. Inline images
sit on the text baseline, and FF has left a bit of space below the
baseline for descenders (tails on letters like y, g, q).

Even though you've set the height of the cell to 200px, FF won't make
the cell shorter than it thinks it needs to be.

So we either tell it not to sit on the baseline, but right at the bottom
(vertical-align: bottom), or not to be inline (display: block).

As the other poster mentioned, you should fix your validation errors,
especially the unmatched </divand the "empx" sizes in the CSS.

Get this tool for a start: http://tidy.sourceforge.net, although it
didn't seem to spot "empx".

[amandadev]

wow, thank you so much.

I knew I would get scolded about the other stuff, and I'm in the midst
of learning CSS for layout, but in the meantime, bills have to be paid,
hence the table.

I'm still working out the site, and do plan to validate once everything
is complete.

Thanks again for your help,
amanda

Ben C wrote:

On 2006-11-06, am*******@gmail.com <am*******@gmail.comwrote:

Hi there,

Please take a look at:

bluecelery.amandadevries.com/index.html

as well as the CSS and tell me why there is a white space in the table
in Firefox (that looks like a white horizontal line running through the
entire layout) which isn't present in IE (which, by the way, is the way
I want it to be).

add

td.logo img { vertical-align: bottom; }

to your stylesheet.

Or

td.logo img { display: block; }

should work as well.

What you have there is an inline image in a table cell. Inline images
sit on the text baseline, and FF has left a bit of space below the
baseline for descenders (tails on letters like y, g, q).

Even though you've set the height of the cell to 200px, FF won't make
the cell shorter than it thinks it needs to be.

So we either tell it not to sit on the baseline, but right at the bottom
(vertical-align: bottom), or not to be inline (display: block).

As the other poster mentioned, you should fix your validation errors,
especially the unmatched </divand the "empx" sizes in the CSS.

Get this tool for a start: http://tidy.sourceforge.net, although it
didn't seem to spot "empx".