SitePoint Sponsor

User Tag List

Results 1 to 15 of 15
  1. #1
    SitePoint Enthusiast
    Join Date
    Nov 2003
    Location
    London
    Posts
    78
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Red face Remove underline from image links

    Hello everyone,
    This must be an old and tried and tested question, but it is driving me mad!
    I have recently made a website using CSS (valid) and the user is updating it to a certain extent themselves using Macromedia Contribute. She recently put an image in there which she wants to use as a link to another page. The problem I am having is that the images she inserts as links always have an underline on them (styled according to the stylsheet for the text links using a bottom border). Now, I thought this would be a simple one to fix, surely it should be something like . . .

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


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


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


    I have also tried 'border: 0;' with no success. I know that the above code is a bit of overkill (it could be simpler surely!), but even with all that it still doesn't remove the underline from the image links.

    Please help if you can, I'm going a bit crazy from this one!
    Many Thanks,
    Sidney

  2. #2
    He's No Good To Me Dead silver trophybronze trophy stymiee's Avatar
    Join Date
    Feb 2003
    Location
    Slave I
    Posts
    23,424
    Mentioned
    2 Post(s)
    Tagged
    1 Thread(s)
    See if this helps:

    Code:
    img {
        border: 0 !important;
    }

  3. #3
    SitePoint Enthusiast
    Join Date
    Nov 2003
    Location
    London
    Posts
    78
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks John, but no it didn't help

  4. #4
    He's No Good To Me Dead silver trophybronze trophy stymiee's Avatar
    Join Date
    Feb 2003
    Location
    Slave I
    Posts
    23,424
    Mentioned
    2 Post(s)
    Tagged
    1 Thread(s)
    Something later on in the CSS is overriding it then. Try moving it to the bottom of the file and see what happens.

  5. #5
    SitePoint Enthusiast
    Join Date
    Nov 2003
    Location
    London
    Posts
    78
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Wink Still not happening

    Hi John,

    I tried that too, but it still didn't work, I've copied and pasted the entire style sheet below, if you wouldn't mind having a look at it please . . .

    Code:
    html, body {
    	margin: 0;
    	padding: 0;
    	background: #e3e3e3;
    	color: #333333;
    	text-align: center;
    	font: 1em Verdana, Arial, Helvetica, sans-serif;
    }
    
    
    img {
    	border: 0;
    	text-decoration: none;
    }
    
    
    a:link img {
    	border: 0;
    	text-decoration: none;
    }
    
    
    a:hover img {
    	border: 0;
    	text-decoration: none;
    }
    
    
    .leftimage {
    	float: left;
    	margin-right: 15px;
    	margin-bottom: 0px;
    }
    
    
    .clear {
        clear: both;
    }
    
    
    .green-bold {
    	font-weight: bold;
    	color: #7ac141;
    }
    
    
    .bold-it {
    	font-weight: bold;
    	font-size: 90%;
    }
    
    
    #back-link {
    	margin: 0px;
    	padding: 5px 0px 0px 10px;
    	font: 70% Verdana, Arial, Helvetica, sans-serif;
    }
    
    
    #back-link a {
    	color: #999;
    	text-decoration: none;
    }
    
    
    #back-link a:hover {
    	color: #333;
    	text-decoration: none;
    }
    
    
    ul.horiz li {
    	display: inline;
    }
    
    
    #container {
    	width: 770px;
    	min-height: 100%;
    	padding: 0;
    	text-align: left;
    	background: #fff url(../images/layout_do_not_edit/main_background.gif) repeat-y;
    	margin: 9px auto 15px;
    }
    
    
    #header {
    	padding: 0;
    	margin: 0;
    	background: #fff url(../images/logos_and_headers/header.gif) no-repeat;
    	height: 120px;
    }
    
    
    #header h1 {
    	float: left;
    	margin: 0;
    	padding-left: 30px;
    	padding-top: 33px;
    }
    
    
    #header h1 a {
    	text-decoration: none;
    }
    
    
    #details {
    	float: right;
    	margin: 0;
    	padding-top: 45px;
    	padding-right: 30px;
    }
    
    
    #details a {
    	text-decoration: none;
    }
    
    
    #content-holder {
    	margin: 0px 15px 15px;
    }
    
    
    #sidenav {
    	float: right;
    	width: 210px;
    	text-align: center;
    	padding: 0;
    	background: #ebebeb url(../images/layout_do_not_edit/sidenav_bg.gif) repeat-y;
    	font: 70% Verdana, Arial, Helvetica, sans-serif;
    	color: #333;
    }
    
    
    #sidenav p {
    	text-align: left;
    	margin-left: 15px;
    	margin-right: 15px;
    }
    
    
    #sidenav a {
    	margin: 0;
    	text-decoration: none;
    	border-bottom: 1px solid #7ac141;
    	color: #333;
    }
    
    
    #sidenav a:hover {
    	margin: 0;
    	text-decoration: none;
    	border-bottom: 1px solid #333;
    	color: #333;
    }
    
    
    #sidenav h2.top {
    	text-align: left;
    	background: #7ac141 url(../images/layout_do_not_edit/sidenav_top.gif) no-repeat;
    	padding: 6px 15px 4px;
    	margin: 0 0 10px;
    }
    
    
    #sidenav h2 {
    	color: #fff;
    	text-align: left;
    	font: bold 120% Arial, Helvetica, sans-serif;
    	background: #7ac141;
    	padding: 6px 15px 4px;
    	margin: 15px 0 10px;
    }
    
    
    #sidenav ul {
    	list-style: url(none) none;
    	margin: 15px 15px 0px;
    	padding: 0;
    	text-align: left;
    }
    
    
    #sidenav li {
    	margin: 0;
    	background: url(../images/layout_do_not_edit/green_arrow.gif) no-repeat 0 0.2em;
    	padding-left: 1.2em;
    	padding-bottom: 1em;
    	list-style: none;
    }
    
    
    #sidenav li a {
    	margin: 0;
    	text-decoration: none;
    	border-bottom: 1px solid #7ac141;
    	color: #333;
    	font-weight: bold;
    }
    
    
    #sidenav li a:hover {
    	margin: 0;
    	text-decoration: none;
    	border-bottom: 1px solid #333;
    	color: #333;
    	font-weight: bold;
    }
    
    
    #sidenav li ul {
    	margin: 15px 15px 0px 0px;
    	padding: 0;
    }
    
    
    #sidenav li ul li {
    	margin: 0;
    	background: url(../images/layout_do_not_edit/submenu_arrow_black.gif) no-repeat 0 0.2em;
    	list-style: none;
    }
    
    
    #sidenav li ul li a {
    	margin: 0;
    	text-decoration: none;
    	border-bottom: 1px solid #7ac141;
    	color: #333;
    	font-weight: normal;
    }
    
    
    #sidenav li ul li a:hover {
    	margin: 0;
    	text-decoration: none;
    	border-bottom: 1px solid #333;
    	color: #333;
    	font-weight: normal;
    }
    
    
    #sidenav-footer {
    	background: url(../images/layout_do_not_edit/sidenav_footer.gif) no-repeat bottom;
    	margin: 0;
    	height: 28px;
    }
    
    
    #gareth-quote-box {
    	background: #7ac141 url(../images/layout_do_not_edit/gareth_quote_bg_520x160.gif) no-repeat 0px 0px;
    	height: 160px;
    	width: 520px;
    	margin: 0px 0px 15px;
    	padding: 0;
    }
    
    
    #quote-text {
    	font: bold 11px Verdana, Arial, Helvetica, sans-serif;
    	color: #fff;
    	margin: 0px 15px 0px 165px;
    	padding: 36px 0 15px;
    }
    
    
    #quote-text p {
    	margin: 0;
    	padding: 0;
    }
    
    
    #quote-text a {
    	font: bold 90% Verdana, Arial, Helvetica, sans-serif;
    	color: #fff;
    	text-decoration: none;
    	border-bottom: 1px solid #ebebeb;
    	float: right;
    	margin-right: 9px;
    }
    
    
    #quote-text a:hover {
    	color: #fff;
    	text-decoration: none;
    	border-bottom: 1px solid #fff;
    }
    
    
    #main-text-area {
    	margin: 0 220px 0 0;
    	padding: 0;
    	background: #ffffff url(../images/layout_do_not_edit/text-area-main-bg.gif);
    	font: 70% Verdana, Arial, Helvetica, sans-serif;
    	color: #333;
    }
    
    
    #main-text-area p {
    	padding-right: 15px;
    	padding-left: 15px;
    	line-height: 150%;
    	font-size: 110%;
    	background: #fff url(../images/layout_do_not_edit/text-area-main-bg.gif);
    }
    
    
    #main-text-area a:link {
    	color: #555;
    	text-decoration: none;
    	border-bottom: 1px solid #7ac141;
    	font-weight: bold;
    }
    
    
    #main-text-area a:hover {
    	color: #7ac141;
    	font-weight: bold;
    	border-bottom: 1px solid #333;
    }
    
    
    #main-text-area h2 {
    	color: #333;
    	text-align: left;
    	font: bold 120% Arial, Helvetica, sans-serif;
    	padding: 15px 15px 0px;
    	margin: 0 0 0px;
    	border: none;
    }
    
    
    #main-text-area h2.top {
    	color: #fff;
    	text-align: left;
    	background: #ffffff url(../images/layout_do_not_edit/text-area-top-bg_solid_green.gif) no-repeat;
    	padding: 6px 15px 4px;
    	margin: 0;
    }
    
    
    #main-text-area h3.courses {
    	color: #333;
    	text-align: left;
    	font: bold 100% Verdana, Arial, Helvetica, sans-serif;
    	background: #f7f7f7;
    	padding: 5px 14px;
    	margin: 0;
    	border-right: 1px solid #d9d9d9;
    	border-left: 1px solid #d9d9d9;
    }
    
    
    #main-text-area h3.sub-menu {
    	color: #333;
    	text-align: left;
    	font: bold 100% Verdana, Arial, Helvetica, sans-serif;
    	background: #f7f7f7;
    	padding: 5px 14px;
    	margin: 0;
    	border-right: 1px solid #d9d9d9;
    	border-left: 1px solid #d9d9d9;
    }
    
    
    #main-text-area ul {
    	list-style: url(none) none;
    	margin: 0px 30px;
    	padding: 0;
    	text-align: left;
    	font-size: 110%;
    	line-height: 150%;
    }
    
    
    #main-text-area ul li {
    	background: url(../images/layout_do_not_edit/bullet1.gif) no-repeat 0 0.6em;
    	padding-left: 15px;
    	padding-bottom: 10px;
    	list-style: none;
    }
    
    
    #main-text-area ol {
    	list-style: url(none) none;
    	margin: 0px 45px;
    	padding: 0;
    	text-align: left;
    	font-size: 110%;
    	line-height: 150%;
    }
    
    
    #main-text-area ol li {
    	padding-bottom: 10px;
    	list-style: decimal url(none);
    }
    
    
    #main-text-area li a {
    	text-decoration: none;
    	border-bottom: 1px solid #7ac141;
    	color: #333;
    	font-weight: bold;
    }
    
    
    #main-text-area li a:hover {
    	text-decoration: none;
    	border-bottom: 1px solid #333;
    	color: #333;
    	font-weight: bold;
    }
    
    
    #main-text-area ul.course-listing {
    	background: #f7f7f7;
    	font-size: 100%;
    	font-weight: bold;
    	color: #333;
    	margin: 0;
    	padding: 0 0 5px;
    	border-right: 1px solid #d9d9d9;
    	border-left: 1px solid #d9d9d9;
    	border-bottom: 1px solid #ebebeb;
    }
    
    
    #main-text-area ul.course-listing li {
    	background: url(../images/layout_do_not_edit/green_arrow_small.gif) no-repeat 0 0.4em;
    	padding-left: 12px;
    	padding-bottom: 5px;
    	list-style: none;
    	margin-left: 15px;
    }
    
    
    #main-text-area ul.sub-listing {
    	background: #f7f7f7;
    	font-size: 100%;
    	font-weight: bold;
    	color: #333;
    	margin: 0;
    	padding: 0 0 5px;
    	border-right: 1px solid #d9d9d9;
    	border-left: 1px solid #d9d9d9;
    	border-bottom: 1px solid #ebebeb;
    }
    
    
    #main-text-area ul.sub-listing li {
    	background: url(../images/layout_do_not_edit/green_arrow_small.gif) no-repeat 0 0.4em;
    	padding-left: 12px;
    	padding-bottom: 5px;
    	list-style: none;
    	margin-left: 15px;
    }
    
    
    #text-footer {
    	background: #FFFFFF url(../images/layout_do_not_edit/text-area-footer-bg.gif) no-repeat;
    	height: 28px;
    	/*IE fix next*/
    	margin-top: -20px;
    }
    
    
    #close-main-body{
    	background: url(../images/layout_do_not_edit/footer_bg.gif) no-repeat;
    	height: 40px;
    }
    
    
    #main-footer-text {
    	padding: 10px 15px 25px;
    	margin: 0;
    	text-align: left;
    	font: normal 9px Verdana, Arial, Helvetica, sans-serif;
    	color: #999;
    	background: #e3e3e3;
    }
    
    #main-footer-text a {
    	color: #999;
    	text-decoration: none;
    	border-bottom: 1px solid #CCCCCC;
    	font-weight: normal;
    }
    
    
    #main-footer-text a:hover {
    	color: #333;
    	font-weight: normal;
    	border-bottom: 1px solid #7ac141;
    }
    
    
    .rightimage-validone {
    	float: right;
    	margin: 0px;
    	bottom: 3px;
    	position: relative;
    }
    
    
    .rightimage-validone a {
    	text-decoration: none;
    	border-style: none;
    	border-width: 0px;
    }
    
    
    .rightimage-validtwo {
    	float: right;
    	bottom: 3px;
    	position: relative;
    	padding-right: 5px;	
    }
    
    
    .rightimage-validtwo a {
    	text-decoration: none;
    	border-style: none;
    	border-width: 0px;
    }

    Thanks again,
    Sidney
    Last edited by stymiee; Jul 17, 2006 at 05:29.

  6. #6
    He's No Good To Me Dead silver trophybronze trophy stymiee's Avatar
    Join Date
    Feb 2003
    Location
    Slave I
    Posts
    23,424
    Mentioned
    2 Post(s)
    Tagged
    1 Thread(s)
    I'm not a CSS guru so we'll have to hope one of our resident gurus jumps in and takers over.

  7. #7
    Brevity is greatly overrated brandaggio's Avatar
    Join Date
    Dec 2005
    Posts
    1,424
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Can you post a link to a/the page that shows the issue?

  8. #8
    SitePoint Enthusiast
    Join Date
    Nov 2003
    Location
    London
    Posts
    78
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Smile Link

    Thanks, no worries, here you are . . .

    http://www.thedesignsalon.org.uk/get..._ds_test.shtml

    Sidney

    p.s. I just noticed that the new Style Sheet doesn't work very well on the links in IE, so this is confusing me even more! Struth, I really need some help with this one
    Last edited by Sidney; Jul 17, 2006 at 08:56. Reason: Incomplete

  9. #9
    SitePoint Addict
    Join Date
    Mar 2005
    Location
    Toronto
    Posts
    378
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Sidney,
    What I tried with your code is this, and it appears to work. First I gave the pic a class:
    Code:
    <p><a href="#">text link here - css style working fine</a></p>
    <p><a href="#" class="noborder"><img src="images/pdf_images/pdficon_medium.gif" alt="pdf icon" width="32" height="32" border="0" />
    And then I went to CSS and added this: (it doesn't matter where you put it in the css document, the !important is the key here and it does indeed work.)
    Code:
    .noborder{
    	border-bottom: 0 !important;
    }
    In search of the clouds...and maybe some work

  10. #10
    SitePoint Enthusiast
    Join Date
    Nov 2003
    Location
    London
    Posts
    78
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question thank you, but . . .

    Hi Kefeso,

    Thank you for that. Just one problem, I need to do it without using a specific class. I need to just have no underline (no bottom border in this case) on the image links. I've been trying it all over again, and have changed the css a bit, you can see it at http://www.thedesignsalon.org.uk/get...a/css/main.css or just see the code I have added below . . .

    #main-text-area a img {
    text-decoration: none;
    border-bottom: 0 !important;
    }


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


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


    . . .and it still doesn't work. I can't believe that this is such a problem and can't understand why it doesn't work. Has anyone else experienced this problem?

    Many Thanks again,
    Sidney

  11. #11
    SitePoint Zealot cpiwc's Avatar
    Join Date
    Aug 2003
    Location
    NJ
    Posts
    119
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Because the border you are seeing is part of the anchor, not part of the image. If you remove the bottom border on the a, it goes away. By saying a img { border-bottom: none } you are not removing the border set on the anchor. Aside from having to set an additional class each time you use an image, is there a reason you could not set a class on the achors in question? For inheritance purposes you may need to write is as #main-text-area a.noborder (or something along those lines)

    Not sure if that helps any.
    Cara

  12. #12
    SitePoint Enthusiast
    Join Date
    Nov 2003
    Location
    London
    Posts
    78
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Red face Thanks again, but one problem . . .

    Thank you cpiwc, but the problem with this is that the client is using Macromedia Contribute to edit their website. Whilst you can apply styles in this program to the image(s), I can't see a way of applying them specifically to the actual <a> tag. This is why I need to just have a style which will apply to all image links; and this is why I am getting so frustrated as this should surely be an easy task.

    Thank you anyway, hopefully someone else might step in and solve it,

    Sidney

  13. #13
    Non-Member Egor's Avatar
    Join Date
    Jan 2004
    Location
    Melbourne, Australia
    Posts
    7,305
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Hi,

    Code:
    #main-text-area a img {
      background: #FFF;
      position: relative;
      bottom: -1px;
      vertical-align: text-bottom;
    }
    This will shift any images wrapped in anchors down a pixel, hopefully (I haven't tested, but should work ok) covering the 1px border. You'll need to use a vertical-align value other than the default (baseline).

    The problem you're having may indeed appear simple, but you can't, at this time, style elements according to what children they contain. Not cross-browser anyway.

  14. #14
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    As already explained above the border is on the anchor and not on the image. You cannot apply a style to an image that says "please go back to the parent and remove the border on the parent". (although there is probably something in css3 that may do this but that will be years away ).

    You either have to add a class to the anchor in question as already suggested or apply classes to all your other anchors instead that apply the border specifically and leave the default anchors unbordered. Of course if you're client is adding text links also then it won't work because you want these bordered.

    I don't use contribute but can't you set up a class that can be added to the anchor by the client or does contribute not allow this. It seems strange that contribute will let you add images and turn them into links without letting you add a class to the anchor.

    Depending on the type of images used you could possible do something like this but I wouldn't guarantee its effectiveness.

    Code:
    #main-text-area a img {border-bottom:1px solid #fff;position:relative;top:3px}
    This will put a white border on the bottom of the image and then shift the image on top of the green border to hide it.

    The correct way is to use classes as already explained

  15. #15
    SitePoint Enthusiast
    Join Date
    Nov 2003
    Location
    London
    Posts
    78
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Smile Superb! Thank You!

    Superb! Thank you Egor and Paul O'B, problem solved!

    I ended up using Paul's solution as I couldn't get Egor's to work in Firefox (but it worked perfectly in IE6).

    Regarding Contribute, I think that there may be a way of applying the style to the anchor, but I couldn't find it, and hence I just needed to make things as simple as possible for the user; your solution has done just what I needed!

    I thought that I would never get this solved, and thank you Paul O'B for the extra info which is very much appreciated.

    Thank you all again (very much),
    Sidney


Bookmarks

Posting Permissions

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