IE and inline styles...

[Viken Karaguesian]

Hello all,

It seems to me that IE ignores other styles altogether when an inline style
is used. As an example, check my site (in my signature file). In the "Latest
News and Headlines" you can see the new link to my "download center". When
you hover over that link, it does not behave the same way as the other
links. The difference? I added an inline style to that particular tag.

In my stylesheet I have:

a:link { color: #0066ff; }
a:visited { color: #ff9000; }
a:hover { color: #ff0000; font-variant: small-caps; font-weight: bold;
text-decoration: none }

In my HTML I have:

<a href="download.htm" style="font-weight: bold">download center.</a>

Basically, I want the words "Download Center" to be bold for the time being,
not just during hover. Anyway, Firefox applies the inline style *and* the
hover style defined in my stylesheet. IE totally ignores the style in my
stylesheet and applies the inline style only. I assume that Firefox is doing
it the right way, but I'm not sure.

Is this an IE bug or is it conficting code? I know that inline styles get
the highest priority, but I thought that applied only to similar style
statements. For example: If I had { font-weight: bold; text-decoration:
underline } in my stylesheet, but I wanted to change that in one instance
and did an inline style { text-decoration: none }, it would override that
statement only and not the whole style.

Comments?

--

Viken K.
http://home.comcast.net/~vikenk

[Jim Moe]

Viken Karaguesian wrote:

a:hover { color: #ff0000; font-variant: small-caps; font-weight: bold;
text-decoration: none }

In my HTML I have:
<a href="download.htm" style="font-weight: bold">download center.</a>

I can see where there may be differences in how the browsers decide
about this. Both apparently find the extra style ambiguous although both
chose :hover as the likely target. I do not know if either browser is correct.
I suggest creating a separate class for the link rather than an inline
style change.

--
jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)

[Jukka K. Korpela]

Viken Karaguesian wrote:

It seems to me that IE ignores other styles altogether when an inline style
is used.
You have jumped into a conclusion, but you have also found a genuine bug
in IE. (Not the only one, I'm afraid.)
As an example, check my site (in my signature file).
In general, it is productive to try and isolate a problem to a simplest
possible case where it still appears. Especially when asking for help in
public, this should be your homework.
IE totally ignores the style in my
stylesheet and applies the inline style only.
No, that's a wrong conclusion. IE _does_ apply the rules in the <style>
element as well, _except_ for one rule. (You probably mean the content
of that element by the expression "my stylesheet". But the content of
any style="..." element is your stylesheet, too.)
I know that inline styles get the highest priority,

Only in the sense described in the cascade rules. Those rules are
generally misunderstood, if known at all.

Instead of getting into the general discussion about the cascade once
again, I'll just point out the _real_ problem: IE does not implement
a:hover { font-variant: small-caps; }
correctly - it does not change the font variant on mouseover. It
recognizes and implements font-variant: small-caps properly*) in
general, as you can see by trying e.g. p { font-variant: small-caps; }.
But for some odd reason, this particular combination does not work. The
bug has not been fixed in IE 7 beta preview.

Even stranger, you can circumvent the bug by adding another rule that
changes the properties of the font. I haven't studied this in detail,
but e.g.

a:hover { font-variant: small-caps; font-size: 100%; }

helps as a workaround.

[Viken Karaguesian]

> again, I'll just point out the _real_ problem: IE does not implement

a:hover { font-variant: small-caps; }
correctly - it does not change the font variant on mouseover. It
I have noticed this myself. When I use a:hover {font-variant: small-caps}
by its self, IE does not implement the small-caps on hover. However, when I
added "font-weright: bold", the small caps were implemented.
But for some odd reason, this particular combination does not work. The
bug has not been fixed in IE 7 beta preview.

Has Microsoft make the IE7 beta available for download? I've been curious
about that.

--
Viken K.
http://home.comcast.net/~vikenk

[Viken Karaguesian]

I've removed the inline style. May be I'll wrap it in a <span> tag if I want
to make it bold again. Thanks for the replies.

--
Viken K.
http://home.comcast.net/~vikenk

[Jukka K. Korpela]

"Viken Karaguesian" <vikenkNO_SPAM@NO_SPAMcomcast.net> wrote:

Has Microsoft make the IE7 beta available for download?

Yes, some days ago: http://www.microsoft.com/windows/ie/ie7/

--
Yucca, http://www.cs.tut.fi/~jkorpela/