CSS and IE vs Firefox

Problems with Compatiablilty

[ddaily]

I have learning css for a few months. Being a Table guy, I really liked the power I seemed to have with css. But when I try to get it to position the same in Firefox, the boxes are a larger size and push all over the place. Should I create a redirect to a different stylesheet for each browser? Or is it just my lack of experience to be able to code css correctly? Even after I have the page looking perfect in IE. I will pull it up and all the sudden the left or right column is not long enough, or the body box has changed lengths. Maybe it is because of some content I added somewhere. If you use absolute, will this keep the boxes in the exact position? My question, will I be able to code a not too complex page to display good enough in IE and Firefox. If so, where can I find a Css Tutor!?

thanks

[ddaily]

Took a few hours but my limited knowledge did it to me again. It was the padding: 5px in my columns that made firefox block sizing different than IE. IE utilizes this incorrectly. So I had to delete the padding to make Firefox and opera look correct. That cuased all my text in my columns to be smashed up against the borders. So I inserted empty divs with 15px on either side of each block to create padding for the text. Now FF, Opera and IE all look Identical. Wonders never cease!

[KenB]

I have found that any time I define either "padding" or "margin" for an object I should always also define the other. This seems to really reduce the cross browser padding/margin issues.

I used to be a table guy in the days before CSS, but once all browsers mostly supported CSS (e.g. Netscape 4 ceased to be used) I switch fully to CSS. What I have learned is that CSS is immensely more controllable than tables.

For instance using CSS and DIV tags I have created a page layout that changes depending upon the situation. There are there are three basic sections. Section 1 is the main content, section 2 is the primary navigation menu, and section 3 is my primary ad section.

In my HTML source code these sections are in the 1,2,3 order. When the web page is rendered to the screen in a normal web browser they are displayed in a three column format with section 3 being the first column, section 1 being the second column and section 2 being the third column. This gives the page a traditional three column layout. For example:

Section 3 | Section 1 | Section 2

When a user goes to print a page both sections 2 & 3 are turned off and section 1 is reformatted to fill the printed page.

This is accomplished calling different CSS files based on the media type. for example:

<LINK rel="stylesheet" type="text/css" href="/css/main.css" media="all">
<LINK rel="stylesheet" type="text/css" href="/css/screen.css" media="screen">
<LINK rel="stylesheet" type="text/css" href="/css/printer.css" media="print">

What is even more beautiful about using CSS is that when the structure of a site is well thought out, totally reformatting the layout of the page is simply a matter of changing one or two CSS files. No recoding of the the HTML is necessary. The final beauty of CSS is that you can offload all the formatting instructions from the HTML source code to a separate CSS file that can be cached by the browser. What this means is that the HTML becomes much cleaner and more compact and thus as a user surfs around your site your pages load faster because the formatting instructions don't have to be downloaded for every page.

The key to maximizing the potential of CSS is to:
1) make sure you allow CSS to handle ALL of the formatting chores;

2) only use HTML to provide semantic structure;

3) build and test primarily using Firefox, Safari & Opera, once it looks the same in those three browsers tweak for IE (IE is where most issues lay); AND

4)(this is important) make sure all of your code validates to W3C HTML and CSS specifications (I use HTML4.01 Strict and CSS2).

Do those four things and with a little practice you will be able to code web pages that render correctly across all current browsers with very minimal accommodations for Internet Explorer.