CSS problem - what am i doing wrong?

[Mutt]

I'm trying to put a single pixel border around thumbnails with some padding between the thumbnail and border - and on hover the border will change color.

so i did this

a.blah:link
{border: 1px solid #000;
padding: 4px;
}

a.blah:hover
{border: 1px solid #FFF;
padding: 4px;
}

and......

<a href="file.wmv" class="blah"><img src="thumbnail.jpg" border="0"></a>

what the result is - there's a single border with the 4px padding but the border doesn't surround the entire thumbnail, it's only like 10 pixels in height.

[TheDoc]

May be some hack in way to do it... but easiest way across all browsers would be to wrap the picture in a div, which has your pad and border, then hover that div.

set a width/height on the a in css to fix the height issue..

[Kiopa_Matt]

I'm no designer, so there's a chance this won't work, but try changing your HTML to:

<span class="blah"><a href="file.wmv"><img ... ></span>

Then in your CSS, add in the attribute "display: block;"

Don't scold me if that doesn't work though.

[Tempest]

yeah.. thumbs etc. are a freakin pain in the ass for hovers etc. Maybe try this.. Note you need to set the width and height.

a.blah:link,a.blah:hover,a.blah:active{
	width:XXpx;
	height:XXpx;
	border:1px solid #00f;
	text-decoration:none;
	padding:4px;
	display:block;
}

a.blah:hover{
	border:1px solid #f00;
}

[Mutt]

Originally Posted by Tempest

yeah.. thumbs etc. are a freakin pain in the ass for hovers etc. Maybe try this.. Note you need to set the width and height.

a.blah:link,a.blah:hover,a.blah:active{
	width:XXpx;
	height:XXpx;
	border:1px solid #00f;
	text-decoration:none;
	padding:4px;
	display:block;
}

a.blah:hover{
	border:1px solid #f00;
}

thanks - display: block solved it - when i added height and width it messed up the padding - the top and side paddings were the same but the bottom padding was larger.

thanks for the other suggestions, they probably work too.

[Tempest]

Originally Posted by Mutt

thanks - display: block solved it - when i added height and width it messed up the padding - the top and side paddings were the same but the bottom padding was larger.

You have to take into account the padding and border width usually when doing the width/height.

[Simon]

Originally Posted by Mutt

I'm trying to put a single pixel border around thumbnails with some padding between the thumbnail and border - and on hover the border will change color.

You can do it by putting the class on the Image tag instead of the Anchor/Link tag.

<style type="text/css">
a img.thumb {border:1px solid #000; padding:4px;}
a:hover img.thumb {border:1px solid #fff; padding:4px;}
</style>

<a href="file.wmv"><img class="thumb" src="thumbnail.jpg" border="0" width="300" height="200" /></a>

[Kiopa_Matt]

Not even a quick thank you to me for solving your problem?

Dick... didn't your mom teach you manners? :P

PS. Don't worry, I'm just drunk & joking.

[munki]

I love cock swallowing sluts.