[WSG] Css attributes
Hi
I'm trying to build some attribute selectors in CSS to check for missing
content. Ie.
IMG[alt=]
{
border-width: 3px;
border-color: #ff;
border-style: solid;
}
// will place a red border around any image with an empty ALT tag
IMG:not([alt])
{
border-width: 3px;
border-color: #ff;
border-style: dotted;
}
// will place a red border around any image with no ALT tag
The problem is the second one (not) only works with Firefox and Chrome. It
won't work in IE8
Does anyone have a suggestion?
Thanks
Tim
---
Tim Baillie | Quality Assurance Coordinator, ACUonline | Australian Catholic
University
Email tim.bail...@acu.edu.aumailto:tim.bail...@acu.edu.au | Phone +61 2 9739
2287 | Facsimile +61 2 9460 4380
North Sydney Campus (MacKillop)
Office 4, Level 1, 23 Berry Street
North Sydney NSW 2060 Australia
PO Box 968 | North Sydney | NSW 2059
CRICOS Reg. 4G, 00112C, 00873F, 00885B
Blackboard Support Phone 1800 759 660 (Ask for ACU Blackboard support)
Email blackboard.supp...@acu.edu.aumailto:blackboard.supp...@acu.edu.au
If anyone can show me, and prove to me, that I am wrong in thought or deed, I
will gladly change. I seek the truth, which never yet hurt anybody. It is only
persistence in self-delusion and ignorance which does harm.
- Marcus Aurelius Antoninus Augustus
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
Re: [WSG] Css attributes
Tim,
:not() is a CSS3 pseudo-class, IE8 doesn't support any CSS3 pseudo-classes.
However you could use http://selectivizr.com/ to add that support using
javascript.
Cheers,
Ryan
On Tue, Oct 19, 2010 at 11:54 AM, Tim Baillie tim.bail...@acu.edu.auwrote:
Hi
I’m trying to build some attribute selectors in CSS to check for missing
content. Ie.
IMG[alt=]
{
border-width: 3px;
border-color: #ff;
border-style: solid;
}
// will place a red border around any image with an empty ALT tag
IMG:not([alt])
{
border-width: 3px;
border-color: #ff;
border-style: dotted;
}
// will place a red border around any image with no ALT tag
The problem is the second one (not) only works with Firefox and Chrome. It
won’t work in IE8
Does anyone have a suggestion?
Thanks
Tim
*
---
*
*Tim Baillie *| Quality Assurance Coordinator, ACUonline | *Australian
Catholic University
*Email tim.bail...@acu.edu.au | Phone +61 2 9739 *2287* | Facsimile +61 2
9460 *4380
North Sydney Campus (MacKillop)*
Office 4, Level 1, 23 Berry Street
North Sydney NSW 2060 Australia
PO Box 968 | North Sydney | NSW 2059
* *
*CRICOS Reg. 4G, 00112C, 00873F, 00885B*
Blackboard Support Phone *1800 759 660 *(Ask for ACU Blackboard support)
Email blackboard.supp...@acu.edu.au
If anyone can show me, and prove to me, that I am wrong in thought or deed,
I will gladly change. I seek the truth, which never yet hurt anybody. It is
only persistence in self-delusion and ignorance which does harm.
- Marcus Aurelius Antoninus Augustus
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
Re: [WSG] Css attributes
Or, if you're already using a Javascript library (which many IE CSS3
replacement scripts require) - like jQuery - you can simply add a class
to the targeted element because jQuery understands CSS3 selectors, eg.
{
$(img:not([alt])).addClass(empty-image);
}
Disclaimer: I haven't used the :not selector before so am not sure if
this is the correct syntax: *img:not([alt])* - I just borrowed from
yours below ;)
* Christian Fagan
* Fagan Design
* fagandesign.com.au
* p: (+613) 9314-1841
On 19/10/2010 2:04 PM, Ryan Seddon wrote:
Tim,
:not() is a CSS3 pseudo-class, IE8 doesn't support any CSS3
pseudo-classes. However you could use http://selectivizr.com/ to add
that support using javascript.
Cheers,
Ryan
On Tue, Oct 19, 2010 at 11:54 AM, Tim Baillie tim.bail...@acu.edu.au
mailto:tim.bail...@acu.edu.au wrote:
Hi
I’m trying to build some attribute selectors in CSS to check for
missing content. Ie.
IMG[alt=]
{
border-width: 3px;
border-color: #ff;
border-style: solid;
}
// will place a red border around any image with an empty ALT tag
IMG:not([alt])
{
border-width: 3px;
border-color: #ff;
border-style: dotted;
}
// will place a red border around any image with no ALT tag
The problem is the second one (not) only works with Firefox and
Chrome. It won’t work in IE8
Does anyone have a suggestion?
Thanks
Tim
*---*
*Tim Baillie *| Quality Assurance Coordinator, ACUonline |
*Australian Catholic University
*Email tim.bail...@acu.edu.au mailto:tim.bail...@acu.edu.au |
Phone +61 2 9739 *2287* | Facsimile +61 2 9460 *4380
North Sydney Campus (MacKillop)*
Office 4, Level 1, 23 Berry Street
North Sydney NSW 2060 Australia
PO Box 968 | North Sydney | NSW 2059
* *
*CRICOS Reg. 4G, 00112C, 00873F, 00885B*
Blackboard Support Phone *1800 759 660 *(Ask for ACU Blackboard
support)
Email blackboard.supp...@acu.edu.au
mailto:blackboard.supp...@acu.edu.au
If anyone can show me, and prove to me, that I am wrong in thought
or deed, I will gladly change. I seek the truth, which never yet
hurt anybody. It is only persistence in self-delusion and
ignorance which does harm.
- Marcus Aurelius Antoninus Augustus
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
mailto:memberh...@webstandardsgroup.org
***
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
