I'm using the following code:

/*Het middenboxje plus de achtergrond.*/
div.transbox
{
width: 400px;
height: 600px;
margin: 0px 0px;
margin-top: 25px;
background-color: #CCFFFF;
border: 1px solid black;
opacity:1.00; /*lagere waardes zijn doorzichtig*/
margin-left: 240px; /*anders lopen deze en de links door elkaar*/
}


div.transbox p
{
color:#66CC33;
margin: 30px;
}

body
{
background-color:#FFFFFF;
}

/*Code voor het menu links.*/
ul
{
float: left; /*Hij blijft links hangen*/
position: fixed;
margin-left: 20px;
}

li
{
width: 160px;
heigth: 20px;
border-style: solid;
border-width: 1px;
border-color: #64acd8;
margin-top: 3px;
list-style: none; /*Er zullen geen gekke dingetjes voor de onderdelen van de lijst geplaatst worden*/
font-family: Arial;
font-size: 110%;
cursor: default;
}


#links a
{
text-decoration: none;
color:#66CC33;
margin-left: 5px; /*houdt de tekst van de link net iets van het randje van de li border (om de link)*/
cursor: default;
}

#links a:hover
{
color:#CC0044;
cursor: default;
}
#links a:active
{
text-decoration: none;
color:#66CC33;
}
#links a:visited
{
text-decoration: none;
color:#66CC33;
}

The problem is that the links are supposed to light up red when the use puts his mouse over them. This only works in IE for some reason. Anybody knows what's causing this?

Thank You,

Pim

I'm using the following code:

/*Het middenboxje plus de achtergrond.*/
div.transbox
{
width: 400px;
height: 600px;
margin: 0px 0px;
margin-top: 25px;
background-color: #CCFFFF;
border: 1px solid black;
opacity:1.00; /*lagere waardes zijn doorzichtig*/
margin-left: 240px; /*anders lopen deze en de links door elkaar*/
}


div.transbox p
{
color:#66CC33;
margin: 30px;
}

body
{
background-color:#FFFFFF;
}

/*Code voor het menu links.*/
ul
{
float: left; /*Hij blijft links hangen*/
position: fixed;
margin-left: 20px;
}

li
{
width: 160px;
heigth: 20px;
border-style: solid;
border-width: 1px;
border-color: #64acd8;
margin-top: 3px;
list-style: none; /*Er zullen geen gekke dingetjes voor de onderdelen van de lijst geplaatst worden*/
font-family: Arial;
font-size: 110%;
cursor: default;
}


#links a
{
text-decoration: none;
color:#66CC33;
margin-left: 5px; /*houdt de tekst van de link net iets van het randje van de li border (om de link)*/
cursor: default;
}

#links a:hover
{
color:#CC0044;
cursor: default;
}
#links a:active
{
text-decoration: none;
color:#66CC33;
}
#links a:visited
{
text-decoration: none;
color:#66CC33;
}

if you are using the opacity attribute at 1.0 why even have it? Is this for a widget? trim your #links a:hover a:active and a:visited for they will inherit the values from #links a just leave the color. You have links as an id so I am thinking you have you would have to set the

<div id="links"><a href="http://whatever/">whatever</a><a href="http://whatever/">whatever</a><a href="http://whatever/">whatever</a></div>

right? Or are they in a list in that case you would want li a, li a:hover, etc.., Where are these anchors? #links a:active, #links a:hover {color:#66CC33;} please show the html or php markup.

I'm not very familiar with CSS yet, so I see that my code isn't optimal.

Now I've just found, it doesn't work in IE either.

The opacity is 1.0 because I don't know whether I like it or not. I might change the value later, therefore it is 1.0 now.

The HTML is:

<html>
<head>
<title>Test</title>
<link rel="stylesheet" type="text/css"
href="http://opacity.atspace.com/style.css"/> 
</head>
<body>
<div id="links">
<ul>
<li><a href="">Link1</a></li>
<li><a href="">Link2</a></li>
<li><a href="">Link3</a></li>
<li><a href="">Link4</a></li>
</ul>
</div>
<div class="transbox">
<p>
Text goes here.
</p>
</div>
</div>
</body>
</html>

I'm not very familiar with CSS yet, so I see that my code isn't optimal.

Now I've just found, it doesn't work in IE either.

The opacity is 1.0 because I don't know whether I like it or not. I might change the value later, therefore it is 1.0 now.

The HTML is:

<html>
<head>
<title>Test</title>
<link rel="stylesheet" type="text/css"
href="http://opacity.atspace.com/style.css"/> 
</head>
<body>
<div id="links">
<ul>
<li><a href="">Link1</a></li>
<li><a href="">Link2</a></li>
<li><a href="">Link3</a></li>
<li><a href="">Link4</a></li>
</ul>
</div>
<div class="transbox">
<p>
Text goes here.
</p>
</div>
</div>
</body>
</html>

#links ul li a{
attributes : values;
}
#links ul li a:hover{
attributes : values;
}
#links ul li a:active{
attributes : values;
}
#links ul li a:visited{
attributes : values;
}
try this out. Of course changing the attributes and values. I started out the same way it definately takes time and practice good luck here is a good sight for opacity http://www.mandarindesign.com/opacitycolor.html

Would you mind explaining why this will fix it, and what it does? Because it doesn't work.

Pim

in your <a href=""></a> put a # intbetween the quotations

Well thanks for your help!
I found the following to solve my problem (for anyone who might have the same problem):
CSS:

/*Het middenboxje plus de achtergrond.*/
div.transbox
{
width: 400px;
height: 600px;
margin: 0px 0px;
margin-top: 25px;
background-color: #CCFFFF;
border: 1px solid black;
opacity:1.00; 			/*lagere waardes zijn doorzichtig*/
margin-left: 240px; 		/*anders lopen deze en de links door elkaar*/
}


div.transbox p
{
color:#66CC33;
margin: 30px;
}

body
{
background-color:#FFFFFF;
}

				/*Code voor het menu links.*/
ul
{
float: left; 			/*Hij blijft links hangen*/
position: fixed;
margin-left: 20px;
}

li
{
width: 160px;
heigth: 20px;
border-style: solid;
border-width: 1px;
border-color: #64acd8;
margin-top: 3px;
list-style: none;		 /*Er zullen geen gekke dingetjes voor de onderdelen van de lijst geplaatst worden*/
font-family: Arial;
font-size: 110%;
cursor: default;
}


#links a
{
text-decoration: none;
color:#66CC33;
margin-left: 5px; 		/*houdt de tekst van de link net iets van het randje van de li border (om de link)*/
cursor: default;
}

#links a:hover
{
color:#CC0044;
}

HTML:

<html>
<head>
<title>Test</title>
<link rel="stylesheet" type="text/css"
href="http://opacity.atspace.com/style.css"/> 
</head>
<body>
<div id="links">
<ul>
<li><a href="">Link1</a></li>
<li><a href="">Link2</a></li>
<li><a href="">Link3</a></li>
<li><a href="">Link4</a></li>
</ul>
</div>
<div class="transbox">
<p>
Text goes here.
</p>
</div>
</div>
</body>
</html>

Thanks again.

You're on your way

I'm using the following code:

/*Het middenboxje plus de achtergrond.*/
div.transbox
{
width: 400px;
height: 600px;
margin: 0px 0px;
margin-top: 25px;
background-color: #CCFFFF;
border: 1px solid black;
opacity:1.00; /*lagere waardes zijn doorzichtig*/
margin-left: 240px; /*anders lopen deze en de links door elkaar*/
}


div.transbox p
{
color:#66CC33;
margin: 30px;
}

body
{
background-color:#FFFFFF;
}

/*Code voor het menu links.*/
ul
{
float: left; /*Hij blijft links hangen*/
position: fixed;
margin-left: 20px;
}

li
{
width: 160px;
heigth: 20px;
border-style: solid;
border-width: 1px;
border-color: #64acd8;
margin-top: 3px;
list-style: none; /*Er zullen geen gekke dingetjes voor de onderdelen van de lijst geplaatst worden*/
font-family: Arial;
font-size: 110%;
cursor: default;
}


#links a
{
text-decoration: none;
color:#66CC33;
margin-left: 5px; /*houdt de tekst van de link net iets van het randje van de li border (om de link)*/
cursor: default;
}

#links a:hover
{
color:#CC0044;
cursor: default;
}
#links a:active
{
text-decoration: none;
color:#66CC33;
}
#links a:visited
{
text-decoration: none;
color:#66CC33;
}

The problem is that the links are supposed to light up red when the use puts his mouse over them. This only works in IE for some reason. Anybody knows what's causing this?

Thank You,

Pim

I think you should check the order of the styles, it has to look something like this:

link{
//here is your style
}
link a:visited{
//here is your style
}
link a:hover{
//here is your style
}
and at the end goes
link a:active{
//here is your style
}
so the order should be: link, visited, hover, and active.
Try to do this and I hope it could work.

I had the same issue with FF, and finally changing the order to link, visited, hover, and active, fixed the issue.

~ Thanks

@pronojit
I was having trouble with my link states and after changing the order to link, visited, hover, it worked! Thanks so much for posting!

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.