Floating Linked Thumbnails - border and jumping problems

Inherited link borders, images shifting on mouseover

[Meigetsu]

I'm using a float=left technique to create a thumbnail gallery where each thumbnail also links to a larger version of itself.

I'm having no trouble aligning the images horizontally. But I am having two other problems I can't seem to defeat:

1) The images have the 1px bottom border that text links in that div are styled to have, as so:

#main a:link, {
font-weight: normal;
text-decoration: none;
background: transparent;
color: #A4562D;
border-bottom: 1px solid #A4562D;
}

Now, the images are contained in a div class (for the float=left) inside the #main selector, because the #main selector defines my overall content container. There are text links in this same selector that need the above styling. However, my floating images are inheriting the border-bottom and no matter what I do, I can't seem to get rid of it.

I tried to create a new pseudo-class to deal with this, to no avail:

div.float a.image:link {border: 0px;}

That's just one of the many things I've tried. No matter what I do, I can't ditch it. I tried to put my text links, that need that styling, in a container separate from my thumbnails, but I ended up breaking things. Surely there's an easier way to do this?

Things like:

a img {border: 0px;}
a img {border-bottom: 0px;}

don't work either. :P

2) When you mouseover any of the linked thumbnails, the second row of thumbnails moves up and down. How the heck do I deal with this?

I apologize if any of this is incoherent; it's 3:30a my time and I've been banging my head on this for a few hours! :)

Thanks!

[edited by: SuzyUK at 12:53 pm (utc) on June 30, 2004]
[edit reason] sorry no URLs see TOS #13 [webmasterworld.com] [/edit]

[jetboy_70]

Welcome to WebmasterWorld! (but please read the T&Cs, as you shouldn't be posting links in the forums)

Your first problem is a specificity issue. The style rules you've used to create the bottom borders are more specific than the ones you're trying to add to remove them. When a browser's faced with two conflicting rules, it chooses to implement the one with the highest specificity.

The easiest fix (although admittedly not the most elegant) is to make your border-removing rules more specific:

div#main div.float a:link,
div#main div.float a:visited,
div#main div.float a:hover,
div#main div.float a:active
{ border: 0; }

[Span]

First, you really have to take that URL away from you first post before a mod does it for you. Personal URLs are not allowed.

After that, to take the border away from the thumbs,
just replace this: div.float a.image:link {border: 0px solid black}

with this: #main div.float a.image {border:0;}

As for your second question. I don't see any rows, but six stacked divs. You have to declare a width on the floating divs.

div.float {
width:33%;
float:left;
}
br.cl {
clear:both;
font-size:1px;
}

And when you use the float property, you need to clear:
<div class="float"></div>
<div class="float"></div>
<div class="float"></div><br class="cl" />

[Edit: I'll have to type faster.. :)]

[Meigetsu]

So sorry about the URL - I wasn't thinking and was in a big hurry to post my message.

I appreciate the help - between the two responses I received, I was immediately able to solve my problem. The responses were quick, clear, and concise. I'm very grateful!

Thanks!