By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
434,640 Members | 2,118 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 434,640 IT Pros & Developers. It's quick & easy.

Any workarounds for an IE hover bug?

P: n/a
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:relative;
border: solid 1px white;
margin: 0 1em 0 17em;
}

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

#SecondaryNav
{
position:absolute;
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='NavContainer'>
<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='SecondaryNav'>
<ul>
<li><a href=''>Link 4</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
Jul 21 '05 #1
Share this Question
Share on Google+
11 Replies


P: n/a
in comp.infosystems.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

P: n/a
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

P: n/a
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.positioniseverything.net/explorer.html>

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

P: n/a
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

P: n/a
> 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

P: n/a
me
"Piers Lawson" <Pi***@Lawson.n.a.m.e.NOSPAM> wrote in message
news:ZB******************@newsfe1-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="bgColor='yellow'"
onMouseOut="bgColor='white'">
<div onMouseOver="this.bgColor='yellow'" onMouseOut="this.bgColor='white'"
width="76" height="19">
Highlight 1 </div>
</td>
</tr>
</table>
Jul 21 '05 #7

P: n/a
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:absolute contained in a div with position:relative.
IE will only correctly place position:absolute 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

P: n/a
Jim Moe wrote:

IE simply messes up the layout
for divs with position:absolute contained in a div with position:relative.
IE will only correctly place position:absolute 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

P: n/a
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

P: n/a
Thank you kchayka,

I had tried the Holly Hack but on the wrong elements. Adding the following
sorted the problem:

/* WinIE only \*/
* html #MainBody
{
height:1px;
}
/* end hack */

Piers
Jul 21 '05 #11

P: n/a
kchayka wrote:
IE simply messes up the layout
for divs with position:absolute contained in a div with position:relative.
IE will only correctly place position:absolute 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.

It is in this case. I've messed with it a while. IE cannot make up its
mind how wide the viewport is. Before the mouseover it is correct. After
the mouseover it re-calculates the width by adding the left margin of
MainBody to the right margin. Using different width:xx% values only moves
the right margin around; it does nothing to stabilize IE. :-(

--
jmm dash list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)
Jul 21 '05 #12

This discussion thread is closed

Replies have been disabled for this discussion.