473,893 Members | 1,869 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

Any workarounds for an IE hover bug?

Hi

Thank you to everyone who contributed to my last post (for those that
noticed... I've now removed the XHTML ;-)

In the page listed below, a two part horizontal menu is displayed, indented
from the left. The first part of the menu is left justified and the second
part is right justified. It looks correct in both IE6 and FireFox.... until
you move your mouse over one of the left hand links. Then, in IE6, the
change in background color causes a reflow. This causes the NavContainer div
to expand, pushing the right hand menu item off the page. Refreshing or
resizing the page gets it redrawn correctly.

I've read about various hover bugs in IE, but I could do with some pointers
as to which may be causing my problem and if there is a workaround.

Thanks

Piers

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type='text/css' media='all'>

#MainBody
{
position:relati ve;
border: solid 1px white;
margin: 0 1em 0 17em;
}

#NavContainer
{
position:absolu te;
width:100%;
background-color:grey;
}

#SecondaryNav
{
position:absolu te;
top:0;
right:0.5em;
}

#PrimaryNav ul, #SecondaryNav ul
{
padding: 0;
margin: 0;
}

#PrimaryNav li, #SecondaryNav li
{
list-style: none;
margin: 0;
display: inline;
}

#PrimaryNav li a, #SecondaryNav li a
{
border: solid 1px #036;
}

#PrimaryNav li a:hover, #SecondaryNav li a:hover
{
background-color: #036;
}

</style>
</head>
<body>
<div id='MainBody'>
<div id='NavContaine r'>
<div id='PrimaryNav' >
<ul>
<li><a href=''>Link 1</a></li>
<li><a href=''>Link 2</a></li>
<li><a href=''>Link 3</a></li>
<li id='Current'><a href=''>Link 4</a></li>
</ul>
</div>
<div id='SecondaryNa v'>
<ul>
<li><a href=''>Link 4</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
Jul 21 '05 #1
11 35484
in comp.infosystem s.www.authoring.stylesheets, Piers Lawson wrote:
Hi

I've read about various hover bugs in IE, but I could do with some pointers
as to which may be causing my problem and if there is a workaround.

Thanks

Piers


URL?

--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Utrecht, NL.
Jul 21 '05 #2
Piers Lawson wrote:

I've read about various hover bugs in IE, but I could do with some pointers
as to which may be causing my problem and if there is a workaround.

The only hover "bug" in IE is that it applies :hover only to anchor
elements. It ignores all others.
I suspect your hover problem has more to do with the different margin
and padding that IE uses vs Firefox vs Opera. Completely specify the
margin and padding.
An URL would go a long way to debugging your code.

--
jmm dash list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)
Jul 21 '05 #3
Piers Lawson wrote:

I've read about various hover bugs in IE, but I could do with some pointers
as to which may be causing my problem and if there is a workaround.


You'll probably find something relevant at
<URL:http://www.positionise verything.net/explorer.html>

--
Reply email address is a bottomless spam bucket.
Please reply to the group so everyone can share.
Jul 21 '05 #4
Apologies... I was not sure of the etiquette (should I include the code for
posterity, or supply I link that may break in the future). Perhaps both
would be best. Here it is:

http://homepage.ntlworld.com/piers.lawson/Menu.htm

Piers
Jul 21 '05 #5
> The only hover "bug" in IE is that it applies :hover only to anchor
elements. It ignores all others.
I suspect your hover problem has more to do with the different margin
and padding that IE uses vs Firefox vs Opera. Completely specify the
margin and padding.
An URL would go a long way to debugging your code.


I've put the code into a page:

http://homepage.ntlworld.com/piers.lawson/Menu.htm

If in IE6 you move your mouse over one of the left hand menu items and
you'll see the right hand item disappear off the page! Refreshing or
resizing the window brings it back again. The sorts of bugs I was referring
to are those with great names such as "Magik Creeping Text" and
"Peek-A-Boo".

