CSS Site, Fine in ie, firefox slightly deformed

[reyna12]

Link
CSS

It looks how i designed it in IE but in firefox the layout seems to be all over the place.

[ahallicks]

Well that would be because you've designed it for the none-standards compliant browser! You'll find it a lot easier to code a web site for Firefox and then use hacks/conditional statements to get the correct rendering in IE, rather than the other way round.

The first thing I would add, if I were you, is the Universal Selector as it will completely zero out all margins in IE and Firefox, giving you a more supple base to begin building your pages on. IE and FF add their own, so cancelling them out makes it much easier to build a page that looks the same in both browsers.

To center your page you don't need all those negative margins and positioning, just use:

#maincontainer {
	width: 776px;
	height: auto;
	margin: 0 auto;
	overflow: hidden;
}

I'm not sure what you are using as a background to your site, but it would be best to put it here so that it would stretch the height of the container div, and therefore all of your content.

Your footer would probably be better placed inside the container and all of that positioning removed again:

#footer {
	width: 780px;
	height: 31px;
	background: url(images/footer.jpg) no-repeat;
	float: left;
}

Just some tips to start with... plus you have some validation errors it would probably be worth sorting out too.

[reyna12]

Thanks

Decided just to re-do it, code it for firefox instead and seems to have worked out well.

http://www.designerhost.co.uk/fireplace/firefox.html

Not checked for validation errors.

Shame about the jaggy fonts though, any way to sort that?

[ahallicks]

Hmmm... two options... change them to images (not overly semantic, although they can have an alt tag) or try a different font. More and more frequently I'm finding that design I create in Photoshop simply don't look as good in browsers because they aren't able to render smooth, large fonts.

I thought I'd let you know that I've stolen the code for the javascript thingy to use on my site, sorry! I like it so went through and took the relevant bits, hope you don't mind!

I would suggest that you start indenting your code. I've checked for validation again and you have no alt tags in any of your images, which the doctype and web standards ask for. You can also get rid of the 'tabindex' as that is not required for anything as far as I can tell? And you are still missing a closing div, or have one too many open? Indent your code properly and you should be able to see which one it is you are missing