3 replies [Last post]
vicksm
Offline
newbie
Last seen: 14 years 23 weeks ago
Joined: 2005-12-12
Posts: 8
Points: 0

Hi

I have created a page with a very straightforward horizontal navigation, but in IE, the padding makes the navigation jump when the links are hovered over.

You can view the test page at: http://www.azuremarketing.com/clients/av/home6.htm to see the jump (need to view in IE to see what I mean)

I have read about the IE bug which makes things jump, but most people refer to it as their columns shifting. Eric Meyer says that each element should be in a separate div with padding and margin set to 0 to avoid this, but even when I nest my navigational div in another, it still jumps. Ahhh, it's driving me nuts. Has anyone else had any experience of this and found a workaround?

Many thanks

Vicky

DanA
DanA's picture
Offline
Elder
Last seen: 10 years 48 weeks ago
Timezone: GMT+2
Joined: 2004-08-14
Posts: 1087
Points: 2

Try adding #bar

Try adding
#bar ul{height:1%;} between conditional comments

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 8 years 29 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

trigger hasLayout

DanA, you have jumped the gun there somewhat. height is the best solution in this case and without any style changes the LI also needs hasLayout.

What DanA has suggested will trigger hasLayout. Read the first link in my signature for all the gory details of this IE anachronism.

As the article mentions one of the methods you can use to trigger hasLayout is to give the element a dimension, either height or width.

In your case, you can use "width:100%;" because in this particular instance width:100% is equivalent to width:auto. That means you don't need to hide it from other browsers.

Your styles have been done awkwardly. You might find things easier if you.

- remove float and width from #bar li a
- add width to #bar li
- remove color and text-decoration from #bar li a:hover
- replace border with border color for #bar li a

If you don't make those changes you are likely to need to trigger hasLayout on the <LI> element as well as the <UL> element.

vicksm
Offline
newbie
Last seen: 14 years 23 weeks ago
Joined: 2005-12-12
Posts: 8
Points: 0

Fixed

Hi DanA and Chris

Thank you both so much for your fast responses. I have removed some of the bloated css in the #bar styles I had, and it has solved the problem without using hasLayout.

Many thanks for your guidance and useful advice.

Kind regards

Vicky