linked stylesheet strange behavior
aamirg...@yahoo.com
I have a very simple html that has a linked stylesheet. According to
the style sheet both blocks of text should be displayed in the font
xx-small. but only one (DIV or SPAN) at a time is displayed in this
font and that would be the one that is at the end of the stylesheet
file. for example if DIV selector is the last block in MyStylesheet.css
then the corresponding text in the DIV tag in the html will be small
font. If we swap the spaces of div and span in the styleshet then the
corresponding tag in the span tag in the html will be small
________________________________________________
MyStylesheet.css
/****************/
<style>
span {
font-size : xx-small;
}
div {
font-size : xx-small;
}
</style>
_________________________________________________
Test.htm
<!------------->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<link rel="stylesheet" type="text/css" href="HighResolution.css" />
<title>test.htm</title>
</head>
<body>
<div>this text is in DIV</div>
<span>this text is in SPAN</span>
</body>
</html>
Beauregard T. Shagnasty
wrote:
> Hi,
>
> I have a very simple html that has a linked stylesheet. According to
> the style sheet both blocks of text should be displayed in the font
> xx-small. but only one (DIV or SPAN) at a time is displayed in this
> font and that would be the one that is at the end of the stylesheet
> file. for example if DIV selector is the last block in MyStylesheet.css
> then the corresponding text in the DIV tag in the html will be small
> font. If we swap the spaces of div and span in the styleshet then the
> corresponding tag in the span tag in the html will be small
> ________________________________________________
> MyStylesheet.css
> /****************/
> <style>
The above <style> and the </style> must be removed from your
stylesheet. The validator would have told you this.
> span {
> font-size : xx-small;
> }
> div {
> font-size : xx-small;
> }
Consider using percentages instead of keywords for sizing. Some
browsers do not recognize them. For example:
span.small { font-size: 80%; }
> </style>
>
> _________________________________________________
> Test.htm
> <!------------->
You don't want the above line in your HTML.
> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
> <html>
> <head>
> <link rel="stylesheet" type="text/css" href="HighResolution.css" />
>
> <title>test.htm</title>
>
> </head>
>
> <body>
>
> <div>this text is in DIV</div>
> <span>this text is in SPAN</span>
A <span> is an inline element, should not be a child of <body> but
should be within a <div> or a <p> or other block-level element.
> </body>
> </html>
Post a URL to your problem page.
--
-bts
-This space intentionally left blank.
aamirg...@yahoo.com
>...The validator would have told you this.
the problem was indeed the <style> tags in the css file. Sorry no
validator ...I am using notepad.
>... Some browsers do not recognize them
This web app is targetted for an intranet app and our staff use only
one browser type.
>...You don't want the above line in your HTML
I created this example on the fly. It is a very simple example of a
complex page.
>... <span> is an inline element, should not be a child of <body ...
Thanks for shaing this. Is it in w3c specs
Thanks for your help.
Aamir
Beauregard T. Shagnasty
> Hi Beauregard,
Good morning.
>> ...The validator would have told you this.
>
> the problem was indeed the <style> tags in the css file. Sorry no
> validator ...I am using notepad.
http://www.htmlhelp.com/tools/csscheck/ Copy your file into the
proper text box. Your choice of editor doesn't matter.
>> ... [size words] Some browsers do not recognize them
>
> This web app is targetted for an intranet app and our staff use
> only one browser type.
Still ... it pays to use good habits all the time. Oh, in future, be
sure to state if your question is not for www.
>> ...You don't want the above line in your HTML
>
> I created this example on the fly. It is a very simple example of a
> complex page.
This is why it is always a good idea to post your problem page on a
server somewhere, so we can see a working example, with some sort of
content.
<sniprest>