Topic: CSS Compatibility Help Needed

Okay, I am really new to a lot of things in web design, but mostly new to using CSS throughout my site. I finally worked out a way to accomplish what I wanted to do using an external style sheet with div classes, but it doesn't work at all in Netscape 6x. Can someone offer me some expertise, or am I pretty much screwed for making this work in NS?
http://www.bradandmelissa.net/index2.htm

I'd appreciate any help you could offer. Keep in mind that I am just learning about CSS.
~Nethermind

Eek.

Do you know that you can indent CSS and insert line breaks wherever you want? You can make it a *lot* more readable that way.

In addition, your style sheet contains lots of duplicated style information. You could simplify that a ton by doing:

.acc, .extras, .email, ..., .weddingparty {
... stuff here that you're repeating multiple times ...
}

Secondly, use a doctype. http://www.alistapart.com/stories/doctype/

Finally, the reason the background is staying in one place is because you set background-position:fixed. It's doing exactly what it should be doing in Mozilla; IE is wrong in this case to ignore the background-position:fixed CSS property.

Arr yeah, I checked this yesterday on IE5.x Mac and the background wasn't working poperly either.

Id say your better off using a centered <div> or <p> with the backgorund-image property as oposed to setting the background in the body element. Then put the content text inside that using <br />'s for the line breaks and <span></span>'s for inline text styles as opposed to seperate <p></p>'s for each sentance.

Please take a look at the site now and give me your thoughts. I got rid of all the duplicate stuff, Slime, thanks for showing that to me. This is a holdover of having taught myself without many books (just looking at other people's code to learn). I am so used to hacking out code to make something just work, I am now trying to learn how to do things "properly." You guys will make a reputable coder out of me for sure!
http://www.bradandmelissa.net/index2.htm


I still haven't put in a doctype, but I will do that tonight.
Thanks again.
~N

Dracusis,

I didn't quite understand what you were suggesting, sorry. Is it the background image you were referring to, or my overuse of <P>?

~N

Arrr.. Both.

I'll check the background out tommorow as I'm not on my PC right now (this thing only has IE)...

Remember, the <p> tags are for paragraphs ot text and using them for each sentance will only bloat the code like what you've done on your front page. Your also using font tags which is a really unclean way to do things. It's not really big issue but something like this would be cleaner IMHO:

<p id="index">

<h2 class="heading">News from the bride and groom:</h2>
<h3 class="subHeading">(16 February 2003)</h3>

Greetings, everyone! The official Coverdale McQueen Dining Guide is now posted! Check out some recommended entrees and local hot spots <a href="dining.htm" target="_blank">here</a>.

<br />
<br />

Brad has completed his part in telling us his hopes for their future under Their Story, and it was worth the wait!

<br />
<br />

Be sure to keep checking this page for further updates soon, including Valentine's Day photos and more.

<br />
<br />

2002 Holiday photos <a href="photos.htm">here</a>.

</p>

Then just apply the font setting to the "index" and "headings" ids and classes using CSS... So much cleaner and this way if you want to change the font face, colour or size it's as by changing the style sheet. This is the way your meant to code HTML when using CSS.

[This message has been edited by Dracusis (edited 02-25-2003).]

Hm, Drac, sorry to pop in in the middle of this, but are you really supposed to place <h> tags inside <p> tags like in the example?
Doesn't feel right to me.
/Dan

{cell 260}
-{ a vibration is a movement that doesn't know which way to go }-

Thanks for taking time to explain, Dracusis. I was using breaks instead of paragraphs until recently, when I was led to believe that it was a less preferable way to do things. I will change the code accordingly.
The residual font tags are because I only recently started using style sheets, and I still have a lot of cleaning up to do.

I tested the new pages in both Netscape, Opera, and IE, and it's relatively consistent. Unless there's a huge reason for me to change this part, I'd rather keep it as is. Unless, of course, it breaks in another browser.

Thanks again for the advice.
~Nethermind

DmS, I'll address your question, if I may.

The <p> tag is, by no means, the same as the <P> tag in yesteryear. When I say that, I mean that the 'p' in the current-day <p> tag does not mean 'paragraph.' I don't know what it means, but we can't think of it like that. It's more like a block than anything else.

Which is to say if a header element is *meant* to be in a block, it's fine to put it in there.

*I* wouldn't suggest it, as spiders organize content reading first by header elements, then paragraph elements, then strong/em elements, in much the same way Microsoft Word does (which annoys me to no end, because I never use the damn styles when I'm writing a report, and I hate that it's telling me what the structure of my paper is, because it's always wrong...but that's for later). Additionally, text-browsers organize in much the same way. To screw with that is to invite sadness.

Now, as for what Drac pointed to in his code, *I* would not suggest doing it that way. *I* would suggest using <p> elements rather than <br /> elements, because <br /> elements are meant for single-line-breaks. When you use two in a row, you're using a <p>...</p> block, only without the cleanliness of code. <br /> elements are, in my opinion, best used for putting an image up top, and text directly below...and they should always be used in <p>...</p> blocks.

...So, uhh...Who wants pie?

Twitch: I'm not positive, I'll have to look it up, but I think there are specific restrictions in HTML/XHTML that Header tags cannot be within Paragraph tags.

I would also argue that the "p" does stand for paragaph, since it's important to think of tags in terms of the type of data they hold rather than their formatting, but i won't push that one =)

I would tend to agree with Slime on this one...

But I'll take some of that pie if you're still offering.

So, now that all the experts have weighed in, is there any concensus as to which is the cleaner code in this case: P or BR? I understood the rule just like twitch explained, but I don't know enough to be devoted to any particular coding style (although php is quickly winning my heart, but that's another story).

