Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Chris Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

CSS navigation bar IE scroll bug? 1

Status
Not open for further replies.
mattscotne

mattscotne

Programmer
Aug 18, 2005
4
AU
Hi all,

I have a css navigation bar that changes color using css.

When you place the mouse over a navigation link the background color changes. When the mouse is removed from the link the original color is restored. (works fine)

When you place the mouse over a navigation link and scroll down using the scroll button on your mouse the link remains highlighted, yet the mouse is now over another link. How can I fix this problem?

I can not fix the problem using the onscroll event as I am using HTML 4.01 Transitional so the event is redundant.

The error only occurs in internet explorer as the other browsers seem to have forseen this error!

I have quickly written up sample code below to reproduce the problem, simply copy & paste to a new file to see what I mean:
Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/html4/loose.dtd">[/URL]
<html>
<head>
<title>Navbar Error Example</title>
</head>

<body>
<div align="center"></div>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<table width="60%"  border="1" align="center" cellpadding="1" cellspacing="1">
  <tr>
    <td><div align="center"><strong>NAVIGATION MENU<br>
    </strong>Place cursor over &quot;http link 1&quot; and scroll down the page using scroll wheel on mouse.    </div></td>
  </tr>
  <tr>
    <td bgColor="#FFCC33" onMouseOver="this.style.backgroundColor='#66CCFF'" onMouseOut="this.style.backgroundColor='#FFCC33'"><div align="center">http link 1</div></td>
  </tr>
  <tr>
    <td bgColor="#FFCC33" onMouseOver="this.style.backgroundColor='#66CCFF'" onMouseOut="this.style.backgroundColor='#FFCC33'"><div align="center">http link 2 </div></td>
  </tr>
  <tr>
    <td bgColor="#FFCC33" onMouseOver="this.style.backgroundColor='#66CCFF'" onMouseOut="this.style.backgroundColor='#FFCC33'"><div align="center">http link 3 </div></td>
  </tr>
  <tr>
    <td bgColor="#FFCC33" onMouseOver="this.style.backgroundColor='#66CCFF'" onMouseOut="this.style.backgroundColor='#FFCC33'"><div align="center">http link 4 </div></td>
  </tr>
  <tr>
    <td bgColor="#FFCC33" onMouseOver="this.style.backgroundColor='#66CCFF'" onMouseOut="this.style.backgroundColor='#FFCC33'"><div align="center">http link 5 </div></td>
  </tr>
  <tr>
    <td bgColor="#FFCC33" onMouseOver="this.style.backgroundColor='#66CCFF'" onMouseOut="this.style.backgroundColor='#FFCC33'"><div align="center">http link 6</div></td>
  </tr>
  <tr>
    <td bgColor="#FFCC33" onMouseOver="this.style.backgroundColor='#66CCFF'" onMouseOut="this.style.backgroundColor='#FFCC33'"><div align="center">http link 7 </div></td>
  </tr>
  <tr>
    <td bgColor="#FFCC33" onMouseOver="this.style.backgroundColor='#66CCFF'" onMouseOut="this.style.backgroundColor='#FFCC33'"><div align="center">http link 8 </div></td>
  </tr>
  <tr>
    <td bgColor="#FFCC33" onMouseOver="this.style.backgroundColor='#66CCFF'" onMouseOut="this.style.backgroundColor='#FFCC33'"><div align="center">http link 9 </div></td>
  </tr>
  <tr>
    <td><div align="justify">After scrolling with the mouse wheel notice how the background color of &quot;http link 1&quot; remains blue yet the mouse is over another link. 
  If you just move the mouse without scrolling the background colors change correctly.</div></td>
  </tr>
</table>
<p align="center">&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p>
<p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p>
<p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p>
<p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p>
<p>&nbsp;</p><p>Text at bottom of page. </p>
</body>
</html>
Thanks,
mattscotne
 
Sort by date Sort by votes
I can not fix the problem using the onscroll event as I am using HTML 4.01 Transitional so the event is redundant.
Click to expand...

No it's not - it just doesn't exist on the body element. It works fine on the html element:

Code: 
<html onscroll="window.status = 'aa';">

Hope this helps,
Dan

[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
 
Upvote 0 Downvote
Thanks for your assistance Dan, the onscroll event worked in the html tag and sort of solved the problem.

However on the site I am developing I also have images in the nav bar and when the mouse is over the image and a wheel scroll occurs strange things again happen! - The onscroll event does not fire.

I have changed the mouseover to mousemove event as this gives a more consistant behaviour. (Stops highlighted cells from switching between each other on an up + down scroll)

If anyone else knows how to solve this one entirely, I would love to hear from yous?

Thanks,
mattscotne
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

jizzer
  • Locked
  • Question
HTML/CSS Image map with multiple tool-tips
Replies
3
Views
1K
spamjim
spamjim
Expoverse
  • Locked
  • Helpful tip
Solution to CSS Two Level Horizonal Menu 1
Replies
1
Views
764
pmonett
pmonett
PeDa
  • Locked
  • Question
CSS two level horizontal menu
Replies
0
Views
608
PeDa
PeDa
PeDa
  • Locked
  • Question
Horizontal rule and CSS problem 2
Replies
2
Views
647
PeDa
PeDa
tyutghf
  • Locked
  • Question
Achieving this grid layout in css
Replies
1
Views
207
tyutghf
tyutghf

Part and Inventory Search

Sponsor

Back
Top