Solved

CSS style sheet issue with IE8

Posted on 2010-08-20
4
419 Views
Last Modified: 2012-05-10
Can someone explain to me why the a: link section does not work in IE8 but does work in Firefox

  <style type="text/css">
a:link {
text-decoration:none;
font-size: 17px;
font-weight: bold;
font-family:sans-serif;
COLOR: #7E6C40;
}
a:visited {
COLOR: #7E6C40;
}
a:hover {
COLOR: #7E6C40;
}
a:active {
COLOR: #7E6C40;
}
  </style>

This isn't an actual style sheet, but part of my page source code - I don't know if that matters or not....
0
Comment
Question by:bwask
  • 2
4 Comments
 
LVL 83

Expert Comment

by:Dave Baldwin
ID: 33488300
It seems to work fine.  What is it not doing for you?  You may have other code interacting with it.
0
 
LVL 13

Expert Comment

by:myderrick
ID: 33491605
Hi, It works for me too. See my codes.

Please note the following as well (although you may already know):

Note: a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective!!

Note: a:active MUST come after a:hover in the CSS definition in order to be effective!!

Note: Pseudo-class names are not case-sensitive.

Good luck

MD
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>


<style type="text/css">
a:link {
text-decoration:none;
font-size: 17px;
font-weight: bold;
font-family:sans-serif;
COLOR: #7E6C40;
}
a:visited {
COLOR: #7E6C40;
}
a:hover {
COLOR: #7E6C40;
}
a:active {
COLOR: #7E6C40;
}
  </style>
  
  
</head>

<body>

<a href="#">Hello</a>
</body>
</html>

Open in new window

0
 

Author Comment

by:bwask
ID: 33501984
It's the first section that isn't working -
My links are blue, the font size is wrong,...
All of the visited, hover and active do what they're supposed to.
It's this that has me stumped -
a:link {
text-decoration:none;
font-size: 17px;
font-weight: bold;
font-family:sans-serif;

I can take all of this out and not have it make a difference.

What I want to have is what you see in the second html - "eric-test"

And then finally a screen shot of what it looks like - links wrong color, font type wrong, font size wrong.



Working.html
eric-test.html
Screenshot.jpg
0
 
LVL 83

Accepted Solution

by:
Dave Baldwin earned 500 total points
ID: 33502912
You need to put all that in a generic 'a' style for it to affect the rest.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>


<style type="text/css">
a {
text-decoration:none;
font-size: 17px;
font-weight: bold;
font-family:sans-serif;
COLOR: #7E6C40;
}
a:link {
COLOR: #7E6C40;
}
a:visited {
COLOR: #7E6C40;
}
a:hover {
COLOR: #7E6C40;
}
a:active {
COLOR: #7E6C40;
}
  </style>
  
  
</head>

<body>

<a href="#">Hello</a>
</body>
</html>

Open in new window

0

Featured Post

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

820 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question