Skip navigation
YMK1966
YMK1966 Calculating status...
Currently Being Moderated

I cannot get rid of an annoying blue box on an image link that displays from a hyperlink in my dbase

Apr 12, 2012 2:24 AM

I have a hyperlink in my SQL database which displays from a recordset on my page. It has an image link which displays with a very annoying blue border around it.

 

Because it is not an image (as such), I cannot just select it and change the border to 0.

 

When I go to CSS, it just lets me set the border of the table it is presented in!!!

 

Can somebody point me in the right direction, Please!

1644 Views   11 Replies   Latest reply: YMK1966, Apr 12, 2012 5:46 AM
 
Replies
  • osgood_
    Currently Being Moderated
    1. osgood_,
    Apr 12, 2012 2:42 AM   in reply to YMK1966
    Report

    add to your css styles:

     

    a img {

    border: none;

    }

     
    |
    Mark as:
  • YMK1966
    Currently Being Moderated
    2. YMK1966,
    Apr 12, 2012 3:21 AM   in reply to osgood_
    Report

    Yes, I've already read that in other discussions - I can't actually establish which CSS style element applies to my image link though!!

     
    |
    Mark as:
  • John Waller
    Currently Being Moderated
    3. John Waller,
    Apr 12, 2012 3:25 AM   in reply to YMK1966
    Report

    Please post a link to your website and we can offer some specific suggestions.

     
    |
    Mark as:
  • YMK1966
    Currently Being Moderated
    4. YMK1966,
    Apr 12, 2012 3:32 AM   in reply to John Waller
    Report

    Hi,

     

    Thanks,

     

    Please bear in mind that I have only just put it up and a couple, including the front index page, is not finished.  The blue box displays on the product detail page, then you have selected an actual item to view in detail.

     

    www.thefabulousgiftstore.co.uk

     

    Thanks

     
    |
    Mark as:
  • osgood_
    Currently Being Moderated
    5. osgood_,
    Apr 12, 2012 3:44 AM   in reply to YMK1966
    Report

    I don't see any blue link around any image? can you provide a page and product. If I go to GISELA GRAHAM I get a set of images displayed (no blue border around any of them when I click) This takes me to a details/price page. The only border I see around any image on those pages is a grey border around the 'add to shopping bag' image. What browser is this happening in?

     
    |
    Mark as:
  • YMK1966
    Currently Being Moderated
    6. YMK1966,
    Apr 12, 2012 4:10 AM   in reply to osgood_
    Report

    That is the border I can't get rid of; you don't see it in Safari on a mac, only in Internet Explorer on a pc.  It is really bugging me that I can't get rid of it.

     

     

    Thanks

     
    |
    Mark as:
  • osgood_
    Currently Being Moderated
    7. osgood_,
    Apr 12, 2012 4:46 AM   in reply to YMK1966
    Report

    a img {

    border: none;

    }

     

    should work if you add it to the css styles already in the <head></head> section of the details page. Have you tried that?

     

    If not add id="shopButton" to the <td> cell that the image appears in (see below)

     

     

    <td height="37" id="shopButton" align="center" style="padding: 5px;"><a href="http://ww6.aitsafe.com/cf/add.cfm?userid=87488926&product=Gisela+Graha m+Wooden+Heart+Letters&price=23.99&return=www.thefabulousgiftstore.co. uk"><img src="Images/shopping_bag.png" Alt="Buy now!" ></td>

     

    then add to the css styles:

     

    #shopButton a img {

    border: none;

    }

     

     

    Try both the above and then post back if it doesnt work.

     
    |
    Mark as:
  • YMK1966
    Currently Being Moderated
    8. YMK1966,
    Apr 12, 2012 5:21 AM   in reply to osgood_
    Report

    Hi, this is the code I see in my view as an SQL statement calls for the link from the database:

     

     

    <td height="37" align="center" style="padding: 5px;"><?php echo $row_rsProducts['Buy Now']; ?>

              <td height="37"id="ShopButton"align="center"style="padding: 5px;"><br /></td>

     

    ********************

     

    Don't know whether I am doing it right but this is where I have put the code in the head section, still not working and got the grey border.

     

     

    <style type="text/css">

    #wrapper #main #topbody table tr td {

              text-align: justify;

              font-size: 10px;

              color: #555;

              font-style: normal;

              font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;

              border-top-color: #FFF;

              border-right-color: #FFF;

              border-bottom-color: #FFF;

              border-left-color: #FFF;

              border-top-style: none;

              border-right-style: none;

              border-bottom-style: none;

              border-left-style: none;

              background-color: #FFF;

     

    }

    #wrapper #main #leftmenu table tr td {

              border-top-width: thin;

              border-right-width: thin;

              border-bottom-width: thin;

              border-left-width: thin;

              border-bottom-style: solid;

              border-top-color: #EBEBEB;

              border-right-color: #EBEBEB;

              border-bottom-color: #EBEBEB;

              border-left-color: #EBEBEB;

              padding-left: 10px;

              font-size: 12px;

              color: #6D6D6D;

              font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;

              #shopButton a img {

     

     

    border: none;

    }

    #BuyNow {

              border-top-width: 0px;

              border-right-width: 0px;

              border-bottom-width: 0px;

              border-left-width: 0px;

              border-top-color: #FFF;

              border-right-color: #FFF;

              border-bottom-color: #FFF;

              border-left-color: #FFF;

              a img {

                        #shopButton a img {

     

     

    border: none;

    #shopButton a img {

    border: none;

    }

    }

    border: none;

     

     

    }

     

    I am stumped!!

     
    |
    Mark as:
  • osgood_
    Currently Being Moderated
    9. osgood_,
    Apr 12, 2012 5:43 AM   in reply to YMK1966
    Report

    YMK1966 wrote:

     

    Hi, this is the code I see in my view as an SQL statement calls for the link from the database:

     

     

    <td height="37" align="center" style="padding: 5px;"><?php echo $row_rsProducts['Buy Now']; ?>

              <td height="37"id="ShopButton"align="center"style="padding: 5px;"><br /></td>

     

    ********************

     

    Don't know whether I am doing it right but this is where I have put the code in the head section, still not working and got the grey border.

     

     

     

    Css is case sensitive so id="ShopButton" won't work - it needs to be a lower case 's' for shop like id="shopButton"

     

     

     

     

     

    YMK1966 wrote:

     

     

     

    border: none;

    }

    #BuyNow {

              border-top-width: 0px;

              border-right-width: 0px;

              border-bottom-width: 0px;

              border-left-width: 0px;

              border-top-color: #FFF;

              border-right-color: #FFF;

              border-bottom-color: #FFF;

              border-left-color: #FFF;

              a img {

                        #shopButton a img {

     

     

    border: none;

    #shopButton a img {

    border: none;

    }

    }

    border: none;

     

     

    }

     

    I am stumped!!

     

    Then get rid of the repeated #shopButton a img { border: none }; and the stray border: none; in your css above so you are left with:

     

    #BuyNow {

              border-top-width: 0px;

              border-right-width: 0px;

              border-bottom-width: 0px;

              border-left-width: 0px;

              border-top-color: #FFF;

              border-right-color: #FFF;

              border-bottom-color: #FFF;

              border-left-color: #FFF;

    }

     

    #shopButton a img {

    border: none;

    }

     
    |
    Mark as:
  • osgood_
    Currently Being Moderated
    10. osgood_,
    Apr 12, 2012 5:45 AM   in reply to osgood_
    Report

    You have another repeated one after the 'wrapper' css selector. Please delete it and make sure the css selector has its closing bracket }.

     

    #wrapper #main #leftmenu table tr td {

              border-top-width: thin;

              border-right-width: thin;

              border-bottom-width: thin;

              border-left-width: thin;

              border-bottom-style: solid;

              border-top-color: #EBEBEB;

              border-right-color: #EBEBEB;

              border-bottom-color: #EBEBEB;

              border-left-color: #EBEBEB;

              padding-left: 10px;

              font-size: 12px;

              color: #6D6D6D;

              font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;

              #shopButton a img {

     

     

    border: none;

    }

     
    |
    Mark as:
  • YMK1966
    Currently Being Moderated
    11. YMK1966,
    Apr 12, 2012 5:46 AM   in reply to osgood_
    Report

    I have just fathomed out what it is; the page properties in my template have the hyperlink roll over colours and behaviours set; the link for the 'add to shopping bag' button was picking up the hyperlink rollover properties.

     

    I have changed these and the colour of my 'add to bag' button to match - whilst this is not ideal I do not know how to isolate the shopping bag hyperlink so that it does not pick up the values from the page properties; is there a way I can do this????

     
    |
    Mark as:
Actions

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points