GoFuckYourself.com - Adult Webmaster Forum - CSS problem

GoFuckYourself.com - Adult Webmaster Forum (https://gfy.com/index.php)

- Fucking Around & Business Discussion (https://gfy.com/forumdisplay.php?f=26)

- - CSS problem - what am i doing wrong? (https://gfy.com/showthread.php?t=999482)

Mutt	11-27-2010 05:58 PM

CSS problem - what am i doing wrong?

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.

:helpme

TheDoc

11-27-2010 06:03 PM

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

11-27-2010 06:09 PM

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

11-27-2010 06:15 PM

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.

Code:

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	11-27-2010 06:36 PM

Quote:

Originally Posted by Tempest (Post 17732443)

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.

Code:

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

11-27-2010 06:43 PM

Quote:

Originally Posted by Mutt (Post 17732469)

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

11-27-2010 07:04 PM

Quote:

Originally Posted by Mutt (Post 17732417)

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. :helpme

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

Code:

<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

11-27-2010 07:30 PM

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

11-27-2010 07:56 PM

I love cock swallowing sluts.

All times are GMT -7. The time now is 12:56 AM.