border none - not working

**webStruck_** · 05-31-2007 02:32 PM

(1) -

Code:

a img {border:none;}

it's been awhile. oh well...

i've been designing using a table {template} and i have some buttons / images that has a link. i have then, of course, text links that i've given some styles.

Code:

a, a:visited {border-bottom: 1px dotted #000;}

the style then inherits by the images with anchor links. so it leaves a gap / space under each image that messes up the design. i then add the code (1). but it then leaves the same thing - nothing happens.

help?

**ryanbutler** · 05-31-2007 02:34 PM

Could we see an example page?

**felgall** · 05-31-2007 02:48 PM

none is not a number.

Code:

a img {border:0;}

**webStruck_** · 05-31-2007 02:51 PM

oh sorry, but i don't have any hosting provider to upload it with. its just the images with links also do have the border-bottom style.

**webStruck_** · 05-31-2007 02:54 PM

none is not a number.

Code:

a img {border:0;}

it doesn't work...

**ryanbutler** · 05-31-2007 03:20 PM

Copy/paste the code in the thread.

**WebJoel** · 05-31-2007 03:28 PM

border: {0 none} should work. Or, just border:{0}. "none" has to do with the 'style', as in border-style: {none;}

Ultimately, it stands to reason that border: {0 none red;} is the 'shorthand method'

**webStruck_** · 05-31-2007 03:41 PM

Code:

<!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>template</title>

<style type="text/css">
<!--

body {
	background: #002F2F;
	margin: 50px 0;
	font: 0.8em Tahoma, Arial, Verdana;
	color: #A7A37E;}
a, a:visited {
	color: #666633;
	text-decoration: none;
	border-bottom: 1px dotted #999966;}
a:hover, a:active {
	border-bottom: 1px solid #999966;}	
	

a img {
	border: 0;}
h3 {
	font-size: 1.1em;
	color: #999966;}
h2 {
	font: bold 1em Tahoma;
	text-transform: uppercase;
	color: #2D93B2;
	margin: 0;
	border-bottom: 1px solid #2D93B2;}
h1 {
	font: bold 1.1em Tahoma;
	text-transform: uppercase;
	color: #2D93B2;
	padding-top: 10px;	
	margin: 0;}	
.body3 {
	font-size: 0.9em;}	
.body2 {
	background: #e6e2af;}
.body1 {
	background: #efecca;}	
.sidebar {
	padding: 10px;
	font-size: 0.85em;}
.withimage img {
	float: left;
	margin: 0 5px 5px 0;
	border: 3px solid #CCC785;}
.title {
	color: #046380;
	border-bottom: 1px solid #046380;}	
	
input, select {
	width: 100%;
	margin-top: 5px;}
label {
	font-weight: bold;}	
	

-->
</style>

</head>

<body>
<table id="Table_01" width="800" height="700" border="0" cellpadding="0" cellspacing="0" align="center">
  <tr>
    <td><img src="images/template_01.jpg" width="133" height="297" alt="" /></td>
    <td colspan="2"><img src="images/template_02.jpg" width="133" height="297" alt="" /></td>
    <td><img src="images/template_03.jpg" width="130" height="297" alt="" /></td>
    <td colspan="2"><img src="images/template_04.gif" width="136" height="297" alt="" /></td>
    <td><img src="images/template_05.gif" width="133" height="297" alt="" /></td>
    <td><img src="images/template_06.gif" width="135" height="297" alt="" /></td>
  </tr>
  <tr>
    <td><a href="#"><img src="images/template_07.gif" alt="" width="133" height="53" border="0" /></a></td>
    <td colspan="2"><a href="#"><img src="images/template_08.gif" alt="" width="133" height="53" border="0" /></a></td>
    <td colspan="2"><a href="#"><img src="images/template_09.gif" alt="" width="133" height="53" border="0" /></a></td>
    <td><a href="#"><img src="images/template_10.gif" alt="" width="133" height="53" border="0" /></a></td>
    <td><a href="#"><img src="images/template_11.gif" alt="" width="133" height="53" border="0" /></a></td>
    <td><a href="#"><img src="images/template_12.gif" alt="" width="135" height="53" border="0" /></a></td>
  </tr>
  <tr>
    <td colspan="2" width="250" height="349" class="body1 sidebar" valign="top"><h1>Residential</h1><h2>property search</h2>
	
	<table width="100%"><form method="post" name="mySearch">
	<tr><td height="10"></td></tr>
	<tr><td><label>City &amp; State, or Zip</label><br /><input type="text" /></td></tr>
	<tr><td><label>Search Area</label><br />
		<select name="mySelection1">
		<option>No Radius</option>
		<option>Within 3kms</option></select></td></tr>
	<tr><td><label>Price Range</label><br />
		<select name="mySelection2">
		<option>all prices</option>
		<option>$5,000 to $10,000</option></select></td></tr>
	<tr><td><label>Bedroom(s)</label><br />
		<select name="mySelection2">
		<option>any number</option>
		<option>2</option>
		<option>3</option></select></td></tr>
	<tr><td><label>Bathroom(s)</label><br />
		<select name="mySelection2">
		<option>any number</option>
		<option>2</option>
		<option>3</option></select></td></tr>

	<tr><td><input type="submit" value="Submit Search" name="mySubmit" /></td></tr>
	</form></table>
	
	</td>
    <td colspan="6" width="550" height="349" class="body2" valign="top">
	
	<table width="100%" cellpadding="10" class="body3">
	<tr><td colspan="3">
	<h2>Welcome to our Site</h2>
	<p><h3>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</h3></p>
	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi vel nulla eu arcu lobortis mattis. <a href="#">Etiam eget nunc</a>. Etiam enim nisi, feugiat ut, convallis sed, ultrices ut, sapien. Proin vitae augue eu mauris pretium suscipit. Morbi risus justo, congue non, mollis sit amet, volutpat sit amet, ipsum. Nunc eros nisl, auctor ut, convallis in, scelerisque id, massa.</p>
	<p>• <a href="#">Read More About Us</a></p>
	</td></tr>
		
	<tr><td class="withimage"><img src="images/image1.jpg" height="113" width="150" /><span><a href="#">Lorem ipsum dolor sit amet</a></span>
	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In vehicula congue turpis. Morbi ornare. Aenean fermentum tortor eget metus. Etiam non est eu sapien faucibus bibendum.</p></td>
	<td rowspan="2" class="withimage"><img src="images/image3.jpg" height="225" width="150" /></td></tr>
	<tr><td class="withimage"><img src="images/image2.jpg" height="113" width="150" /><span><a href="#">Lorem ipsum dolor sit amet</a></span>
	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In vehicula congue turpis. Morbi ornare. Aenean fermentum tortor eget metus. Etiam non est eu sapien faucibus bibendum.</p></td></tr>
	
	
	</table>
		
	</td>
  </tr>
  <tr>
    <td><img src="images/spacer.gif" width="133" height="1" alt="" /></td>
    <td><img src="images/spacer.gif" width="117" height="1" alt="" /></td>
    <td><img src="images/spacer.gif" width="16" height="1" alt="" /></td>
    <td><img src="images/spacer.gif" width="130" height="1" alt="" /></td>
    <td><img src="images/spacer.gif" width="3" height="1" alt="" /></td>
    <td><img src="images/spacer.gif" width="133" height="1" alt="" /></td>
    <td><img src="images/spacer.gif" width="133" height="1" alt="" /></td>
    <td><img src="images/spacer.gif" width="135" height="1" alt="" /></td>
  </tr>
</table>

</body>
</html>

**ray326** · 05-31-2007 03:55 PM

a img { display:block; border: 0; }

**webStruck_** · 05-31-2007 04:12 PM

@ray326

wow. it works like magic. :widesmile: thanks!
um.. one thing, why does it need to have display:block; ?

**ryanbutler** · 05-31-2007 04:48 PM

Because by default anchors and images are inline elements which allow content to be beneath them. By setting them to display block, they are now block level meaning no elements are allowed beneath them.

**ray326** · 05-31-2007 09:40 PM

What Ryan said.

Inline elements respond to line-height and have space above and below for ascenders and descenders.

**webStruck_** · 06-01-2007 09:16 AM

ei thanks, glad i asked. i learned something new.. =)

**webStruck_** · 06-28-2007 04:49 PM

oh wait...

a img { display:block; border: 0; }

does this code works on IE?
because when I checked on IE, the border-bottom is still appearing when hovered.

**WebJoel** · 06-28-2007 04:59 PM

Originally Posted by webStruck_

oh wait...

does this code works on IE?
because when I checked on IE, the border-bottom is still appearing when hovered.

a:hover img { display:block; border: 0; }

might address the 'when hovered over' and do the same thing (remove the visible anchor outline).??
Is this an actual "border" or the little dark line that appears around an image when the image is also an anchor?

I tend to not have these problems as I usually state in my first line of CSS:

* {padding:0; margin:0; border:0;}

although some find making the default "border:0" a bit excessive and unnecessary.

Thread: border none - not working

Thread Tools

Display

border none - not working

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions