MaDdUCK
asked on
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
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
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
font-size : 16pt; :-)
Mark
ASKER
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?
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?
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>
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>
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. :)
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. :)
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
...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
ASKER
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)
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)
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
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.
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
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
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.
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.
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
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
oh sorry, I didn't mean to say your example was incorrect, Mark, since it isn't (obviously, since you do check your code).
Do I sense a bit of sarcasm in your voice?
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.
I'm sorry 'bout the trouble.
I'm cool... I wonder if we fixed his problem?
ASKER
i haven't forgotten you, i am still working on it. mind if you hold on some more?
MaDdUCK,
We're talking about you...
https://www.experts-exchange.com/jsp/qShow.jsp?ta=lounge&qid=10296189
We're talking about you...
https://www.experts-exchange.com/jsp/qShow.jsp?ta=lounge&qid=10296189
ASKER
alright, thanks for holding. i am still experiencing problems with stylesheets, but nettrom got me closer. thanks!
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...