SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Wizard Goof's Avatar
    Join Date
    Feb 2001
    Location
    Pittsburgh, PA
    Posts
    1,154
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Can't Get Linked Images Without Border

    Ok, I don't understand what's going on here...I'm using a bottom dashed border for links (via A:LINK, etc. selectors), but then can't get linked images without a border, even when using a MORE SPECIFIC selector, like an ID.

    CSS:
    Code:
      
      HTML {
      	height: 100%;
      	width: 100%;
      }
      BODY {
      	margin: 0px;
      	padding: 0px;
      	height: 100%;
      	width: 100%;
      	background-color: #808080;
      	font-family: Georgia, Times, Serif;
      	font-size: 14px;
      }
      P, LI, TD {
      	font-family: Georgia, Times, Serif;
      	font-size: 14px;
      }
      A, A:LINK, A:VISITED {
      	color: #FF5400;
      	border-bottom: 1px dashed;
      	text-decoration: none;
      }
      A:ACTIVE, A:HOVER {
      	color: #FF9B00;
      	border-bottom: 0px;
      }
      A IMG, IMG:LINK, IMG:VISITED, IMG:ACTIVE, IMG:HOVER {
      	border: 0px;
      }
      .small {
      	font-size: 11px;
      }
      .large {
      	font-size: 20px;
      }
      .printOnly {
      	display: none;
      }
      DIV#pageContainer {
      	margin: 0px auto;
      	height: 100%;
      	min-width: 650px;
      	max-width: 900px;
      	border-left: 1px solid #444444;
      	border-right: 1px solid #444444;
      	background-color: #E5E5E5;
      	background-image: url("../images/nav_bg.gif");
      	background-repeat: repeat-y;
      	background-position: center top;
      }
      DIV#headerContainer {
      	width: 100%;
      	height: 149px;
      }
      DIV#headerLeft {
      	height: 100%;
      	width: 50%;
      	background-image: url("../images/nav_header_left_bg.jpg");
      	background-repeat: no-repeat;
      	background-position: right top;
      	text-align: center;
      	vertical-align: middle;
      	float: left;
      }
      DIV#headerLeft P {
      	margin: 0px;
      	padding: 0px;
      }
      IMG#headerLogo {
      	margin: 29px auto 0px auto;
      	border: 0px;
      }
      DIV#headerRight {
      	height: 100%;
      	width: 50%;
      	background-image: url("../images/nav_header_right_bg.jpg");
      	background-repeat: no-repeat;
      	background-position: left top;
      	float: right;
      }
    HTML:
    Code:
      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
      	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" />
      
      <html>
      <head>
      	<title>DG: Home</title>
      	<link href="css/dg-screen.css" rel="stylesheet" type="text/css" media="screen, projector" />
      </head>
      <body>
      
      <div id="pageContainer">
      	<div id="headerContainer">
      		<div id="headerLeft">
     			<p><a href="index.html"><img src="images/nav_header_left_title.gif" id="headerLogo" alt="DigitalGoof.com - a commentary on design, d/x/html, css, javascript/dom, and related technologies" border="0"></a></p>
     			<p class="printOnly"><b>DigitalGoof.com</b><br>a commentary on design, d/x/html, css, javascript/dom, and related technologies</p>
      		</div>
      		<div id="headerRight">
      			<span>&nbsp;</span>
      		</div>
      	</div>
      
      </div>
      
      </body>
      </html>
    I'm still in the design phase and therefore only really testing on Firefox (I'll deal with current IE bugs later) - but the underline on the image is persistant on both FF and IE. Any ideas? It seems like I'm missing something stupid.

    Thanks,
    Nate
    Nathan Rutman
    A slightly offbeat creative.

  2. #2
    SitePoint Zealot HeatherID's Avatar
    Join Date
    Jun 2003
    Location
    Maine, USA
    Posts
    136
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try changing this:
    Code:
    A IMG, IMG:LINK, IMG:VISITED, IMG:ACTIVE, IMG:HOVER {
      	border: 0px;
      }

    to this:
    Code:
    IMG, IMG:LINK, IMG:VISITED, IMG:ACTIVE, IMG:HOVER {
      	border: 0px;
      }

  3. #3
    SitePoint Evangelist
    Join Date
    Feb 2005
    Posts
    581
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by HeatherID
    Try changing this:
    Code:
    A IMG, IMG:LINK, IMG:VISITED, IMG:ACTIVE, IMG:HOVER {
      	border: 0px;
      }

    to this:
    Code:
    IMG, IMG:LINK, IMG:VISITED, IMG:ACTIVE, IMG:HOVER {
      	border: 0px;
      }
    Better yet, to work in all browsers, do this:

    Code:
    a img, a img:link, a img:visited, a img:active, a img:hover {
      	border: 0px;
      }
    Tip: Do not use capitals, especially if you are using a "STRICT" doctype.
    I will not flame the newbies,
    I will not flame the newbies,
    I will flame the newbies...
    Table free is the way to be!

  4. #4
    SitePoint Wizard Goof's Avatar
    Join Date
    Feb 2001
    Location
    Pittsburgh, PA
    Posts
    1,154
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Switching the tags to lowercase worked! Thanks!

    -Nate
    Nathan Rutman
    A slightly offbeat creative.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •