Problem with CSS file in IE7

[Mike]

Hi,

I have some html that relies on a stylesheet and although the styles
are recognised in FireFox 2, in IE7 the page displays without any
colour or font styles being applied.

My stylesheet.css contains several sections like the following :

my_section_head {
color: Red;
font-size: large;
position: absolute;
left: 0px;
visibility: visible;
}

These are referred to in the page.html file in a similar way to this :

<div id="Chroma_Sub_Sample">
<my_section_head>Chroma Sub Sample</my_section_head

I don't believe the problem is down to IE not being able to see the
stylesheet because if I change eg "rsm_head" to "h3" as follows in the
stylesheet and html file then the formatting is picked up :

h3 {
color: Red;
font-size: large;
position: absolute;
left: 0px;
visibility: visible;
}

<div id="Chroma_Sub_Sample">
<h3>Chroma Sub Sample</h3>

Is there something wrong with the names I've picked ? I mean, must
they be specified in a certain way or start with a special
character ? I tried prefixing my_section_head with "." and with "#"
but that made no difference.

Any halp greatly appreciated,

Thanks,

Mike

 

[John Hosking]

Hi,

I have some html that relies on a stylesheet and although the styles
are recognised in FireFox 2, in IE7 the page displays without any
colour or font styles being applied.

My stylesheet.css contains several sections like the following :

my_section_head { [declarations omitted]
}

These are referred to in the page.html file in a similar way to this :

<div id="Chroma_Sub_Sample">
<my_section_head>Chroma Sub Sample</my_section_head

Oops, there's your problem: it doesn't work that way. You can't just
invent a new element the way you have here. You've tried to invent the
my_section_head element, which HTML doesn't (and won't) include or
recognize. (Even ignoring the missing > on the closing tag. ;-) )

I don't believe the problem is down to IE not being able to see the
stylesheet because if I change eg "rsm_head" to "h3" as follows in the
stylesheet and html file then the formatting is picked up :

Right, because HTML knows about h3; it's in the DTD. Maybe Jukka or
someone will come along and expound on DTDs and their extensibility, but
you should simply move to standard HTML.

Is there something wrong with the names I've picked ? I mean, must
they be specified in a certain way or start with a special
character ? I tried prefixing my_section_head with "." and with "#"
but that made no difference.

Try a CSS tutorial and pay attention to how elements and their rules are
used/referredd to. http://css.maxdesign.com.au/selectutorial/ is one I
like.

 

[mbstevens]

........the page displays without any
colour or font styles being applied.

My stylesheet.css contains several sections like the following :

