Problem viewing in Mozilla

@g2k556May 23.2006

Hi, I’m a freshman in highschool, and I’ve done a few web pages for my schools web site. I did all of them in CSS. There is one though, that looks fine in IE, but when I view it in Mozilla, it doesn’t look right at all. If some one one could look at the code and find out whats wrong with it, because I’ve looked over it hundreds of times, and can’t figure it out. Thanks.~~[URL=http://www.ptsc.k12.in.us/bghs/hsorg/frenchclub/french_club.html]~~This site[/URL]
You should probably view it in IE to see what its supposed to look like.

to post a comment

CSS

11 Comments(s) _↴

@WebJoelMay 23.2006 — #You have a few errors in there. About 7 maybe (over half of them are minor, like img tag not properly closed), but a few missing TD and /TD's..

Like this extra un-used /TD:

[CODE]<table align="left" class="tbody">
 
 <tr>
 <td>
 
 The French Club is underway! The meetings, or Boums, follow a format where there is a 10 minute business meeting followed by a well planned student lead activity. <b>All meetings end prompty at 3:30 p.m. or earlier</b> making it easier for all French students to attend. A snack is offered at each meeting and door prizes are given (Eiffel Tower key chains, lanyards, baguette shaped pens, verb reference wheels, stickers, bookmarks, etc.) The activities for this year are:
 </td>
 [B]</td>[/B]
 
 </table>[/CODE]

The font is different in IE to Firefox too... haven't figured that out yet.

?

@g2k556authorMay 24.2006 — #thanks, i'll fix that tomarrow at school. I'll probably talk to the teacher too, but she's not the smartest person in the world, and I probably know more about CSS and HTML than she does, and she the teacher, soo.

Does anyone know why it looks correct in IE but not in Firefox.

I also did a CSS check on htmlhelp.com or somethin' like that, and it came up clean.

I also just went and looked at [URL=http://www.ptsc.k12.in.us/bghs/hsorg/bowling/bowling_club.htm]this page[/URL] and have the same problem. Any little input should help.

@ray326May 24.2006 — #One may be the way your editor wacked out the body style by hard wrapping the font-family name. Another is probably because you're selecting rows rather than cells for the text styling. (tr.players td {...})

Boy, that second page is just crying out to be a couple of divs containing some definition lists instead of that completely semantically wrong table. You could style them with dl.coach and dl.players and use (oh my) real headings.

@WebJoelMay 24.2006 — #One may be the way your editor wacked out the body style by hard wrapping the font-family name. Another is probably because you're selecting rows rather than cells for the text styling. (tr.players td {...})

Boy, that second page is just crying out to be a couple of divs containing some definition lists instead of that completely semantically wrong table. You could style them with dl.coach and dl.players and use (oh my) real headings.[/QUOTE]

Oh Ray, -you're such an inspiration to all of us! ? I haven't even seen the postee's code and yet from your analysis of it, I know [I]exactly[/I] what you're saying! I have several multi-year old web sites of my own creation that your advice above could apply equally well to (which is why I don't post anything I made older than circa two years ago on 'website reviews'...) ?

@ray326May 24.2006 — #Believe me, I've made every mistake that I rant about today. ?

@g2k556authorMay 24.2006 — #Just so you know, my school uses Dreamweaver. I'm not sure if it's true, but my teacher said that Dreamweaver is the most commonly used program in the "Web Design" community. Is this true? I personally don't like it, i mean it has a few nice little touches that make it easy in some ways, but I've us 1st Page by Eversoft and I like that much better, and it's free.

Now to my code:

Why would it make a difference if I put the styling in the rows rather than cells?

(tr.players td {...}) If I put it in to rows should I us the tr.whatever, or does it matter.

Ray you said the second page, I'm assuming that you meant the Bowling page. Why would it be better to put definition list?

And about the table in the "second page", what's wrong with it, and is there a way I could correct it. I used tables in a similar fashion in other pages, and they worked out fine. And may I ask why you say "real headings", just wondering.

One more question, Why does it look fine in IE and not Mozilla. I find this kind of strange.

Try to be patient, I'm only 15 almost 16, and I taught CSS to myself because the school didn't offer it in the Web design class's (beg. or adv.).

@ray326May 25.2006 — #Ray you said the second page, I'm assuming that you meant the Bowling page. Why would it be better to put definition list?[/QUOTE]Yes, the bowling page. The 21st century thinking on web design is that you view the web page as a structured document and you mark it up so it makes semantic sense. (See Zeldman for the philosophy.) So the semantics of the bowling page is that it's several lists, each preceded by a heading. E.g. let's mark up the left column in some reasonable way.

[code=html]
 <h2>Boy's Bowling Team</h2>
 <dl>
 <dt>Coach:</dt><dd>Bill Idzior</dd>
 <dt>Assistant:</dt><dd>Karen Yankauskas</dd>
 </dl>
 <h3>Seniors:</h3>
 <ul>
 <li>Dan DeNormandie</li>
 <li>Adam Erb</li>
 <li>Andy Idzior</li>
 <li>Mike Zolper</li>
 </ul>
 <h3>Juniors:</h3>
 <ul>
 <li>Ryan Prodzinski</li>
 </ul>
 <h3>Sophomores:</h3>
 <ul>
 <li>Stephen Grabeck</li>
 <li>Andrew Roth</li>
 <li>Kevin Zolper</li>
 <li>Paul Yankauskas</li>
 </ul>
 <h3>Freshmen:</h3>
 <ul>
 <li></li>
 </ul>
 [/code]

See how that makes sense where the table was semantic nonsense? You can now make that content look just like you want by styling it with CSS.
Try to be patient, I'm only 15 almost 16, and I taught CSS to myself because the school didn't offer it in the Web design class's (beg. or adv.).[/QUOTE]
No problem. My daughter is your age. Consider yourself lucky they don't try to teach web design there. She took the web design classes at her high school this year and they were garbage.

@g2k556authorMay 25.2006 — #thanks for the help, I'll try to fix it now (I'm in school), if I can't figure it out, I'll come back.

Yea, my Web Design class is garbage too. It's mostly take-this-book-and-learn-it-yourself kind of class. They don't even teach CSS, I've learned this on my own. (The books bad too.)

@g2k556authorMay 25.2006 — #Well, when I got home, I decided that I would try out few things. So I viewed page source, copy and pasted in to FrontPage. I decided I would try and undo the wrapping and fix a few other things. Well it works now. It could have been the fact that the font was wrapped, I changed the quotations to single rather than double (" to '). So I don't know. I probably won't fix the table just because the year is almost over and I have to do other work in the class. Thanks for all the help.

Thanks ray for the tips, I was just wondering, what does semantically correct mean, (in simple terms)(never heard that word). Thanks again.

@WebJoelMay 25.2006 — #....I was just wondering, what does semantically correct mean, (in simple terms)(never heard that word). Thanks again.[/QUOTE]

I'll field this one. ?

Semantically correct means more-or-less that the markup uses html elements for their given purpose. Well structured HTML has semantic meaning for a wide range of user agents (browsers without style sheets, text-only browsers, PDAs/handhelds, and search engines etc.)

You should use standard HTML elements for markup and avoid styling HTML elements to look like other HTML elements. In simple terms, this means:

* For headings, use heading elements starting with h1 <h1>First Header</h1>, etc. H1, h2, h3, h4, h5, h6 are available, going from largest to smallest.

* For paragraphs of text, use a paragraph element <p>Paragraphs here.</p>

* For lists (menus, and more, etc), use a list elements<ul><li>Item One</li><li>Item Two</li><li>Item Three</li></ul>

* Use of "blockquote" [I]only[/I] for text that actually a QUOTED MATERIAL, said by someone, NOT merely to get a paragraph to 'indent nicely'. A 'text-reader' finds this very important, lest it 'read' your indented material with the nomenclature 'this is a quote' or 'quote:', when in fact, it is not.

Do these things and your page is 'more visible' to search engines (it indexes better, therefore can be searched-for/found easier/faster), and for non-visual browsers that 'read' the text to the blind, (and other devices) they get relevant play-back and presentation. Semantic could mean "order". Things need to be 'in order" to be appreciated best on the widest array of viewing devices (this includes non-visual).

I think there's more, but this is the general gist of it.

?

@g2k556authorMay 26.2006 — #thanks, that helps me understand a lot. Makes a lot more sense now.

Also in #CSS _↴

Use CSS to fit all resolutions with my website?font size: em vs px?Wordpress Float Problem

Success!

Help @g2k556 spread the word by sharing this article on Twitter...

Tweet This

Problem viewing in Mozilla

11 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

Problem viewing in Mozilla

11 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

11 Comments(s) _↴

Also in #CSS _↴