And I prefer key lime, if you have it. Goes best with rum punch.
~N

Hot diggety, I'm an expert!

Personally, I don't use <br>--I really can't think of a case where I couldn't accomplish the same thing in a cleaner way. As for twitch's use of <br> (putting some space between a photo and the text), that can easily be accomplished by giving the image a bottom margin in your styles. As a general rule, I try to deal with structure in my HTML and handle the actual formatting in CSS. In a word, CSS makes <br> unnecessary.

Oh, and for what it's worth, I don't see anything wrong with using a bunch of <p> tags. They set off blocks of text, no matter what size that text may be.

Mmm... key lime pie... too bad I can't get any around here... :{

That's some interesting response.
twItch^ - I can see where you are coming from but accordingly to your reasoning:

quote:

---

The <p> tag is, by no means, the same as the <P> tag in yesteryear. When I say that, I mean that the 'p' in the current-day <p> tag does not mean 'paragraph.' I don't know what it means, but we can't think of it like that. It's more like a block than anything else.

Which is to say if a header element is *meant* to be in a block, it's fine to put it in there.

---

It reminds me a lot more of the use of the <div> element (which is a container element, I know) than the <p> element.

This part:

quote:

---

I* wouldn't suggest it, as spiders organize content reading first by header elements, then paragraph elements, then strong/em elements,

---

I couldn't agree more!
Especially as accessability tools are based on spiders and a strict interpretation of all tags surrounding elements.

As for valid code, HTML Tidy frowns on that type of structure, plus it will not be validated as 4.01 Transitional. I havn't found the actual rules on it yet, but so far it all points to it not beeing valid code.
/Dan

{cell 260}
-{ a vibration is a movement that doesn't know which way to go }-

Some quick thoughts:

1. Even if the meaning of p isn't the same (got any resources on that?) I would suggest you use div instead of p for defining blocks like that as:

a) The p tag often comes with default settings whereas a div doesn't.

b) As you say it still has 'meaning' to things like search engines and reading browsers (for the visually impaired) should also interpret a p to mean a paragraph.

2. I've said it before - you should never use multiple <br /> and esp. not to get vertical space - either use p tags (if it is a paragraph) or use margins/padding on divs.

On the nesting of tags:
www.cs.tut.fi/~jkorpela/html/strict.html

But this isn't very helpful - I'd run it through the validator.

___________________
Emps

FAQs: Emperor

From the W3C:

quote:

---

The P element represents a paragraph. It cannot contain block-level elements (including P itself).

We discourage authors from using empty P elements. User agents should ignore empty P elements.

---

So, yes, the <p> tag is supposed to enclose a paragraph of text. In deciding whether to use <p> or <br>, think, "is this a full paragraph?" Not in terms of visual presentation, but in terms of structure. Paragraphs can be single sentences, but choose as best you can.

Now, I believe heaader tags (h1 - h6) are considered block-level, which means they're not allowed in P elements, as said above. The W3C spec doesn't explicitly say this, although it is implied, since header elements have line breaks before and after them by default. This page http://www.wdvl.com/Authoring/HTML/Block/ seems to think they're block-level, and I've been under the impression that they are also, so I wouldn't put headers within p tags.

