Re: [css-d] Strange lack of hover effect on BOTH IE6 and IE7

2009-03-17 Thread Els 
Phil Matt wrote:

 In IE, NOTHING happens when you hover over the small GIF image -
 which is a graphic created from a specific font. The idea is to
 simulate the typical text-decoration you'd see on an ordinary text
 link. In FF, the expected red lower border appears on hover. Here's
 the code snippet:

[snip]

 a:link img {
 text-decoration:none;
 padding:0;
 margin:0;
 border:0;
 }
 a:hover img, a:active img {
 border: 1px solid red;
 border-width: 0 0 3px 0;
 padding:0;
 margin:0;
 }

[snip]

Your example works on IE7 here.

In IE6 you'll need a trigger. IE6 will not show any hover effects on 
children of the a element, if the a element itself does not have 
any hover effect.
Try a hover effect on the link that won't be noticeable, such as 
'background-position:left top'. The default is 'center', so 'left top' 
is a change, while it won't affect anything on the page since you 
didn't have a background set anyway.

-- 
Els

__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Strange lack of hover effect on BOTH IE6 and IE7

2009-03-16 Thread Phil Matt 
De-lurking here.

I've been working on a site that's my usual mostly-CSS thing.

For some strange reason, I can't seem to get this simple hover effect to 
work in EITHER IE6 or IE7 - works as expected in Firefox. Maybe it's 
been too long a day, but I can't seem to figure it out.

In IE, NOTHING happens when you hover over the small GIF image - which 
is a graphic created from a specific font. The idea is to simulate the 
typical text-decoration you'd see on an ordinary text link. In FF, the 
expected red lower border appears on hover. Here's the code snippet:

!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Strict//EN 
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd;
html xmlns=http://www.w3.org/1999/xhtml; xml:lang=en
head
meta http-equiv=Content-Type content=text/html; charset=iso-8859-1
titleUntitled Document/title
style type=text/css

img {
border: 0;
}
a:link img {
text-decoration:none;
padding:0;
margin:0;
border:0;
}
a:hover img, a:active img {
border: 1px solid red;
border-width: 0 0 3px 0;
padding:0;
margin:0;
}
/style
/head

body

a href=http://www.someURL.com; class=titler
img src=donuts.gif alt=Donuts //a

/body
/html

What am I missing?

TIA for your help.

 Phil
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Strange lack of hover effect on BOTH IE6 and IE7

2009-03-16 Thread Atkinson, Sarah 
I think you can't do that in ie. You can only use hover to effect the  
a and not the img tags. Try taking out the img tag in the Css. The  
style should cascade down to the img anyway.

Sent from my iPhone

On Mar 16, 2009, at 11:15 PM, Phil Matt p...@philmatt.com wrote:

 De-lurking here.

 I've been working on a site that's my usual mostly-CSS thing.

 For some strange reason, I can't seem to get this simple hover  
 effect to
 work in EITHER IE6 or IE7 - works as expected in Firefox. Maybe it's
 been too long a day, but I can't seem to figure it out.

 In IE, NOTHING happens when you hover over the small GIF image - which
 is a graphic created from a specific font. The idea is to simulate the
 typical text-decoration you'd see on an ordinary text link. In FF, the
 expected red lower border appears on hover. Here's the code snippet:

 !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Strict//EN
 http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd;
 html xmlns=http://www.w3.org/1999/xhtml; xml:lang=en
 head
 meta http-equiv=Content-Type content=text/html;  
 charset=iso-8859-1
 titleUntitled Document/title
 style type=text/css

 img {
 border: 0;
 }
 a:link img {
 text-decoration:none;
 padding:0;
 margin:0;
 border:0;
 }
 a:hover img, a:active img {
 border: 1px solid red;
 border-width: 0 0 3px 0;
 padding:0;
 margin:0;
 }
 /style
 /head

 body

 a href=http://www.someURL.com; class=titler
 img src=donuts.gif alt=Donuts //a

 /body
 /html

 What am I missing?

 TIA for your help.

  Phil
 __
 css-discuss [cs...@lists.css-discuss.org]
 http://www.css-discuss.org/mailman/listinfo/css-d
 List wiki/FAQ -- http://css-discuss.incutio.com/
 List policies -- http://css-discuss.org/policies.html
 Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/