Submit Button Image Border

Discussion in 'HTML & Website Design' started by Cygopat, Mar 29, 2011.

  1. #1
    Hello,

    Please tell me how to rectify the following problem of where the a border appears around the image.
    The page is coded by hand - no program is used.

    http://console.sunflowerjewellery.com.au/client/onlineordering/nsw/order.php?cmd=_order&id=sunflower

    The current code for the submit image button:
    <a href="javascript:document.order-form.submit()" 
    onclick="document.getElementById('order-form').submit()"> 
     
    <img src="IMAGE-URL" 
    width="304" height="114" border="0" border="none" backround="no-repeat"alt="Start Order" 
    name="sub_but" /> 
     
    </a> </a> 
    Code (markup):


    Thanks in advance
     
    Cygopat, Mar 29, 2011 IP
  2. extremike

    extremike Peon

    Messages:
    44
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #2
    You have set the image border to 0, but by default the anchor of an image is automatically given a separate border. Add this to your stylesheet or in-line styles:

    a img { border:none;}
    Code (markup):
     
    extremike, Mar 29, 2011 IP
  3. Cygopat

    Cygopat Guest

    Messages:
    3
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Thanks but it did not work.

    
    [B][COLOR="red"]Submit button code:[/COLOR][/B]
    <a href="javascript:document.order-form.submit()" 
    onclick="document.getElementById('order-form').submit()" class="noborder"> 
     
    <img src="http://images.sunflowerjewellery.com.au/img/startorder-alpha.png" 
     class="noborder" width="304" height="114" border="0" border="none" alt="Start Order" 
    name="sub_but" /> 
    </a></a> 
    
    [B][COLOR="red"]I added the following in the CSS:[/COLOR][/B]
    
    /* borders */
    .no-border {border:none; }
    .a img { border:none;}
    no-border {border:none; }
    a img { border:none;}
    #no-border {border:none; }
    #a img { border:none;}
    img {border: none;}
    a.noborder { border:none;}
    
    
    
    Code (markup):
     
    Last edited: Mar 29, 2011
    Cygopat, Mar 29, 2011 IP
  4. extremike

    extremike Peon

    Messages:
    44
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #4
    try

    a.noborder img { border:none;}
     
    extremike, Mar 29, 2011 IP
  5. Cygopat

    Cygopat Guest

    Messages:
    3
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #5
    Is it possible to simply use:

    <p style="a.noborder img { border:none;} "> content </p>
     
    Cygopat, Mar 29, 2011 IP
  6. extremike

    extremike Peon

    Messages:
    44
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #6
    No. You can't define the variable within an inline style.

    Does it not fix it by putting it into the stylesheet?
     
    extremike, Mar 29, 2011 IP
  7. ameerulislam10

    ameerulislam10 Peon

    Messages:
    461
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #7
    That girl's right leg is missing (Not realistic the way it was positioned) in the link you have provided. Have you noticed that?
     
    ameerulislam10, Mar 29, 2011 IP