Re: [css-d] Firefox active link dotted border problem
> >>> Ingo Chao wrote: > >>> > http://temp.rdpdesign.com/final/ is still showing a jump in > active tabs. > > http://www.satzansatz.de/cssd/tmp/cmoutline.png > > > > split paper clip. Gap. All the tabs were jumping initially. looks > > awful. > > > > Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8) > > Gecko/2005 Firefox/1.5 > The first thing I thought was, I already fixed that problem! Then I got a 403 error from satzansatz so I couldn't see the picture. I tested it on my own FF 1.5 and I thought, WHAT HAPPENED, IT'S BACK?!? A lesson to all, don't do this: - Fix your CSS error in a computer lab and FTP the new file to your server. - Modify the CSS on your home computer without downloading the new file and upload that file over the fixed one. On 12/3/05, Gunlaug Sørtun <[EMAIL PROTECTED]> wrote: > Moving 'padding-top: 10px' from '#navcontainer' to '#wrapper' seems to > cure all jumping and "split paper clip" while keeping a cross-browser > identical appearance. > Then delete padding on a:focus,a:active as it is no longer needed. Thanks, that works! > The reason for the "split paper clip" is some new(?) bug in Firefox > related to 'overflow: hidden', as it adds 'padding: 10px' to 'height: > 1.4em' when calculating actual 'height', but "forget" where that bottom > is when positioning the background. Further investigation needed... :-) Definitely. Though a simpler test case will need to be done, as my case is a mess. -- -- Christian Montoya christianmontoya.com ... rdpdesign.com ... cssliquid.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Firefox active link dotted border problem
Ingo Chao wrote: > Christian Montoya wrote: > >> On 12/3/05, Gunlaug Sørtun <[EMAIL PROTECTED]> wrote: >> >>> Ingo Chao wrote: >>> http://temp.rdpdesign.com/final/ is still showing a jump in active tabs. ... > http://www.satzansatz.de/cssd/tmp/cmoutline.png > > split paper clip. Gap. All the tabs were jumping initially. looks > awful. > > Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8) > Gecko/2005 Firefox/1.5 Moving 'padding-top: 10px' from '#navcontainer' to '#wrapper' seems to cure all jumping and "split paper clip" while keeping a cross-browser identical appearance. Then delete padding on a:focus,a:active as it is no longer needed. The reason for the "split paper clip" is some new(?) bug in Firefox related to 'overflow: hidden', as it adds 'padding: 10px' to 'height: 1.4em' when calculating actual 'height', but "forget" where that bottom is when positioning the background. Further investigation needed... :-) The rest should be adjustable to your liking, as long as you avoid complicated calculations of dimensions on the element with 'overflow: hidden' on it. regards Georg -- http://www.gunlaug.no __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Firefox active link dotted border problem
Christian Montoya wrote: > On 12/3/05, Gunlaug Sørtun <[EMAIL PROTECTED]> wrote: >> Ingo Chao wrote: >>> http://temp.rdpdesign.com/final/ is still showing a jump in active >>> tabs. I wonder was the question was, really. >> I wonder too. Now the active link is jumping in all browsers, and the >> active tab is jumping twice as high in Firefox. >> Nice effect btw, so maybe it is intentional. > > Right, it's not intentional but I would rather keep the jumping than > remove the outline border in FF. As long as it's just the active tab > that jumps it's less likely to induce motion sickness. http://www.satzansatz.de/cssd/tmp/cmoutline.png split paper clip. Gap. All the tabs were jumping initially. looks awful. Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8) Gecko/2005 Firefox/1.5 -- http://www.satzansatz.de/css.html __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Firefox active link dotted border problem
On 12/3/05, Gunlaug Sørtun <[EMAIL PROTECTED]> wrote: > Ingo Chao wrote: > > http://temp.rdpdesign.com/final/ is still showing a jump in active > > tabs. I wonder was the question was, really. > > I wonder too. Now the active link is jumping in all browsers, and the > active tab is jumping twice as high in Firefox. > Nice effect btw, so maybe it is intentional. Right, it's not intentional but I would rather keep the jumping than remove the outline border in FF. As long as it's just the active tab that jumps it's less likely to induce motion sickness. -- -- Christian Montoya christianmontoya.com ... rdpdesign.com ... cssliquid.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Firefox active link dotted border problem
Ingo Chao wrote: > http://temp.rdpdesign.com/final/ is still showing a jump in active > tabs. I wonder was the question was, really. I wonder too. Now the active link is jumping in all browsers, and the active tab is jumping twice as high in Firefox. Nice effect btw, so maybe it is intentional. Georg -- http://www.gunlaug.no __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Firefox active link dotted border problem
Christian Montoya wrote: > On 12/2/05, David Laakso <[EMAIL PROTECTED]> wrote: >> I think Philippe answered the question. > > Philippe completely misunderstood my question, but fortunately I > solved my own problem. > http://temp.rdpdesign.com/final/ is still showing a jump in active tabs. I wonder was the question was, really. Ingo -- http://www.satzansatz.de/css.html __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Firefox active link dotted border problem
On 12/2/05, David Laakso <[EMAIL PROTECTED]> wrote: > Christian Montoya wrote: > > >This is the page with the problem: http://temp.rdpdesign.com/final/ > > > >It's the old quirk where Firefox adds a 1px dotted border to links > >when you click them... I hate that...] > > > > > I think Philippe answered the question. Philippe completely misunderstood my question, but fortunately I solved my own problem. > FWIW, Franklin Gothic for Georgia falls into the /typographers worst > nightmare/ category, Franklin Gothic is what the client requested, but if you know a better fallback list, let me know. > and you are getting lateral page shift at 1280. Huh? -- -- Christian Montoya christianmontoya.com ... rdpdesign.com ... cssliquid.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Firefox active link dotted border problem
Christian Montoya wrote: >This is the page with the problem: http://temp.rdpdesign.com/final/ > >It's the old quirk where Firefox adds a 1px dotted border to links >when you click them... I hate that...] > > I think Philippe answered the question. FWIW, Franklin Gothic for Georgia falls into the /typographers worst nightmare/ category, and you are getting lateral page shift at 1280. Nice site otherwise. >Christian Montoya > > > Best, ~dL -- David Laakso http://www.dlaakso.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Firefox active link dotted border problem
Christian Montoya wrote: >It's not that I want to get rid of it, I just want it to stop messing >up my layout. Why in the world does FF have to insert their >accessibility feature into the document flow? Why can't they just >overlay the border, rather than right into the margin, where it makes >these jumping links that make viewers want to hurl? > > I don't see the problem of the focus outline causing jumps in other pages, so I wonder if there is something in your particular setup that has caused the problem. In particular, note this example from ALA that uses tabs [1] -- no jumping seen. Perhaps you need to rework how you have constructed your tabs to avoid this issue? [1] http://www.alistapart.com/d/slidingdoors2/v1/ex10.html Zoe -- Zoe M. Gillenwater Design Services Manager UNC Highway Safety Research Center http://www.hsrc.unc.edu __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Firefox active link dotted border problem
On 12/2/05, Gerald Couldwell <[EMAIL PROTECTED]> wrote: > >This is the page with the problem: http://temp.rdpdesign.com/final/ > > As a newbie, I don't know how relevant my observations will be. > I noticed in Opera 8.51 and FF 1.0.7 that the tabs without content have no > scroll bars, > thus a larger space to fill. Yet IE 6 does not display this behavior. That's default browser behavior. FF and Opera collapse the scrollbar when it's not needed. IE does not. Has nothing to do with CSS. -- -- Christian Montoya christianmontoya.com ... rdpdesign.com ... cssliquid.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Firefox active link dotted border problem
On 12/2/05, CJ Larson <[EMAIL PROTECTED]> wrote: > > > If you want to delete it completely, think 3 times or more, that > focus > > > ring *is* an accessibility feature. You don't provide any other > > > feedback to keyboard users. > > > > It's not that I want to get rid of it, I just want it to stop messing > > up my layout. Why in the world does FF have to insert their > > accessibility feature into the document flow? Why can't they just > > overlay the border, rather than right into the margin, where it makes > > these jumping links that make viewers want to hurl? > > > If you hadn't have said that it was a bug, I would have left the site > thinking the raising of the selected/clicked tab was a feature to give > more visual enhancement to the links. There wasn't even any hurling > involved. :D > Then you have seen the fixed version. Which is the one I can live with. -- -- Christian Montoya christianmontoya.com ... rdpdesign.com ... cssliquid.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Firefox active link dotted border problem
> > If you want to delete it completely, think 3 times or more, that focus > > ring *is* an accessibility feature. You don't provide any other > > feedback to keyboard users. > > It's not that I want to get rid of it, I just want it to stop messing > up my layout. Why in the world does FF have to insert their > accessibility feature into the document flow? Why can't they just > overlay the border, rather than right into the margin, where it makes > these jumping links that make viewers want to hurl? If you hadn't have said that it was a bug, I would have left the site thinking the raising of the selected/clicked tab was a feature to give more visual enhancement to the links. There wasn't even any hurling involved. :D __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Firefox active link dotted border problem
On 12/2/05, Philippe Wittenbergh <[EMAIL PROTECTED]> wrote: > > If you want to delete it completely, think 3 times or more, that focus > ring *is* an accessibility feature. You don't provide any other > feedback to keyboard users. It's not that I want to get rid of it, I just want it to stop messing up my layout. Why in the world does FF have to insert their accessibility feature into the document flow? Why can't they just overlay the border, rather than right into the margin, where it makes these jumping links that make viewers want to hurl? But I digress... that's not relevant here. I fixed it by adding: margin-top:-1px; to the list items. Now there's another quirk, but at least it's the same across IE 6, Opera, and FF. Site check in Mac/*nix please? -- -- Christian Montoya christianmontoya.com ... rdpdesign.com ... cssliquid.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Firefox active link dotted border problem
> It's the old quirk where Firefox adds a 1px dotted border to links > when you click them... I hate that. It's making the links in the > horizontal UL navigation jump. It's really annoying and I tryed a few > things that were unsuccessful and have no idea what to do. It's not that it's a "1px dotted border" around the element. It's the "outline". I've had some luck with altering the CSS3 outline property to nothing. I think that should help your cause a little. My 2c. Ian __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Firefox active link dotted border problem
On 2 Dec 2005, at 2:10 pm, Christian Montoya wrote:
> This is the page with the problem: http://temp.rdpdesign.com/final/
>
> It's the old quirk where Firefox adds a 1px dotted border to links
> when you click them... I hate that. It's making the links in the
> horizontal UL navigation jump. It's really annoying and I tryed a few
> things that were unsuccessful and have no idea what to do.
a:focus {outline-offset: -1px} will work nicely in FF 1.5+
That jumping is a kind of bug (or not ?, maybe just another
contradiction in the specs) in Firefox.
If you want to delete it completely, think 3 times or more, that focus
ring *is* an accessibility feature. You don't provide any other
feedback to keyboard users.
(
:focus {-moz-outline: none /* fx 1.07*/ outline:none /* fx 1.05,
Safari, Mac IE*/}
)
Oh, and you won't get rid of it when I view your site, I make sure of
that, and some other users I personally know have the same settings.
Philippe
---
Philippe Wittenbergh
Re: [css-d] Firefox active link dotted border problem
On 02/12/05, Christian Montoya <[EMAIL PROTECTED]> wrote:
> This is the page with the problem: http://temp.rdpdesign.com/final/
>
> It's the old quirk where Firefox adds a 1px dotted border to links
> when you click them... I hate that. It's making the links in the
> horizontal UL navigation jump. It's really annoying and I tryed a few
> things that were unsuccessful and have no idea what to do.
>
> The page works fine in IE 6 and Opera. A Mac/*nix browser test is in
> order, so let me know how that's doing. I ..think.. I could live with
> the FF behavior, but it looks really bad. Normally I would just change
> the implementation but getting those sliding-doors-tabbed-links on top
> of that manila folder graphic was hard enough on its own. Can anyone
> suggest a fix?
I don't think it's anything to do with the dotted border on Firefox
active links (which I personally quite like, and which I'd be
near-certain has nothing to do with actual layout changes).
I suspect it's IE and Opera mis-handling this CSS:
#navcontainer li a:focus, #navcontainer li a:active { padding:3px 14px; }
}
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
