Re: Images that are part of the content <div> have an underline. How to remove this

["Jaap A. Haitsma" <jaap haitsma org>]

On Fri, May 8, 2009 at 17:19, Shaun McCance <shaunm gnome org> wrote:
> On Fri, 2009-05-08 at 07:32 +0200, Jaap A. Haitsma wrote:
>> E.g. look at the GNOME buttons on
>> http://www.gnome.org/friends/thank-you.html
>> They have a dotted line under the images because the images link to
>> another page.
>>
>> I can of course solve it on that page by putting these images in a
>> seperate <div> and set custom styling for the <a> links in that <div>,
>> but I think it would be better to solve it globally. Also the image on
>> http://www.gnome.org has a dotted line under the image
>
> It's not just images.  It's all links.  Looks like somebody
> decided to put a border-bottom on links.  It's a not-uncommon
> trick people use to create an underline that doesn't cut off
> the descenders.
>
> Browsers know how to not underline image links (though they
> do love those image borders).  But they're not going to do
> anything special when you put a border on the a element.
> So you have to go to extra trouble to remove the border in
> cases where you don't want it.
>
> Personally, I think it's just visual noise, and we should
> drop it.
>
I agree. Patch attached. With the patch the dotted-line is removed.
Every link is just has the blueish color and as soon as you hover on
it you get an underline (not for images of course)

Can I commit this change?

Jaap

Jaap

diff --git a/www.gnome.org/css/style.css b/www.gnome.org/css/style.css
index f639feb..c7266b6 100644
--- a/www.gnome.org/css/style.css
+++ b/www.gnome.org/css/style.css
@@ -17,12 +17,11 @@ body {
 
 div#content a {
 	color: #3465a4;
-	border-bottom: 1px dotted #888;
 	text-decoration: none;
 }
 
 div#content a:hover {
-	border-bottom: 1px solid #888;
+	text-decoration: underline;
 }
 
 
@@ -145,11 +144,10 @@ input[type=radio] {
 
 #footer a {
 	color: #3465a4;
-	border-bottom: 1px dotted #888;
 	text-decoration: none;
 }
 
 #footer a:hover {
-	border-bottom: 1px solid #888
+	text-decoration: underline;
 }