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 2 of 2
  1. #1
    New Coder
    Join Date
    Aug 2010
    Posts
    17
    Thanks
    2
    Thanked 0 Times in 0 Posts

    unwanted rectangles and underlines on images

    I have some unwanted underlines and rectangles around linked images. I styled my links with this code to tweak the colour and distance of the underline. However this appears on linked images.



    Code:
    BODY, TD {
    	font-family:"Times","Times New Roman","century", "sans serif";
    	font-size: 13px;
    	letter-spacing:1px;
    	line-height: 17px;
    	margin:0px;
    	padding:0px;
    	overflow:hidden;
    	color:black;
    }
    	
    A {
    	padding-bottom:0px;
    	border-bottom-width:1px;
    	border-bottom-style:solid;
    	border-bottom-color:black;
    	text-decoration:none;
    	color:black;
    	padding-bottom:1px;
    	margin-bottom:1px;
    	line-height: 18px;
    
    }
    	
    A:hover {
    	color:black;
    	padding-bottom:0px;
    	border-bottom-color:white;
    	border-bottom-width:1px;
    	border-bottom-style:transparent;
    	text-decoration:none;
    	margin-bottom:1px;
    	padding-bottom:1px;
    }
    So I added this code, and created a class for my linked images.

    Code:
    a img, {
    	border: none;
    	text-decoration: none;
    }
    
    a:link img, a:visited img, a:hover img {
    	border: none;
    	text-decoration: none;
    	padding-bottom:0px;
    	border-bottom-color:white;
    	border-bottom-width:0px;
    	border-bottom-style:transparent;
    	margin-bottom:0px;
    	padding-bottom:0px;
    	color:transparent;
    }
    
    a.imagelink, a.imagelink:link, a.imagelink:visited img, a.imagelink:hover img {
    	border: none;
    	text-decoration: none;
    	padding-bottom:0px;
    	border-bottom-color:white;
    	border-bottom-width:0px;
    	border-bottom-style:transparent;
    	margin-bottom:0px;
    	padding-bottom:0px;
    	color:transparent;
    }
    like here, I have made the BLOG link shown in the picture to be class imagelink

    Code:
     <div id="textimagecontainer">
            <div style="position:absolute;left:340px;top:130px" onmouseover="MM_swapImage('blog','','images/text/bloggrey.gif',1)"> <a href="http://robertstorey.blogspot.com" target="_blank">
            <img src="images/text/blog.gif" name="blog" class="imagelink" id="blog" ></a></div>

    can anyone help?

  • #2
    Regular Coder
    Join Date
    Aug 2005
    Location
    MS
    Posts
    845
    Thanks
    11
    Thanked 79 Times in 77 Posts
    Why don't you remove all that border-bottom CSS and clean up the CSS file since it isn't used. This should be sufficient to remove any underlines unless you call other styling AFTER it:

    Code:
    a img, {
    	border: none;
    	text-decoration: none;
    }
    ☠ ☠RON☠ ☠


  •  

    Posting Permissions

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