a:hover not working in Firefox.

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

Junior Poster

106 posts since Jun 2005

Reputation Points: 10

Solved Threads: 0

4 Years Ago

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.

Dsiembab

Junior Poster

156 posts since Mar 2007

Reputation Points: 18

Solved Threads: 2

4 Years Ago

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>

Pim

Junior Poster

106 posts since Jun 2005

Reputation Points: 10

Solved Threads: 0

4 Years Ago

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

Dsiembab

Junior Poster

156 posts since Mar 2007

Reputation Points: 18

Solved Threads: 2

4 Years Ago

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

Pim

Junior Poster

106 posts since Jun 2005

Reputation Points: 10

Solved Threads: 0

4 Years Ago

in your put a # intbetween the quotations

Dsiembab

Junior Poster

156 posts since Mar 2007

Reputation Points: 18

Solved Threads: 2

4 Years Ago

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.

Pim

Junior Poster

106 posts since Jun 2005

Reputation Points: 10

Solved Threads: 0

4 Years Ago

Show Comments

-1

You're on your way

Dsiembab

Junior Poster

156 posts since Mar 2007

Reputation Points: 18

Solved Threads: 2

2 Years Ago

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.