IE7 Issue - Footer Jumping Up Page When Hovering Over TopNav

Hi there,

I'm having a problem with a webpage where hoving over the top navigation
links causes my footer to jump up to the centre of the page! It only
happens with IE7, and works fine with the latest versions of Firefox and
Safari (both PC and Mac), and even fine on IE6.

My main page has three columns in it, from left to right, 1, 2, 3. The foot
is jumping up to the bottom of column 3 it seems upon hovering over the
navigation links.

Does anyone have any ideas on why this might be happening? Does it sound
like a familar IE7 bug? Or is there certain code I should add to the CSS
file to keep the footer in place?

Thanks,

Ste

"Steve" <1@2.comwrote in message
news:1184242231.657783@grenada.network-i.net...

Quote:

Hi there,
>
I'm having a problem with a webpage where hoving over the top navigation
links causes my footer to jump up to the centre of the page! It only
happens with IE7, and works fine with the latest versions of Firefox and
Safari (both PC and Mac), and even fine on IE6.
>
My main page has three columns in it, from left to right, 1, 2, 3. The
foot is jumping up to the bottom of column 3 it seems upon hovering over
the navigation links.
>
Does anyone have any ideas on why this might be happening? Does it sound
like a familar IE7 bug? Or is there certain code I should add to the CSS
file to keep the footer in place?

You have an error on line 42.

--
Richard.

"rf" <rf@invalid.comwrote in message
news:Y%oli.6225$4A1.4609@news-server.bigpond.net.au...

Quote:

>
"Steve" <1@2.comwrote in message
news:1184242231.657783@grenada.network-i.net...

Quote:

>Hi there,
>>
>I'm having a problem with a webpage where hoving over the top navigation
>links causes my footer to jump up to the centre of the page! It only
>happens with IE7, and works fine with the latest versions of Firefox and
>Safari (both PC and Mac), and even fine on IE6.
>>
>My main page has three columns in it, from left to right, 1, 2, 3. The
>foot is jumping up to the bottom of column 3 it seems upon hovering over
>the navigation links.
>>
>Does anyone have any ideas on why this might be happening? Does it sound
>like a familar IE7 bug? Or is there certain code I should add to the CSS
>file to keep the footer in place?

>
You have an error on line 42.
>
--
Richard.

I take it you need more information then because this isn't a familiar
problem? :-)

Should I post my HTML and CSS here?

Thanks,

Ste

Steve wrote:

Quote:

"rf" <rf@invalid.comwrote in message
news:Y%oli.6225$4A1.4609@news-server.bigpond.net.au...

Quote:

>You have an error on line 42.

>
I take it you need more information then because this isn't a familiar
problem? :-)
>
Should I post my HTML and CSS here?

No, please don't.

Post a URL.

--
John

Hi John,

The site isn't ready yet but I've turned it online temporarily and you can
see it via this address: http://tinyurl.com/yvu2wq

In IE7, hovering over the top level navigation causes the footer to jump up.
It's fine in IE6, Safari, and Firefox.

Thanks for any advice,

Ste

"Steve" <1@2.comwrote in message
news:1184243542.76630@grenada.network-i.net...

Quote:

>
"rf" <rf@invalid.comwrote in message
news:Y%oli.6225$4A1.4609@news-server.bigpond.net.au...

Quote:

>>
>"Steve" <1@2.comwrote in message
>news:1184242231.657783@grenada.network-i.net...

Quote:

>>Hi there,
>>>
>>I'm having a problem with a webpage where hoving over the top navigation
>>links causes my footer to jump up to the centre of the page! It only
>>happens with IE7, and works fine with the latest versions of Firefox and
>>Safari (both PC and Mac), and even fine on IE6.
>>>
>>My main page has three columns in it, from left to right, 1, 2, 3. The
>>foot is jumping up to the bottom of column 3 it seems upon hovering over
>>the navigation links.
>>>
>>Does anyone have any ideas on why this might be happening? Does it
>>sound like a familar IE7 bug? Or is there certain code I should add to
>>the CSS file to keep the footer in place?

>>
>You have an error on line 42.
>>
>--
>Richard.

