CSS - Css A:hover Problem In Firefox

Im novice to CSS, im makin my first one.
I have this problem, i made my class and then i did the a:hover with that class but it is not shown in firefox and opera, works fine in IE.

Am i forgetting something? how do i fix? here's my code:

Code:

body {
	background-color: #1A1852;
	background-image: url(../imagenes/fondo2.gif);
}
.menu {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: x-small;
	color: #000000;
	text-decoration: none;
	}
a:menu:link {
	text-decoration: none; 
	}
a:menu:active {
	text-decoration: none;
	}
a:menu:visited {
	text-decoration: none;
	color: #000000;
}
a:menu:hover {
	font-weight: bold;
	text-decoration: none;
	color: #000000;
	}
.actual {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: x-small;
	color: #000000;
	font-weight: bold;
	text-decoration: underline;
	}

.descarga {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: x-small;
	color: #FFFFCC;
	text-decoration: none;
	}
a.descarga:hover {
	font-weight: bold;
	text-decoration: underline;
	color: #FF9966;
	}

.texto {
	color: #FFFFFF;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: x-small;
}
.pie {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color: #CCCCCC;
	font-size: 10px;
}
.titulo { 
	color: #CC66CC;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: x-small; font-weight: bold;
}
.vinculo {
	color: #FFFFFF;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: x-small; color: #FFFFCC;
}
.tabla {
border-style: dashed;
border-width: thin;
border-color:#CC66CC;
}

For some reason, when I hover over images in the #content div of my site firefox is adding a strange little box to the bottom right hand corner of the image. The color of the box is the same color as my text hyperlinks which makes it more interesting. You can see the issue on my site. Here is the code that deals with the images in the #content div:

Code:

#content img {
margin:2px 5px 0px 0px;
}

#content a img, #content a:visited img, #content a:active img {
border:2px solid #6FA6D9;
}

#content a:hover img {
border:2px solid #ffffff;
}

This issue is only happening on the images I insert from my wpg2 gallery. The images get one of the following classes applied to them:

Code:

.g2image_float_left {
display:block;
float:left;
}

.g2image_float_right {
display:block;
float:right;
margin-left:5px;
}

Now I don't see how either of these could cause a problem but they have to be the issue considering this doesn't happen on images that don't have one of the above classes applied to them.

Any ideas what is causing this?

Thanks in advance.

I've having an issue with Firefox and my navbar. It's image based I can't find a way to exclude it from the hover state of a:hover { border-bottom:1px dashed #666;}

When you hover over the links on the navbar, it shifts the page a bit and then back to normal when you leave the hover state.

http://www.graphics-tech.com/concept

There is the link for example.

Thanks

Hi all, haven't had to post for awhile. Need some help!

Am trying to create a popup box below menu when hovering over link, strictly using CSS. My problem is everything's working perfect in IE(a rarity), but in Firefox the box pops up too high and is wider than I want

Here's the code...

CSS:
Code:

body {
	margin: 0; padding: 0;
	background: url(bodybg.jpg) repeat-x #000;
	}

#header {
	position: absolute; top: 0; left: 0;
	width: 100%; height: 100px;
	background: url(metalpipe2.png) bottom repeat-x;
	margin: 0; padding: 0;
	}

#leftcontent {
	position: absolute; top: 110px; left: 0;
	width: 125px; height: 700px;
	margin-left: 15px; padding: 0;
	}
	/*moved background to #leftcontent a. Can now create transparent gap for background to show between links.*/

#leftcontent a {
	display: block;
	margin: 0; padding: 5px;
	font-weight: bold; font-size: 17px;
	background: #222; color: #C00;
	font-family: Arial;
	text-align: center;
	text-decoration: none;
	}

#leftcontent a:hover {
	color: lightgrey;
	border: none;
	}
	/*had to add border: none; to make span box work in IE*/ 

#leftcontent a span {
	display: none;
	}

#leftcontent a:hover span {
	display: block;
	position: absolute; top: 255px; left: 0;
	width: 135px;
	margin-left: -5px; padding: 5px;
	background: #000; color: lightgrey;
	font-size: 12px;
	border: 1px solid white;
	} 

#midcontent {
	position: absolute; top: 110; left: 155px; right: 25px;
	height: 700px;
	margin: 0; padding: 0;
	background: #F5F5F5;
	}

#midcontent p {
	margin: 0; padding: 20px;
	}

