Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Dec 2007
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Anchor link in FF breaking layout

    Hello,

    I have a problem when I have an anchor link in the content on the page and someone clicks the the link to go down to the anchor, the layout in FF breaks, but is fine in IE7.

    The layout gets moved up about 15 pixels in FF when you click the anchor link, so the menu items are half hidden (which is due to the overflow:hidden on the topnav div). When you first view the page with the anchor links, the layout is fine, it is only when you click one of the anchor links, that the layout breaks.

    The menu is displaying correctly, but click on one of the questions and the top menu is half hidden. It is like the whole content is moving up about 15 pixels for some reason. I can't figure out what I need to change to stop this from happening.

    This is a CSS tableless layout using negative margins. There is a global div { overflow:hidden; } which when removed seems to solve the problem of the menu moving, but the layout breaks when this is added.

    Any help would be greatly appreciated. Thank you
    Last edited by ljkeashly; 12-18-2007 at 04:42 AM.

  • #2
    Master Coder
    Join Date
    Dec 2007
    Posts
    6,682
    Thanks
    436
    Thanked 890 Times in 879 Posts
    validate your html and css

    http://validator.w3.org/check?verbos...%26Itemid%3D28

    you use style declaration in the body of the document

    http://jigsaw.w3.org/css-validator/v...%26Itemid%3D28


    best regards
    Last edited by oesxyl; 12-17-2007 at 06:03 AM. Reason: add css validator link

  • #3
    Regular Coder GO ILLINI's Avatar
    Join Date
    Jun 2005
    Location
    USA
    Posts
    634
    Thanks
    0
    Thanked 7 Times in 7 Posts
    not sure what the problem is... but after looking at the site, I would highly recommend using a larger font size. I could barely read the words from less then 2 feet away from the screen, and I left the site with my eyes hurting.
    Its not good to hurt your users
    I also noticed that a question a little ways down the page(happened to be the one I clicked on) is to long for your content box.
    "If my lessons are a week or longer "
    There are also several others.

    I know this isn't the help your looking for, but its always good to know...

    -Adam

    p.s. I don't have the best of eyesight(20/35) but then again, who does?
    Last edited by GO ILLINI; 12-17-2007 at 06:17 AM.
    Why not thank me?

    http://adamsworld.name

  • #4
    Senior Coder ahallicks's Avatar
    Join Date
    May 2006
    Location
    Lancaster, UK
    Posts
    1,134
    Thanks
    1
    Thanked 57 Times in 55 Posts
    I'm thinking you've fixed this now because I don't see a problem. One thing I would suggest is that you put a 'back to top' link underneath a few of the last answers because it's a fair way to scroll back to the top!
    "write it for FireFox then hack it for IE."
    Quote Originally Posted by Mhtml View Post
    Domains are like women - all the good ones are taken unless you want one from some foreign country.
    Reputation is your friend

    Development & SEO Tools

  • #5
    New to the CF scene
    Join Date
    Dec 2007
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Solved

    Hello,

    Thank you all for your replies.

    (I do agree that the font is too small, but that is how the designer wants it. I did fix the nowrap problem.)

    The problem turned out to have nothing to do with the div { overflow:hidden; }
    it was a height declaration that was causing the problem:
    #rightcolumnbg:after {
    clear:both;
    content:".";
    display:block;
    /*height:0; breaks the layout in FF when an anchor link is clicked */
    visibility:hidden;
    }

    Thanks for the input
    Last edited by ljkeashly; 12-18-2007 at 04:42 AM. Reason: Found the problem

  • #6
    The Apostate Apostropartheid's Avatar
    Join Date
    Oct 2007
    Posts
    3,215
    Thanks
    16
    Thanked 265 Times in 263 Posts
    Your designer doesn't necessarily know how web design actually works. You only need to up the size the tiniest bit. Small fonts can look cool and professional, but not that small, you know?


  •  

    Posting Permissions

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