Image and text borders within div

[Auris]

Hi,

I am trying to make a floating element that contains an image link and text.

My problem is that the border of the image is not really wrapping around nicely.

So i use margin and padding with negative px to fix it, but obviously it's a dirty way. Could some one see what i do wrong?

here's html:

<div class="item_float">
	<a href="http://dabija.lt.....">
        <div class="thumb_style">
            <img src="http://dabija.lt/wp-content/...." width="160" height="160" alt="Proginė puok?tė"/>
        </div>
    <div class="thumb_text">Proginės puok?tės</div>	
    </a>
</div>

here's css(notice -4px, etc.):

.item_float { float: left; margin:10px; padding:0px; text-align:center; width:160px;}

.thumb_style { width: 160px; margin:0px 0px -4px 0px; padding:0px 0px -4px 0px; border: 1px solid grey; }

.thumb_text { background:grey; margin:0px -2px 0px 0px; padding:0px -2px 0px 0px; color:white; }

here's the website:

http://dabija.lt/

any help appreciated.

[webdev1958]

Hi,
My problem is that the border of the image is not really wrapping around nicely.

I'm not following exactly where you want the border in relation to the image and text

[Auris]

I'm not following exactly where you want the border in relation to the image and text

Well, i want it exactly were it is now. But i don't understand why it doesn't do it properly with margin and padding 0px. Instead i have to use negative sign to correct the borders.

while if i do styling in HTML it works ok.

<div class="item_float">
	<a href="http://dabija.lt/geliu-pristatymas-siauliuose/progines-puokstes/">
		<img src="http://dabija.lt/wp-content/gallery/progines-puokstes/dscf8894_1.jpg?1640017353" width="160" height="160" alt="Proginės puok?tės" style="border:1px solid grey;"><p style="margin:0px 8px 0px 8px; padding:0px 8px 0px 8px;background:grey;color:white;text-align:center;">Proginės puok?tės</p>
	</a>
</div>

here i have: border:1px solid grey;

when i use class thumb_style i have to do this ridiculous:

margin:0px 0px -4px 0px; padding:0px 0px -4px 0px;

and i don't see why

[webdev1958]

Then you must have styles somewhere else in your css also affecting those elements because there is no reason why you should need -ve margins or paddings to do what you need.

[Auris]

Then you must have styles somewhere else in your css also affecting those elements because there is no reason why you should need -ve margins or paddings to do what you need.

If it is that, then I'd be happy. But that's why i created these 3 classes, so nothing else would affect the style. And they are not repeating throghout my stylesheet. I might be doing some obvious mistake here. Hopefully, it will emerge soon. Thanks.