ansaurus

Question

Answer 1

+1 A:

I thinkg this fix will work for you:

div .portfolio .works a img {
-moz-box-shadow:1px 2px 3px #222222;
opacity:0.8;
}

div .portfolio .works a {
border:1px solid #FF0000;
display:block;
float:left;
height:220px;
margin:0 10px 10px 0;
padding:4px;
width:280px;
}

Basically what i did was just switched some styling from img to anchor. You can see in this image that it does work ok.

GaVrA 2010-07-06 16:16:36

Thanks man. I don't know why 'a img' screwed that all up, but specifying those properties in 'a' worked fine. Thanks!

w1sh 2010-07-06 16:30:24

Anchor tags are inline elements, and so are img tags. Now, you had float:left on img tags, and whenever you are using float you have to be super careful about your markup. Because you were floating images, they were all stacked up the way you wanted, but because you didnt use any 'clearing' technique for floated elements, those anchors were stuck on top of the container. Now, because they are inline, i think they were a bit to the right(aka "after" the content, and the content being all those images). If this comment makes sense to you - kudos! :))

GaVrA 2010-07-06 16:38:11

@w1sh Oh and dont forget to mark answers as accepted... ;)

GaVrA 2010-07-06 16:38:55

@GaVrA Done. And I'd upvote you, but I need 15 rep. :)Thanks again man. The explanation helped a lot too.

w1sh 2010-07-06 17:09:55

ansaurus

tags:

views:

answers:

Anchor tags are duplicating

related questions