Positioned differently in Mozilla versus IE, etc....mystery?

[puffnstuff]

I am new to website development. I can't seem to figure out how to get stuff to display the same (positioning) across the different browsers.
Here's an example:

http://www.bossteel.com/News/HomeDepot.html

The text section of the page (the part that begins "Steel Goes Retail...") seems to start further down on the page when viewed in Mozilla, Safari, etc., when compared to I.E. It's very frustrating because I can't seem to compensate for the differences to make it look right in every browser. The same thing is happening on all the pages. Other websites I have looked at don't seem to have the same problem.

So, there must be something very fundamental that I am missing in the code.
Any advice is most welcome. Thanks in advance.

[Twey]

The most common cause of this is padding and margins, whose defaults differ between browsers. To this end, a lot of web developers remove all margins and padding to start with:

* {
  margin: 0;
  padding: 0;
}

... then specify it explicitly.

[puffnstuff]

ok , I can try that. Do I put it EXACTLY like you have above with the asterisk *, anywhere in my CSS file?

[Twey]

Put it at the top. This will probably seriously muck up your page design. Fix it by specifying the margins and paddings explicitly, and your page should be a lot closer in many browsers.

[puffnstuff]

Ok, I made the change. It certainly helped with the positioning. Now the text is (almost) where it should be in all the different browsers.

HOWEVER....now the page is left-justified in Mozilla and Safari, but still centered (it's supposed to be centered) in IE.

Is there anything else I can add to the CSS statement to bring everything back to the middle of the screen?

[Twey]

Try:

table {
  margin: 0 auto;
}

Some other things you might want to do are:

1. Drop Dreamweaver. WYSIWYG editors always generate code of an inferior quality, and in this case the cruft is very clearly visible.
2. Stop using pseudo-XHTML (served with a text/html MIME-type). This results in effectively very poor code, even if it seems to validate. You have two options: either switch to XHTML (with the application/xhtml+xml MIME type), preferably Strict since Transitional has been effectively outdated for a very long time now, or switch to HTML (with a text/html MIME type and an HTML DOCTYPE, which should be nothing less than HTML 4.01 Strict). If you take the former option you will lose support for IE, which can't parse XHTML yet.
3. Stop using tables for layout. Table-based layouts were a hack to allow complex layouts before CSS was developed. CSS is very well established and supported now, so tables should be relegated to their proper function: displaying tabular data.

[puffnstuff]

Thanks for that. It seems to be getting better. Now I just have to put back some of the spacing that was originally there. No big deal.

As for point #2 (pseudo-XHTML). ???? You're speaking Greek to me. I don't even know what all that means.

As for point #3 (stop using tables).....easier said than done. I am totally new to CSS, so to have to re-write an entire website would be extremely difficult and time-consuming. If I knew how, I would do it, though.


Now I only have one other major complaint, regarding scrolling when the text is longer than the defined area. Everything looks great in ie, FF, etc. Only when I view it on a MAC (Safari) do I see problems. And only for certain pages. For some reason, the background repeats. Only on this one page, and only in Safari. Other pages have scrolling text and the same definitions, yet they seem to work fine. The code I'm using for scrolling is:

<div style="border:none; background:transparent; padding-top:0px; padding-right:10px; padding-left:4px; width:386px; height:298px; overflow:auto;">

and the page in question is: http://www.bossteel.com/Services/Services.html

I will also post this as a new thread, since it's really a new problem altogether.

[boxxertrumps]

Pseudo means a mixture of two things, in this case, html and xhtml.
you have the actual code in xhtml, but it is being sent with the html mime type.
That's a no-no. use this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>BOSS Steel News Page -- HOME DEPOT</title>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=iso-8859-1">

[pcbrainbuster]

What I would do is use the body onload event and just simple browser detection to place everything perfectly... But hey its just an idea...

[Twey]

No, "pseudo" means fake, false. In this case, the code looks like XHTML, but since it's being sent as text/html, it isn't: it's fake XHTML, pseudo-XHTML.