CSS looks different in each browser

[samijones]

I am a student at BCIT for its Applied Web Development Certificate program. I am designing/developing a website for someone on a volunteer basis. I did the layout in CSS. It looks the way I want it in FireFox. But, when I look at it in Safari, it looks horrible. How do I make it look the same in each browser??

http://signalflare.ca/students/samanthajones/HTML/

Samantha

[felgall]

Override those defaults that are different in each browser by specifying values of your own for the browsers to use.

For example different browsers set different margins and padding around various elements. Some people use:

* {margin : 0; padding : 0;}

to override that and set all of the margins and padding not explicitly set elsewhere in the stylesheet to zero.

Another problem with your design is that you are assuming that certain elements will have certain sizes and moving other elements using negative margins based on those assumed sizes so in every other browser where it ends up being a slightly different size all thhe content ends up displaced. Properly coded stylesheets shouldn't need negative margins.

[Centauri]

"Applied Web Development Certificate program" - what the heck are they teaching you???

You cannot expect to use a composite single background image like that and expect to align and constrain different sections to line up with it, especially when you reference the graphic to the centre and reference everything else to the left edge - it only sort of works at one particular screen size with one particular font size, and breaks badly when either are changed.

You need to think CONTENT. All textual content (including that which will be shown as graphics) needs to be semantically marked up as textual elements to provide meaning to the page. Then the composite graphic can be broken down into parts representative of the content components, and things styled the way you want it to look.

Makes me wonder whether the course teachers are 10 years behind in web development....