[thelist] CSS Help?

[Rob O'Rourke]

Gina Anderson wrote:
> I've been banging my head on my desk for two hours, can't figure this one
> out. I am editing a style sheet and site that I didn't originally produce. I
> don't think I can show you the page, but maybe some code will help.
>
> Problem: I can't, for the life of me, get the dashed and solid lines out
> from under linked image thumbnails in a certain div.
>
> Here is the html that shows the offensive line under it. If the image has
> been clicked, there is a maroon dashed line under it, on hover, the line
> changes to solid:
> ----------------------------
> <div class="entry">
> <p><a class="imagelink" href="pic.jpg"><img src="pic-thumb.jpg"></a></p>
> </div>
>
>
> Here is the CSS that puts the solid/dashed lines under the images that are
> used as a link.
> -----------------------------
>
> #content .entry a:link, #content .entry a:visited
> {
>     border-bottom:#963 1px dashed;
> }
>
> #content .entry a:hover, #content .entry a:active
> {
>     border-bottom:#963 1px solid;
> }
>
>
> I want the effect under the text links, but not under the -images- used as
> links. I've tried everything I can think of, I'm apparently not getting the
> syntax right, because anytime I stab at it, nothing works. I've just been
> working too long at it. Can anyone throw me a bone, and help get the
> solid/dashed lines out from under these images? Thanks so very much!
>
> Gina
>
>
>   

Hi Gina,
Your border rule syntax is wrong but im not sure that thats the problem.

try border-bottom: 1px solid #963;
the order is: border-width  -  border-style  -  border-color

If that doesn't work then I'd separate them into two links. The image 
itself isn't receiving the border-bottom it's the link that wraps it. 
You might be able to put the text in a <span> and apply the border like 
this:

a:hover span { border-bottom: 1px solid #963; }

Its not ideal but if it saves you denting your head further it should 
work pretty well =]

Take it easy,
Rob