However when I tried some of the fixes
(http://www.webmasterworld.com/forum83/4161.htm) I didn't have any success.
Either my problem is not one of them, or I was applying the fix to the wrong
element.

Thanks for your interest.

Piers
Jul 21 '05 #6
me
"Piers Lawson" <Pi***@Lawson.n .a.m.e.NOSPAM> wrote in message
news:ZB******** **********@news fe1-gui.ntli.net...
Hi
Thank you to everyone who contributed to my last post (for those that
noticed... I've now removed the XHTML ;-)

In the page listed below, a two part horizontal menu is displayed, indented from the left. The first part of the menu is left justified and the second
part is right justified. It looks correct in both IE6 and FireFox.... until you move your mouse over one of the left hand links. Then, in IE6, the
change in background color causes a reflow. This causes the NavContainer div to expand, pushing the right hand menu item off the page. Refreshing or
resizing the page gets it redrawn correctly.

I've read about various hover bugs in IE, but I could do with some pointers as to which may be causing my problem and if there is a workaround.

Thanks
Piers


If you're trying to achieve a change of color on hover the following may
work for you:
Good Luck,
me

<table cellpadding=0 cellspacing=0 border=0 width=76>
<tr>
<td bgcolor=white onMouseOver="bg Color='yellow'"
onMouseOut="bgC olor='white'">
<div onMouseOver="th is.bgColor='yel low'" onMouseOut="thi s.bgColor='whit e'"
width="76" height="19">
Highlight 1 </div>
</td>
</tr>
</table>
Jul 21 '05 #7
Piers Lawson wrote:
I've put the code into a page:
http://homepage.ntlworld.com/piers.lawson/Menu.htm

If in IE6 you move your mouse over one of the left hand menu items and
you'll see the right hand item disappear off the page!

Yes, this is a defect in IE (v5.5 and v6 are wrong, v5.0 is correct!)
and to my knowledge there is no workaround. IE simply messes up the layout
for divs with position:absolu te contained in a div with position:relati ve.
IE will only correctly place position:absolu te in <body>, no containing div.
Your border parameters are in the wrong order:
border: solid 1px #036; should be
border: 1px solid #036;

--
jmm dash list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)
Jul 21 '05 #8
Jim Moe wrote:

IE simply messes up the layout
for divs with position:absolu te contained in a div with position:relati ve.
IE will only correctly place position:absolu te in <body>, no containing div.
Not true. One key to success with positioning is to set explicit widths
for the associated containers, including body. width:100% isn't a bad rule.

With width:auto or no explicit width set, you leave the browser to its
own devices, which can sometimes make a mess of things.
Your border parameters are in the wrong order:
border: solid 1px #036; should be
border: 1px solid #036;


Even though the specs don't say one way or the other, I don't think the
order is relevant for the border shorthand.

--
Reply email address is a bottomless spam bucket.
Please reply to the group so everyone can share.
Jul 21 '05 #9
Piers Lawson wrote:

http://homepage.ntlworld.com/piers.lawson/Menu.htm

If in IE6 you move your mouse over one of the left hand menu items and
you'll see the right hand item disappear off the page! Refreshing or
resizing the window brings it back again. The sorts of bugs I was referring
to are those with great names such as "Magik Creeping Text" and
"Peek-A-Boo".


If you know of these bugs, you've probably also heard of the Holly Hack.
You need it, probably on the #MainBody container if nowhere else.

When I need a Holly Hack, I tend to use syntax
/* WinIE only \*/
* html .class { property:value }
/* end hack */

The comments are required to prevent MacIE from applying the rule.

--
Reply email address is a bottomless spam bucket.
Please reply to the group so everyone can share.
Jul 21 '05 #10

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

Similar topics

7
3410
by: LRW | last post by:
Below I'll paste my CSS and the HTML in question. But what's happening is, I'm trying to establish a link behavior for a class that's separate from the normal link class. I've established a: 's with no underline and then an underline for hover...but oddly, only ONE link will actually show the underline on hover. All the rest, even with the same HTML, won't pop up an underline. I just don't get it! If I could get any advice I'd really...
6
17504
by: Nikolaos Giannopoulos | last post by:
If I have simplified html (I have removed height, weight, alt, etc... attributes to simplify the example) such as: <div id="header"> <a href="blah.html"><img src="img/blah.jpg"></a> </div> and the following CSS rule to apply a background color to text links on hover:
12
5029
by: Sander Tekelenburg | last post by:
Trying to make some images disappear on hover (works), and others appear on hover (works not). In tested browsers, this gives the expected result: IMG.disappear {visibility: visible} IMG.disappear:hover {visibility: hidden} this does not: IMG.appear {visibility: hidden} IMG.appear:hover {visibility: visible}
6
4945
by: Michael Rozdoba | last post by:
I've had some trouble getting IE to behave in respect of applying absolute positioning to a span on an a:hover. I can get it to work, but I don't understand why certain code causes it to fail to display the repositioned block. See an example at http://www.digitalrat.co.uk/test2/index.html Can anyone explain what IE thinks it's doing? The page is ugly as I've ripped most of the content & styling out to
15
2836
by: Robert Mark Bram | last post by:
Hi All! Problem I began with: Netscape/Opera supports hover for different elements, IE only supports hover for <a> and I want to use hover for <td class="menu"> I then found a fix using some Javascript here: http://webpages.charter.net/mmmbeer/code/arbitrary-hover/ It works ok for IE now.
2
4179
by: skipc | last post by:
I posted a recent message regarding navigating a table using arrow keys. I've got the code for the navigation working. My table contains rows of links (anchors). I can get to a specific link using the code for capturing a key. However, once I get to the link, I can focus(), for example... but what I really want is to activate the "hover" styles. I can fake the hover effect using javascript, but how do I do this and still allow the...
24
5466
by: fehays | last post by:
Hello, I'm having a problem with the css hover effect in IE. I have an <a> tag with the following CSS: a.subNavItem { display:block; color:#464645; padding:2px 7px 4px 6px; font-family:verdana,arial,helvetica,sans-serif;
7
17284
by: Cate Archer | last post by:
I want to have a border around an image that changes color when the mouse hovers over it. The following code works perfectly in FireFox but not in Internet Exploiter. The text link changes color but the image link stays the same. Anybody know how I can make it work in IE? I saw a web site where the guy got it to work in both browsers. <html> <head> <title>TEST</title>
4
2274
by: Sigilaea | last post by:
My previous post got squashed because m post is too long. Sorry for that: I have an AJAX page with a CSS menu at the top. My problem is the hover functionality stops working after someone clicks on one of the details in the main blue section. This only occurs in IE6. IE7 and FF work correctly. The URL to the page is: http://www.coralap.com/dies281css.aspx Steps to reproduce: 1. Mouse over the top menu and verify the hover works. 2....
0
9987
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
10840
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...
1
10929
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 Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
0
10469
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 protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
0
9647
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, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...
1
8025
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 presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
0
7175
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
5859
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...
1
4684
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

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.