473,470 Members | 2,134 Online
Bytes | Software Development & Data Engineering Community
Create Post

Home Posts Topics Members FAQ

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 8372
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
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
0
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...
0
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...
1
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...
0
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...
0
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing,...
1
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 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 a new...
0
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
0
muto222
php
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.

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.