my_section_head {
color: Red;
................
<my_section_head>Chroma Sub Sample</my_section_head....

You don't get to invent tags like <my_section_head>.

You could use something like
<span class="my_section_head">
with css like
..my_selection_head {...........

Or, you could use something like
<p id="my_section_head">
with css like
#my_section_head {.....

 

[Jukka K. Korpela]

Scripsit mbstevens:

You don't get to invent tags like <my_section_head>.

Correct so far.

You could use something like
<span class="my_section_head">
with css like
.my_selection_head {...........

That would be foolish for several reasons. One of them is that when CSS is
off, <span> markup has no effect and its content is treated as text level
stuff with no special rendering. And the class name is not clever and
informative; just an example, yes, but a _bad_ example.

Or, you could use something like
<p id="my_section_head">
with css like
#my_section_head {.....

Wrong too. It's not a paragraph. It's a heading. You want it to appear as a
heading (whatever that means in each browser) even when CSS is not used.

And there's little reason to use an id attribute for styling when the
style_could_ well be something that you might use for other elements (other
headings) on the page as well.

The sensible approach is (assuming this is a 3rd level heading for
particularly sexy headings, among the different 3rd level headings on the
page)

<h3 class="sexy">...</h3>

with CSS like

h3.sexy { ... }

It's a good idea to add an id="..." attribute to the heading element, but
that's for linkability rather than styling. It _does_ allow a particular
element to be styled in a particular way, too, of course.

 

[mbstevens]

..my_selection_head {...........

Don't know how that extra period got in there.
Should be

..my_section_head {...........

 

[mbstevens]

Scripsit mbstevens:

That would be foolish for several reasons. One of them is that when CSS
is off, <span> markup has no effect and its content is treated as text
level stuff with no special rendering. And the class name is not clever
and informative; just an example, yes, but a _bad_ example.

Yes, my examples could have been more specific to his tasks.
A CSS example like "h3 {........" would have been better.

The comment starting "...when CSS is off..." is unclear.
The op was worrying about coloring things _with_
CSS and is using CSS in separate files. What are you trying to
get at?

 

[Jukka K. Korpela]

Scripsit mbstevens:

The comment starting "...when CSS is off..." is unclear.

Google for "css caveats".

The op was worrying about coloring things _with_
CSS and is using CSS in separate files. What are you trying to
get at?

Write down 100 times:
"CSS is for optional presentational suggestions."
You're not qualified to give advice on CSS before you have yourself
understood this very basic thing.

 

[mbstevens]

Scripsit mbstevens:


Google for "css caveats".


Write down 100 times:
"CSS is for optional presentational suggestions."
You're not qualified to give advice on CSS before you have yourself
understood this very basic thing.

That goes without saying. Obviously an <h...
heading is better for headings.

The op's question, however, was not about that, but with why his
CSS was not working. To go beyond that in excruciating detail
is correct but pedantic.

 

[Jukka K. Korpela]

Scripsit mbstevens:

Obviously an <h...
heading is better for headings.

The op's question, however, was not about that, but with why his
CSS was not working. To go beyond that in excruciating detail
is correct but pedantic.

When the markup was wrong (and that caused the CSS to fail), suggesting
correct markup is _essential_, and I commented on the wrong suggestions that
you made.

 

[mbstevens]

Scripsit mbstevens:




When the markup was wrong (and that caused the CSS to fail), suggesting
correct markup is _essential_, and I commented on the wrong suggestions
that you made.

The suggestions were addressed to the mechanics of why the colors did not
appear. Interpretations of the _meaning_ of the symbols s/he was
using go beyond this. I believe his question was addressed to syntax.
Your comments had to do with semantics.

 

[Jukka K. Korpela]

Scripsit mbstevens:

Your comments had to do with semantics.

Yes, _my_ comments have a meaning. (Semantics is the study of meaning.) You
are whining about having been corrected in an essential point. The choice of
markup affects the styling as well (in addition to affecting non-CSS
rendering), since different elements have different default rendering.
Therefore, getting the markup right from the beginning is essential and
helps to avoid wasting time.

When corrected, you could just stand corrected.

You may sit down now.

 

[dorayme]

Scripsit mbstevens:


Yes, _my_ comments have a meaning. (Semantics is the study of meaning.) You
are whining about having been corrected in an essential point.

Well, it sure did not look like mbsteven disputed that your
comments had a meaning. Rather, he was emphasising that semantics
was not crucially relevant to the trouble experienced by the op.

 

[Norman Peelman]

Hi,

I have some html that relies on a stylesheet and although the styles
are recognised in FireFox 2, in IE7 the page displays without any
colour or font styles being applied.

My stylesheet.css contains several sections like the following :

my_section_head { [declarations omitted]
}

These are referred to in the page.html file in a similar way to this :

<div id="Chroma_Sub_Sample">
<my_section_head>Chroma Sub Sample</my_section_head

Oops, there's your problem: it doesn't work that way. You can't just
invent a new element the way you have here. You've tried to invent the
my_section_head element, which HTML doesn't (and won't) include or
recognize. (Even ignoring the missing > on the closing tag. ;-) )

Not true, take a look at:
http://msdn.microsoft.com/msdnmag/issues/0500/cutting/

It can be done with alittle extra effort, Firefox and Opera just do a
better job of guessing what you (the average user) want.

Right, because HTML knows about h3; it's in the DTD. Maybe Jukka or
someone will come along and expound on DTDs and their extensibility, but
you should simply move to standard HTML.

Again Firefox and Opera are guessing what you want. IE expects a bit
more info.

Try a CSS tutorial and pay attention to how elements and their rules are
used/referredd to. http://css.maxdesign.com.au/selectutorial/ is one I
like.

Norm

 

[Neredbojias]

Well bust mah britches and call me cheeky, on Mon, 03 Sep 2007 21:25:36
GMT dorayme scribed:

Well, it sure did not look like mbsteven disputed that your
comments had a meaning. Rather, he was emphasising that semantics
was not crucially relevant to the trouble experienced by the op.

Realistically, css is about as optional as the paint on a car. You don't
need it, the car will work, but... Anybody who turns css off is a nitwit.

Semantics, on the other hand, are particularly valuable to non-visual html
applications but not especially critical to visual rendering. Yeah, I know
all about "tag soup", but going overboard in the other direction is at
least as annoying and only dubiously productive. That other newsgroup
about html, ciwah, invariably puts me to sleep whenever I amble 'round
there looking for some, uh, "excitement".

 

[dorayme]

Realistically, css is about as optional as the paint on a car. You don't
need it, the car will work, but... Anybody who turns css off is a nitwit.

I take that personally! I sometimes turn css off because a nitwit
did the css in the first place.

Actually, a white reflective paint job on a car keeps the inside
cooler. There is a moral here about meaning. The distinction
between style and content is not quite Sound of Music, it is
dirtier.

 

[mbstevens]

Scripsit mbstevens:


Yes, _my_ comments have a meaning. (Semantics is the study of meaning.)

In any formal system, there is the syntax, which is amenable to absolute
and decidable questions of correctness or incorrectness. Onto this syntax
there might or might not be tacked on a semantics which interprets it.

Certainly, the various organizations and such can give a clear picture
of HTML's syntax, including what is definitely correct and incorrect.
But given the nature of web pages, it is impossible for the organizations to
give a complete picture of the semantics. Suggestions of what constitutes
good style certainly have value, but
questions of semantics such as you brought up were, at best,
pedantic, given that the op was really interested in the mechanics of what
was making his markup fail to show a color.

(And this is especially true since we do not have the
complete webpage and some very good pictures of the inside of the
op's head so that we can somehow devine his or her complete intentions)

 

[Jukka K. Korpela]

Scripsit Neredbojias:

Realistically, css is about as optional as the paint on a car.

Rather, the color(s) of the paint.

Anybody who turns css off is a nitwit.

So you are saying - though you probably didn't mean to say - that a visually
impaired person who can use web pages only when font size is very large and
text appears in a simple font, black on white, is a nitwit if he uses the
web.

You are also saying that I am a nitwit when I turn CSS off to test how a
page works without it (as required by W3C and other recommendations), or to
be able to read a page at all because it has a mass of broken CSS that does
not work on standards-conforming browsers, or to switch off the 18pt bold
font or 9px font for copy text.

Being an experienced alt.html'er, you will now how have to write down _200_
times "CSS is for optional presentational suggestions, and I will learn
Finnish just to read Yucca's books on web design and on CSS to really
understand this".

 

[Neredbojias]

Well bust mah britches and call me cheeky, on Tue, 04 Sep 2007 00:48:13
GMT dorayme scribed:

I take that personally! I sometimes turn css off because a nitwit
did the css in the first place.

Well, yeah, okay, but how often? The point is that without using
deprecated markup, css is just about the only styling option left. (I
suppose <h1>, etc., and things like <acronym> could be considered styling,
but they are germane in but few cases.)

Furthermore, css actually goes beyond styling into layout with options like
positioning, :before - content:, and even overflow. Today's Web is css
dependent, and only the most bare-bones and undesirable sites could exist
without it (... _or_, as I said, deprecated markup.)

Actually, a white reflective paint job on a car keeps the inside
cooler. There is a moral here about meaning. The distinction
between style and content is not quite Sound of Music, it is
dirtier.

I rather agree although I'd say the distinction between styling and layout
is the issue. Layout is required; styling technically isn't, but paint on
a car...

 

[Neredbojias]

Well bust mah britches and call me cheeky, on Tue, 04 Sep 2007 07:21:16
GMT Jukka K. Korpela scribed:

Scripsit Neredbojias:


Rather, the color(s) of the paint.


So you are saying - though you probably didn't mean to say - that a
visually impaired person who can use web pages only when font size is
very large and text appears in a simple font, black on white, is a
nitwit if he uses the web.

You are also saying that I am a nitwit when I turn CSS off to test how
a page works without it (as required by W3C and other
recommendations), or to be able to read a page at all because it has a
mass of broken CSS that does not work on standards-conforming
browsers, or to switch off the 18pt bold font or 9px font for copy
text.

Being an experienced alt.html'er, you will now how have to write down
_200_ times "CSS is for optional presentational suggestions, and I
will learn Finnish just to read Yucca's books on web design and on CSS
to really understand this".

Naturally there are exceptions. Water is required to survive, but not
too many people are going to drink from a lake with green slime on it.
My comment was directed at the prevailing habit of the overall majority
whether or not to enable css, and I think it is evident they would be
foolish not to. Testing, compensating for inept web pages, and
instituting provisions for personal physical challenges hardly invalidate
the principle.

I understand current wisdom _suggests_ that css is optional, but
pragmatically, it just isn't. We are within the medieval ages of html
evolution. Eventually the renaissance will come when persons analogous
to Galileo, Copernicus, and others with a brain will lift us all out of
the great Darkness and whoosh us into the light of a simpler html where
most of the average, general public might learn how to make a webpage
without the illogicalities and inconsistencies that plague mankind today.

Btw, I'm Swedish so learning Finnish might be heretical to my heritage.

 

[dorayme]

Well bust mah britches and call me cheeky, on Tue, 04 Sep 2007 00:48:13
GMT dorayme scribed:


Well, yeah, okay, but how often? The point is that without using
deprecated markup, css is just about the only styling option left. (I
suppose <h1>, etc., and things like <acronym> could be considered styling,
but they are germane in but few cases.)

Furthermore, css actually goes beyond styling into layout with options like
positioning, :before - content:,


I rather agree although I'd say the distinction between styling and layout
is the issue. Layout is required; styling technically isn't, but paint on
a car...

The distinction between styling and layout is not quite "the'
issue when it comes to the question about style and meaning
generally. When style is spoken of in the context of these
matters, it is almost always meant to include both colouring,
sizing, and yes, positioning and layout too. And quite rightly
for most purposes.

An example of where layout is *obviously* crucial to meaning is a
tabular table. A table is a good example of where how something
is laid out determines its meaning. Once the basic
meaning-related layout is achieved (greatly assisted by built in
HTML table magic), there comes a time for the *stylistic*
enhancements like colours, types of fonts, border types,
background colours and so on. But it is not a clear cut thing. If
you look at a table of atomic elements, you will see that some of
the styling, especially background colours, play a more than mere
optional role. These more than optional roles are where the
blurring occurs. It is often quite difficult to think up ways to
communicate things without the help of style.

Another way to look at it is this. There is a built in styling
(and I am not talking about default values, paras indented just
so so) to writing html itself. The order of the paras are
important to meaning. You can't be messing too much with classes
and positioning here otherwise you will change the meaning of the
whole, or confuse it. A list, visually, naturally, goes down the
page in the order it is written. It does not change the meaning
much if it is put inline. But there are constraints, you can't do
just anything in css without affecting the meaning communicated.

There is sometimes more than a marriage of convenience between
HTML and CSS, sometimes it is a holy union. Its sanctity is only
obscured by the triviality of so much that passes by on the
internet.

The best thing that any author can do is create create html that
can stand on its own as much as possible. That means it will mean
as much as what the author wants to convey as possible on its
very own. Then it is time to hitch up. The marriage will be all
the more successful, the more independent the html is in the
first place. But that does not mean that the marriage *merely*
enhances the meaning.