| Author |
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.com> wrote in message
news:1184242231.657783@grenada.network-i.net...
> 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.com> wrote in message
news:Y%oli.6225$4A1.4609@news-server.bigpond.net.au...
>
> "Steve" <1@2.com> wrote in message
> news:1184242231.657783@grenada.network-i.net...
>
> 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
| |
| John Hosking 2007-07-12, 6:16 pm |
| Steve wrote:
> "rf" <rf@invalid.com> wrote in message
> news:Y%oli.6225$4A1.4609@news-server.bigpond.net.au...
>
> 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.com> wrote in message
news:1184243542.76630@grenada.network-i.net...
>
> "rf" <rf@invalid.com> wrote in message
> news:Y%oli.6225$4A1.4609@news-server.bigpond.net.au...
>
>
> 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.com> wrote in message
news:1184244216.359270@grenada.network-i.net...
> 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.com> wrote in message
news:1184244881.359253@grenada.network-i.net...
> 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.com> wrote in message
news:kHpli.6241$4A1.4256@news-server.bigpond.net.au...
>
> "Steve" <1@2.com> wrote in message
> news:1184244881.359253@grenada.network-i.net...
>
> 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.com> wrote in message
news:SDpli.6238$4A1.1936@news-server.bigpond.net.au...
>
> "Steve" <1@2.com> wrote in message
> news:1184244216.359270@grenada.network-i.net...
>
>
> 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
| |
| Beauregard T. Shagnasty 2007-07-12, 6:16 pm |
| Steve wrote:
> 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?
> 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.invalid> wrote in message
news:%Vpli.165498$Sa4.15651@bgtnsc05-news.ops.worldnet.att.net...
> Steve wrote:
>
>
> 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.
>
> 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).
> 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
| |
| Beauregard T. Shagnasty 2007-07-12, 6:16 pm |
| Steve wrote:
> "Beauregard T. Shagnasty" wrote:
>
> 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.
>
> 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.invalid> wrote in message
news:lxrli.165611$Sa4.94294@bgtnsc05-news.ops.worldnet.att.net...
>
> 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
| |
| Beauregard T. Shagnasty 2007-07-12, 6:16 pm |
| Steve wrote:
> "Beauregard T. Shagnasty" <a.nony.mous@example.invalid> wrote:
>
> 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
| |
| Bergamot 2007-07-12, 6:16 pm |
| Steve wrote:
> 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.invalid> said:
>
> 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
| |
| Bergamot 2007-07-12, 10:18 pm |
| Ste wrote:
> On 2007-07-12 19:30:54 +0100, Bergamot <bergamot@visi.com> said:
>
>
> Thanks for pointing me in the right direction!
Glad I put you on the right track. :)
> 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
|
|
|
|
| Copyright 2003 - 2008 forum4designers.com Software forum Computer Hardware reviews |