Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > can't get css hover to work on link borders

Reply
Thread Tools

can't get css hover to work on link borders

 
 
Greg N.
Guest
Posts: n/a
 
      06-27-2005
Hi folks,

I can't get css hover to work for me. have a look at the tiny test case
at http://coolhaus.de/misc/test2.htm

questions:

1. why does the hover border work on the second link, but not on the
first? The only difference is, that the first img has a class (for
image positioning), while the second has no class assigned.

2. in the second case, where the hover does (sortof) work, why is the
top hover border missing?

3. why does the green border as defined in my css, not show?
 
Reply With Quote
 
 
 
 
Steve Pugh
Guest
Posts: n/a
 
      06-27-2005
Greg N. wrote:

> I can't get css hover to work for me. have a look at the tiny test case
> at http://coolhaus.de/misc/test2.htm
>
> questions:
>
> 1. why does the hover border work on the second link, but not on the
> first? The only difference is, that the first img has a class (for
> image positioning), while the second has no class assigned.


You've floated the first image. Hence visually it is taken out of its
parent element, the <a> element in this case. The border is applied to
the <a>.

> 2. in the second case, where the hover does (sortof) work, why is the
> top hover border missing?


It's not missing. It's behind the image. The <a> element is only as
tall as the line height and the image is taller so it spills out the
top of the <a> and covers the top border. This also explains the gap
between the bottom of the image and the bottom border in better
browsers - the image sits on the text baseline and the <a> element
extends below that.

> 3. why does the green border as defined in my css, not show?


Because you've used a.imga: as the selector. Note the : at the end.

Steve

 
Reply With Quote
 
 
 
 
Jonathan N. Little
Guest
Posts: n/a
 
      06-27-2005
Greg N. wrote:
> Hi folks,
>
> I can't get css hover to work for me. have a look at the tiny test case
> at http://coolhaus.de/misc/test2.htm
>
> questions:
>
> 1. why does the hover border work on the second link, but not on the
> first? The only difference is, that the first img has a class (for
> image positioning), while the second has no class assigned.
>
> 2. in the second case, where the hover does (sortof) work, why is the
> top hover border missing?
>
> 3. why does the green border as defined in my css, not show?


#3
a.imga: {border:2px solid green; }
^
remove colon, syntax error

#2
border applied to link not image, floating image 'pulls' image out of
link's span. try:

.left { float:left; }
a.imga IMG {border:2px solid green; }
a.imga:hover IMG {border:2px solid red; }

#1 related to #2, 'float' and which element your applied the border, I
this the above CSS is what you where looking for




--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com
 
Reply With Quote
 
Greg N.
Guest
Posts: n/a
 
      06-27-2005
Jonathan N. Little wrote:

> #2
> border applied to link not image, floating image 'pulls' image out of
> link's span.


I'm with you, the hover should be applied to the <img> rather than the
<a>. I've been there before:

http://coolhaus.de/misc/test3.htm

So why does this work in FF, but not in IE? Well, I guess, a better
question is: how do I make this work in IE?
 
Reply With Quote
 
Greg N.
Guest
Posts: n/a
 
      06-27-2005
Greg N. wrote:

> http://coolhaus.de/misc/test3.htm


I have just (2 minutes ago) fixed a minor error in the sample referred
above. It does not affect the problem (the problem persists), but I
thought it's worth mentioning.
 
Reply With Quote
 
Jonathan N. Little
Guest
Posts: n/a
 
      06-27-2005
Greg N. wrote:

> Jonathan N. Little wrote:
>
>> #2
>> border applied to link not image, floating image 'pulls' image out of
>> link's span.

>
>
> I'm with you, the hover should be applied to the <img> rather than the
> <a>. I've been there before:
>
> http://coolhaus.de/misc/test3.htm
>
> So why does this work in FF, but not in IE? Well, I guess, a better
> question is: how do I make this work in IE?


The flippant answer is *'cuz IE sux!*
But a little testing shows that IE will not support pseudo-class 'hover'
on links but not on child elements

a.x { border: 2px solid green; }
a.x:hover { border: 2px solid red; }

a.y span{ border: 2px solid green; }
a.y:hover span{ border: 2px solid red; }

<p><a href="#" class="x">Test link 1</a></p>
<p><a href="#" class="y">Test <span>link 2</span></a></p>

but then again IE does not support 'hover' on non-link elements...

..z { border: 2px solid green; }
..z:hover { border: 2px solid red; }

<div class=z>This is a test</div>

which is the reason a JavaScript hack is required for CSS fly-out menus
to work on ol' IE!

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com
 
Reply With Quote
 
Mark Parnell
Guest
Posts: n/a
 
      06-27-2005
Previously in alt.html, "Greg N." <(E-Mail Removed)> said:

> http://coolhaus.de/misc/test3.htm
>
> So why does this work in FF, but not in IE?


IE only supports :hover on <a>.

> Well, I guess, a better
> question is: how do I make this work in IE?


Either try and rewrite the page so you *can* apply the :hover to the
<a>, or use Javascript. Neither is ideal of course. Luckily a border on
hover is not too important.

--
Mark Parnell
http://www.clarkecomputers.com.au
alt.html FAQ :: http://html-faq.com/
 
Reply With Quote
 
Lauri Raittila
Guest
Posts: n/a
 
      06-27-2005
in alt.html, Greg N. wrote:
> Greg N. wrote:
>
> > http://coolhaus.de/misc/test3.htm


a:hover img {}

--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Kohtuuhintainen yksiö/huone haussa Oulusta syyskuusta eteenpäin.
Searching places to sleep on axis Bonn - Tsech - Poland - baltic sea in
july
 
Reply With Quote
 
Jonathan N. Little
Guest
Posts: n/a
 
      06-28-2005
Lauri Raittila wrote:

> in alt.html, Greg N. wrote:
>
>>Greg N. wrote:
>>
>>
>>>http://coolhaus.de/misc/test3.htm

>
>
> a:hover img {}
>


Nope! IE won't cooperate, you'll have to pin your hopes on IE7!

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com
 
Reply With Quote
 
Jonathan N. Little
Guest
Posts: n/a
 
      06-28-2005
Lauri Raittila wrote:

> in alt.html, Greg N. wrote:
>
>>Greg N. wrote:
>>
>>
>>>http://coolhaus.de/misc/test3.htm

>
>
> a:hover img {}
>


This will do what I think you want for both IE and the Geckos...

.left { float: left; }
.imga IMG { border: 0; vertical-align: bottom; }
a.imga { border: 2px solid green; }
a.imga:hover { border: 2px solid red; }

<a class="imga left" href="http://www.google.de"><img
src="http://coolhaus.de/misc/smily.gif" width=29 height=20></a>
<a class="imga left" href="http://www.google.de"><img
src="http://coolhaus.de/misc/smily.gif" width=29 height=20></a>

Note: I floated both links, you see what happens if you don't...

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
CSS hover image link not working in IE dreamee HTML 0 10-01-2011 03:46 PM
css background doesn`t change - hover doesn`t work MZ HTML 7 03-17-2008 11:50 PM
link hover color not honored when using onclick event Richard Thoms HTML 6 12-02-2005 02:55 AM
Tables with different color left and right borders, no top or bottom borders, etc. George HTML 9 10-25-2004 04:25 PM
Order of visited, link, active, hover Ben Amada HTML 7 01-16-2004 06:06 AM



Advertisments