>
>
I take it you need more information then because this isn't a familiar
problem? :-)
>
Should I post my HTML and CSS here?

<sigh>

More information? Well yes, a little, like the URL to the page in question!

Do not post the HTML. Do not post the CSS. Post the URL. Nobody can help you
without seeing the offending page. You *do* show your whole body to your
doctor when you complain about a pain in your arse, don't you? :-)

--
Richard

Hi Richard,

I take your point! :-)

I've just posted the link a few minutes ago.

Sorry for posting this out of thread - my ISP seems to be delayed in showing
replies so I'm seeing them via Google Groups.

Thanks,

Ste

"Steve" <1@2.comwrote in message
news:1184244216.359270@grenada.network-i.net...

Quote:

see it via this address: http://tinyurl.com/yvu2wq

This was produced by some Microsoft thing, wasn't is. All bets are off.

Delete it and write it again from the ground up using, say, notepadl

--
Richard.

"Steve" <1@2.comwrote in message
news:1184244881.359253@grenada.network-i.net...

Quote:

Hi Richard,
>
I take your point! :-)
>
I've just posted the link a few minutes ago.
>
Sorry for posting this out of thread - my ISP seems to be delayed in
showing replies so I'm seeing them via Google Groups.

Even google groups allows you to reply to the correct place in the thread
IFAIK (when I last looked). If it does not then its more damned uselses than
I ever though.

--
Damn google groups!
Richard.

"rf" <rf@invalid.comwrote in message
news:kHpli.6241$4A1.4256@news-server.bigpond.net.au...

Quote:

>
"Steve" <1@2.comwrote in message
news:1184244881.359253@grenada.network-i.net...

Quote:

>Hi Richard,
>>
>I take your point! :-)
>>
>I've just posted the link a few minutes ago.
>>
>Sorry for posting this out of thread - my ISP seems to be delayed in
>showing replies so I'm seeing them via Google Groups.

>
Even google groups allows you to reply to the correct place in the thread
IFAIK (when I last looked). If it does not then its more damned uselses
than I ever though.
>
--
Damn google groups!
Richard.

But I'm posting via the ISP, not Google Groups. I don't want to use my
Gmail account for posting as I've been spammed to death on usenet in the
past.

Ste

"rf" <rf@invalid.comwrote in message
news:SDpli.6238$4A1.1936@news-server.bigpond.net.au...

Quote:

>
"Steve" <1@2.comwrote in message
news:1184244216.359270@grenada.network-i.net...
>

Quote:

>see it via this address: http://tinyurl.com/yvu2wq

>
This was produced by some Microsoft thing, wasn't is. All bets are off.
>
Delete it and write it again from the ground up using, say, notepadl
>
--
Richard.

Certainly not!

The backend is ExpressionEngine.com (a CMS), but all the HTMl/CSS is
handwritten in NotePad.

Any ideas?

Ste

Steve wrote:

Quote:

Hi John,
>
The site isn't ready yet but I've turned it online temporarily and you
can see it via this address: http://tinyurl.com/yvu2wq

Why the tinyurl? It is simply: ... um ... or did you want to keep it
from being indexed?

Quote:

In IE7, hovering over the top level navigation causes the footer to
jump up. It's fine in IE6, Safari, and Firefox.

I would start by fixing the font-size: 80% so people will be able to
read it at their desired/default text size. Change it to 100%. See
this:
http://k75s.home.att.net/fontsize.html

A quick glance through your style sheet ... looks like your widths plus
margins and paddings add up to more than 100%. Change those three widths
of 31% to about 29% or 28% and see if that cures your problem.

--
-bts
-Motorcycles defy gravity; cars just suck

"Beauregard T. Shagnasty" <a.nony.mous@example.invalidwrote in message
news:%Vpli.165498$Sa4.15651@bgtnsc05-news.ops.worldnet.att.net...

Quote:

Steve wrote:
>

Quote:

>Hi John,
>>
>The site isn't ready yet but I've turned it online temporarily and you
>can see it via this address: http://tinyurl.com/yvu2wq

>
Why the tinyurl? It is simply: ... um ... or did you want to keep it
from being indexed?

I didn't want it indexed yet as the site is still being built.

Quote:

