A border-bottom question.

I want to have a different underline color than the text so I use:

A {
  border-bottom:1px solid CornflowerBlue;
}

Code (markup):

All fine but that also puts an underline under image buttons which I don't want.

So in order to apply it only to my text classes like TD.main - how do I go about that? I tried:

A.main {
  border-bottom:1px solid CornflowerBlue;
}

Code (markup):

Thinking that would extend it but obviously not...

So I want ALL links to have underlines BUT non-text links like buttons, images etc.

 

Will border="0" in the img tag not override it?

 

Nope and with inline CSS it won't override it either:

<a><img src="images/catalogue/something.gif" width="66" height="60" style="border-bottom: none" border="0" alt="Widgets"></a>

Code (markup):

Still shows a border. And I thought inline CSS would take precedence over document CSS.

 

And you don't want to break it up into three links, right?

Try v-align="bottom"?

If all else fails, use :underline instead.

 

Que?!

I've tried al sorts now, declaring the img before the A etc. etc.

Can't CSS do something like "if A != img { border-bottom: 1px; }"

 

img a {border:1px solid #FFFFFF;}
img a:link {border:1px solid #FFFFFF;}
img a:hover {border:1px solid #FFFFFF;}
img a:visited {border:1px solid #fFFFFFF;}

I don't know, I suck w/ css. I usually just find what I need and hack it up!

 

Here's what I have:

/* Give Links Fake Underline */
A {
  color: #000000;
  text-decoration: none;
  border-bottom: 1px solid #C4E9F6;
}

/* Pull My Hair Out and Try To Exclude Images From Border-Bottom */
IMG
{
    text-decoration: none;
    border-bottom: none;
    border: none;
}

img a { border: none; border-bottom: none;}
img a:link { border: none; border-bottom: none;}
img a:hover { border: none; border-bottom: none;}
img a:visited { border: none; border-bottom: none;}

/* Another Desperate Attempt */

.nofuckingborder {
  border-bottom: none;
}

Code (markup):

Now in the page itself:

<a href="http://www.mysite.com/i-c-3_12_28.html" style="text-decoration: none;"><img src="images/catalogue/myimg.gif" width="66" height="60" class="nofuckingborder"  border="0" alt="Widget"></a>

Code (markup):

And it still shows the border!

 

Hi there,

You wasn't far off a solution. It's just that you selected the 'img' element before the 'a' e.g. 'img a', when it should have been 'a img'.

Here's the code you want:

img, a img, img a:link, img a:hover, img a:visited, img a:active {border:none;}

Code (markup):

 

/* Give Links Fake Underline */
A {
  color: #000000;
  text-decoration: none;
  border-bottom: 1px solid #C4E9F6;
}

/* Pull My Hair Out and Try To Exclude Images From Border-Bottom */
IMG
{
    text-decoration: none;
    border-bottom: none;
    border: none;
}

img a { border: none; border-bottom: none;}
img a:link { border: none; border-bottom: none;}
img a:hover { border: none; border-bottom: none;}
img a:visited { border: none; border-bottom: none;}

/* Another Desperate Attempt */

.nofuckingborder {
  border-bottom: none;
}

Code (markup):

I realised the code I suggested was wrong, you need to replace it with this instead:

a {color: #000;text-decoration: none;}
		
a:link {border-bottom: 1px solid #C4E9F6;}
a:visited{border-bottom: 1px solid #C4E9F6;}
a:hover {border-bottom: 1px solid #C4E9F6;}
a:active {border-bottom: 1px solid #C4E9F6;}

/*display block - image fills the 'a' element, allowing no borders to be drawn*/
a img {border:none; display:block;}

Code (markup):

 

I would propose this approach:

Desired: black text and orange underscore.

a {
    color: orange;
    }

a span {
    color: black;
    }

a img {
    border: none;
    text-decoration: none;
    }
============
<a href="#"><span>clicky</span</a>

Code (markup):

cheers,

gary

 

a:link, a:visited, a:active { border-bottom:1px dashed #900; }
a:hover { border-bottom:1px solid red; }

a * { border-bottom:none; }

or give the anchor that is wrapping the image a class - then do a.classname { border-bottom:none; }

 

You'd still have the border there ccoonen because the a element would still have it's own border. It doesn't know if there's an image inside. So you have to get rid of the images inline properties, to get rid of the trailing space after the image.