...

View Full Version : pesky borders around my buttons!



rooster
05-07-2006, 01:55 PM
Hi again, I've tried everything, I don't know where else to turn. I have the following navigation buttons:



<div id="nav">

<a href="index2.htm"><img src="hbttn.gif" border="0" alt="" /></a>
<a href="lstrno.htm"><img src="rnobttn.gif" border="0" alt="" /></a>
<a href="lstlv.htm"><img src="lvbttn.gif" border="0" alt="" /></a>
<a href=""><img src="otherbttn.gif" border="0" alt="" /></a>

</div>

the border="0" in the img tag works in IE but in Safari and FF, I get big ugly borders. I've tried making my links into a class and then putting the border-style: none declaration, but this doesn't work either. please help!
rooster

BonRouge
05-07-2006, 02:06 PM
a img {
border:0;
}

rooster
05-08-2006, 03:50 AM
I can't see any code, there is a box, am I supposed to enter code? or was there text inside that I'm not seeing? thanks!
rooster

kaitco
05-08-2006, 04:35 AM
What are you editing your code with? If you are using a MySpace or some kind of blog editor, then you may not be able to directly edit your CSS.

rooster
05-08-2006, 04:45 AM
i'm just using TextWrangler-in OS 10.3-
thanks!

kaitco
05-08-2006, 05:00 AM
Hmmm....I am not really Mac-savvy, but the best thing I can suggest is try editing your code with a really simple text editor, like TextEdit or something. That way you can code your page from DTD to </html> exactly the way you want it. You should be able to save the files as HTML documents and view them through multiple browsers and you edit you code.

Arbitrator
05-08-2006, 06:09 AM
The code provided by BonRouge is CSS if that isn't clear. The border attribute is deprecated and shouldn't be used. Based on your closing slash syntax it seems that you're coding in XHTML where most of the deprecated attributes are invalid; thus it's not surprising that the rendering isn't as you expect.

The provided CSS considers all image (img) elements inside an anchor (a) element and acts on the CSS. So essentially all images that are hyperlinks will have a border of zero. If you wish to use inline CSS, add the following attribute to all of your image tags: style="border: 0;". This is messier as it requires the use of redundant code, however.

rooster
05-08-2006, 07:56 AM
yay, this works! (using the inline style style="border: 0"
one further question, is there any way to do this on the linked style sheet, so as to avoid redundant codes? if not, would using this inline style make my code not validate?
thanks again, this was really making me frustrated!
rooster

_Aerospace_Eng_
05-08-2006, 08:01 AM
a img {
border:0;
}

Arbitrator
05-08-2006, 08:16 AM
Your code will validate with inline CSS since it's technically correct. However, sticking Aerospace's style rule in your main stylesheet should solve the problem for all of your linked images without the need for adding the inline code to each of your images manually, thus saving you some time and effort and making your code cleaner.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum