473,324 Members | 2,356 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,324 software developers and data experts.

Vertical CSS menu - in IE6 hover does not trigger except over text

A menu page has a set of A tages in a UL

The menu (in IE) will only get the hover visualization if the mouse
rolls over underlined text. I want it to happen if the rollover occurs
anywhere in the A cell (which appears to have been expanded to fill the
LI container it is in).

In FF 1.0.5.2 and Opera 9 things work as expected.

How might the CSS be changed to ensure (in IE) the mouse rolling over
any part of the A causes a hover effect?

Some other wonky parts (IE).
ul#menu li {
; xborder:4px solid blue /* debug */
; background-color: #CCC
....
The LI cell appears to be larger than one expects.
Setting the LI border to a non-zero value
; border:4px solid blue /* debug */
causes the largerness weirdness to go away.
menu.html
----------------------
<HTML>
<HEAD>
<link REL="StyleSheet" TYPE="text/css" HREF="my.css">
</HEAD>
<BODY>
<UL ID="menu">
<LI><A HREF="One.pdf#view=FitH">One</A></LI>
<LI><A HREF="Two/index.html">Two</A></LI>
<LI><A HREF="Three/index.html">Three has much to say</A></LI>
<LI><A HREF="Four/">Four</A></LI>
<LI><A HREF="Five/">Five</A></LI>
<LI><A HREF="Six/">Six</A></LI>
</UL>
</BODY></HTML>
----------------------

my.css
----------------------
body
{ font-family:sans-serif
}

ul#menu {
; list-style: none
; margin:4px
; padding: 0
; width: 9em
; border: 4px solid red /* debug */
}

ul#menu li {
; xborder:4px solid blue /* debug */
; background-color: #CCC
; font-weight:bold
; margin-left: 4px
; margin-right: 4px
; margin-bottom: 1em
; display: block
}

ul#menu li a
{ border:4px solid green
; display: block
; color: #222
; text-decoration: underline
; padding:6px
}

ul#menu li a:hover
{ color: #E2144A
; color: #000
; background: yellow
}

ul#menu li a:active
{ color: #E2144A
; color: #000
; background: #e9e9d0
}
----------------------

May 11 '06 #1
1 8367
Also sprach Richard:
The menu (in IE) will only get the hover visualization if the mouse
rolls over underlined text. I want it to happen if the rollover
occurs anywhere in the A cell (which appears to have been expanded to
fill the LI container it is in).


This is another IE bug that has to do with an internal property called
"hasLayout". Elements in IE that do not have it may behave strangely. Some
CSS properties cause an element to "have layout". Among them: width/height
(not set to "auto"!) or the proprietary "zoom".

You could thus specify a width or height for A to solve the problem:

/* Fix IE Win \*/
* html a { height: 1px; }
/* End Fix */

This is a hack that lets only IE Win [1] "see" the rule. As IE treats height
as min-height (which, ironically, it does not support) the A element will
still expand to whatever height is needed to accomodate its content.

So, whenever IE does not behave as expected, try setting an explicit
dimension for the element in question (or just insert a "zoom: 1" for
testing) - in many cases, this helps.

AFAIK, IE 7, when in strict mode, will - like a real browser - no longer see
the rule, but I don't know if M$ has fixed the bug that makes the hack
necessary in the first place.

Greetings,
Thomas

[1] The comment lines cause IE Mac to ignore the rule, as that browser does
not need this fix (but chokes up on the backslash, thereby missing the end
of the first comment). You can add other IE specific rules between the
comments, but no other comments.

May 15 '06 #2

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

0
by: vikram.cvk | last post by:
Hello Experts, Im trying to design a CSS vertical drop down menu which should have the following functionality. Home About Us | -->Overview
4
by: Nicholas | last post by:
Hi I've set up a vertical css based menu using the hover property the problem is that the hover colour only covers the text. so if menu item 1 is 'this is menu item 1' that gets covered ...
3
by: unurban | last post by:
I have a javascript menu based off of unordered lists that only shows the subnav links when you click on the main nav links. is there a way to keep any subnav items open after you click on a link...
18
by: Ste | last post by:
Hi there, I'm using CSS to highlight main navigation items in a 'suckerfish menu' for the currently loaded page, i.e. when on the home page, the 'home' navigation item should be highlighted. ...
2
by: Ravi Joshi | last post by:
The menu on my site works fine in IE6 and Firefox. In IE7, there is a problem with the menu: when you mouse over the various main catagories, the sub-catagories all appear to the right as they...
13
by: Bill | last post by:
Hi How can I have IE7 act correctly on that ? The rules make the link text go down when hovered. It works in FF , I had to add a hard space right after the LI tag to have OP9 work but I can't...
16
by: jerry101 | last post by:
Hi, I've got the usual problem that people seem to have with HTML/CSS nav bar's where it's displaying and working fine in IE but not in Firefox. The website address is ...
0
by: rahullko05 | last post by:
i have designed a menu list program in which i'm facing a problem where the last li item (white crappie) shifts down when i hover mouse pointer to just above li item (ozrack bazz) of white crappie...
7
by: milestogofromhere | last post by:
It is late so this is probably something really obvious but I am not seeing it. Can someone please help? Here is the page in question: html - http://www.itsyourplate.com/index2.php css -...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
1
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
0
by: af34tf | last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.