Basically i'm coding a website for my friend, don't visit the main page - it's just hosted on my domain, i don't want to advertise. The site is: http://samcode.net/CodeLodge/ The problem is: I can get it to work perfectly with my IE text size etc, but on firefox or a textsize smaller/bigger it mucks up and looks out of place. What can i do to ensure it will work for everyone?
Well, fonts do look differently in different browsers. I usually use Verdana as my main font, it looks ok in almost all browsers. By the way, there's a gap between your image and background in Firefox.
That is the problem, what can i do so it works for everyone? I guess i can change the font, but the images are still different. Help appreciated!
You won't be able to unless you use a font that obeys the system metric across all browsers, such as point (which does have its drawbacks on the screen. I personally set the font size and leading (line-height) to 85%/140% respectively in the body selector, then use Lucida Console to ensure that my containers are wide enough to hold any sans-serif font on the screen, regardless of what font the visitor has on his or her computer (and whether said visitor has decided to override the author stylesheet).
It's not really about the Fonts, that can be sorted quite easily. It's more the screen size and the images not fitting together etc.
Do you mean on the menu tabs? That can be taken care of using the Sliding Doors technique. As for the header, I'd use a DIV with an IMG for the actual logo, and then apply a background to the DIV to make the logo image blend in with that.
I see that in your CSS file that you use the word "small" to set the font size. Don't do that, this is probably why it's happening. Change the small to a font size number, to make sure that the all the browsers display a uniform text size.