HTML:
Code:

<html>
<head>
<title>Test Page</title>

<link rel="stylesheet" href="TestPage.css" type="text/css" media="screen" />

<style type="text/css">
<!--
#leftcontent a#link1 {
	color: #C00;
	background: #444; 
	border: none;
	padding: 5px;
	}
 --> </style>
</head>

<body>


  <div id="header">
	<img src="x-fire_logo_t4.png" alt="X-Fire logo" />
  </div> <!-- end #header -->

  <div id="leftcontent">
	<a href="link" id="link1">Home</a>
	<a href="link" id="link2">Home Fire Sprinklers<span>Text for<br />a:hover span { }<br />popup window</span></a>
	<a href="link" id="link3">Fire Alarm Systems</a>
	<a href="link" id="link4">Burglar Alarm Systems</a>
	<a href="link" id="link5">Insurance<br /> Info.</a>
	<a href="link" id="link6">Contact Us</a>
  </div> <!-- end #leftcontent -->

	
  <div id="midcontent">	  
	<p>Here's my dilema. Hover over Home Fire Sprinklers link. There should be a popup window below menu.<br />Popup location & width looks great in IE.<br />But in Firefox it pops up higher & wider than I wish. </p>
<p>Could someone tell me what I'm overlooking?...Many Thanks!</p>
<p>Got idea from <a href="http://www.meyerweb.com/eric/css/edge/popups/demo.html">Eric Meyer's site</a>. His page doesn't encounter this problem and I can't see anything special in the source that's much different from mine.</p>
  </div> <!-- end #midcontent -->



</body>
</html>

Many Thanks,
James

Hi

I am having some problems with using hover and background images. My code is this:

a:hover.buttons {
color:white;
width:53px;
height:33px;
background-color:#3366CC;
background-image: url(images/council1.jpg);
padding-top: 9px;
padding-bottom: 10px;
padding-left: 8px;
padding-right: 8px;

}
It is loading a background image into a table cell. It works OK in mozilla based browsers, but there is a delay of about a second when using IE, which makes the page look rather untidy.

The page I am working on can be viewed he http://www.northstar-newmedia.co.uk/oic (the links ath the top of the page)

Does anyone know why this is happening, and if there is a fix/hack? Any help would be much appreciated.

Hi all u experts
I have some problems which I list them below :

1-I just used a simple css style, it works in FF but not in IE7, it means font size and and bold, is shown in FF but not in IE

Quote:
#tbtd2 {
font: 12px Arial bold;
color: #8F2222;
}




2-also hover effect is not the same in FF and IE , the same as above (looks disable in IE) :

Quote:
#tbtd2:hover {
font: 14px Arial bold;
color: #8F2222;
}



3-how can I have hover effect for row of a table ? ( css style not js ) like change font color or size ?

best regards

How do you fix this hover problem

http://www.svprosquad.com/test.htm

It's the top nav that's the problem that's the one that is done using CSS.

I'm having a problem with the following piece of code.

Code:

.menuitem
{
	position:relative;
	border:0px solid;
	border-color:#fff;
	z-order:auto;
	padding:1px;
	text-align:center;
	text-size:10px;
	width:300px;
	padding:2px;
}

div.menuitem:hover
{
	background-color:#06f;
	color:white;
}

With Mozilla and Opera, the code highlights the div areas in blue as I expected. However, in IE6, this does not happen. The divs have been wrapped in anchor tags like so:

Code:

<a href="wherever.htm">
<div class="menuitem">
menuitem1
</div>
</a>

Anybody have any ideas?

Hello,

Basically I have a problem with my CSS regarding an on hover option in IE5. My CSS works fine on IE7 and IE6, however on IE5 it does not work properly and instead of displaying me a menu on IE5 (on Apple) it just creates empty spaces at the bottom of the page. The following is the CSS I use to make the menus work: Code:

ul {
 margin: 0;
 padding: 0;
 list-style: none;
 width:300px;
 background-color: #EAEAEA;
 }


ul li {
 position: relative;
 /* need for IE*/
 float: left;
 background-color:#EAEAEA;
 text-decoration: none;
 }

li ul {
 position: absolute;
 left: 149px;
 top: 0;
 display: none;
 background-color: #EAEAEA;
 text-decoration: none;
 }


