:: XHTML Problem in Firefox

[Klayemore]

Hi, i have created a site that can be viewed at http://www.members.westnet.com.au/grymrr/tickner.

The problem is that in Internet Explorer it displays fine, however in Firefox the tables are all stretched out etc. I am guessing that it has to do with my CSS scripting somewhere. Could someone please take a look at it and tell me what is wrong because i am new to XHTML and have no clue!

CSS layout Coding:

body, html {
margin: 0px;
width: 100%;
height: 100%;
background-image: url(../images/layout/background.gif);
background-repeat: repeat;
}
#contentholder {
width: 700px;
height: 100%;
padding: 0px;
background-color: #FFFFFF;
}
#content {
padding-left: 18px;
padding-right: 18px;
padding-bottom: 18px;
padding-top: 5px;
vertical-align: top;
font-family: verdana;
font-size: 11px;
color: #89A0C3;
background-image: url(../images/layout/content-background.jpg);
background-position: right;
background-repeat: repeat y;
}
#footer-left {
padding-top: 5px;
height: 39px;
width: 429px;
background-image: url(../images/layout/footer.jpg);
background-repeat: no-repeat;
background-position: bottom left;
}
#footer-right {
padding-top: 5px;
height: 39px;
width: 271px;
background-image: url(../images/layout/content-background.jpg);
background-position: right;
background-repeat: repeat y;
}
.footer-fmlogo {
margin-left:10px;
margin-right: 15px;
margin-top: 7px;
float:left;
}
.footer-cpalogo {
margin-right:10px;
float:right;
}
#header {
padding: 0px;
height: 119px;
width: 700px;
vertical-alin: top;
}
#navbar {
padding-left: 15px;
height: 32px;
}

If somebody could help me then this would be much appreciated. Thankyou!

[mwinter]

The problem is that in Internet Explorer it displays fine, however in Firefox the tables are all stretched out etc. I am guessing that it has to do with my CSS scripting somewhere.

It's actually the lack of CSS. Paragraph (p) elements have margins in most browsers, but you haven't removed it.

i am new to XHTML and have no clue!

Let me give you some advice then: don't use XHTML. At least don't serve it. Many user agents don't support it, including IE. Use HTML instead.

background-image: url(../images/layout/background.gif);

Whenever you use background images that form the background for text, always specify a background colour. If the image isn't loaded, for whatever reason, you need to make sure that a suitable colour will take its place.

font-family: verdana;
font-size: 11px;

Verdana is not usually a good typeface to use. The fact that it's too large at 'normal' sizes means that fallback fonts will end up being too small - unreadably so, most of the time. Similarly, micro-fonts are undesirable. Whilst they might look good in an asthetic sense, they are often difficult to read, which kind of defeats the purpose of publishing information: why bother if it can't be read?

One other problem with that page as it stands is that the signature text in the footer overflows when viewed at a reasonable font size, thus it sits in a low contrast region. Trying to fit text within a small, fixed-image bound region is usually a bad idea because it will fail to render properly when exposed to user settings.

I've prepared an alternative version that uses mainly plain text, and achieves more-or-less the same layout. It also uses only CSS to produce that layout - not a single table. The images are rough PNG reproductions of the originals: I had to borrow the "Andew Tickner" text as I don't have that typeface. Finally, notice that the layout isn't fixed and can cope with a relatively small viewport size - only the header image imposes a constraint (514px width).

Mike