SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Wizard silver trophy linkin99's Avatar
    Join Date
    Sep 2005
    Location
    Wisconsin
    Posts
    1,456
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Image link decoration problems

    My problem is that I had created a style for my text links (a:link, a:visited, a:hover). I also (tried to) create a separate style for image links. But I have been unsuccessful in getting the below css to apply the special styling class (.imgLink)

    Code:
    a #mainContent .imgLink
    	border-bottom: none;
    	color: none;
    	}
    to my images on my site (specifically here ) that have links on them. I need the text links on my site to retain the styling of this though:

    Code:
    #mainContent a:link, #mainContent2 a:link {
    	text-decoration: none;
    	border-bottom: 1px dotted #000;
    	color:#000;
    	}
    
    #mainContent a:visited, #mainContent2 a:visited {
    	text-decoration: none;
    	border-bottom: 1px dotted #888888;
    	color:#888888;
    	}
    
    #mainContent a:hover, #mainContent2 a:hover {
    	color:#2b5e53;
    	border-bottom: 1px solid #2b5e53;
    	}
    as this needs to apply to the rest of the text links on the site. (I.E. the site map.)



    Here are some sample lines of code that represent that is there now.

    Code:
    <div id="mainContent">
    
    <!-- . . . more code. . . -->
    
    <!--image frames with images -->
    
    <div class="frameposlft"><div class="frame"><a href="/images/tour/01_full.jpg" class="imgLink"><img src="/images/tour/01_thumb.jpg" class="imgspctopcside" width="250" height="178" /></a><br />250,000 square feet of modern manufacturing facilities.</div></div>
    
    <div class="frameposrt"><div class="frame"><a href="/images/tour/02_full.jpg" class="imgLink"><img src="/images/tour/02_thumb.jpg" class="imgspctopcside" width="250" height="178" /></a><br />CAD, CAM and Online shop floor control</div></div>
    
    <!-- . . . more code. . . -->
    </div>
    The imgspctopcside, frameposlft, frameposrt, and frame styles have no link properties in them.
    I'll put them here too so as to prove to you that they are not...

    Code:
     
    .imgspctopcside { 
    padding: 0 0 10px 0;
    float: center;
    }
    
    .frame {
    color: #dda40a;
    border: 1px #000 solid;
    padding: 10px;
    font-size: .75em;
    font-weight: 600;
    text-align: justify;
    background-color: #2d554f; 
    width: 100%;
    }
    
    .frameposrt {
    margin-right: 15px !important; /* for opera and ff */
    margin-right: 0px; /* for ie5,5.5,6 */
    float: right;
    padding: 0 0 15px 15px;
    width: 250px;
    }
    
    .frameposlft {
    margin-right: 20px !important; /* for opera and ff */
    margin-right: 0px; /* for ie5,5.5,6 */
    float: left;
    padding: 0 15px 15px 0;
    width: 250px;
    }
    I have a good hunch that what I'm missing may be easy to fix, but I can't seem to figure it out.

    Anyone have any ideas?

  2. #2
    SitePoint Zealot
    Join Date
    Oct 2003
    Location
    uk
    Posts
    153
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by linkin99
    My problem is that I had created a style for my text links (a:link, a:visited, a:hover). I also (tried to) create a separate style for image links. But I have been unsuccessful in getting the below css to apply the special styling class (.imgLink)

    Code:
    a #mainContent .imgLink
    	border-bottom: none;
    	color: none;
    	}
    Not tested this, but it looks like you have your hierarchy set incorrectly for the above css rule? You have a div with id="mainContent" which holds a link with class"imgLink" applied. Therefore the CSS should be structured as:
    Code:
    #mainContent a.imgLink
    	border-bottom: none;
    	color: none;
    	}

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

    do you mean this:
    Code:
    #mainContent a.imgLink{
     border-bottom: none;
     }
    The snippet of code you posted (below) has a missing opening bracket and is looking for an element called imglink that is inside maincontent that is also inside an anchor!!
    Code:
    a #mainContent .imgLink
    	border-bottom: none;
    	color: none;
    	}

  4. #4
    SitePoint Wizard silver trophy linkin99's Avatar
    Join Date
    Sep 2005
    Location
    Wisconsin
    Posts
    1,456
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    a #mainContent .imgLink
    	border-bottom: none;
    	color: none;
    	}
    This didn't do it either. I am still getting decoration under the pictures. I put this at the absolute bottom of my style sheet too.

  5. #5
    SitePoint Wizard silver trophy linkin99's Avatar
    Join Date
    Sep 2005
    Location
    Wisconsin
    Posts
    1,456
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    #mainContent a.imgLink{
     border-bottom: none;
     }

    I also saw this and tried it. Didn't work either unfortunately.

  6. #6
    SitePoint Wizard silver trophy linkin99's Avatar
    Join Date
    Sep 2005
    Location
    Wisconsin
    Posts
    1,456
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    After a little more study, this works in Opera & FF, but still fails in IE. Any ideas to make this work in IE? Visited and hover states are the ones that don't seem to work properly, and I know that IE has some goofy problems with hover attributes.

  7. #7
    SitePoint Wizard silver trophy linkin99's Avatar
    Join Date
    Sep 2005
    Location
    Wisconsin
    Posts
    1,456
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up

    Quote Originally Posted by linkin99
    After a little more study, this works in Opera & FF, but still fails in IE. Any ideas to make this work in IE? Visited and hover states are the ones that don't seem to work properly, and I know that IE has some goofy problems with hover attributes.
    Ok, by adding this into the mix, I got it to work in IE finally.
    Code:
    #mainContent a:link.imgLink, #mainContent a:visited.imgLink, #mainContent a:hover.imgLink {
    	border-bottom: none; 
    	}
    Thanks to those to helped me get closer to the solution.

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

    When you have defined styles for ie using a:link etc then you have to use the same format to overide them and a {etc} by itself does not carry enough weight.

    BTW you should change your style to this format for correct usage:

    #mainContent a.imgLink:link, #mainContent a.imgLink:visited, #mainContent a.imgLink:hover{
    border-bottom: none;
    }


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
  •