ul li a {
 display: block;
 text-decoration:none;
 color: #777;
 background-color: #EAEAEA;
 padding: 5px;
 /* need for IE*/
 height: 1%;
 text-align: left;
 }

ul {
 margin: 0;
 padding: 0;
 list-style: none;
 width: 150px;
 }


li:hover ul, li.over ul {
 display: block; 
 }

As I already said this works fine on IE7 but a disaster on IE5 (on Apple). Also the doc type I am using is Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

I have also searched google, but can not really find a solution to my problem! Any sugestions are most welcomed

Thank You
bormli

Hiya,

Hoping for a bit of help with a menu I've made. Basically it's a tabbed menu with another line underneath for an explanation of what you'll find if you click on the tab. The explanation shows up when you hover over the appropriate tab. I also have an 'active' class that highlights whatever section you're on and shows that explanation as default.

It all works fine until you're halfway through the menu, and the explanations won't show for any menu item previous to the active one. I know this is something to do with z-index, but I can't for the life of me figure out where to put it. Can anyone help? This is only happening in IE.

Full Code he

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Menu Problem</title> <link href="menu.css" rel="stylesheet" type="text/css" /> <!-- The line below starts the conditional comment --> <!--[if IE]> <style type="text/css"> body {behavior: url(csshover.htc);} </style> <![endif]--> <!-- This ends the conditional comment --> </head> <body> <div class="container"> <p>First Active Tab:</p> <div class="nav"> <ul> <li class="active"><a href="#" title="Item 1"><span>Item 1</span></a> <ul class="item1"> <li><span>Caption for Item 1. Caption for Item 1. </span></li> </ul> </li> <li><a href="#" title="Item 2"><span>Item 2</span></a> <ul class="item2"> <li><span>Caption for Item 2. Caption for Item 2. </span></li> </ul> </li> <li><a href="#" title="Item 3"><span>Item 3</span></a> <ul class="item3"> <li><span>Caption for Item 3. Caption for Item 3. Caption for Item 3. </span></li> </ul> </li> <li><a href="#" title="Item 4"><span>Item 4</span></a> <ul class="item4"> <li><span>Caption for Item 4. Caption for Item 4. </span></li> </ul> </li> <li><a href="#" title="Item 5"><span>Item 5</span></a> <ul class="item5"> <li><span>Caption for Item 5. Caption for Item 5. </span></li> </ul> </li> <li><a href="#" title="Item 6"><span>Item 6</span></a> <ul class="item6"> <li><span>Caption for Item 6. Caption for Item 6.</span></li> </ul> </li> </ul> </div> <!-- End nav --> <p style="margin-top: 20px; padding-top: 20px; border-top: 1px solid #000;">Middle Active Tab:</p> <div class="nav"> <ul> <li><a href="#" title="Item 1"><span>Item 1</span></a> <ul class="item1"> <li><span>Caption for Item 1. Caption for Item 1. </span></li> </ul> </li> <li><a href="#" title="Item 2"><span>Item 2</span></a> <ul class="item2"> <li><span>Caption for Item 2. Caption for Item 2. </span></li> </ul> </li> <li><a href="#" title="Item 3"><span>Item 3</span></a> <ul class="item3"> <li><span>Caption for Item 3. Caption for Item 3. Caption for Item 3. </span></li> </ul> </li> <li class="active"><a href="#" title="Item 4"><span>Item 4</span></a> <ul class="item4"> <li><span>Caption for Item 4. Caption for Item 4. </span></li> </ul> </li> <li><a href="#" title="Item 5"><span>Item 5</span></a> <ul class="item5"> <li><span>Caption for Item 5. Caption for Item 5. </span></li> </ul> </li> <li><a href="#" title="Item 6"><span>Item 6</span></a> <ul class="item6"> <li><span>Caption for Item 6. Caption for Item 6.</span></li> </ul> </li> </ul> </div> <!-- End nav --> </div> </body> </html>

CSS He

Code:

