Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10
  1. #1
    New Coder
    Join Date
    May 2005
    Posts
    25
    Thanks
    0
    Thanked 0 Times in 0 Posts

    pesky borders around my buttons!

    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

  • #2
    Regular Coder BonRouge's Avatar
    Join Date
    Mar 2006
    Location
    Sendai, Japan
    Posts
    328
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Code:
    a img {
    border:0;
    }

  • #3
    New Coder
    Join Date
    May 2005
    Posts
    25
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

  • #4
    Regular Coder
    Join Date
    Dec 2005
    Location
    Ohio
    Posts
    286
    Thanks
    7
    Thanked 9 Times in 9 Posts
    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.

  • #5
    New Coder
    Join Date
    May 2005
    Posts
    25
    Thanks
    0
    Thanked 0 Times in 0 Posts
    i'm just using TextWrangler-in OS 10.3-
    thanks!

  • #6
    Regular Coder
    Join Date
    Dec 2005
    Location
    Ohio
    Posts
    286
    Thanks
    7
    Thanked 9 Times in 9 Posts
    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.

  • #7
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,316
    Thanks
    29
    Thanked 280 Times in 274 Posts
    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.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #8
    New Coder
    Join Date
    May 2005
    Posts
    25
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

  • #9
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    a img {
    border:0;
    }
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #10
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,316
    Thanks
    29
    Thanked 280 Times in 274 Posts
    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.
    For every complex problem, there is an answer that is clear, simple, and wrong.


  •  

    Posting Permissions

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