Solved

Another CSS Question

Posted on 2000-04-04
32
217 Views
Last Modified: 2010-04-09
I now have a style sheet that works fine except for one thing...  After a table the styles seem to be lost, this only happens in (the wonderful, amazing, super) Netshit Navigator.

Here is the example:
www.coopa.demon.co.uk/ee/test2.htm
www.coopa.demon.co.uk/ee/test2.css

How can I alter the CSS so that this is accounted for ?

Sorry less points this time as i'm running out.
0
Comment
Question by:coopa
  • 20
  • 8
  • 4
32 Comments
 
LVL 1

Expert Comment

by:Gnissman
ID: 2683198
O great NS! It really looses the body css after a table. Only workaround as far as I know: Set a style for <p> or use a <div> to keep the formatting!

e.g.:
body,p      {
            font-family: arial, helvetica, swiss, sans-serif;
            font-size: 10pt
            }

Afterwards your page will look fine!

Gniss
0
 
LVL 2

Author Comment

by:coopa
ID: 2683212
Thanks for your input Gniss.

But I've tried that, but then it alters the text in the table to match the <p> tag.

This would work if I could specify which tag takes precedents.

0
 
LVL 1

Expert Comment

by:Gnissman
ID: 2683230
You can define different p tags:

p.inbody {
font-family: arial, helvetica, swiss, sans-serif;
font-size: 10pt
}

p.intable {
font-family: arial, helvetica, swiss, sans-serif;
font-size: 20pt
}

and then use:

<p class="inbody">text outside table</p>
<table>
<tr>
  <td>
     <p class="intable>other text
  </td>
</tr>
</table>
<p class="inbody">...and back to normal



Gniss


0
 
LVL 2

Author Comment

by:coopa
ID: 2683246
I know this...

The problem is that the html will be generated by frontpage and not by hand...  

So the person writing this... (not myself) will need the stylesheet to be able to format the document without "extended" html tags (like "class" tags)

I'm sure there must be a way to prioritise tags.
0
 
LVL 1

Expert Comment

by:Gnissman
ID: 2683332
Yes, there is a way. To define a <p> tag only within a table you would declare:

table p {
font-family: arial, helvetica, swiss, sans-serif;
font-size: 20pt
}

Gniss
0
 
LVL 2

Author Comment

by:coopa
ID: 2683353
If this works then you have just earned yourself 200 points !

8o)
0
 
LVL 2

Author Comment

by:coopa
ID: 2683370
Netscape now thinks that everything after the table is within a TD cell !!!  

Grrrr.
0
 
LVL 1

Expert Comment

