SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Zealot
    Join Date
    Jul 2008
    Posts
    122
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up Weird css problem in Firefox

    My site works well in all browsers except for Firefix. When you hover over a link it shifts everything down. I am using cufon text replacement so I am using border-bottom instead of text-decoration underline for the hover underline. My site is http://glumbouploads.com

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,467
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I can't access the page at the moment:

    Software error:

    HTML::Template->new() : Cannot open included file text-link-ads.html : file not found. at Modules/HTML/Template.pm line 666.

    For help, please send mail to the webmaster (root@localhost), giving this error message and the time and date of the error.
    If you are adding a border-bottom on hover then that will cause a shift in the layout. You don't really want to affect the flow at all when hovering as browsers are not required to reflow the document although most do.

    Depending on your situation you could perhaps add a border by default in the current background color (or transparent if ie6 support isn't needed) and then just change the border-color on hover and not create a reflow.

  3. #3
    SitePoint Zealot
    Join Date
    Jul 2008
    Posts
    122
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Clear your cookies from our domains. Anyways, why does this problem only affect FF?

  4. #4
    SitePoint Wizard bronze trophy C. Ankerstjerne's Avatar
    Join Date
    Jan 2004
    Location
    The Kingdom of Denmark
    Posts
    2,702
    Mentioned
    7 Post(s)
    Tagged
    0 Thread(s)
    Because browsers interpret presentation in different ways when the standards are ambiguous (and, sadly, also when they are not). I would suggest Paul's method, too.
    Christian Ankerstjerne
    <p<strong<abbr/HTML/ 4 teh win</>
    <>In Soviet Russia, website codes you!

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,467
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    It's not helped by being in a table either which is why others are probably not reflowing becauise all cells would have to be changed.

    You could add padding-bottom to the anchor and then take it away when the border is added.

    e.g.
    Code:
    #footer table{border-collapse:collapse}/* kill extra space*/
    
    #footer a{padding-bottom:1px}
    #footer a:hover{padding-bottom:0}
    When the border gets added the padding is taken away resulting in no impact to the flow.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •