netscape sucks at stylesheets?

i am developing a site conforming with the HTML 4.0 standard and using CSS by standards. my stylesheet contains the following declarations, among others:

h1  {
  font-size : 16 pt;
  font-family : tahoma, arial, helvetica, sans-serif;
}

h2  {
  font-size : 14 pt;
  font-family : tahoma, arial, helvetica, sans-serif;
}

h3  {
  font-size : 12 pt;
  font-family : tahoma, arial, helvetica, sans-serif;
}

h4  {
  font-size : 11 pt;
  font-family : tahoma, arial, helvetica, sans-serif;
}

h5  {
  font-size : 10 pt;
  font-family : tahoma, arial, helvetica, sans-serif;
}

h6  {
  font-size : 9 pt;
  font-family : tahoma, arial, helvetica, sans-serif;
}

.footer  {
  font-size : 8 pt;
  color : #666666;
  text-align : center;
  padding-top : 8;
  border-style : none;
}

in my humble opinion, this looks awesome in internet explorer (check http://www.madduck.net/me/works/cs/architecture/lab01 for instance), but netscape just can't make it look nice.

specifically relating to the above stylesheet tags, i am experiencing some sever problems with netscape:

(1) heading size: the <h1>...<h6> tags are reformatted using the stylesheet, and this works entirely as expected in internet explorer. however, in netscape, the size and type face selection is ignore, the heading appears in the standard body font and formatted bold, but all 6 levels of heading appear at the same font size as regular text. why???

(2) the custom style footer defines centered alignment as well as smaller font size and grayed text. none of this is happening in netscape. it appears left flushed, at full size and in standard body text color. now i have to specifically include an align="center" tag to make it look a little better. why???

(3) link hovering does not work, it works in iexplorer. at least the underlinings of links could be removed in both browsers.

if you have any ideas/help/suggestions on how i could remedy this situation to make these pages nice even in netscape, please tell me!

thanks,
martin
LVL 8
MaDdUCKAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

mgfranzCommented:
Font-size is a relative term, you need to use the following when refering to size with NN;

xx-small
x-small
small
medium
large
x-large
xx-large

You can also use % in setting font-size

H1 {
      font-size : 10%;
}

Hover only works in IE, this is as designed.

There have always been problems with .css in both browsers, therefore you have to be careful with how tags are outlined, I always put by NN styles before my IE styles, for some reason if a style is unrecognized by IE it will ignore it, in NN it set it as default.  For the text center issue, try this;

<STYLE TYPE="text/css">
all.footer {text-align:center;
  font-size : 8 pt;
  color : #666666;
  padding-top : 8;
  border-style : none;
</STYLE>

Then insert your IE values...
0
mgfranzCommented:
You know why your point size is not working in NN, you left a space in the line...  Take the space out from the line;

font-size : 16pt;  :-)

Mark
0
MaDdUCKAuthor Commented:
the space didn't help, however, using small/large etc. worked and i knew that, the reason why i don't want to use it is because 'small' for instance displays at 10pt in netscape and 12pt in iexplorer.

also, the centering is fixed now, i just changed the font-sizes to relative, then back to absolute points, and now it works. ack! can't netscape stick with a standard?
0
Cloud Class® Course: CompTIA Cloud+

The CompTIA Cloud+ Basic training course will teach you about cloud concepts and models, data storage, networking, and network infrastructure.

mgfranzCommented:
It's not Netscape, it's all the browser manufactures...  Even though CSS2.0 is a standard, no one is obligated to adhere to the standard.  Check out this link, www.webstandards.org  They have been hounding the manufactures to come up with a standard platform.

I tested the space theory and it functioned as I described on my browsers, what versions of NN and IE are you using?  I have 4.7 of both loaded and removing the space fixed the font issue.  Also, you are missing the . in front of the H refs.  Here is exactly what I used to test it;

<style type="text/css">
..h1  {
  font-size : 16pt;
  font-family : tahoma, arial, helvetica, sans-serif;
}

..h2  {
  font-size : 14pt;
  font-family : tahoma, arial, helvetica, sans-serif;
}

..h3  {
  font-size : 12pt;
  font-family : tahoma, arial, helvetica, sans-serif;
}

..h4  {
  font-size : 10pt;
  font-family : tahoma, arial, helvetica, sans-serif;
}

..h5  {
  font-size : 8pt;
  font-family : tahoma, arial, helvetica, sans-serif;
}

..h6  {
  font-size : 6pt;
  font-family : tahoma, arial, helvetica, sans-serif;
}
</style>
      <title>Untitled</title>
</head>

<body>
<div class=h1>Test</div><br>
<div class=h2>Test</div><br>
<div class=h3>Test</div><br>
<div class=h4>Test</div><br>
<div class=h5>Test</div><br>
<div class=h6>Test</div><br>
</body>
</html>
0
nettromCommented:
re 1 & 2: have you validated/linted your style sheet using the commonly available tools?
http://jigsaw.w3.org/css-validator/
http://www.htmlhelp.com/tools/csscheck/

have you checked what you're using up against the bug lists over on webreview.com? http://webreview.com/wr/pub/guides/style/lboard.html

have you checked Netscape's CSs-bugs list? http://developer.netscape.com/support/bugs/index.html?content=known/css.html

re #3: No, Netscape doesn't support a:hover.  'hover' is a dynamic pseudo-class introduced in CSS level 2, and has never been added to Netscape's list of supported CSS properties.  it's supported by Mozilla though. (spec is at http://www.w3.org/TR/REC-CSS2/selector.html#dynamic-pseudo-classes )

as you might've noticed by now, if you've used the CSS validation/lint tools, using "pt" as a size definator is not regarded as a good thing since it breaks across platforms.  it also renders IE users unable to control the font size as they wish (any change to say "Larger" won't be reflected).  you should instead consider using one of the relative sizes like em, ex or %.

the foreground color defined in the footer should also be accompanied by a background color to not interfere with user defined stylesheets.  I'd also add a value designator to the padding-top (like "px").  lastly, I'd write all the specific font names with a capital first letter.  I've heard rumours about browser not recognising them if they're not.

...h1 through ..h6 shouldn't be necessary.  only one '.' is needed to define the class. :)
0
mgfranzCommented:
Hey, how did that extra . get in there...

...h1  {
  font-size : 16pt;
  font-family : tahoma, arial, helvetica, sans-serif;
}

Should be;

..h1  {
  font-size : 16pt;
  font-family : tahoma, arial, helvetica, sans-serif;
}

....

Mark
0
MaDdUCKAuthor Commented:
i am confused. h1 is a standard html tag, so to redefine it, there is no . before it. footer is a custom tag, so there i must declare it as .footer.

alright, i am working through your suggestions, now i am confused. i am getting much to work, but now in netscape, it is putting random line breaks everywhere. check http://www.madduck.net and look at the footer (from netscape - 4.08 and 4.61 (these i tried) on mac and unix exhibit this problem).

the "[ search ] - [ site map ] - [ contact me ] - [ disclaimer ]"
 should be one one line! (check the source code)
0
nettromCommented:
looking at your stylesheet (http://www.madduck.net/madduck.net.css) your footer-link assignments are incorrect.

a:active.footer should be

..footer a:active

if you're trying to assign style properties to the links in the footer.

also, the line breaks come from the fact that boot the paragraph and the links are said to be of class "footer".  looks like you end up with a margin problem.  with the corrected style definition for the footer links (as mentioned above), and the removal of 'class="footer"' from the links in the footer, they seemed to work as they should.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
nettromCommented:
mgfranz: the extra '.' seems to be added by E-E when the comment is posted.  same thing happened to my '.footer a:active' which I checked and _was_ entered as '.footer a:active'.  I've noted it on the bug list and will mail E-E about it.
0
mgfranzCommented:
nettrom, actually the style syntax is good;

A.footer{font-size : 8 pt;
  color : #666666;
  text-align : center;
  padding-top : 8;
  border-style : none;
}
A.footer:link {color: #666666}  
A.footer:visited {color: #666666;}  
A.footer:active {color: #cc0000}
A.footer:hover {color: #cc0000;
            text-decoration: underline;
}

What you don't need is the same reference to the footer class in both the <P> and the <A HREF> tags, this is a no-no.  take the class call out of the <P>.

Mark
0
nettromCommented:
Mark, I quoted the style syntax directly from the style sheet I found on the URL he referred to.  it wasn't correct since it tried to create a set of new pseudo-classes (hover.footer, link.footer, etc). run the stylesheet URL through HTMLHelp's CSSCheck and you'll see the errors.

according to the CSS2 spec, 'text-align:center;' is not applicable to links since they're inline elements. http://www.w3.org/TR/REC-CSS2/text.html#alignment-prop states that it only applies to block-level elements and define how the inline content of said block is aligned.  therefore, the class "footer" should be applied to the paragraph and not the links themselves.
0
mgfranzCommented:
Hmmm... your right, it is a problem. I suggest creating a new style for the <P> and align the text in this class.

P {
   text-align : center;
}

I don't know about the footer sytle you stated, I use TopStyle to create my style objects and the syntax on the css is bad form my tester, it doesn't work in CSS 1 or 2.  This is what is returns;

Contextual .footer a:active
Contextual .footer a:visited
Contextual .footer a:active
Contextual .footer a:hover

I know my example is correct and functions in all browsers as designed. (within browser limits of course) :-)

Mark
0
nettromCommented:
oh sorry, I didn't mean to say your example was incorrect, Mark, since it isn't (obviously, since you do check your code).
0
mgfranzCommented:
Do I sense a bit of sarcasm in your voice?
0
nettromCommented:
no, not at all.  I didn't read the whole thread well enough when I first commented on it, and probably didn't the second time either.  I had no intention of commenting your suggestion Mark, instead I was trying to fix the problems Madduck were experiencing.

I'm sorry 'bout the trouble.
0
mgfranzCommented:
I'm cool... I wonder if we fixed his problem?
0
MaDdUCKAuthor Commented:
i haven't forgotten you, i am still working on it. mind if you hold on some more?
0
cpopinCommented:
0
MaDdUCKAuthor Commented:
alright, thanks for holding. i am still experiencing problems with stylesheets, but nettrom got me closer. thanks!
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Development

From novice to tech pro — start learning today.