>In IE7, hovering over the top level navigation causes the footer to
>jump up. It's fine in IE6, Safari, and Firefox.

>
I would start by fixing the font-size: 80% so people will be able to
read it at their desired/default text size. Change it to 100%. See
this:
http://k75s.home.att.net/fontsize.html

Okay, I've done this now. I preferred the look of the smaller font but will
leave it to the users (though most people I know don't change this).

Quote:

A quick glance through your style sheet ... looks like your widths plus
margins and paddings add up to more than 100%. Change those three widths
of 31% to about 29% or 28% and see if that cures your problem.

I changed it to 27% and the width is now much less, but the footer keeps
popping up to the bottom of the third column upon hovering over the top
navigation. The other pages on the site (without columns) are fine, it just
seems to be something to do with this third column. :-S

Ste

Steve wrote:

Quote:

"Beauregard T. Shagnasty" wrote:

Quote:

>Steve wrote:

Quote:

>>In IE7, hovering over the top level navigation causes the footer to
>>jump up. It's fine in IE6, Safari, and Firefox.

>>
>I would start by fixing the font-size: 80% so people will be able
>to read it at their desired/default text size. Change it to 100%.
>See this: http://k75s.home.att.net/fontsize.html

>
Okay, I've done this now. I preferred the look of the smaller font
but will leave it to the users (though most people I know don't
change this).

Ah, thanks. I can read it now without increasing text size. Remember,
not everyone will have perfect, or better than perfect, vision. And
those with poor vision have quite possibly figured out how to change the
defaults.

Quote:

>A quick glance through your style sheet ... looks like your widths
>plus margins and paddings add up to more than 100%. Change those
>three widths of 31% to about 29% or 28% and see if that cures your
>problem.

>
I changed it to 27% and the width is now much less, but the footer
keeps popping up to the bottom of the third column upon hovering over
the top navigation. The other pages on the site (without columns)
are fine, it just seems to be something to do with this third column.

I found this in your style sheet:

#container #header ul li a:hover {
color: #ffffff;
padding:5px; ...

so hovering will increase the width (and height) 10px. It also causes
the menu to jump when hovered, and things that jump are never good. Try
removing the hover padding and see what happens in IE7.

--
-bts
-Motorcycles defy gravity; cars just suck

"Beauregard T. Shagnasty" <a.nony.mous@example.invalidwrote in message
news:lxrli.165611$Sa4.94294@bgtnsc05-news.ops.worldnet.att.net...

Quote:

>
I found this in your style sheet:
>
#container #header ul li a:hover {
color: #ffffff;
padding:5px; ...
>
so hovering will increase the width (and height) 10px. It also causes
the menu to jump when hovered, and things that jump are never good. Try
removing the hover padding and see what happens in IE7.

I removed the padding from this and also one more piece of markup that did
the same for a:link, but the footer is still jumping up. I even set the
column size to 25% but still no joy.

Any more ideas at all?

Thanks,

Ste

Steve wrote:

Quote:

"Beauregard T. Shagnasty" <a.nony.mous@example.invalidwrote:

Quote:

>I found this in your style sheet:
>>
>#container #header ul li a:hover {
>color: #ffffff;
>padding:5px; ...
>>
>so hovering will increase the width (and height) 10px. It also causes
>the menu to jump when hovered, and things that jump are never good.
>Try removing the hover padding and see what happens in IE7.

>
I removed the padding from this and also one more piece of markup
that did the same for a:link, but the footer is still jumping up. I
even set the column size to 25% but still no joy.
>
Any more ideas at all?

No, can't see any other reason why a *hover* would cause a div to move.
I have to go visit a client shortly, so maybe someone else might chime
in with a solution - or a guess. <g>

Maybe this: have you tried it on a different computer? Might be some
weird setting in your own IE7. (I don't have it.)

--
-bts
-Motorcycles defy gravity; cars just suck

Steve wrote:

Quote:

http://tinyurl.com/yvu2wq
>
In IE7, hovering over the top level navigation causes the footer to jump up.

This is an old IE bug, or at least the IE7 version of it. I'm just
surprised IE6 doesn't display the same odd behavior. It's caused by the
background color change on :hover, but there may be other factors involved.

I don't remember all the details, but think this is either referred to
as the "guillotine" bug, or is an offshoot of it. I don't have a
work-around handy, but you may find one if you search hard enough.

--
Berg

On 2007-07-12 17:36:31 +0100, "Beauregard T. Shagnasty"
<a.nony.mous@example.invalidsaid:

Quote:

>Any more ideas at all?

>
No, can't see any other reason why a *hover* would cause a div to move.
I have to go visit a client shortly, so maybe someone else might chime
in with a solution - or a guess. <g>
>
Maybe this: have you tried it on a different computer? Might be some
weird setting in your own IE7. (I don't have it.)

It was also happening with another person's IE7 so I assumed it was
with all IE7.

Bergamot has just pointed me in the right direction, so thanks for your
help with this.

I just need to sort out the rest of the CSS now...! :-)

Ste

On 2007-07-12 19:30:54 +0100, Bergamot <bergamot@visi.comsaid:

Quote:

Steve wrote:

Quote:

>http://tinyurl.com/yvu2wq
>>
>In IE7, hovering over the top level navigation causes the footer to jump up.

>
This is an old IE bug, or at least the IE7 version of it. I'm just
surprised IE6 doesn't display the same odd behavior. It's caused by the
background color change on :hover, but there may be other factors involved.
>
I don't remember all the details, but think this is either referred to
as the "guillotine" bug, or is an offshoot of it. I don't have a
work-around handy, but you may find one if you search hard enough.

Thanks for pointing me in the right direction! I did a few searches
and found quite a few fixes.

In the end, the one that seems to have worked for was the following:

#content_full_home {
min-height: 1%;
etc...
}

I'll leave the site online for a little longer in case anyone was curious.

Thanks,

Ste

Ste wrote:

Quote:

On 2007-07-12 19:30:54 +0100, Bergamot <bergamot@visi.comsaid:
>

Quote:

>Steve wrote:

Quote:

>>http://tinyurl.com/yvu2wq
>>>
>>In IE7, hovering over the top level navigation causes the footer to jump up.

>>
>It's caused by the background color change on :hover
>I don't remember all the details, but think this is either referred to
>as the "guillotine" bug, or is an offshoot of it.

>
Thanks for pointing me in the right direction!

Glad I put you on the right track. :)

