a:hover not working in Firefox.

Question

Pim 0 Junior Poster

16 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

web-design

5 Contributors
10 Replies
269 Views
3 Years Discussion Span
Latest Post 12 Years Ago Latest Post by Otters10

Dsiembab 5 Junior Poster

16 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 5 Junior Poster

16 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 5 Junior Poster

16 Years Ago

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

Reply to this topic

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.

Pim 0 Junior Poster · Answer 1 · 2008-02-23T01:26:47+00:00

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 0 Junior Poster · Answer 2 · 2008-02-23T01:39:44+00:00

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

Pim

Pim 0 Junior Poster · Answer 3 · 2008-02-23T02:06:43+00:00

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.

Dsiembab 5 Junior Poster · Answer 4 · 2008-02-23T02:18:52+00:00

Dsiembab 5 Junior Poster

16 Years Ago

You're on your way

jl02 0 Newbie Poster · Answer 5 · 2009-12-16T03:36:35+00:00

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.

pronojit 0 Newbie Poster · Answer 6 · 2011-05-23T22:15:46+00:00

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

~ Thanks

Otters10 0 Newbie Poster · Answer 7 · 2012-01-13T22:33:38+00:00

@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!