This is Interesting: Free Magazines for Graphics designers and webmasters
Home > Archive > Stylesheets > August 2006 > change background on hover
You are viewing an archived Text-only version of the thread.
To view this thread in it's original format and/or if you want to reply to
this thread please [click here]
| Author |
change background on hover
|
|
| wolfing1@gmail.com 2006-08-02, 11:35 am |
| I'm trying to code this without using javascript, and in IE it looks
perfect, but in Firefox for some reason the images start like in the
middle (top-down) of the <a></a>:
<a class="sizechart" href="images/size_chart.jpg" target="_new"><img
src="images/blank.gif" width="66" height="26" alt="" border="0"></a>
(blank.gif is a 1 pixel transparent image)
This is the class in my CSS file
..sizechart
{ background: url(images/size_chart_button.jpg) no-repeat top left}
..sizechart:hover
{ background: url(images/size_chart_button_rollover.jpg) no-repeat top
left}
(both size_chart_button.jpg and size_chart_button_rollover.jpg are
66x26 images)
So any idea what's going on?
| |
|
| wolfing1@XXXXXXXXXX wrote:
> I'm trying to code this without using javascript, and in IE it looks
> perfect, but in Firefox for some reason the images start like in the
> middle (top-down) of the <a></a>:
> <a class="sizechart" href="images/size_chart.jpg" target="_new"><img
> src="images/blank.gif" width="66" height="26" alt="" border="0"></a>
>
> (blank.gif is a 1 pixel transparent image)
>
> This is the class in my CSS file
> .sizechart
> { background: url(images/size_chart_button.jpg) no-repeat top left}
> .sizechart:hover
> { background: url(images/size_chart_button_rollover.jpg) no-repeat top
> left}
>
> (both size_chart_button.jpg and size_chart_button_rollover.jpg are
> 66x26 images)
>
> So any idea what's going on?
URL?
Wild guess: what happens if you add this to the stylesheet:
a.sizechart img{display:block;}
?
--
Els http://locusmeus.com/
accessible web design: http://locusoptimus.com/
Now playing: Boaz Shar`abi - Everything Is O.K. With Me
| |
| wolfing1@gmail.com 2006-08-02, 11:35 am |
|
Els wrote:
> wolfing1@XXXXXXXXXX wrote:
>
>
> URL?
> Wild guess: what happens if you add this to the stylesheet:
> a.sizechart img{display:block;}
> ?
OMG what does that do?
When I added it, IE still showed it fine, but it the image totally
disappeared from Firefox. Not entirely sure what that would do I
removed the "img" part, and left it as
a.sizechart {display:block;}
and now it shows fine?
I'm totally clueless at what just happened, but seems to be working now
*still scratching my head*
Thanks by the way :)
| |
|
| wolfing1@XXXXXXXXXX wrote:
> Els wrote:
> OMG what does that do?
It makes the image display as a block element instead of inline.
In some cases (depending on the styles for the parent elements), that
helps eliminate unwanted space.
> When I added it, IE still showed it fine, but it the image totally
> disappeared from Firefox. Not entirely sure what that would do I
> removed the "img" part, and left it as
> a.sizechart {display:block;}
> and now it shows fine?
Makes sense.
> I'm totally clueless at what just happened, but seems to be working now
> *still scratching my head*
<g>
If you had the <a> as an inline element, the line-height was probably
not 26px high. So, the background only showed at the height of the
text. IE showed it entirely, because it extended the height of the <a>
element to encompass the 26px high image.
> Thanks by the way :)
np :-)
--
Els http://locusmeus.com/
accessible web design: http://locusoptimus.com/
Now playing: - Lost In Faith - Matti Caspi
|
|
|
| | Copyright 2003 - 2008 forum4designers.com Software forum Computer Hardware reviews |
|