CSS Compatibility Help Needed — OZONE Asylum, home of the Mad Scientists

XML - XSL - XSLT - XHTML - CSS - DOM

CSS Compatibility Help Needed

This page's ID: 10921

Edit Post

Who can edit a post?	The poster and administrators may edit a post. The poster can only edit it for a short while after the initial post.

Your User Name:
Your Password:
Login Options:	Remember Me On This Computer

Your Text: Insert Slimies » Insert UBB Code » Close Last Tag \| All Tags UBB Help	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 & Bahamian seafood dishes, raw bar & 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> [b]<p>[/b]Award winning seafood served with old Florida riverfront hospitality, native & Bahamian seafood dishes, raw bar & rum punches bar open 11:30am until closing, excellent happy hour.[b]</p>[/b] 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. Loading...
Options:	Enable Slimies Enable Linkwords

« Backwards — Onwards »

Show Forum Drop Down Menu