Tables and CSS : IE vs Firefox Options

[drkmtr]

Hey guys!
First off, I'm new here. The site seems like and absolute gem on the internet, and I hope to have an active role here.

This is probably an issue that has come up before, but I have had no luck with the search terms i used on the site, hence this post for (hopefully) a more specific response.

I (reluctantly) agreed to redevelop a web site of a good friend of mine. I am not a web designer, per sei, but having quite a bit of experience building intranets and and doing backends for web apps, I know my way about an editor, HTML, and less so, CSS.

I have started to 'trace' the design of a website using Adobe Dreamweaver CS3. You can view my progress at:

http://84.9.246.4/integral/

As you can see, there isn't much there. Thats because I have stumbled accross a rendering problem when viewed in Mozilla Firefox (or it could actually be a rendering problem with IE...I don't know)

Thing is, when loaded in IE, it looks how I want it... that being a 3px white bottom border at the bottom of the orange navigation section.

http://84.9.246.4/ie.jpg

This is defined by a stylesheet, which can be viewed here...

http://84.9.246.4/integral/default.css

However, when the same page is loaded and view thru Mozilla Firefox, I get more or less the same, albeit it looks as if the 3px white border at the bottom of the orange navigation section has been extended, by no less than an additional 2px, making it look, in my opinion, ugly...

http://84.9.246.4/mozilla.jpg

Stuggling to find a solution to this enigma, I was using the Mozilla Firefox Web Developer Toolbar ( https://addons.mozilla.org/en-US/firefox/addon/60) to insitu tweak the CSS to suit, but to no avail.

Significantly though, Using the toolbar in firefox, I stumbled across a CSS rendering option that 'appeared' to solve the problem. Using the toolbar, clicking the CSS button and choosing 'Use Border Box Model', the page re-renders, looking exactly like the IE version.

Obviously, that is not a fix. Would someone be able to assist me by explaining what I am doing wrong in my CSS causing it to display incorrectly in Firefox, or maybe explain to me how to implement the border box model in my application of css to the tables.

In advance, I sincerely appreciate all feedback offered.

Kind regards,

drkmtr.

[pandy]

Browsers add their own styling, or the page wouldn't be readable without CSS. For example paragraphs get a margin or the text would run together. There's a slew of block level elements browsers add margin and/or padding to. And they don't necessarily do it the same way.

CODE

ul,li   { margin: 0; padding: 0 }

DW sure uses a lot of tables.

[drkmtr]

pandy,

Thank you very much for that tidbit of information. You do not realise how much you have helped in this matter.

Regretably yes, DW does use a lot of tables. Unfortunately, I am not experienced enough to use <div> though. Might I ask what the advantages of using <div>'s over tables are?

Again, many thank you's

drkmtr.

[pandy]

None. Not if you replace table-soup with div-soup anyway.

The advantage lies in using CSS instead of tables for layout. Using CSS doesn't mean you have to use DIVs. DIV and SPAN are generic elements that can be used when there isn't a more meaningful element that fit the purpose. In CSS layouts DIVs are used to create sections so they can be given a common styling. In the best case, that is. DIV and SPAN are often misused the same was as DW misuses tables. Wrapped around all and everything.

Properly written your page wouldn't be many lines of code. Then again, the markup would be much smaller with a more restrictive use of tables too. For other advantages of CSS, see for example http://www.hotdesign.com/seybold/ .