www.webdeveloper.com
Page 1 of 3 123 LastLast
Results 1 to 15 of 34

Thread: border none - not working

  1. #1
    Join Date
    Feb 2007
    Location
    Philippines
    Posts
    57

    Exclamation border none - not working

    (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?

  2. #2
    Join Date
    Nov 2006
    Location
    Springfield, MO
    Posts
    1,541
    Could we see an example page?
    Ryan Butler

    Ryan Butler.org

  3. #3
    Join Date
    Mar 2005
    Location
    Sydney, Australia
    Posts
    7,974
    none is not a number.

    Code:
    a img {border:0;}
    Stephen

  4. #4
    Join Date
    Feb 2007
    Location
    Philippines
    Posts
    57
    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.

  5. #5
    Join Date
    Feb 2007
    Location
    Philippines
    Posts
    57
    none is not a number.

    Code:

    a img {border:0;}
    it doesn't work...

  6. #6
    Join Date
    Nov 2006
    Location
    Springfield, MO
    Posts
    1,541
    Copy/paste the code in the thread.
    Ryan Butler

    Ryan Butler.org

  7. #7
    Join Date
    Dec 2005
    Location
    American, living in Toronto, ON. CANADA
    Posts
    6,746
    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'
    I build for: Firefox and tweak for IE

  8. #8
    Join Date
    Feb 2007
    Location
    Philippines
    Posts
    57
    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>

  9. #9
    Join Date
    Nov 2003
    Location
    Jerryville, Tejas
    Posts
    11,715
    a img { display:block; border: 0; }
    "Debugging is twice as hard as writing the code in the first place. Therefore, if you write the code as cleverly as possible, you are, by definition, not smart enough to debug it." Brian W. Kernighan

  10. #10
    Join Date
    Feb 2007
    Location
    Philippines
    Posts
    57
    @ray326

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

  11. #11
    Join Date
    Nov 2006
    Location
    Springfield, MO
    Posts
    1,541
    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.
    Ryan Butler

    Ryan Butler.org

  12. #12
    Join Date
    Nov 2003
    Location
    Jerryville, Tejas
    Posts
    11,715
    What Ryan said. Inline elements respond to line-height and have space above and below for ascenders and descenders.
    "Debugging is twice as hard as writing the code in the first place. Therefore, if you write the code as cleverly as possible, you are, by definition, not smart enough to debug it." Brian W. Kernighan

  13. #13
    Join Date
    Feb 2007
    Location
    Philippines
    Posts
    57
    ei thanks, glad i asked. i learned something new.. =)

  14. #14
    Join Date
    Feb 2007
    Location
    Philippines
    Posts
    57
    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.

  15. #15
    Join Date
    Dec 2005
    Location
    American, living in Toronto, ON. CANADA
    Posts
    6,746
    Quote 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.
    I build for: Firefox and tweak for IE

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles