A very simple

[EdgeWalker]

I'm not new to web design, nor am I new to CSS, but I am really frustrated by the differences in appearance between browsers of even the most SIMPLE elements. For example, in my .css file I have

#title_box {
width:600px;
background-color: #66CCFF;
border: 5px double #000000;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 24px;
font-weight: bold;
font-variant: small-caps;
vertical-align: middle;
}

then in my .html file:

<div id="title_box"><p align="center">Title</p></div>

Below is what I get from this very, very basic snippet. First of all, which one is working as intended, and second, what can I do to make sure that from the start of my page, it looks "right" in both major browsers?

[moojoo]

first off <div id="title_box"><p align="center">Title</p></div> is a bit excessive. Align="center" should not be in that opening paragraph tag. Instead set text-align:center in the parent divs css.

Second the variance is due to the browsers differences in padding on the paragraph element. You can specify the padding/margin in your CSS as well.

You could start by adding:

* {
padding:0;
margin:0;
}

To the top of your CSS to strip all default margins and padding.

[karinne]

Also ... if it's a title, shouldn't you be using headings?

[moojoo]

Originally Posted by karinne

Also ... if it's a title, shouldn't you be using headings?

I was not going to go that deep into it but good point!

<h1> would be good.

[EdgeWalker]

Thanks for the responses!


Correct me if I am mistaken, but is this the answer I'm essentially being given? :

"The browsers have different ways of handling attributes that you choose to leave undefined. To avoid this, define all of them explicitly, i.e. padding, etc."


Also, as far as the example itself, it looks, awful, and is inefficient because it was not designed to ever be used. It was a quick way of creating a situation I could apply the question to. The snippets were also removed from context, and the text "title" was added to make sure some text was present, etc...

[karinne]

Originally Posted by EdgeWalker

Thanks for the responses. Correct me if I am mistaken, but is the answer I'm being given essentially:

"The browsers have different ways of handling attributes that you choose to leave undefined. To avoid this, define all of them explicitly, i.e. padding, etc."

Yes ... It's easier when you just set all your elements to margin: 0 and padding: 0 like moojoo stated in his first reply. Then, it's easier to manage margins and padding accordingly.

[EdgeWalker]

I guess I just assumed that css specifications, (like most other coding/programming specs) would include what the browser is supposed to do with any attributes that are not defined by the user or designer. Maybe they are, and one of my buddies up there (Internet Exploder, perhaps?) isn't following the spec.

That will teach me to assume!

[Ryan Fait]

Margin and padding are really the only two you might want to do. Just a note though, for vertical centering of text, a more x-browser way of doing it is using line-height in either shorthand or longhand.

[escaflowne11]

I have a question concerning the <h1> and <h2> elements. Im getting the impression that these tags should be used instead of the <p class=> code. This might be a bit basic, but should the <h1> tags only be used for headers, and shouldnt be tampered?

[moojoo]

Heading 1 <h1>
Heading 2 <h2>
Heading 3 <h3>
Heading 4 <h4>
etc....

And no you would not place a <h1> etc in a paragraph.

[escaflowne11]

OK that makes sense. What I was saying was that I had used h1 before in a paragraph to modify text easier, and just styled it up in the CSS. Im gonna guess that other browsers treat the headers in different ways.

[Ryan Fait]

CSS is for making text look different. XHTML is for structure.