PDA

View Full Version : CSS Attribute Targets



Tornado94
Mar 29th, 2007, 04:17 AM
Are there any reasons why the following CSS is not rendering in IE7?
This code does work in Firefox.

a[href] { color:red }

a[href][title] { background: yellow }

a[href="#top"] { background: lime }

rmedek
Mar 29th, 2007, 05:07 AM
IE doesn't recognize attribute selectors. You'd need to add extra markup, like a class or ID, to the element you're trying to target.

Arbitrator
Mar 29th, 2007, 01:40 PM
IE doesn't recognize attribute selectors. You'd need to add extra markup, like a class or ID, to the element you're trying to target.Internet Explorer 7, the version that the OP is having difficulty with, does support attribute selectors.

I tested the following code in Internet Explorer 7 and it works fine. You may need to provide more code or a live example.


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html lang="en-Latn-US">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>CF 110995</title>

<meta name="Author" content="Patrick Garies">

<style type="text/css">
* { margin: 0; }
html { padding: 1em; }
a[href] { color: green; text-decoration: none; }
a[href][title] { background: #eee; padding: 0.3em; }
a[href="http://www.codingforums.com/"] { font-size: 4em; }
</style>

</head>
<body>

<div><a title="Web Coding and Development Forums" href="http://www.codingforums.com/">CodingForums.com</a></div>

</body>
</html>

xlinkthelegendx
May 12th, 2007, 11:56 PM
Internet Explorer 7, the version that the OP is having difficulty with, does support attribute selectors.

I tested the following code in Internet Explorer 7 and it works fine. You may need to provide more code or a live example.




I'm having the same problem too, however, I am using an external stylesheet and am also using this for creating a link image for links that are pointing to external sites. The code I am using looks like this (I use absolute links to differentiate what is and isn't an external link):




In the stylesheet:

a[href="http:"]:link {
background: url(images/ext_link.gif) no-repeat right top;
padding-right: 10px;
text-decoration: none;
}

NOTE: I also have one for the :visited and :hover attributes too. The code should only apply to links that start with "http:".

In the html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html" charset="UTF-8" />
<title>My Page</title>
<meta name="Author" content="Scott" />
<link type="text/css" rel="stylesheet" href="/stylesheets/style.css" />
</head>
<body>
<!-- The following should be affected by the style. -->
<div><a href="http://www.codingforums.com" title="Coding Forums">Coding Forums</a></div>

<!-- The following should not be affected by the style. -->
<div><a href="mypage.html" title="My Page">My Page</a></div>
</body>
</html>

Is there something I am doing wrong? This code works perfectly in Firefox, but the images don't show up in IE. If you need to see the full css file, go here (http://www.scottmutter.us/stylesheets/style.css).

Arbitrator
May 13th, 2007, 06:15 AM
I'm having the same problem too, however, I am using an external stylesheet and am also using this for creating a link image for links that are pointing to external sites. The code I am using looks like this (I use absolute links to differentiate what is and isn't an external link):




In the stylesheet:

a[href="http:"]:link {
background: url(images/ext_link.gif) no-repeat right top;
padding-right: 10px;
text-decoration: none;
}

NOTE: I also have one for the :visited and :hover attributes too. The code should only apply to links that start with "http:".See the following:


CSS3 Selectors Module (http://www.w3.org/TR/css3-selectors/#selectors)
Web Browser CSS3 Selector Support (http://www.webdevout.net/browser-support-css#css3selectors)


The selector you need appears to be a[href^="http://"]:link. Your current selector should not be matching in Firefox.