CSS in ASP.NET

T

tshad

I have been trying to use CSS in my ASP.NET pages and am trying to figure
out the Stylesheet order and differences between Netscape (and Mozilla) and
IE.

I have the following in my .css file that is linked by:

<link href="staffing.css" rel="stylesheet" type="text/css">
*******************************************************************

a {
font-size:smaller;
}
a:link {
color:#4AAABD;
}
a:visited {
color:#4AAABD;
}
a:active {
color:#4AAABD;
}
*****************************************************************

This makes my links in my menu dark turquoise and underlined. It doesn't
change at all when hovering over the links.

It is the same with both Netscape and IE. The letters in IE are quite a bit
larger that Netscape, for some reason

This makes it difficult using "small" instead of a fixed size.

If I add the following into the html page:

a { color: #0000BB; text-decoration: none; }
a:hover { color: #FF0000; text-decoration: underline; }

In IE and netscape, it takes the underline away when you are not hovering
and adds the undeline when you are hovering (as it should).

But, IE will change the letters to "Red", which it should and Netscape (and
Mozilla) don't. It is still the dark turquoise. Why is that?

If I take the links out of the .css file, the links will be blue and will
turn red when hovering in all the browsers.

So why doesn't it change red in Netscape. The text-decoration works, why
not the color?

Thanks,

Tom
 
M

Michel de Becdelièvre

If I add the following into the html page:

a { color: #0000BB; text-decoration: none; }
a:hover { color: #FF0000; text-decoration: underline; }

In IE and netscape, it takes the underline away when you are not hovering
and adds the undeline when you are hovering (as it should).

But, IE will change the letters to "Red", which it should and Netscape
(and
Mozilla) don't. It is still the dark turquoise. Why is that?

If I take the links out of the .css file, the links will be blue and will
turn red when hovering in all the browsers.

So why doesn't it change red in Netscape. The text-decoration works, why
not the color?
Click to expand...

First this as nothing to do with ASP.Net in itself. It has to do with the
sloppy implementation of CSS by various versions of IE. (Visual Studio has
however the nasty habbit of showing all non standard Microsoft extensions in
intellisense, it takes discipline to avoid them / use them correctly).

It gets much better with IE6, but it is still waaaaay out of the norm. IE6
implements most of CSS1 and a few of CSS2 (but see caveat below).

Have a look at "quirks mode" in google, IE changes behaviour (to maintain
ascending compatibility) depending on the DOCTYPE string :
http://msdn.microsoft.com/library/default.asp?url=/library/en-us/dnie60/html/cssenhancements.asp

If you use for instance : <!DOCTYPE html PUBLIC "-//W3C//DTD html 4.01
Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

things get better, but you are not yet home.

The most common problem is that many "default" values for IE6 are
different from the HTML / CSS norm, so you should first build a CSS for
explicitly setting most of the default values to something that suits you.
Misrosoft is IMO not entirelly at fault here, since a number of these
"official standard" default values are the most unatural / unexpected of the
available behaviour you can get. For some I get caught each time I use them
(less often now, I have my standard CSS sheet that I paste everywhere). As a
startup point look for the sample CSS sheets from W3C.

Then there are (many) IE6 bugs.

Usually when unexpected behaviour occurs, Mozilla / Firefox is standard
compliant, IE6 is not.
IE6 is waaay out of date (4 years +), IE7 is rumoured to be in the
works, but Microsoft got sleepy and complacent here.
 
G

Guest

tshad said:
I have been trying to use CSS in my ASP.NET pages and am trying to figure
out the Stylesheet order and differences between Netscape (and Mozilla) and
IE.

I have the following in my .css file that is linked by:

<link href="staffing.css" rel="stylesheet" type="text/css">
*******************************************************************

a {
font-size:smaller;
}
a:link {
color:#4AAABD;
}
a:visited {
color:#4AAABD;
}
a:active {
color:#4AAABD;
}
*****************************************************************

This makes my links in my menu dark turquoise and underlined. It doesn't
change at all when hovering over the links.

It is the same with both Netscape and IE. The letters in IE are quite a bit
larger that Netscape, for some reason

This makes it difficult using "small" instead of a fixed size.

If I add the following into the html page:

a { color: #0000BB; text-decoration: none; }
a:hover { color: #FF0000; text-decoration: underline; }

In IE and netscape, it takes the underline away when you are not hovering
and adds the undeline when you are hovering (as it should).

But, IE will change the letters to "Red", which it should and Netscape (and
Mozilla) don't. It is still the dark turquoise. Why is that?

If I take the links out of the .css file, the links will be blue and will
turn red when hovering in all the browsers.

So why doesn't it change red in Netscape. The text-decoration works, why
not the color?

Thanks,

Tom
Click to expand...

I would say the a:link and a:visited rules are overriding the color
specified by the a rule, since they are more specific. I would be inclined
to say this is the correct behavior, and that IE has its specificity
calculation wrong.
Here are a couple links that might shed some light on the issue:
http://www.w3.org/TR/CSS21/cascade.html#specificity
http://www.w3.org/TR/CSS21/selector.html#link-pseudo-classes
 
C

clintonG

I've just learned there is a correct order to manage specificity when
declaring style for the anchor element. The correct order is alleged to be:

link
visited
hover
active

I learned this at W3Schools and do not remember if an explicit explanation
was given. Try it out.
 
T

tshad

Michel de Becdelièvre said:
First this as nothing to do with ASP.Net in itself. It has to do with the
sloppy implementation of CSS by various versions of IE. (Visual Studio has
however the nasty habbit of showing all non standard Microsoft extensions
in intellisense, it takes discipline to avoid them / use them correctly).

It gets much better with IE6, but it is still waaaaay out of the norm. IE6
implements most of CSS1 and a few of CSS2 (but see caveat below).

Have a look at "quirks mode" in google, IE changes behaviour (to maintain
ascending compatibility) depending on the DOCTYPE string :
http://msdn.microsoft.com/library/default.asp?url=/library/en-us/dnie60/html/cssenhancements.asp

If you use for instance : <!DOCTYPE html PUBLIC "-//W3C//DTD html 4.01
Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

things get better, but you are not yet home.

The most common problem is that many "default" values for IE6 are
different from the HTML / CSS norm, so you should first build a CSS for
explicitly setting most of the default values to something that suits you.
Misrosoft is IMO not entirelly at fault here, since a number of these
"official standard" default values are the most unatural / unexpected of
the available behaviour you can get. For some I get caught each time I use
them (less often now, I have my standard CSS sheet that I paste
everywhere). As a startup point look for the sample CSS sheets from W3C.
Click to expand...

Is this why the image size and font size are larger than Mozilla and
Netscape if I use font-size:small?

If I set the default size (say, font-size:12) and then follow that with
small, then I should get the same size for IE and Mozilla?

Also, when you say your standard CSS sheet are you talking about one you set
up yourself? Where would I gat a sample startup CSS sheet from W3C?

Also, how would you handle that? Would you set up a default sheet that all
your other sheets call?

Thanks,

Tom.
 
T

tshad

Jeremy Davis said:
I would say the a:link and a:visited rules are overriding the color
specified by the a rule, since they are more specific.
Click to expand...

But then why is Netscape and Mozilla not using the red from the a:hover rule
as IE is - they use the underline rule?

a:hover { color: #FF0000; text-decoration: underline; }

Thanks,

Tom.
 
T

tshad

clintonG said:
I've just learned there is a correct order to manage specificity when
declaring style for the anchor element. The correct order is alleged to
be:

link
visited
hover
active
Click to expand...

The order didn't seem to matter.

If I put the line from my page into the CSS sheet:

a:hover { color: #FF0000; text-decoration: underline; }

before or after the a:active, it worked correctly and took the red color.

It doesn't seem to take the red if inside the aspx page (but does take the
underline, however - maybe because there is no text-decoration explicitly
defined in the css sheet).

Tom
 
G

Guest

tshad said:
But then why is Netscape and Mozilla not using the red from the a:hover rule
as IE is - they use the underline rule?

a:hover { color: #FF0000; text-decoration: underline; }
Click to expand...

Ah. I hadn't noticed that the red was coming from the :hover rule.
What it seems is happening is that since the :link and :hover pseudo-classes
have the same selectivity whichever is parsed last is the one that takes
precedence. Am I right in assuming that your linked stylesheet comes after
the <style> block in your page?
By the way, I would say it's the :link (and/or :visited) rule that's
fighting with your :hover here, not :active. The link I posted on selectors
explains what they're all about.
 
M

Michel de Becdelièvre

Is this why the image size and font size are larger than Mozilla and
Netscape if I use font-size:small?
Click to expand...

If I remember well there is a bug (sorry : "this behaviour is by
design") in pre IE6 versions of IE on this specific instruction.
The bug is either still present in IE6 or dependent on the "quirk mode"
(DOCTYPE), I don't remember.

(Update) Google is your friend :
http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/fontsize.asp

Remarks
As of Internet Explorer 6, when you use the !DOCTYPE declaration to
specify standards-compliant mode, the default value for this property is
small, not medium.

Negative values are not allowed. Font sizes using the proportional "em"
measure are based on the font size of the parent object.

Possible length values specified in a relative measurement, using the
height of the element's font (em) or the height of the letter "x" (ex), are
supported in Internet Explorer 4.0 and later.

If I set the default size (say, font-size:12) and then follow that with
small, then I should get the same size for IE and Mozilla?

Also, when you say your standard CSS sheet are you talking about one you
set up yourself? Where would I gat a sample startup CSS sheet from W3C?
Click to expand...

Google is your friend : http://www.w3.org/TR/CSS21/sample.html,
http://www.w3.org/TR/REC-CSS2/sample.html

I think I started from one of those two, and built up gradually from
there whenever I noticed a difference in default behavior, it's a work in
progress, and tied to my projects. I also abandoned all support for anything
older than IE6 / Mozilla / Firefox.
 
T

tshad

Jeremy Davis said:
Ah. I hadn't noticed that the red was coming from the :hover rule.
What it seems is happening is that since the :link and :hover
pseudo-classes
have the same selectivity whichever is parsed last is the one that takes
precedence. Am I right in assuming that your linked stylesheet comes after
the <style> block in your page?
Click to expand...

Yes.

I know that if you have 2 style sections, the second will take pecedence
over the first.

Is it the same for files?

For example, if I had:

<style>
<link>
<style>

The second style would have precedence over the other 2 and the link would
have precedence over the 1st one?
By the way, I would say it's the :link (and/or :visited) rule that's
fighting with your :hover here, not :active. The link I posted on
selectors
explains what they're all about.
Click to expand...

You were right. The link was the problem.

Thanks,

Tom
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

<asp:HyperLink ans css color 1
The elusive hover and <p> 2
I can't get my Treeiew to pay attention to my CssClass. 1
TreeNode colors come from anchor colors 1
Treenode color from anchor style 1
Skins and CSS in ASP.NET 2.0. I am completely confused! 2
CSS with FORMS authentication 2
need help with css. don't see the border, box, and font specification 2

Top