by:Gnissman
ID: 2683374
Netscape sucks... BIG BIG TIME!
:o(
0
 
LVL 2

Author Comment

by:coopa
ID: 2683414
8o(
0
 
LVL 7

Expert Comment

by:nettrom
ID: 2683419
this particular Netscape bug is well-known.  it regards the TABLE element as a separate BODY, and ends up discarding style information after it.

also, remember that Netscape doesn't inherit all styles applied to TABLE into the cells inside the table, so you will often have to apply style properties to the table cells.

you mention that the user that's going to work with this is using Frontpage, which makes me believe that said user it not very web-savvy.  this will be a problem when working with CSS and Netscape.

there's several things you'd like to consider:

1: apply style to all elements that should have them.  e.g if you change the font-family you should to it for all elements that are going to use that font-family.  example style sheet:

BODY, P, UL, OL, DL { font-family: Verdana, Arial, Helvetica, sans-serif; }

2: if you want to apply style to tables, apply them to the table cell whenever possible.  e.g. to assign font-family to a table do:

td { font-family: Verdana, Arial, Helvetica, sans-serif; }

3: make sure you've checked out the Netscape known CSS bugs page, and also bookmark webreview's CSS leader board.  http://developer.netscape.com/support/bugs/index.html?content=known/css.html and http://webreview.com/wr/pub/guides/style/lboard.html respectively.

4: even though the HTML spec says the closing tags of several elements are optional, do close them.  _always_.  so you code <td></td>, <tr></tr>, <th></th> and <p></p> and do not leave out the closing tags.

if possible you might want to be very conservative with how much style information you use, since Netscape isn't particularly strong when it comes to CSS.  you may consider converting your user to either IE or Opera. :)

that's the things I could come up with from the top of my head, feel free to ask if there's more.
0
 
LVL 2

Author Comment

by:coopa
ID: 2689116
Thanks for the info nettrom.

Does this mean that it is simply not possible to do what i'd like ?
Bummer... this could mean a hell of a lot more work for me.

If Netscape are happy to admit that this is a bug why not release a patch !!!  or better still fix the problem on the release after this problem was discovered !

Unfortunately the site has to be accessable from all browsers.

I will try some more things... I think i may know how to get this to work.

0
 
LVL 7

Accepted Solution

by:
nettrom earned 75 total points
ID: 2689165
looking at your sample document, what you're wanting to do should be possible in Netscape.

you want 10pt font for all body elements, but 7pt font for table elements.  this should then be the correct style sheet:

body, p { font-size: 10pt; }
td p { font-size: 7pt; }

tested it with Netscape 4.72 here, and it worked as intended.

it's specifically saying that paragraphs in the table cell (TD) should have 7-pt.  but, you'll _have_ to close your paragraphs, if not the size of the paragraph after the table will inherit the size from the table paragraphs, and you suddenly have 7pt font in the body. :(

I don't know why Netscape haven't fixed the bug, but it may have something to do with the fact that the rendering engine in Netscape 4.x is  total mess.  instead they have been focusing on getting Netscape 6/Mozilla out of the door.  try downloading it from http://www.mozilla.org/ and you'll see that the CSS-support is unparallelled.

if you're looking for good support across browsers, try validating the HTML and checking the CSS using accessible tools (I noticed there were some things in your style sheets that can result in problems):

http://validator.w3.org/
http://jigsaw.w3.org/css-validator/
http://www.htmlhelp.com/tools/validator/
http://www.htmlhelp.com/tools/csscheck/

and also http://www.cast.org/bobby/ if you're looking for usability.
0
 
LVL 2

Author Comment

by:coopa
ID: 2689181
Adjusted points from 50 to 75
0
 
LVL 2

Author Comment

by:coopa
ID: 2689182
My idea failed.

Netscape sucks ass.  Please somebody have a solution !!!

If not then i'll have to use gnissman's second suggestion of modifying tags.
0
 
LVL 2

Author Comment

by:coopa
ID: 2689185
i'll try your idea now... Thx nettrom.
0
 
LVL 2

Author Comment

by:coopa
ID: 2689216
> but, you'll _have_ to close your paragraphs, if not the size of the
> paragraph after the table will inherit the size from the table paragraphs,

Problem found.  I have many tables and almost all of them have a </p> missing.

How all i have to do is see if i can force </p>'s in frontpage...
or another tool.  

Do you know of any tools that can parse HTML documents to force </p>'s ?

The points are your's nettrom, but thank you to everyone else who contributed.
0
How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

 
LVL 2

Author Comment

by:coopa
ID: 2689223
FOUND A SOLUTION !!

If i search for </td> and replace with </p></td>

and

</th> and and replace with </p></td>

This will fix the problem.  

8o)
0
 
LVL 7

Expert Comment

by:nettrom
ID: 2689301
HTML Tidy, a part of HTML-kit, _might_ do it (I haven't tested it so I can't tell for sure).  it's good at cleaning up code.

http://www.w3.org/People/Raggett/tidy/

and you might _not_ want to replace </th> with </p></td>, but </p></th>.  it's not a table cell that you're closing, it's a table header. ;)
0
 
LVL 2

Author Comment

by:coopa
ID: 2689319
yeah okay.... typing error.... Anyway the site is working great in both IE and Netscape now...

Except one page... I cannot see the error (i've been looking for about a bloody hour now!!) but i'll see if your recommended program can spot it.

Cheers.
0
 
LVL 2

Author Comment

by:coopa
ID: 2689407
tidy.exe can't spot the error either.
0
 
LVL 7

Expert Comment

by:nettrom
ID: 2689433
have you got the page up on the web somewhere?
0
 
LVL 2

Author Comment

by:coopa
ID: 2689453
I have now   8o)

www.coopa.demon.co.uk/ee/table.htm

Note how the "asdf" loses it's style after the table.

all tags appear closed, the only thing i can think of is that maybe netscape needs the <p> </p> tags in all table cells... this seems a little crazy though.
0
 
LVL 7

Expert Comment

by:nettrom
ID: 2689489
I think the problem is that the text 'asdf' is a part of body, and not any other element.  since the styles for body are reset after the table, the text doesn't get any style applied to it.  you'll have to put it inside an element (a paragraph in this case since it's plain text) to get the style applied to it.
0
 
LVL 2

Author Comment

by:coopa
ID: 2689511
i have updated with your changes.... but it's still the same.

www.coopa.demon.co.uk/ee/table.htm

Don't worry, I'll try and figure it out.

Thanks again.
0
 
LVL 2

Author Comment

by:coopa
ID: 2689520
solved it...

I removed all <br> tags from the <TH>s.

?!?!?!

Yeah I don't understand either  8o)
0
 
LVL 7

Expert Comment

by:nettrom
ID: 2689538
you haven't got a font specified for 'p', have you?  can't see one in the style sheet.
0
 
LVL 2

Author Comment

by:coopa
ID: 2689620
No, you are right, but I use the same style sheet throughout and the other pages appear fine...

They must inherit the style from the <body> tag. Isn't this supposted to be lost after a table in netscape ?  

I'm now assuming that this whole problem came about because netscape needed the </p> tags to parse the html correctly.  What do you think ?
0
 
LVL 2

Author Comment

by:coopa
ID: 2689626
Strange !!  I have now put the <br>'s back in and it works fine !

I've re-uploaded the sample.
0
 
LVL 7

Expert Comment

by:nettrom
ID: 2689701
the three paragraphs after the table default to my user-defined font (12pt Times New Roman), and not the BODY properties set in the style sheet.

think you'll have to add 'p' to your style sheets again.
0
 
LVL 2

Author Comment

by:coopa
ID: 2689726
Just re-added this....  Now all of my tables have large fonts... Back to square 1.
0
 
LVL 7

Expert Comment

by:nettrom
ID: 2689801
remember to add 'td p' to the definition of fonts for 'td' so that paragraphs in tables get the small fonts.
0
 
LVL 2

Author Comment

by:coopa
ID: 2690129
Still geting strange results (this time in the preview pane of frontpage...
I'll work on it tonight and see if i can sort it...  

Thanks again for your help.

Rich
0

Featured Post

How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

Join & Write a Comment

Do you want to insert HTML5 video into your site? This is the tutorial how to do so. What are the main advantages of HTML5 video? 1) Have good compression, good image quality, and low decode processor use. 2) It is royalty-free 3) It is easiā€¦
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

706 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

19 Experts available now in Live!

Get 1:1 Help Now