CSS - Css Problem With Javascript Hover

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.

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.

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...

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

Hi,

I have the following CSS:

.class2 a:hover {text-decoration: none; background-color: #333366; color: #ffffff; width: 100%; height: 100%; font-weight: bold;}

for this javascript/HTML:

menu1[0]='<span class="class2"><a href="">&nbsp;&nbsp;About our trees</a></span><br>'

It's part of a drop down menu and in IE when a user hovers over the About our trees, the entire box is highlighted with my chosen color. In Firefox, only the text in the box is highlighted. Can someone help me with this one? I tried switching from a <span> to a <div> and still no good.

AAUGH.

Happy Thanksgiving to all who are celebrating!
Kimber

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 Guys,

Firstly, I'd like to apologise for posting this, this is my first css site that I'm working on and I've just noticed some problems that have appeared with testing with IE6 (I normally use Firefox and last time I tested in IE 6 things were working ok!)

The problem is that my Block hover doesn't now seem to work and neither does my image border hover either. On top of that my positioning for 2 small boxes has suddenly gone a little awol too!

Site is fine in Firefox, see here

However when I check this in IE, the hovers and a couple of boxes have really messed up and I've spent hours with this, but not getting anywhere, so any assistance would be greatfully received!

My style sheet is here

Again, any pointers would be much appreciated

Best regards

Jon

P.S I've been using Firebug with much success for Firefox, but not sure what to use for IE, any suggestions?

check out parrisstudios(dot)com/mirage_framing

In firefox it is normal, but in ie 6 when you hover over one of the links it gives you a weird drop down box type thing, but it wont go away until you refresh.

I wan't to say it is like that peek-a-boo bug but backwards....

Code:

ul{
margin: 0;
padding: 0;
list-style:none;
width: 410px;
float:left;
position:relative;
line-height:20px;
}

ul a{
line-height:10px;
float:left;
display:block;
padding: 0 12px;
text-decoration:none;
color: #C0AEA0;
position:relative;
}

li a:hover {
margin: 0;
padding: 0 12px;
float:left;
position:relative;
background-color:#EADED2;
line-height:20px;
}

ul li{
float: left;
background-color:#ffffff;
position:relative;
line-height:20px;
}

li a{
display:block;
text-decoration:none;
color: #C0AEA0;
float:left;
position:relative;
line-height:20px;
}

THANKS!

I am using a CSS hover image enlarge which when you hover over a thumbnail, it then shows the large version.
It works fine in IE7 onwards,
but in IE6 the enlarged image is now showing at all when you hover over the thumbnail.

Can anyone help?


here is the HTML

Code:

<div id="side-b">
<div class="news-box-container">
<div class="sidebar"><img src="includes/side2barsmall.jpg" alt="" /></div>

<div class="news-box">
<div class="staffpics">

<a class="p1" href="#" title=""><img src="includes/staffone.jpg" title="" alt="" />
<img class="large" src="includes/staffonelarge.jpg" title="" alt="" /></a>

</div><!-- end staffpics -->
</div><!-- end news-box -->

<div class="sidebar"><img src="includes/side2barsmall.jpg" alt="" /></div>

</div><!-- end news-box-container -->
</div><!-- end side b -->

here is the CSS

Code:

 .staffpics {
width:96px;
}

 .staffpics a.p1, a.p1:visited {
width:96px; height:78px; border:0px none;
}

.staffpics a img {
border:0px none;
}

.staffpics a.p1:hover {
color:#000;
}

.staffpics a .large {
position:absolute; width:0; height:0; border:0px none; top:0; left:0; padding:0px
}

.staffpics a.p1:hover .large {
position:absolute; top:125px; left:400px; width:300px; height:243px; border:10px solid #FABA32; padding:0px;

}

Newb Disclaimer: I know a little about CSS, but I'm just now making the conversion over from tables. The answer may be obvious, but I still can't see it.

I have a list that I'm trying to get to render correctly between browsers. I keep running into the same problem. First of all, the link is:

frontlinescreative.com/aljc2/indexCSS.html

In the top right column I've got a list of three menu items, with subnavigation underneath. When you hover over the list item, the colors change, and all is well with the world. This works cross-browser.

My problem is positioning. In Firefox and IE the list is flush against the blue box at left. In Safari and Opera it's about 30 some-odd pixels shifted to the right.

Any ideas on where I've gone wrong?

Thanks for taking the time to read my question.

I am having problems with my #MenuItem a:hover in IE. I really don't know why. It refers to the left nav on the page.

In IE the links at the bottm of the left nav list act funny. Place the mouse around the area between the text (the line separating the two boxes) It seems that IE is not sure which one to activate for the hover event.

If that makes no sense, just move you mouse over all the links in the left nav from top to bottom and hopefully you'll see what I mean.

It works fine in Fire Fox.... ya I know typical.

Any suggestions?

Brad

Pierced is my band name. I don't have any other URL to post this under for people to view.

http://www.pierced.ca/FeedProductionRecordsHelp.htm
http://www.pierced.ca/FeedProductionRecordsHelp.css

Hey guys.

I'm still learning css so excuse some crude styles.

I don't know how to explain this so grap IE 6 and click here. Scroll down the links on the left until you get to the last one "Printable Pics." As you can see for some reason the last two links jump down the page and a big blank spot appears in it's place when you hover your mouse over it.

It doesn't do that in firefox or opera so I don't know whats' going on.

Heres my CSS:

Code:

body {
  text-align: center;
  height: 100%;
  background-image: url(images/bg_title.gif);
}

img {
  border: none;
}

#wrapper {
  width: 780px;
  height: 100%;
  margin: 0 auto;
  text-align: left;
  position: relative;
  background-color: #FFFF7D;
  color: #000000;
  border: solid 2px #0000ff;
}

#header {
  width: 780px;
  height: 143px;
  margin-bottom: 3px;
}
#headerImage {
  width:200px;
  float: left;
  margin-right: 2px;
}
#headerImage img {
  margin: 0px;
}

#headerLogo {
  width: 577px;
  float: left;
  margin: 0px;
}

#headerLogo img {
  margin: 0px;
}

#navagation {
  width: 204px;
  margin-bottom: 1px;
  float: left;
  margin-right: 1px;
}

.navIcon {
  float: left;
  margin-right: 2px;
  margin-bottom: 1px;
  padding: 0px;
}
.navButton {
  float: left;
  margin-bottom:1px;
  padding: 0px;
}

a.navButton:link {
  border: none;
}
a.navButton:visited {
  border: none;
}
a.navButton:hover {
  border: 1px solid #000000;
}

#mainContentArea {
  float: left;
  width: 570px;
  height: 711px;
  border: solid 1px #000000;
  background-color: #ffffff;
  margin-bottom: 3px;
}

#footer {
  height: 1px;
  margin-top: -1px;
  clear: both;
  overflow: hidden;
}

Thanks in advance!

-Tim