473,728 Members | 1,924 Online
Bytes | Software Development & Data Engineering Community
+ 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#v iew=FitH">One</A></LI>
<LI><A HREF="Two/index.html">Two </A></LI>
<LI><A HREF="Three/index.html">Thr ee 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 8391
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
16167
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
2879
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 but if menu item 2 is '2' (ie different length) then only the '2' gets the hover effect.
3
2523
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 and are transferred to a new page? Here is some of the code:
18
2528
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. I've almost got this working, except for some reason, the highlighted background block isn't quite covering the full area of the menu item. For example, see this beta page (via TinyURL): http://tinyurl.com/2bk78a
2
2285
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 should; however, as soon as you mouse towards any but the TOP sub-catagory, all those sub-catagories still view there. It will work first time quite fine..but if user clicks outsite anywhere in screen then this problem occur.. i think it's css...
13
1662
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 figure how to have IE7 work. Why? How can I have it work in all 3 browsers? http://nrap.selfip.com
16
3360
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 www.trisynergypreview.co.uk The nav bar on the left just doesn't display properly in Firefox. The CSS code is
0
2950
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 instead (white crappie) li item should be to be sticked just below (ozrack bazz) li item without a down shift. i request u all to kindly sort the problem. i have send menu_css.html file along with the layout.css file. thanks html file:
7
5556
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 - http://www.itsyourplate.com/thin.css As you can see from the file the menu is showing up vertically not horizontally. I copied the code directly from another site I have done and changed the bullets (I didn't want any) and the colors but I must have...
0
8904
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, people are often confused as to whether an ONU can Work As a Router. In this blog post, weíll explore What is ONU, What Is Router, ONU & Routerís main usage, and What is the difference between ONU and Router. Letís take a closer look ! Part I. Meaning of...
0
8759
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
0
9424
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, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...
0
9277
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 tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...
0
6013
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...
0
4524
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
0
4793
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
1
3236
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
2
2668
muto222
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.