Stylesheets - Link misbehaviour in Firefox

Author

Link misbehaviour in Firefox

rhino

2007-10-27, 3:16 am

I'm having an odd problem in Firefox 2.0.0.8. You can see the problem on
this page: http://sfl.london.on.ca/links_groups.shtml.

If you click on any of the three horizontal tabs, nothing happens UNLESS the
mouse is right at the very top edge of the tab. You know you're in the right
place when the status line at the bottom of the browser shows the address of
the link.

What would make the link fire from several pixels ABOVE the actual text of
the link and not ON the actual link itself??

The CSS validates (there are some warnings about colours but no errors) so
that's not the problem. Changing the top and/or bottom padding on the tabs
doesn't change the trigger point: it's still the exact top edge of the tab.
The tabs work normally in IE6, IE7 and Opera.

Does anyone have any idea why this is happening?

--

Rhino

Blinky the Shark

2007-10-27, 6:16 am

rhino wrote:
> I'm having an odd problem in Firefox 2.0.0.8. You can see the problem
> on this page: http://sfl.london.on.ca/links_groups.shtml.
>
> If you click on any of the three horizontal tabs, nothing happens
> UNLESS the mouse is right at the very top edge of the tab. You know
> you're in the right place when the status line at the bottom of the
> browser shows the address of the link.
>
> What would make the link fire from several pixels ABOVE the actual
> text of the link and not ON the actual link itself??
>
> The CSS validates (there are some warnings about colours but no
> errors) so that's not the problem. Changing the top and/or bottom
> padding on the tabs doesn't change the trigger point: it's still the
> exact top edge of the tab. The tabs work normally in IE6, IE7 and
> Opera.
>
> Does anyone have any idea why this is happening?

If I look at it with Firebug and highlight your sflinks division, its
top edge seems to cut across those three tabs at about where the tops of
their text is; i.e., about where the edge of working-links and
not-working-links is. I can't get a screen cap of that, but if you
install the Firebug extension in FF and do Inspect and click on this
line of your markup

<div id="sflinks">

you'll see that edge.

--
Blinky RLU 297263
Killing all posts from Google Groups
The Usenet Improvement Project - http://improve-usenet.org

transformer

2007-10-27, 6:16 am

On Oct 26, 10:46 pm, "rhino" <No.offline.contact.ple...@anonymous.com>
wrote:
> I'm having an odd problem in Firefox 2.0.0.8. You can see the problem on
> this page:http://sfl.london.on.ca/links_groups.shtml.
>
> If you click on any of the three horizontal tabs, nothing happens UNLESS the
> mouse is right at the very top edge of the tab. You know you're in the right
> place when the status line at the bottom of the browser shows the address of
> the link.
>
> What would make the link fire from several pixels ABOVE the actual text of
> the link and not ON the actual link itself??
>
> The CSS validates (there are some warnings about colours but no errors) so
> that's not the problem. Changing the top and/or bottom padding on the tabs
> doesn't change the trigger point: it's still the exact top edge of the tab.
> The tabs work normally in IE6, IE7 and Opera.
>
> Does anyone have any idea why this is happening?
>
> --
>
> Rhino

Hi Rhino,
Don't know much about positioning; I would've used floats for this
layout. That said, in FF I was able to get those tabs working like
this:

#sflinks {
position: relative; <---- Omit it --
top: 0; <---- Omit it --
left: 0; <---- Omit it --
}

It seems that the sflinks div was positioned over the tabs, making
them inaccessible. Removing the position: relative "uncovered" the
tabs and I was able to get to them with my mouse. Someone more
knowledgeable about positioning can probably explain precisely what
was going on.

HTH,
Bill

transformer

2007-10-27, 6:16 am

On Oct 26, 10:46 pm, "rhino" <No.offline.contact.ple...@anonymous.com>
wrote:
> I'm having an odd problem in Firefox 2.0.0.8. You can see the problem on
> this page:http://sfl.london.on.ca/links_groups.shtml.
>
> If you click on any of the three horizontal tabs, nothing happens UNLESS the
> mouse is right at the very top edge of the tab. You know you're in the right
> place when the status line at the bottom of the browser shows the address of
> the link.
>
> What would make the link fire from several pixels ABOVE the actual text of
> the link and not ON the actual link itself??
>
> The CSS validates (there are some warnings about colours but no errors) so
> that's not the problem. Changing the top and/or bottom padding on the tabs
> doesn't change the trigger point: it's still the exact top edge of the tab.
> The tabs work normally in IE6, IE7 and Opera.
>
> Does anyone have any idea why this is happening?
>
> --
>
> Rhino

Just a post script to my last reply, Rhino. FYI, in FF when the
browser window is below about 1150 pixels wide, your main content div
drops below your index column. Didn't have time to try a fix; sorry.
Bill

Ben C

2007-10-27, 6:16 am

On 2007-10-27, transformer <smallvoiceshouting@XXXXXXXXXX> wrote:
> On Oct 26, 10:46 pm, "rhino" <No.offline.contact.ple...@anonymous.com>
> wrote:
[...][color=darkred]
> Hi Rhino,
> Don't know much about positioning; I would've used floats for this
> layout. That said, in FF I was able to get those tabs working like
> this:
>
> #sflinks {
> position: relative; <---- Omit it --
> top: 0; <---- Omit it --
> left: 0; <---- Omit it --
> }
>
> It seems that the sflinks div was positioned over the tabs, making
> them inaccessible. Removing the position: relative "uncovered" the
> tabs and I was able to get to them with my mouse. Someone more
> knowledgeable about positioning can probably explain precisely what
> was going on.

That's odd. Position: relative; top: 0; left: 0 should do basically
nothing (except establish a containing block for positioned descendents,
which is the only reason I can think of for doing it).

#sflinks does overlap most of the tabs as Blinky pointed out. Since the
tabs are in a float this is to be expected. I think Firefox may have its
stacking order a bit wrong here-- the float should be on top of #sflinks
both visually and from the point of view of clicking on it (you would
have thought).

Anway I would suggest setting clear: both on #sflinks. Instead you're
setting clear on the <ul> inside it. Move that clear up to #sflinks.

And then get rid of that <h4> </h4> above #sflinks which looks
highly suspicious-- at the moment it's that <h4>'s bottom margin that's
providing the narrow "window" through which you can click on the tabs.