border none - not working [Archive]

Click to See Complete Forum and Search --> : border none - not working

webStruck_

05-31-2007, 02:32 PM

(1) - 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.

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? :o

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.

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

<!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">

</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 & 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

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? :confused:

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.

webStruck_

06-29-2007, 03:15 PM

a img, a:visited img {
border: 0;
outline: none;
display: block;
margin: auto;}
a:hover img, a:active img {
display: block;
border: 0;}

as of the moment, that is the code I use. BUt its just the same. In IE, when I hover, the border disappears (the one I set on its parent div to have border), then the border-bottom: 1px dotted #000 appears (the one I set globally for all inline links).

WebJoel

06-29-2007, 04:41 PM

You might have to put a "a:focus img {border:0 none; display:block;}", express a "a:link img {}" or something in there. I wish I could see the images do what they do. The paths are relative and no URL, so cannot test this. It is difficult to test against a 'black' background to see if any element has 'black/dark' borders.

This might be a global solution though: in your first CSS line:

* {border:0;}

and remove borders from EVERY element (links, images, -everything). It is a bit over-kill as you will now need to re-state any borders if they are acting differently, but this might work..)

edit:

wait a minute... -this is a TABLE?? :confused: -Have you tried:

table
{
border-collapse: separate
}

This 'removes' table-default border expression ('seperates' it from TABLE).

webStruck_

06-30-2007, 12:02 PM

this is terribly weird.. with every codes you've given to me that I used, it never worked. :(

i have images both inside a table and a div...

WebJoel

06-30-2007, 06:37 PM

this is terribly weird.. with every codes you've given to me that I used, it never worked. :(

i have images both inside a table and a div...

That is unfortunate but it's your code that is not working, not a creation of mine. :o It is nearly impossible to diagnose code with 'relative path' links to images that I cannot see when I test in my computer

...<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>.... etc. These images are on your computer, -not mine, -so your code on my computer doesn't do what yours does.

and 'putting images in a TABLE and putting the TABLE in a DIV' is meaningless, -the TABLE still behaves the same way. -In this case, badly, appparently. But we are eliminating the usual suspects. :p

Short of doing 100% of someone else's work:

table
{
border-collapse: separate
}

is the recommendation, but the implementation is that you add "border-collapse: separate" to the ID of this image-containing table, then THAT is the over-ruling precendent.
I would test this but again, -without the images showing on my computer, the results will not be the same. :cool:

webStruck_

07-02-2007, 11:37 AM

oh i'm sorry if my reply last time relays some misinterpretation. i didn't mean to literally say 'the code YOU'VE given is not really working', its REALLY (yes) my fault that some of my codes must have override and override other classes or ids. my codes sometimes really a mess. i'm sorry if you somehow feel bad about my comment.

and with my reply...
i have images both inside a table and a div...

means that i do have some images inside a table and some images inside a div - thus, in separate situations.

but then, thanks a lot for helping me. it is much appreciated :) i'll try by now, with the border-collapse on the ID table that contains some of the images.

webStruck_

07-02-2007, 11:45 AM

and oh my oh (i forgot.. sorry again!).... i'm talking about another html document, but having the same situation about the border on inline links and navigation links.

Meaning, applying the same codes, I have links in navigation that has background images on css but shouldn't have any border-bottom on hover, and have inline links that should have border-bottom on hover. The suggested solution (display:block) works perfectly both on IE and FF. But the images I have put on the body on the content does have border-bottom on hover ONLY on IE.

I'll try to double check my (long) codes to make it simpler for you to help me with the problem. :)

webStruck_

07-03-2007, 12:05 PM

well.. it doesn't work... :(

WebJoel

07-04-2007, 03:28 PM

well.. it doesn't work... :( Until I can see a sample page or an actual image attahed so that I can import it to my desktop and test it localled, I am out of ideas.
I think ryan mentioned in the second post of this thread, the need to see a sample page. Without it, I cannot help you because I am not seeing the same thing that you say you are seeing.. . :confused: (smile)

