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 3 of 3
  1. #1
    New Coder
    Join Date
    Feb 2013
    Posts
    23
    Thanks
    15
    Thanked 0 Times in 0 Posts

    Undesired Underlined Links

    Hi Folks -

    Yes, it's me agin. Thanks to the kind help of folks like Excavator and Arbitator on this forum, I am getting really close to the official 'launch' of my site, here.

    One of the last pages I'm working on is exhibiting some bizarre behavior that I can't, for the life of me, find the source of in the CSS. Text links display as underlined (which I don't want), then the underlining disappears upon 'hover' - nothing like this seems to be in the CSS... what gives?

    Here's the URL for the page in progress:

    http://cosimocode.com/reading2.html

    and here's the code (adapted from Excavator's initial ideas)

    Code:
    <!DOCTYPE HTML>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>The Cosimo Code - DOVER DISTRIBUTED LABELS</title>
    <style type="text/css">
    html, body {
    	margin-top: 20px;
    	font: 94% "Trebuchet MS", Arial, Helvetica, sans-serif;
    	color: #000;
    	background: #000;
    }
    
    /* Header ----------------------------------------------- */ @media all
    { #header { width:660px; height:175px; margin:0 auto; border:none; } } @media handheld
    { #header { width:90%; } } #blog-title { margin:0px 0px 0; padding:0px
    0px .25em; border:0px solid #222; border-width:0px 0px 0;
    font-size:200%; line-height:1.2em; color:#ccc; text-transform:uppercase;
    letter-spacing:.2em; } #blog-title a { color:#ccc; text-decoration:none;
    } #blog-title a:hover { color:#ad9; } #description { margin:0 0px 0px;
    padding:0 0px 0px; border:0px solid #222; border-width:0 0px 0px;
    font:78%/1.4em "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif;
    text-transform:uppercase; letter-spacing:.2em; color:#777; }
    
    /* Content ----------------------------------------------- */ @media all
    { #content { width:660px; margin:0 auto; padding:0; text-align:left; }
    #main { width:640px; float:none; }  } @media handheld { #content { width:90%; } #main { width:100%;
    float:none; }  }
    
    
    #container {
    	width: 660px;
    	margin: 0 auto;
    	overflow: auto;
    	background: url(http://souldetective.com/images/paper72.gif) repeat-y;
    	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    	font-size: 1em;
            font-weight:bold;
    	color:#000000;
            text-align:left;
    }
    
    }
    a:link
    { color:#8B0000; text-decoration:none; } a:visited { color:#8B0000;
    text-decoration:none; } a:hover { color:#CD5C5C; text-decoration:none;
    
    }
    
    ul.tabs {
    	margin: 0;
    	padding: 4px;
    	list-style: none;
    	height: 33px; /*--Set height of tabs--*/
    	border-bottom: 1px solid #000000;
    	border-left: 1px solid #000000;
    }
    ul.tabs li {
    	height: 32px; /*--Subtract 1px from the height of the unordered list--*/
    	width: 50px;
    	margin: 0 0 -1px;
    	padding: 0;
    	float: right;
    	line-height: 32px; /*--Vertically aligns the text within the tab--*/
    	border: 0px solid #000000;
    	border-left: none;
    	overflow: hidden;
    	position: relative;
    	background: #a52a2a;
    }
    ul.tabs li a {
    	padding: 0 5px;
    	display: block;
    	text-decoration: none;
    	color: #ffffcc;
    	font-size: 16px;
    	border: 1px solid #000000; /*--Gives the bevel look with a 1px white border inside the list item--*/
    	outline: none;
    }
    ul.tabs li a:hover { background: #cd5c5c; }
    html ul.tabs li.active, html ul.tabs li.active a:hover { /*--Makes sure that the active tab does not listen to the hover properties--*/
    	background: #000;
    	border-bottom: 1px solid #000; /*--Makes the active tab look like it's connected with its content--*/
    }
    .box {
    	width: 600px;
    	margin: 20px auto 10px;
    }
    
          }.box a:link
    { color:#8B0000; text-decoration:none; } a:visited { color:#8B0000;
    text-decoration:none; } a:hover { color:#CD5C5C; text-decoration:none;
    
    }
    
    }
    	.box img {margin: 0 10px 0;}
    	.left {float: left;}
    h1 {
    	margin: 0 0 0px;
    	font-weight: bold;
    	font-size: 1.4em;
    	color: #a52a2a;
    }
    #leftColumn {
    	width: 300px;
    	padding: 10px;
    	margin-left: 30px;
    	float: left;
    	font-size: .9em;
            font-weight:bold;
    	color:#000000;
            text-align:left;
    }
    #rightColumn {
    	padding: 10px;
    	overflow: auto;
    	font-size: .9em;
            font-weight:bold;
    	color:#000000;
            text-align:left;
    }
    
     
            img.right {
                float: right;
                margin: 0px 0px 0px 5px;
                
             }          
          
            
    
            img.left {
                float: left;
                margin: 0px 10px 0px 0px;
    	}
    	
    	
    </style>
    
    <style type="text/css">
    
    ul.img2 {
    margin: 0;
    padding: 6px;
    float: left;
    list-style: none;
    height: 28px; /*--Set height of tabs--*/
    border-bottom: 1px solid #000000;
    border-left: 1px solid #000000;
    width: 40%;
    }
     </style>
    
    <style type="text/css">
    
    ul.tabs2 {
    margin: 0;
    padding: 6px;
    float: right;
    list-style: none;
    height: 25px; /*--Set height of tabs--*/
    border-bottom: 1px solid #000000;
    border-left: 1px solid #000000;
    width: 40%;
    }
    
    ul.tabs2 li {
    float: right;
    margin: 0;
    padding: 0;
    height: 24px; /*--Subtract 1px from the height of the unordered list--*/
    line-height: 24px; /*--Vertically aligns the text within the tab--*/
    border: 0px solid #000000;
    border-left: none;
    margin-bottom: -1px; /*--Pull the list item down 1px--*/
    overflow: hidden;
    position: relative;
    background: #A52A2A;
    }
    
    ul.tabs2 li a {
    text-decoration: none;
    color: #FFFFCC;
    display: block;
    font-size: 1.2em;
    padding: 0 5px;
    border: 1px solid #000000; /*--Gives the bevel look with a 1px white border inside the list item--*/
    outline: none;
    }
    
    ul.tabs2 li a:hover {
    background: #CD5C5C;
    }
    
    html ul.tabs2 li.active, html ul.tabs li.active a:hover  { /*--Makes sure that the active tab does not listen to the hover properties--*/
    background: #000;
    border-bottom: 1px solid #000; /*--Makes the active tab look like it's connected with its content--*/
    }
    
     </style>
    
    </head>
    Any ideas??

    THANKS!

    -red

  • #2
    New Coder
    Join Date
    Mar 2013
    Location
    Indiana
    Posts
    26
    Thanks
    0
    Thanked 7 Times in 7 Posts
    Just add the following code to your CSS:

    Code:
    .box a { text-decoration: none; }
    Then specify within each specific section if you want to change the text-decoration. I tested this and it worked fine, it seems that you're specifying your anchors style within specific areas that aren't related.

    I didn't troubleshoot all of your css, merely fixed the issue from my quick check. There may be invalid code here and you should probably look up the W3 CSS checker to confirm your code as being valid.


    Also, I never knew about the :link selector before, for some reason. I guess we catch something new every day... but whats the purpose of using it?

  • Users who have thanked Chrystyan for this post:

    redkelly (03-17-2013)

  • #3
    New Coder
    Join Date
    Feb 2013
    Posts
    23
    Thanks
    15
    Thanked 0 Times in 0 Posts
    HEY!

    Thanks so much! Adding that lil' snippet did the job!

    Quote Originally Posted by Chrystyan View Post
    ...never knew about the :link selector before, for some reason. I guess we catch something new every day... but whats the purpose of using it?
    I haven't a clue! That was one of the remnants of the original Blogger template code that these pages evolved from... perhaps that's where the problems were originating from?

    In any event, if a works, I can't see any reason to add the :link, right?

    Thanks again!

    -red


  •  

    Posting Permissions

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