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
Before you post, read our: 
