Can you help with this crazy layout glitch? Named anchors are killing me!

[ibchrisb81]

Hi,

I’m experiencing a layout issue using simple HTML named anchor tags that is really cooking my noodle! I’d really appreciate any ideas to fix this seemingly basic problem…

Basically, if you navigate to a named anchor location on the page (for example “…/faq.html#general1”), and you scroll to the top of the page, the whole layout has been displaced by about 50px. It seems like the top of the page has ‘eaten’ the header (probably better described as the whole container being moved 50px out the top of the page, with the body background staying as it should.)

This same thing also happens with “…/faq.html#”, but “…/faq.html” has no layout problems.

My question is: How can I ensure that using the a #name tags does not disrupt my normal layout?

I originally thought this may have been a positioning problem, but I haven’t had any luck with positioning the body or container div’s in any different way.

I’m using a JS slider at the top of the page that might also be playing into the mix (?).

The page in question is here…

http://www.meditationdownloadproject.com/faq.html#general1 (crazy layout — scroll to the top of the page)
http://www.meditationdownloadproject.com/faq.html (normal, intended layout)

Note, this layout issue is much more pronounced in screen resolutions >1400px.

Tested in IE8, Chrome, Firefox 3.6

Thanks in advance for your help!

…possible style sheet culprits…

body {

font: Helvetica, Arial, sans-serif;

background:url(../images/container_bg.jpg); background-repeat:repeat-x;

margin: 0;

padding: 0;

text-align: center;

color: #000000;

text-transform:none;

}

#container {width: 1400px;

background-image:url(../images/container_bg.jpg); background-repeat:repeat-x;

margin: 0 auto;

text-align: center;

overflow:hidden;

}



#header {z-index:100; background-image:url(../images/header.jpg); height:200px; background-repeat: no-repeat; text-align:center; margin-top:0px; width:100%}

#menu {postiion:realative; width:952px; height:202px; margin-left:auto; margin-right:auto; margin-top:0px;}

#menu_sprite {position:relative; width:127px; height:202px; display:block; float:right; margin-top:-85px;}

#mainpanel_bg {width:100%; background-image:url(../images/panel-bg.jpg); background-repeat:no-repeat; text-align:center; ; margin:0; height:561px; float:none;}



a.faq {color:#333; text-decoration:none; border-bottom:dotted 1px;}

a.faq:hover {color:#666;}



a.top {font-size:10px; font-style:italic; padding-left:10px; color:#333;}

Let me know if you need other css… I wasn’t sure what to include without copying in the entire style sheet… :)

[ibchrisb81]

Hi, all fixed.

Overflow:hidden; was the culprit.

CB

[brevityness]

Why not add some smooth scrolling effect? http://www.kryogenix.org/code/browser/smoothscroll/

Optional of course. :)

[Author]

Posts