Forum Moderators: not2easy
/* Generic Selectors */
body {
font-family:Georgia,"Times New Roman",Times,serif;
font-size:14px;
color:#333333;
background-color: #00CCFF;
}
li {
list-style-type: disc;
line-height: 150%;
}
h1 {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 18px;
font-weight: bold;
color: #000000;
}
h2 {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 16px;
font-weight: bold;
color: #000000;
border-bottom: 1px solid #C6EC8C;
}
/**************** Pseudo classes ****************/
:link {
color: #3300FF;
text-decoration: underline;
font-weight: bold;
}
li :link {
color: #3300FF;
text-decoration: none;
font-weight: bold;
}
:visited {
color: #CC33CC;
text-decoration: underline;
font-weight: bold;
}
li :visited {
color: #CC33CC;
text-decoration: none;
font-weight: bold;
}
:hover {
color:#6633CC;
font-weight:bold;
text-decoration:underline;
}
li :hover {
display:block;
color:#6633CC;
font-weight: bold;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #C6EC8C;
}
:active {
color:#FFFF66;
font-weight:bold;
}
/************************* ID's *************************/
#navigation {
position:absolute;
z-index:10;
width:175px;
height:400px;
margin:0;
margin-top:5px;
font-weight:bold;
}
#centerDoc {
position:absolute;
z-index:15;
width:380px;
height:300px;
padding:0 15px 20px 185px; /*top right bottom left*/
margin-top:5px;
}
#rightDoc {
position:absolute;
z-index:20;
width:150px;
height:300px;
padding:0 10px 20px 590px; /*top right bottom left*/
margin-top:5px;
}
Please post some relevant html code as well. Is it just mozilla that gives you a headache? have you tried other gecko browsers, safari, opera etc?
Regarding the link - bold - underline issue you might just have forgotten to close a <a> tag somewhere. Try validating your html document using the w3c validator [validator.w3.org].
To fix, you need to specify which elements you want the psuedoclasses to apply to. I would use the <a> tag, but I know some folks believe that is just plain wrong. If you are one such folk, you can use an id or class selector...
<a id="firstlink" href="#">Blah</a>
#firstlink:hover {
property: value;
}
Alternately, you might try :link:hover instead of just :hover.
The :link:hover suggestion works.
The code in the navigation div is
</head>
<p align="center"> <img src="images/sunny_fuerteventura.gif" width="680" height="120" alt="Sunny Fuerteventura"> </p>
<div id="navigation">
<ul>
<li> <a href="nuevohorizonte.html">Nuevo Horizonte</a> </li>
<li> <a href="caletadefuste.html">Caleta de Fuste</a> </li>
<li> <a href="paraiso.html">Apartment Rental</a> </li>
</ul>
</div>
None of the links work and the links are not affected by hovering over them.
At the bottom of the page I have a mailto and a return to the top of the page. The mailto link launches the email, the return to top of page doesn't work.
At the top of the page i have a bitmap that acts as a link. This functions ok. And if i put a link outside of the div it works too.
Thanks for all your help on this
None of the links work and the links are not affected by hovering over them.
This sounds like you have a transparent element overlapping the links. Have you used and z-indices, overlapped absolute positioning, or negative margins on the page that might have placed one element over another?
Trevor
The problems seem to come from me not knowing what i am doing.
I have this same problem in nearly every area of my life. ;) Dont' sweat it; it's all about the learning.
