IE Navigation Rollover problem

Dev Shed Forums Sponsor:

July 22nd, 2004, 06:17 AM

helz

Contributing User

Join Date: Sep 2003

Posts: 365

Time spent in forums: 10 h 45 m 38 sec
Reputation Power: 6

IE Navigation Rollover problem

i have set up my navigation menu like so:

PHP Code:


		
			
<style type='text/css'>

   div#nav {

      border:1px solid #000000;

      background-color:#F2F2F2;

      height:auto;

   }

   div#nav a {

      display:block;

      color:black;

      border:1px solid #FFFFFF;

   }

   div#nav a:hover {

      color:red;

      border:1px solid #000000;

      background-color:white;

   }

</style>



<div class='nav'>

   <a href='page1.html'>Page 1</a>

   <a href='page2.html'>Page 2</a>

   <a href='page3.html'>Page 3</a>

   <a href='page4.html'>Page 4</a>

</div>

the above works perfectly in Firefox, but doesnt in IE.
IE seems to keep around the fact that the <a> tag only encapsulates the text: Page 1, so the rollover effect only works in IE when the user hovers over the text and not anywhere in the row.
Does IE not understand the display:block? as i think this is whats causing it...

July 22nd, 2004, 07:58 AM

kk5st

Thanks Johnny Hart (BC) R.I.P.

Join Date: May 2003

Location: Dallas

Posts: 4,674

Time spent in forums: 1 Month 3 Days 15 h 15 m 50 sec
Reputation Power: 687

Quote:

Does IE not understand the display:block? as i think this is whats causing it...
Reply With Quote

You got it. Just another IE bug that we're stuck with. I've found no fix/workaround.

cheers,

gary

__________________
There are those who manage to build a web site without knowing what they're doing; thereby proving to themselves they do, indeed, know what they're doing.

My html and css workshop, demos and tutorials.
Ask a better question, get a better answer.

July 22nd, 2004, 08:03 AM

helz

Contributing User

Join Date: Sep 2003

Posts: 365

Time spent in forums: 10 h 45 m 38 sec
Reputation Power: 6

i tried using an unordered list:

PHP Code:


		
			
<div class='nav'>

   <ul>

   <li><a href='page1.html'>Page 1</a></li>

   <li><a href='page2.html'>Page 2</a></li>

   <li><a href='page3.html'>Page 3</a></li>

   <li><a href='page4.html'>Page 4</a></li>

   </ul>

</div>

and what actually happened with IE was that it kind of worked, but was buggy, so sometimes it would and others it wouldn't.

im going to do some surfing, see if i can find anything.

for low bandwidth usage, what do you think of trying to use a blank image behind the text to fill out the whole area?

July 22nd, 2004, 08:31 AM

kk5st

Thanks Johnny Hart (BC) R.I.P.

Join Date: May 2003

Location: Dallas

Posts: 4,674

Time spent in forums: 1 Month 3 Days 15 h 15 m 50 sec
Reputation Power: 687

I wouldn't bother. Folks using IE would be used to the behavior, and folks using a modern browser will see the proper block effect on hover.

If you're really adamant about a fix, you might try using javascript to change the style of the li element onmouseover.

cheers,

gary

July 22nd, 2004, 08:42 AM

helz

Contributing User

Join Date: Sep 2003

Posts: 365

Time spent in forums: 10 h 45 m 38 sec
Reputation Power: 6

ive noticed that people who just go on the internet to browse, check emails and maybe a little instant messaging tend to click on the text, so i think your right, probobly best just to leave it.
IE gives a buggy type responce when you set the width of the <a> tags, just remembered thats what it was.

Thread Tools	Search this Thread
Email this Page	Search this Thread: Advanced Search
Display Modes	Rate This Thread
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode	Rate This Thread: