Cross Browser Compatibiliy - Aligns in IE but not FF

Can anyone help me out as to why this layout (http://radiantstatic.com/champs) is perfectly aligned and text is correctly positioned while as in FF it isn't. Its all valid as I have run it through both CSS and XHTML validators. Any help would be great, I've been stuck on this issue for ages!

 

great everything text related is fixed now. any reason there is a gap between the header div and the content div as well as the content div with the footer div?

 

Default margins and padding, which vary from browser to browser. What I do is reset the margins and padding on every non-form control element by placing the following at the top of my stylesheet.

html, body, address, blockquote, div, dl, form, h1, h2, h3, h4, h5, h6, ol, p, pre, table, ul,
dd, dt, li, tbody, td, tfoot, th, thead, tr, button, del, ins, map, object,
a, abbr, acronym, b, bdo, big, br, cite, code, dfn, em, i, img, kbd, q, samp, small, span,
strong, sub, sup, tt, var {
	margin: 0;
	padding: 0;
}

Code (markup):

Then I set the default styles for the body (which then cascade to the rest of the page elements).

body {
	background: #FFF; /* change to suit your site of course */
	color: #000; /* change to suit your site of course */
	font: normal 85%/140% "lucida console", tahoma, verdana, arial, helvetica, sans-serif;
	letter-spacing: 1px;
}

Code (markup):

Note that I use EM for the widths of my containers and font sizes from here on out, using the Lucida Console font to ensrue that just about any font the user has on his or her system will fit inside their containers without breaking the layout. If I'm dealing with a fixed dimension (like text on images) I'll either go for pixels for the text on the image or use some advanced CSS trickery to make the image appear to be dynamic so the text can resize along with it (using EM for the font size of course). When I'm done with the site, I remove the Lucida Console font from my declaration but leave the container and font size values alone.

Headings of course are another matter entirely, and thus they normally get styled (by me anyway) like so:

h1, h2, h3, h4, h5, h6 {
	font-family: georgia, garamond, "times new roman", times, serif;
	font-weight: bold;
}

h1 {
	font-size: 1.75em;
	line-height: 1.8em;
}

h2 {
	font-size: 1.5em;
	line-height: 1.55em;
}

h3 {
	font-size: 1.05em;
	line-height: 1.1em;
}

h4 {
	font-size: 0.95em;
	line-height: 1em;
}

h5 {
	font-size: 0.85em;
	line-height: 0.9em;
}

h6 {
	font-size: 0.75em;
	line-height: 0.8em;
}

Code (markup):

And then followed up with some browser-specific patches before I start working on the actual layout:

img {
	border: 0;																/* this squashes a Firefox bug */
	display: block;
}

table {																		/* I'd like to have all the browsers on the same page with regard to tables - this does it */
	border-collapse: collapse;
	empty-cells: show;
	table-layout: fixed;
}

.skip {
	position: absolute;
	left: -999em;
}

Code (markup):

Notice the class of "skip" - this is used to hide "skip links" from the browser. You can use some different CSS to hide the element from the browser by default and then make it appear when hovered over or given an active state. Molly Holzschlag's blog www.molly.com has an article on how to do this, IIRC.

Oh, and if yo don't mind me being a nit-pick, this looks like a list of links to me:

<div id="navi">Link :: Link :: Link :: Link :: Link :: Link :: Link :: Link</div>

Code (markup):

So I'd use an unordered list with an ID of "menu" instead (oh, and structurally speaking, menus should never appear in headers, since they can be over-laid with CSS using margins, and you never know when the design may have to change or what it will look like so having the major sections of a Web page - header, menu(s), content, sidebar(s), footer - separated from one another will help immensely; note that footer menus can be placed inside the footer, especially given that styling their locations and appearance will be much easier this way due to the limits of the current CSS specification and cross-browser support).

<ul id="menu">
	<li><a href="#">Menu Item</a></li>
	<li><a href="#">Menu Item</a></li>
	<li><a href="#">Menu Item</a></li>
	<li><a href="#">Menu Item</a></li>
	<li><a href="#">Menu Item</a></li>
	<li><a href="#">Menu Item</a></li>
	<li><a href="#">Menu Item</a></li>
	<li><a href="#">Menu Item</a></li>
</ul>

Code (markup):

 

Hey Im having the same problem with the different browsers too.(http://css-example.digitalprodusa.net) is perfectly aligned and text is correctly positioned while as in FF, NS and Opera, it isn't.

Any help would be great and many thanks in advance

CHEERS

 

Very informative and helpful, Dan. But never used this before:

table {																		/* I'd like to have all the browsers on the same page with regard to tables - this does it */
	border-collapse: collapse;
	empty-cells: show;
	table-layout: fixed;
}

Code (markup):

will try it next time dealing with table data. And one question, though, is there any difference among them:

* {margin:0;padding:0;}

Code (markup):

html * {margin:0;padding:0;}

Code (markup):

html, body, address, blockquote, div, dl, form, h1, h2, h3, h4, h5, h6, ol, p, pre, table, ul,
dd, dt, li, tbody, td, tfoot, th, thead, tr, button, del, ins, map, object,
a, abbr, acronym, b, bdo, big, br, cite, code, dfn, em, i, img, kbd, q, samp, small, span,
strong, sub, sup, tt, var {
	margin: 0;
	padding: 0;
}

Code (markup):

 

Yes, there is a difference. The first targets ALL elements, the third targets all the elements listed (the ones that are not form elements, form controls or CDATA), and I don't recall what the second one targets since I never use it (nor have had a need to).

 

Thanks Dan. I use YUI CSS reset most of the cases, works out good.