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

validate your html and css

http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.chrisbaran.com%2Findex.php%3Foption%3Dcom_easyfaq%26Itemid%3D28

you use style declaration in the body of the document

http://jigsaw.w3.org/css-validator/validator?profile=css21&warning=0&uri=http%3A%2F%2Fwww.chrisbaran.com%2Findex.php%3Foption%3Dcom_easyfaq%26Itemid%3D28


best regards

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?

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!

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

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?