CSS: text-decoration:none; works in Firefox, does not work in IE 8

css, html, internet-explorer, text-decorations

Solution

To remove the border from images you should do

a img { border: 0 }

and that won't affect your text links

Problem

I'm developing a footer in an HTML file ( simplified, included below ). I have two links, with images on the left called: - footer1 - footer2 In Firefox 13 the blue line of the hyperlink does NOT appear around these two image/links, as desired. In IE 8, the blue line does and stubornly refuses to go away despite including the css ( see file below ): ``` #footer1 a{text-decoration:none;} ``` I would like to make the blue links for the links in the left two image/links go away and keep the text decoration in my other links. Thanks much in advance for any help. Steve ``` <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"> <title>Text Decoration Will Not Disappear In Two Left Images In IE 8</title> <style type ="text/css"> #footer { background-image:url('../images/bg-texture.gif'); padding: 20px; height: 50px; font-size:8pt; } #footer ul, li { display: inline; float:left; list-style-type: none; vertical-align:top; text-align:left; } #footer1 {margin-right:10%;margin-left:5%;} #footer1 a{text-decoration:none;} #footer2{margin-right:10%;} #footer3{margin-right:10%;} #footer4{margin-right:10%;} #footer5{margin-right:10%;} </style> </head> <body> <!-- The Footer --> <ul id="footer"> <li id="footer1"><a href="http://slashdot.org"> <img alt="" src="files/doc.gif"/></a></li> <li id="footer2"><a href="http://google.com"><img alt="" src="files/noaa.gif"/></a></li> <li id="footer4"><a href="http://slashdot.org/">Right Link 1</a></li> <li id="footer5"><a href="http://google.com">Right Link 2</a></li> </ul> </body> </html> ```

Original source