Stylesheets - linked stylesheet strange behavior

Author

linked stylesheet strange behavior

aamirghanchi@yahoo.com

2005-05-25, 7:58 pm

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>

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

2005-05-25, 7:58 pm

In comp.infosystems.www.authoring.stylesheets, aamirghanchi@yahoo.com
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.

kchayka

2005-05-25, 7:58 pm

aamirghanchi@yahoo.com wrote:
>
> div {
> font-size : xx-small;
>
> <link rel="stylesheet" type="text/css" href="HighResolution.css" />

I find it rather ironic that you are using such a teensy font-size for a
"high resolution" stylesheet. I take it you don't want your visitors to
be able to read it, eh? ;)

--
Reply email address is a bottomless spam bucket.
Please reply to the group so everyone can share.

aamirghanchi@yahoo.com

2005-05-26, 7:38 pm

Hi Beauregard,

>...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

aamirghanchi@yahoo.com

2005-05-26, 7:38 pm

Thanks for correction. Should have been LowResolution.css

Beauregard T. Shagnasty

2005-05-26, 7:38 pm

In c.i.w.a.s, aamirghanchi@yahoo.com wrote:
> Hi Beauregard,

Good morning.

>
> 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.

>
> 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.

>
> 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>
--
-bts
-This space intentionally left blank.