Quote:

In the end, the one that seems to have worked for was the following:
>
#content_full_home {
min-height: 1%;
etc...
}

Thanks for posting your solution.

--
Berg

IE7 Issue - Footer Jumping Up Page When Hovering Over TopNav

re: IE7 Issue - Footer Jumping Up Page When Hovering Over TopNav

re: IE7 Issue - Footer Jumping Up Page When Hovering Over TopNav

re: IE7 Issue - Footer Jumping Up Page When Hovering Over TopNav

re: IE7 Issue - Footer Jumping Up Page When Hovering Over TopNav

re: IE7 Issue - Footer Jumping Up Page When Hovering Over TopNav

re: IE7 Issue - Footer Jumping Up Page When Hovering Over TopNav

re: IE7 Issue - Footer Jumping Up Page When Hovering Over TopNav

re: IE7 Issue - Footer Jumping Up Page When Hovering Over TopNav

re: IE7 Issue - Footer Jumping Up Page When Hovering Over TopNav

re: IE7 Issue - Footer Jumping Up Page When Hovering Over TopNav

re: IE7 Issue - Footer Jumping Up Page When Hovering Over TopNav

re: IE7 Issue - Footer Jumping Up Page When Hovering Over TopNav

re: IE7 Issue - Footer Jumping Up Page When Hovering Over TopNav

re: IE7 Issue - Footer Jumping Up Page When Hovering Over TopNav

re: IE7 Issue - Footer Jumping Up Page When Hovering Over TopNav

re: IE7 Issue - Footer Jumping Up Page When Hovering Over TopNav

re: IE7 Issue - Footer Jumping Up Page When Hovering Over TopNav

re: IE7 Issue - Footer Jumping Up Page When Hovering Over TopNav

re: IE7 Issue - Footer Jumping Up Page When Hovering Over TopNav

Similar HTML / CSS bytes

/bytes/development

/bytes/it

/bytes/about