473,320 Members | 1,945 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,320 software developers and data experts.

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: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
11 35423
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
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.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
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******************@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
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
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
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
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
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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

7
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...
6
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> ...
12
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}...
6
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...
15
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...
2
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...
24
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;...
7
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...
4
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...
0
by: DolphinDB | last post by:
The formulas of 101 quantitative trading alphas used by WorldQuant were presented in the paper 101 Formulaic Alphas. However, some formulas are complex, leading to challenges in calculation. Take...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
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: 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...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
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)...
0
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...

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.