webStruck_

07-12-2007, 10:14 AM

Hi WebJoel, I am very much grateful for taking your time to help me, someone had already assisted me regarding this, and somehow we managed to make the differences minimal between FF and IE. Thanks! :) ...in other threads cya!

blis102

07-30-2007, 04:23 AM

border: 0 is not proper syntax

try:

a img {

blis102

07-30-2007, 04:30 AM

posted too early.

try:

a img {
border: none;
text-decoration: none;
}

Seems like you declared a text-decoration to links, so this may help over-ride the previous rule.

ray326

07-30-2007, 12:30 PM

border: 0 is not proper syntaxReally?

http://www.w3.org/TR/REC-CSS2/box.html#propdef-border

blis102

07-30-2007, 12:51 PM

its is proper syntax for declaring a border width, but if you were going to do it the supported way, you should go with border: none; and if you REALLY dont want any border, you could go ahead and do borer: 0 none transparent; but thats a bit excessive imo. Just go with border: none; its always treated me well (on every OS/browser combo ive ever tested) and makes more logical sense.

ghost_monk

08-07-2007, 11:29 AM

<div align="center" id="enter">
<a href="Navbar Locations/Home/homepage.html"><img src="Images/Fireworks/enter.gif" border="0"/></a>
</div>

I messed around with quite a few ways and putting the border="0" value inside the <img> tage was the only way that worked for me and I tried with internal/external css and even tried addressing the parent tag... hope this helps!

Keep in mind this worked putting the image onto the page itself and not having the image lay in an external css page.

blis102

08-07-2007, 12:22 PM

a img {border: none;}

is what you are looking for

blis102

08-07-2007, 12:28 PM

To clarify some things, if you are trying to remove a border around a linked image, you must declare that the image is wrapped in a link and then that the image within that link should have no border.

Most browsers outline images that are linked by default so that the user is aware that the image is a link. It is up to the designer to remove that property from the page by using CSS.

a img {border: none;}

is the same as saying: Any image within a link should not have a border.

Hope that helps a bit,
Cheers

blis102

08-11-2007, 12:10 PM

p.s. If that does not work then there is some CSS conflict in your code elsewhere. Border none will work if it is not overridden elsewhere.

afigueroa

08-11-2007, 01:01 PM

border: none; isn't exactly valid code.

'none' is a deprecated value, in which you need to specify 'none' as 0px/%.

also, unless quote earlier or later on in the source, the image being within <a></a> shouldn't mess with changing the border for the image itself.

blis102

08-11-2007, 03:21 PM

afigueroa

border: none; isn't exactly valid code.

'none' is a deprecated value, in which you need to specify 'none' as 0px/%.

Can you show me where you are getting this information?

From every source I have ever come across border: none is the recommended and most used shorthand for displaying no border.

Personally, I find it to also make semantic sense declaring the border-style to none rather than the width, even if both cause the same results.

also, unless quote earlier or later on in the source, the image being within <a></a> shouldn't mess with changing the border for the image itself.

Not 100% about what you are saying here but, I think you are saying that the placement of the link and image in the source does not matter, which is a correct statement. But what I was saying was that his CSS may have been overridden elsewhere in his stylesheet, which is the only likely problem.

ghost_monk

<div align="center" id="enter">
<a href="Navbar Locations/Home/homepage.html"><img src="Images/Fireworks/enter.gif" border="0"/></a>
</div>

I messed around with quite a few ways and putting the border="0" value inside the <img> tage was the only way that worked for me and I tried with internal/external css and even tried addressing the parent tag... hope this helps!

Keep in mind this worked putting the image onto the page itself and not having the image lay in an external css page.

The border property within "a" tags is now deprecated (as is the align property). You must declare border within CSS by applying "border: none;" or some equivilent to the linked image. Like:

a img {border: none;}

Cheers