How do you get your site to appear the same in all web browsers?

Question

There are some things that show up differently in Safari than they do in IE and Firefox, how do I get everything to jive the same? I think it is in the code which I am not an expert on.  My website was a template that I purchased online and most of the code was already built in.  I have some of my links in Safari showing white when you rollover them but when I look in IE and Firefox they're not there.  Can anyone offer any suggestions on how to fix this?
Thanks

Answer 1

Actually what you are learning here is to create a stylesheet for all of your web pages. Including all of your styles inline in the page's code is very cumbersome.
Each of your pages needs code that refers to your stylesheet:
<style type="text/css" media="all">
@import url("../../css/content.css");
</style>
<style type="text/css" media="print">
@import url("../../css/content_print.css");
</style>
This assumes that your stylesheets (in my case, one for print, one for browsers) are located in a folder called /css which is a habit I have for neatness.
One thing that Dreamweaver does very well is keeps track of your styles and helps you edit styles to suit. I'm using CS3 which doesn't really allow you to look at the result of rollovers from within the application, but I keep Firefox handy for previewing. Problem is, once you create a style for a "visited" link, you can no longer see the result of the style for unvisited links in your browser unless you clear your browsers cache. Dreamweaver CS3 always shows links in their unvisited state.
There is other code I use to make Microsoft's non-compliant browsers do the right thing, though rollovers, visited, and such all tend to work the same in all browsers, save the most antediluvian.
<!--[if IE 5]>
<style type="text/css">
/* IE 5 does not use the standard box model, so the column widths are overidden to render the page correctly. */
#outerWrapper #contentWrapper #leftColumn1 {
  width: 185px;
</style>
<![endif]-->
<!--[if IE]>
<style type="text/css">
/* The proprietary zoom property gives IE the hasLayout property which addresses several bugs. */
#outerWrapper #contentWrapper, #outerWrapper #contentWrapper #content {
  zoom: 1;
</style>
<![endif]-->
The above code handles issues with Microsoft's intransigence pretty well, and my sites tend to look really uniform. But in the case of menus, I often have to write a completely different stylesheet to wrestle with Internet Exploder:
This is stylesheet reference for my menus:
<style type="text/css" media="all">
@import url("../css/menu/menu.css");
</style>
<!--[if lte IE 6]>
<style type="text/css" media="all">
@import url("../css/menu/menu_ie.css");
</style>
<![endif]-->
Then I craft the changes for Internet Exploiter 6 in a separate stylesheet.
This should give you an idea of how powerful an external stylesheet can be. You can use "if" statements to handle the differences between the Microsoft non-compliant browsers and the more modern and compliant browsers, like Safari, Firefox and Opera.
You can see the result in any browser at http://www.readingsbykaren.com