/* CSS Document */ body{margin: auto; text-align: center; background: #fff; font-size: 80%;} .container{ margin: auto; padding-top: 6px; width: 1000px; text-align: left; background: #fff;} /* Main Menu */ .container .nav{background: #fff; height:68px; line-height:34px;left:0px; font-weight: bold; font-family: Arial, Helvetica, sans-serif; color: #fff; text-transform:uppercase;margin-left: 6px; } .container .nav ul{list-style: none; position:relative;} .container .nav ul li{display: inline; float: left; position:relative; font-size: 0.9em; } .container .nav ul li a{text-decoration:none; color:#fff; background: #A90100; padding-left: 20px; } .container .nav ul li a, .container #nav ul li a span{ display: block; float: left;} /* Hide from IE5-Mac \*/ .container .nav a, .container .nav a span{float: none} .container .nav ul li a:hover{text-decoration:none; color:#fff; background: #351405; } .container .nav ul li.active a{text-decoration:none; color:#fff; background: #351405; } .container .nav ul li.active a span{text-decoration:none; color:#fff; background: #351405; } .container .nav ul li.active ul{display: block;} .container .nav ul li a span{background: #A90100; padding-right: 20px; } .container .nav ul li a:hover span{text-decoration:none; color:#fff; background: #351405; } .container .container .nav li > ul {top: auto;left:auto;} .container .nav ul li ul{ display:none; position: absolute; width: 700px; left: 0px; top: 0px; float: left; font-family:Arial, Helvetica, sans-serif; font-size: 12px; text-transform:none; font-weight: normal;} .container .nav ul li:hover ul{ z-index:100;} .container .nav ul li ul.item1{ left: 10px; z-index: 0;} .container .nav ul li ul.item2{ left: -67px; z-index: 0;} .container .nav ul li ul.item3{ left: -144px; z-index: 0;} .container .nav ul li ul.item4{ left: -221px; z-index: 0;} .container .nav ul li ul.item5{ left: -298px; z-index: 0;} .container .nav ul li ul.item6{ left: -375px; z-index: 0;} .container .nav ul li:hover ul.item1{z-index: 100;} .container .nav ul li:hover ul.item2{z-index: 100;} .container .nav ul li:hover ul.item3{z-index: 100;} .container .nav ul li:hover ul.item4{z-index: 100;} .container .nav ul li:hover ul.item5{z-index: 100;} .container .nav ul li:hover ul.item6{z-index: 100;} .container .nav ul li ul li{ display:inline; position: absolute; float: left; left:10px; top: 39px; height: 24px; line-height: 24px; width: 700px; float: left; color: #fff; font-family:Arial, Helvetica, sans-serif; font-size: 1em; text-transform:none; font-weight: normal; background: #351405;} .container .nav ul li:hover ul {display: block;}

Hi Everyone,

I am working on redesigning a website in WordPress that I had previously built in HTML. Most things seems to be working well, except some styling of some JavaScript. The script has a special hover image, but in the new site I can't get the descriptions to be inside the hover box.

You can see an example of the old, correctly working site he
e3ncw [dot] com

And the new, broken one he
e3ncw [dot] com /page/1

If you hover over any button in the sidebar you'll see the problem. I'm using float:left on both the image and the description, but can't get it to work.

Here's the current CSS I'm using:

Code:

.sb-blocks li em {
	background: url(images/hover.png) no-repeat center top;
	width: 350px;
	height: 200px;
	position: absolute;
	top: 0px;
	left: -100px;
	padding: 5px 0 0;
	font-style: normal;
	z-index: 2;
	display: none;
}

p.url {
	font-weight: bold;
	color: #a82125;
	text-align: center;
	font-size: 1em;
	line-height: .5em;
}

.sb-blocks em img {
	float: left;
	padding: 5px 5px 15px 15px;
}


.sb-blocks p.description {
	color: #a82125;
	float: left;
	width: 275px;
}

Any help is greatly appreciated. Thanks!

Hello,
I'm trying to create a menu for my NGO to replace the one they have currently but I'm running into some problems. The highlight color in this photo is one - how do you get around this issue? I'd like to keep the colors the same, if possible, but I recognize that might not be acceptable.

the menu img is at kburke - org slash menuhover.jpg


Thanks!
here's the code:

/*** DEMO SKIN ***/
.sf-menu {
float: left;
margin-bottom: 1em;
font:11px Verdana, sans-serif;
font-weight:bold;
}

.sf-menu a {
border-left: 1px solid #fff;
border-top: 1px solid #CFDEFF;
padding: .75em 1em;
text-decoration:none;
color: #FFFFFF;
}

.sf-menu a, .sf-menu a:visited { /* visited pseudo selector so IE6 applies text colour*/
color: #ffffff;
}
.sf-menu li {
background: #b6791e;
}

.sf-menu li ul li a {
color: #769841;
}

.sf-menu li li a:active, .sf-menu li li a:focus {
color: #ffffff;
}

.sf-menu li li {
background: #ffffff;
}
.sf-menu li li li {
background: #ffffff;
}
.sf-menu li:hover, .sf-menu li.sfHover,
.sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active {
background: #769841;
outline: 0;
color: #FFFFFF;
}

/*** arrows **/
.sf-menu a.sf-with-ul {
padding-right: 2.25em;
min-width: 1px; /* trigger IE7 hasLayout so spans position accurately */
}
.sf-sub-indicator {
position: absolute;
display: block;
right: .75em;
top: 1.05em; /* IE6 only */
width: 10px;
height: 10px;
text-indent: -999em;
overflow: hidden;
background: url('../images/arrows-ffffff.png') no-repeat -10px -100px; /* 8-bit indexed alpha png. IE6 gets solid image only */
}
a > .sf-sub-indicator { /* give all except IE6 the correct values */
top: .8em;
background-position: 0 -100px; /* use translucent arrow for modern browsers*/
}
/* apply hovers to modern browsers */
a:focus > .sf-sub-indicator,
a:hover > .sf-sub-indicator,
a:active > .sf-sub-indicator,
li:hover > a > .sf-sub-indicator,
li.sfHover > a > .sf-sub-indicator {
background-position: -10px -100px; /* arrow hovers for modern browsers*/
}

/* point right for anchors in subs */
.sf-menu ul .sf-sub-indicator { background-position: -10px 0; }
.sf-menu ul a > .sf-sub-indicator { background-position: 0 0; }
/* apply hovers to modern browsers */
.sf-menu ul a:focus > .sf-sub-indicator,
.sf-menu ul a:hover > .sf-sub-indicator,
.sf-menu ul a:active > .sf-sub-indicator,
.sf-menu ul li:hover > a > .sf-sub-indicator,
.sf-menu ul li.sfHover > a > .sf-sub-indicator {
background-position: -10px 0; /* arrow hovers for modern browsers*/
}

I had to make a hover menu that was full CSS, and i couldn't make it work in IE, because of the old issue of IE not supporting :hover for anything else but the a tag.
So i modded some example i found on the internet that was using js for ie, attached through behaviours, in the css file.
The url is this.
The menu works fine in mozilla but it has a problem in IE, and i think it's css, not js.
If you hover over the Products button and then over one of the items that appear, the item right under it will get a few pixels higer, which causes the whole menu to move down as you movewr over those ites.
And it's annoying.
Can some one give me a hint please?
I've tried all sorts of things, adding empty level 3 menus to the items that don't need it, but still nothing...
Thanks in advance...

My nav menu works 100% in IE8, FF, Opera and Chrome... but it's doing something weird in IE7 that can kindof affect it's functionality but I have no idea really where to look for the problem.

It's most easily seen on two pages. The front page, he
http://www.skullcrow.com

...and on the product pages he
http://www.skullcrow.com/proddisp.php?id=skull01

On the main page when you hover over the menu and get the drop downs, if you move your cursor so you're also over the text div in the background, the menu goes away. You can tell easiest when viewing the "Community" and "Help" lists. On the product display page is the same thing over a larger area. Anytime you move the cursor to a part of the menu that's covering the text or (only some of?) the background div, it disappears. The menu is obviously on top, and this problem does not occur in basically any other browser.

The main reason I need to fix this is that these menus will probably only get bigger and the navbar will become barely unusable in IE7 after a while.

I don't exactly what code I would need to post for this, I was just hoping for some general information that could point me in the right direction.

Thanks for any help.

Hey, im just looking at putting some images on my website that change with the users mouse hovering over them, nothing spectacular. With google's help ive managed to figure out the Css code, for one image like this but im struggling to see an easy way to get more images with the same spec without repeating myself in endless lines of code.

Code:

<html>

<head>
<title>Button attempt</title>
<style type="text/css">

.btnContinue {
width: 80px;
height: 10px;
display: block;
font-size: 10px;
text-decoration: none;
background-repeat:no repeat;
background-image:url(image link here); 
}

.btnContinue:hover {
background-image:url(image link here);
}


</style>
</head>

<body>

<a class="btnContinue" href="##">&nbsp;</a>


</body>

</html>

Is there a simple method to use these styles on more than one image, without starting btnContinue2, btnContinue3 etc...

thanks