[edit: Here's an idea. Try validating it. See what the validator says about it.]

[This message has been edited by Slime (edited 02-26-2003).]

Validator?
Either that's a device that I am not familiar with, or it refers to a scary inmate in Block Nine: (Vlad the Validator).

((googling))

What do you know? Vlad the Validator
Man, I feel like I've been walking sightlessly through this coding world for years! I don't even know the simplest of things. It all comes from spending too much time in the basement, I guess.

~N

Yup, that's the validator I was referring to.

Also check out www.w3.org . The site can be difficult to navigate, but it contains the specifications for basically all of the languages used in web design (the most notable exception being JavaScript).

My god. Did I cause all this.

Heh. My bad. It was late, no it was early... Eh, regardless I hadn't sleept for a good 20+ hours when I wrote that and I was trying to kill some time before I left the house for school.

Use <div id="whatever"> then <h>heading</h> then <p>content</p></div> instead. Problem solved.

Yah, ditch the <br /> tags. I don't know what I was thinking -- but you can definatly strip out all those ugly font tags and just use CSS classes in your <p> tags instead.

Okay, not to beat a dead horse, but since I am learning so much, I thought I'd post an example of my reformed code and get feedback, especially from you, Dracusis.
http://www.bradandmelissa.net/dining.htm

I defined stuff in the css as instructed instead of putting all that bulky code into the document. Is this rather extensive use of headers okay, though? I couldn't think of another way to define what I wanted to happen there. I have only about 3 <br>'s and no font tags in the document now. It's so strange to be learning such basic things differently - still learning how to use style sheets appropriately.

~N

Your usage of headers isn't bad, but needs some tweaking.

You've got the <h1> right - the most important tag on the page. Excellent.

But then you skipped <h2>, I believe. You should use <h2> where you're using <h3>. It's generally bad coding style to skip heading levels like that.

Finally, you're using headers in some places that aren't headers at all. For instance, you wrapped the location of restaurants in headers. You shouldn't do this because the locations are bits of information about the current topic, not the beginning of a new sub-topic. For these, I would recommend using a paragraph (<p> ) tag, perhaps with class="location", and a CSS style for such paragraphs.

The usage of headers for things like "recommended dishes" and "average cost" is excellent. Just change your heading levels so that the main heading is <h1>, the restaurant names are <h2>, and the sub-headings like "recommended dishes" are <h3>, and style each heading type appropriately with CSS.

Finally, the majority of the text on the page is not within <p> tags. Generally, you should put such text inside <p> tags - for instance, this:

<h3>$$Conchy
Joe's-</h3> <h4>3945 NE Indian River Drive Jensen Beach (561)489.8554</h4>
Award winning seafood served with old Florida riverfront hospitality, native
&amp; Bahamian seafood dishes, raw bar &amp; rum punches bar open 11:30am
until closing, excellent happy hour.

should be this:

<h3>$$Conchy
Joe's-</h3> <p class="location">3945 NE Indian River Drive Jensen Beach (561)489.8554</p>
<p>Award winning seafood served with old Florida riverfront hospitality, native
&amp; Bahamian seafood dishes, raw bar &amp; rum punches bar open 11:30am
until closing, excellent happy hour.</p>

In order to remove the space above and below <p> tags, use CSS to set the margin-top and margin-bottom properties to reasonable values. (You might want to set them to 0, or maybe just a few pixels, or maybe relative to the font size, or something.)

A good test to see if you've coded your HTML well is to remove the style sheet. Just comment out the link to the style sheet and see what the page looks like. See if the headings and paragraphs make sense. In fact, when writing content, this is sometimes the best way to write it, because it keeps you from making the mistake of writing the HTML with visual presentation in mind.

A few other points:

1. The header gif at the top was clearly designed for a white background. You should fix that. You should also add alt text to the image (<img ... alt="Madame est servie! Brad and Melissa's Official Dining Guide."> )
2. The tables aren't necessary, believe it or not. The layout of this page could be CSS-only without too much difficulty. Worry about that last, though, because it requires some more advanced CSS - especially the centering, which very few people get right the first time

Um, I think that covers everything. Good job so far. It's pretty well coded and it looks pretty good, too.

My head hurts, but I suspect it is because my brain is growing new synapses.
I didn't know that I could define the attributes of a <p> with class=whatever. This is, as you pointed out, what I was trying to do with the header tags on location but didn't really know how. I'll change that, thanks. There are seemingly limitless things I can do in a css. I think I want to buy a hard copy book for reference.

So, let's see.
1. I am going to change the <h4> to <p> tags with a class "location" in my css to define what attributes they'll have.
2. I am going to enclose my text in <p> tags.
3. I am going to make sure that all my header tags follow in order <h1> to <h4> without skipping (what if I use the <h2> on another page on the site?).
4. I am going to get rid of the table html and see if it floats on its own without them.
5. I am going to look again at my title.gif and make the matte colour match the bg of the page.
6. I am going to get another, bigger cup of coffee to do all this.

Can you define background colour in a <p> tag? That's why I had the table, to define the background colour for the title.

As always, I am indebted to you guys and rewriting my will to include Asylum inmates in the inheritance of my worldly goods *currently dryer lint and a bag of Oreos*.

You can define a background color for *any* tag, including a P tag, and including an h1 tag, which is what your header is in.

"if I use the <h2> on another page on the site?"

On any single given page, the heading levels should start with <h1>, and progress down to <h2>, <h3>, etc, in that order, without skipping any.

Well, I suppose, if you have a big main <h1> on one page, with more pages that progressed from it, it would be OK to skip the <h1> level on the remaining pages for consistency.