Fixing an annoying HTML/CSS "bug" in Firefox - underlining beneath a clickable image
Following on from yesterday's entry about being invited to join the top-400 Gites in france, when I added the GitesDeFrance.Info logo to the home page of our website I found that what had previously been a minor annoying HTML featurette now looked plain horrible ... the GDF logo had an unsightly blue underline right underneath it.
On the left hand column of the website I'd added the GDF.I logo and a text description and then wrapped them all up in a HTML tag so that clicking either the logo or the text would result in the link being clicked and the visitor being taken to the GDF website.
The guts of the HTML looked like this (I've stripped some of the detail out to make it clearer):
Which produces the desired results when viewed with Internet Explorer:
but when viewed in Firefox, both the text link and the image are underlined which looks horrible:
I'd previously ignored this problem with just the square Gitelink logo appearing on the website homepage, but with the circular GDF.I logo I couldn't leave it like this as the stray underline looks just plain wrong.
The problem is caused by Firefox applying different different priorities as to which CSS tags should be applied when or not. In the website CSS file I have the following style definitons:
Which says that clickable images within <a> tags shouldn't be displayed with a border (the default HTML treatment is that they're displayed with a blue border), and that all text within links should be coloured blue and decorated with underlining.
Normally both of these sets of CSS rules are fine and everything looks fine in both IE and Firefox, but on the odd occasion where the above HTML construct is used of an <img> image and some text within the same <a> tag, then the text-decoration rule seems to take preference in Firefox and the image is underlined to show that it's a clickable image. It's probably because IE is ignoring some of the HTML display rules and Firefox isn't, but the result is I'm sure you'll agree unsightly.
I tried various attempts at resequencing the CSS and HTML to no avail, so turned to Google to see if anyone else had the same problem and whether there was a fix.
Sure enough, Google came up trumps as usual. Firstly I found a page on Coding Forums where someone else was having the self-same problem but the various solutions suggested didn't work, and then on IT Developer network's "the scripts" the same problem was described, and a fix to the problem, as well a good demonstration of how the fix works at http://services.ccagroup.co.uk/testlink3.html.
In essence all that needs to be done is change the image from being displayed as an inline element to being displayed as a block-level element. Once that's done the line underneath the box is no longer displayed and the problem goes away.
Or put more simply, all I had to do was to define a new "noul" class in the CSS file that would display the selected image as a block element:
and then apply that new style to the images within the <a> tags on the home page:
The only other change that was needed was to remove the <br> in the <a> tag as displaying the image as a block element automatically means that the following text appears on a new line.
And job done, here's how the homepage now looks in Firefox (and IE still looks OK as well):
On the left hand column of the website I'd added the GDF.I logo and a text description and then wrapped them all up in a HTML tag so that clicking either the logo or the text would result in the link being clicked and the visitor being taken to the GDF website.
The guts of the HTML looked like this (I've stripped some of the detail out to make it clearer):
<a href=http://www.gitesdefrance.info/cgibin/rankem.cgi?id=aldo45 target=_blank><img alt=GitesdeFrance.info src=/images/gdf_logo.gif><br>We're in the top 400 Gites</a>
Which produces the desired results when viewed with Internet Explorer:
but when viewed in Firefox, both the text link and the image are underlined which looks horrible:
I'd previously ignored this problem with just the square Gitelink logo appearing on the website homepage, but with the circular GDF.I logo I couldn't leave it like this as the stray underline looks just plain wrong.
The problem is caused by Firefox applying different different priorities as to which CSS tags should be applied when or not. In the website CSS file I have the following style definitons:
a img {border:none }
a:link {color:#0033cc; text-decoration:underline; }
a:link {color:#0033cc; text-decoration:underline; }
Which says that clickable images within <a> tags shouldn't be displayed with a border (the default HTML treatment is that they're displayed with a blue border), and that all text within links should be coloured blue and decorated with underlining.
Normally both of these sets of CSS rules are fine and everything looks fine in both IE and Firefox, but on the odd occasion where the above HTML construct is used of an <img> image and some text within the same <a> tag, then the text-decoration rule seems to take preference in Firefox and the image is underlined to show that it's a clickable image. It's probably because IE is ignoring some of the HTML display rules and Firefox isn't, but the result is I'm sure you'll agree unsightly.
I tried various attempts at resequencing the CSS and HTML to no avail, so turned to Google to see if anyone else had the same problem and whether there was a fix.
Sure enough, Google came up trumps as usual. Firstly I found a page on Coding Forums where someone else was having the self-same problem but the various solutions suggested didn't work, and then on IT Developer network's "the scripts" the same problem was described, and a fix to the problem, as well a good demonstration of how the fix works at http://services.ccagroup.co.uk/testlink3.html.
In essence all that needs to be done is change the image from being displayed as an inline element to being displayed as a block-level element. Once that's done the line underneath the box is no longer displayed and the problem goes away.
Or put more simply, all I had to do was to define a new "noul" class in the CSS file that would display the selected image as a block element:
a.noul img { display: block; }
and then apply that new style to the images within the <a> tags on the home page:
<a href=http://www.gitesdefrance.info/cgibin/rankem.cgi?id=aldo45 target=_blank class=noul><img src=/images/gdf_logo.gif>We're in the top 400 Gites</a>
The only other change that was needed was to remove the <br> in the <a> tag as displaying the image as a block element automatically means that the following text appears on a new line.
And job done, here's how the homepage now looks in Firefox (and IE still looks OK as well):
posted by Geoffrey at 6:56 pm Permalink
1 Comments:
Thanks for that explanation, I'll make sure to share the solution with others on GitesdeFrance.info.
When is Explorer going to get with it? Soon I hope!
Francis Morgan
http://www.gitesdefrance.info
By
FrancoFrancis, at January 16, 2008
Post a Comment
<< Home