Re: [css-d] Linked image showing style
Thanks Bradley! This worked fine. Thanks people for helping me work
this out . . .
Be well,
Kimi
At 1:17 PM +0100 3/25/07, Bradley Wright wrote:
It is the inline nature of the IMG that's making the BG colour shine
through.
Try this CSS:
.imgcenter a img {
display: block; /* removes background issues */
margin: 0 auto; /* centres image, as text-align will no longer
work */
}
--
Kim Brooks Wei
http://thewei.com
T 201.475.1854
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Linked image showing style
Why can't I get rid of the background that shows up when I hover on the bottom image of this page [the schooner]. I haven't been able to figure this out. Help greatly appreciated. http://www.weiboyz.com/ivanstuff/chesapeake/ -- Kim Brooks Wei http://thewei.com T 201.475.1854 __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Linked image showing style
-BEGIN PGP SIGNED MESSAGE-
Hash: SHA1
On Sun 25 March 2007 10:13, Kim Brooks Wei wrote:
Why can't I get rid of the background that shows up when I hover on
the bottom image of this page [the schooner]. I haven't been able to
figure this out. Help greatly appreciated.
http://www.weiboyz.com/ivanstuff/chesapeake/
It is because you set a background color for a:hover. If you make a definition
like:
a.img:hover { background: transparent; }
and change the link to:
a class=img href=http://johnsmith400.org;img
src=http://weiboyz.com/grfxivan/chesapeakepix/smithschooner.png; alt=smith
schooner //a
then it works here.
- --
Med venlig hilsen / Best regards
Thomas Olsen
That that is is that that is not is not.
-BEGIN PGP SIGNATURE-
Version: GnuPG v1.4.2.2 (GNU/Linux)
iD8DBQFGBkqKWNiChDCP5GkRAkK+AJ4+mGVUj2EVT0QYGUoYwXu775JYKgCfbJv8
0IlZhzgB6Ex4S0Dn/fOuIZo=
=0oZO
-END PGP SIGNATURE-
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Linked image showing style
On Sun, 25 Mar 2007, Kim Brooks Wei wrote:
Why can't I get rid of the background that shows up when I hover on
the bottom image of this page [the schooner].
...
http://www.weiboyz.com/ivanstuff/chesapeake/
What puzzles me is why Firefox shows just a colored bar under the image on
mouseover, whereas IE shows bars on all sides (like a frame). The latter
behavior is at least superficially more in accordance with CSS
specifications (strangely enough), since you have the rule
img {
padding: 16px;
border: none;
}
and the rule
a:hover { color: white; background: #809cb8;
}
When you hover the image, you also hover the enclosing a element, making
its background colored. The background of the image is transparent (as
explicitly set in your stylesheet), so the background of the a element
shines thru.
Adding, for example,
.imgcenter a { background: transparent; }
would remove the effect. I guess this is what you want, though it implies
that there is no visual clue of the image being a link, even on mouseover,
except the change of the pointer (cursor) shape and the eventual
appearance of an address on the status line.
--
Jukka Yucca Korpela, http://www.cs.tut.fi/~jkorpela/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Linked image showing style
On Mar 25, 2007, at 7:13 PM, Jukka K. Korpela wrote:
http://www.weiboyz.com/ivanstuff/chesapeake/
What puzzles me is why Firefox shows just a colored bar under the
image on
mouseover, whereas IE shows bars on all sides (like a frame). The
latter
behavior is at least superficially more in accordance with CSS
specifications (strangely enough), since you have the rule
img {
padding: 16px;
border: none;
}
and the rule
a:hover { color: white; background: #809cb8;
}
When you hover the image, you also hover the enclosing a element,
making
its background colored. The background of the image is transparent (as
explicitly set in your stylesheet), so the background of the a
element
shines thru.
But a is an inline element and it's line-box shouldn't be affected
by the dimensions of the image.
Gecko, Webkit, Opera, Konqueror, iCab all behave the same way, btw.
It is the same as span xxx emyyy/emzzz/span
http://dev.l-c-n.com/_temp/tmp-span-em.html
Philippe
---
Philippe Wittenbergh
http://emps.l-c-n.com
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Linked image showing style
From: Kim Brooks Wei [EMAIL PROTECTED]
Why can't I get rid of the background that shows up when I hover on
the bottom image of this page [the schooner]. I haven't been able to
figure this out. Help greatly appreciated.
http://www.weiboyz.com/ivanstuff/chesapeake/
Have you tried -
.imgcenter img {vertical-align: bottom;}
to remove the space left for text descenders?
Worked in Firefox, anyway. Didn't test anywhere else
~holly
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Linked image showing style
On 25 Mar 2007, at 12:12, Philippe Wittenbergh wrote:
But a is an inline element and it's line-box shouldn't be affected
by the dimensions of the image.
Gecko, Webkit, Opera, Konqueror, iCab all behave the same way, btw.
It is the inline nature of the IMG that's making the BG colour shine
through.
Try this CSS:
.imgcenter a img {
display: block; /* removes background issues */
margin: 0 auto; /* centres image, as text-align will no longer
work */
}
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
