I've been handed the reigns on a website that is having issues with anchored tags not displaying correctly when a page is loaded from the FQDN. That is if I reference http://www.foo.com/news#bar the entire div for bar will be hidden behind the header. Where if I use the anchor tag from within the page itself (that is, I click the link for #bar at the top of the page) it'll scroll to the top of the div as intended. I should note, that the link that works on the page, and the link with the FQDN are both available on the same page, and clicking the FQDN (even on the same page) will always cause the display issue.
Edit:
Ok in the interest of getting reference code up this is a cleaned up sample of the output from the CMS. I've omitted quite a bit but kept the relevant structure, CSS will be below this:
<html>
<body class="html not-front not-logged-in one-sidebar sidebar-second page-point page-point- page-point-19 point-type-inside-page">
<div id="skip-link"></div>
<div id="wrapper">
<header id="header" class="header-holder">
<div class="wrap">
<div class="top-menu">
<div class="social"></div>
<div class="top-nav"></div>
::after
</div>
<div class="logo"></div>
<div class="main-nav">
<a class="opener" href="#">
<span></span>
</a>
<div class="js-mobile-slide" style="max-height: 838px;">
<ul class="js-slide-hidden">
<li class="first expanded menu-mlid-490">
<a href="/foo#bar">Our target!</a>
<ul></ul>
</li>
<li class="expanded active-trail active menu-mlid-495"></li>
<li class="last expanded menu-mlid-496"></li>
</ul>
<div class="menu-mobile js-slide-hidden"></div>
</div>
</div>
::after
</div>
::after
</header>
<main id="main" role="main">
<div class="page-navigation">
<div class="wrap">
<div class="region region-page-navigation">
<div id="block-views-inside-page-block-1" class="block block-views page-menu clearfix clearfix">
<div class="block-content">
<div class="view view-inside-page view-id-inside_page view-display-id-block_1 view-dom-id-9">
<div class="view-content">
<ul>
<li class="views-row views-row-1 views-row-odd views-row-first anchor-active">
<a href="#Foo">Foo</a>
</li>
<li class="views-row views-row-2 views-row-even">
<a href="#bar">Bar</a>
</li>
<li class="views-row views-row-3 views-row-odd"></li>
<li class="views-row views-row-4 views-row-even views-row-last"></li>
</ul>
</div>
</div>
</div>
::after
</div>
<div id="block-views-inside-page-block" class="block block-views btn-holder clearfix clearfix"></div>
</div>
::after
</div>
::after
</div>
<div class="content-holder">
<div class="wrap">
<section id="content" class="content-block ">
<a id="main-content"></a>
<div id="tabs-wrapper" class="clearfix"></div>
<div class="region region-content">
<div id="block-system-main" class="block block-system clearfix clearfix">
<div class="block-content">
<div id="point-19" class="point point-inside-page clearfix" typeof="sioc:Item foaf:Document" about="/overview">
<span class="rdf-meta element-hidden" content="content" property="dc:title"></span>
<div class="content clearfix">
<div class="field-collection-container clearfix">
<div class="field-collection-view clearfix view-mode-full">
<section id="foo" class="text-block section-active"><p>First content to appear</p></section>
::after
</div>
<div class="field-collection-view clearfix view-mode-full">
<section id="bar" class="text-block"><h1>Test</h1><p>this will wind up hidden</p></section>
::after
</div>
<div class="field-collection-view clearfix view-mode-full"></div>
<div class="field-collection-view clearfix view-mode-full field-collection-view-final"></div>
::after
</div>
::after
</div>
::after
</div>
</div>
::after
</div>
</div>
</section>
<aside id="sidebar" class="sidebar"></aside>
::after
</div>
</div>
</main>
<footer id="footer" class="footer"></footer>
</div>
</body>
</html>
And now for the CSS as pulled from Firebug:
.clearfix::after{
content: ".";
display: block;
height: 0px;
clear: both;
visibility: hidden;
}
.content-block{
width: 75%;
float: left;
padding: 53px 0px 32px;
}
.content-block h1 {
font-size: 29px;
line-height: 24px;
margin: 0px 0px 15px;
}
.content-block .text-block {
text-align: left;
padding: 0px;
}
.header-holder{
position: fixed;
top: 0px;
left: 0px;
width: 100%;
z-index: 12;
background: #FFFF non repeat scroll 0% 0%;
border-bottom: 1px solid;
box-shadow: 0px 1px 2px;
}
.header-holder .wrap {
padding: 0px 15px;
}
.header-holder .logo {
margin: -1px 0px 0px 14px;
}
.js-mobile-slide {
max-height: none !important;
overflow: visible;
}
.main-nav .js-mobile-slide > ul {
display: block !important;
position: static !important;
}
.main-nav .js-mobile-slide > ul {
font-size: 18px;
}
.point-type-inside-page h1.page-title{
display: none;
visibility: hidden;
}
.page-menu {
font-size: 16px;
padding: 11px 0px 0px;
float: left;
width: 60%;
}
.page-navigation {
min-height: 60px;
}
.page-navigation {
position: fixed;
top 112px;
width: 100%;
z-index: 10;
padding: 14px 0px;
}
.top-menu {
width: 100%;
padding: 11px 0px 0px;
text-transform: uppercase;
}
.top-menu ul, .main-nav ul, .top-slideshow .pagination ul, .info-menu ul, form .item-list ul, .page-navigation ul, .list-holder ul, .benefits-list ul, .explanation-list ol, .explanation-list ul, .pricing-list ul, .list-info ul, .footer ul {
margin: 0px;
padding: 0px;
list-style: outside none none;
}
.wrap {
max-width: 1030px;
padding: 0px 15px;
margin: 0px auto;
}
#block-system-main .field-collection-container, #block-system-main .field-collection-view {
border-bottom: medium none;
margin: 0px;
padding: 0px;
}
#header .main-nav .js-mobile-slide > ul > li {
display: inline-block;
vertical-align: top;
margin: 0px 0px 0px 45px;
padding: 0px 0px 22px;
position: relative;
}
#wrapper{
width: 100%;
overflow: hidden;
padding: 186px 0px 0px;
}
article, aside, details, figcaption, figure, footer, header, main, nav, section, summary {
display: block;
}
html, body, div, span, applet, embed, object, iframe, frameset, p, q, blockquote, sub, sup, a, abbr, acronym, font, img, small, center, h1, h2, h3, h4, h5, h6, b, strong, big, u, ins, i, cite, em, var, dfn, address, s, strike, del, dl, dt, dd, ol, ul, li, pre, code, kbd, samp, tt, fieldset, legend, form, label, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
border: 0px none;
}
h1 {
font-size: 200%;
}
h1 {
font-size: 39px;
font-weight: normal;
text-transform: capitalize;
}
h1, h2, h3, h4, h5, h6, b, strong, th {
font-weight: bold;
}
*{
margin: 0px;
paddin: 0px;
max-height: 1000000px;
}
*, *::before, *::after {
box-sizing: inherit;
}
I do want to point out that there's some magic going on here with jQuery and some smooth scrolling that won't appear just cutting and pasting this sample code into an HTML file.
