Anchor link causes some content to disappear

21 Posts

beefknuckle Reply #1, 18 years, 2 months ago

Sadly I can’t point to a live example because of confidentiality concerns. However, here’s my problem, in case anyone has any ideas:

When I navigate to a page that contains an anchor, say,

<a name="anchor"></a>

via a link like

http://www.site.com/path/to/page#anchor

the page is displayed, but with all contents of

[*content*]

and TVs excluded EXCEPT what follows the anchor element.

For example: Say I have a page structured like this:

<header-from-template>
<content>
Some content 
<a name="anchor"></a>
Some more content
</content>
<sidebar>
Content pulled from TV
</sidebar>
<footer-from-template>

What gets rendered is

<header-from-template>
<content>
<a name="anchor"></a>
Some more content
</content>
</footer-from-template>

This is not affected by whether or not I’m using friendly aliases or whether or not I use a <base> element.

Hope that makes sense.

☆ A M B ☆
24,524 Posts

sottwell Reply #2, 18 years, 2 months ago

What you are saying makes sense, the situation doesn’t. Anchors shouldn’t have anything at all to do with the document’s output, it should only cause the browser to scroll to that position on the page. Have you run the page through a validator? It sounds like a missing quote mark or element tag somewhere.

Studying MODX in the desert - http://sottwell.com
Tips and Tricks from the MODX Forums and Slack Channels - http://modxcookbook.com
Join the Slack Community - http://modx.org

21 Posts

beefknuckle Reply #3, 18 years, 2 months ago

Yep, no warnings, no errors. If I go to the page without the "#anchor" appended to the url, the page renders correctly. But with the "#anchor" appended to the url, the [*content*] and tv bits aren’t rendered.

☆ A M B ☆
24,524 Posts

sottwell Reply #4, 18 years, 2 months ago

Are you running any plugins, like the autolink plugin?

Studying MODX in the desert - http://sottwell.com
Tips and Tricks from the MODX Forums and Slack Channels - http://modxcookbook.com
Join the Slack Community - http://modx.org

21 Posts

beefknuckle Reply #5, 18 years, 2 months ago

The plugins I’m using are just the default ones: Bottom Button Bar, Forgot Manager Login, Inherit Parent Template, QuickEdit, Search Highlighting, TinyMCE.

21 Posts

beefknuckle Reply #6, 18 years, 2 months ago

Another note: I just noticed that the html for those sections is actually being rendered - it’s just not visible. Of course the css rules are exactly the same for the page whether it’s accessed with or without the anchor link...strange.

24,544 Posts

BobRay Reply #7, 18 years, 2 months ago

Was this working before on your MODx installation, or has it never worked? If the former, did you make any changes lately (i.e. what were you doing, if anything, just before it stopped working). The more we know, the better we can help.

Have you looked at it in multiple browsers?

It might give us a clue if you do a "view source" on the page in question and paste the entire results in here (obfuscating anything that would cause security or privacy problems).

Did I help you? Buy me a beer
Get my Book: MODX:The Official Guide
MODX info for everyone: http://bobsguides.com/modx.html
My MODX Extras
Bob's Guides is now hosted at A2 MODX Hosting

21 Posts

beefknuckle Reply #8, 18 years, 2 months ago

Thanks for the responses. To answer your questions: This symptom has always been present...Let’s see what other info might be useful...We’re using the Wayfinder snippet for the main navigation...

Yes, I also thought it was maybe a FF bug, but it’s the same in IE6/7 and Safari.

Below is the page source. With the below, I’d be accessing the page via a url like http://domain.com/page#anchor. Thanks again!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Title</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta http-equiv="language" content="English" />
<link rel="stylesheet" href="/assets/css/default.css" type="text/css" media="screen,projection"/>
<link rel="shortcut icon" href="/assets/images/favicon.png"  type="image/x-icon"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<base href="http://domain.com/"/>
<script type="text/javascript">var MODX_MEDIA_PATH = "media";</script>
</head>
<body>
<div id="fixed-width-wrapper">
<div id="masthead">
<a href="/"><img id="logo" src="/assets/images/logo.gif" alt=""/></a>
<ul id="main-nav" class="clearfix"><li><a href="/">Home</a></li><li><a href="/products" class="current">Products</a></li><li><a href="/professionals">Professionals</a></li><li><a href="/about">About Us</a></li><li><a href="/contact" id="contact-menu-item">Contact</a></li><li id="sign-in"><a href="/sign-in">Sign In</a></li></ul>
<img class="masthead-image" src="/assets/images/mastheads/about.jpg" alt="Masthead image" />
</div>
<div id="pageContents" class="clearfix">
<div id="main">
<!--THIS WOULD BE HIDDEN -->
<h1>Page Title</h1>
<p>
Copy</p>
<p>
Copy</p>
<p>
Copy</p>
<!-- END HIDDEN -->
<h1 id="anchor">TITLE</h1>
<p>
<img alt="" height="114" src="assets/images/page-ids/52/source.gif" width="528" />
</p>
<p>
Copy</p>
<ul>
	<li>
	Copy<li>
	Copy</li>
	<li>
	Copy</li>
	<li>
	Copy</li>
	<li>
Copy	</li>
</ul>
<p>
*Not available in the U.S.
</p>
<h3>Title</h3>
<table class="ordering-guide">
	<tbody>
		<tr>
			<th>Product Number</th>
			<th>title</th>
			<th>title</th>
			<th>title</th>
			<th>title</th>
			<th>title</th>
			<th>title</th>
		</tr>
		<tr>
			<td>01-162006</td>
			<td>5.5F</td>
			<td>130 cm</td>
			<td>4 cm</td>
			<td>3 mm</td>
			<td>16</td>
			<td>2-2-2</td>
		</tr>
	</tbody>
</table>

</div>
<!-- THIS WOULD BE HIDDEN -->
<div id="sub-nav">

<ul><li id="page45"><a href="/products/url" title="" >Submenu Item</a></li>
<li id="page46" class="active current"><a href="/products/url" title="" >Submenu Item</a><ul><li id="page141"><a href="/products/this-page#anchor" title="" >Submenu Item</a></li>
</ul></li>
<li id="page8"><a href="/products/url" title="" >Submenu Item</a></li>
<li id="page44"><a href="/products/url" title="" >Submenu Item</a></li>
<li id="page53"><a href="/products/url" title="" >Submenu Item</a></li>
<li id="page54" class="last"><a href="/products/url" title="" >Submenu Item</a></li>
</ul>
</div>
<div id="sidebar">
<div class="sidebar-box">
<h2><a href="products/url">Order Product</a></h2>
</div>
<div class="sidebar-box">
<h2><a href="professionals">Professionals Homepage</a></h2>
</div>
<!-- END HIDDEN -->
</div>
</div> <!-- end pageContents -->
<div id="footer">
<span id="copyright">© 2008 Company Inc.</span>
<ul id="footer-nav">
<li><a href="/contact/faqs">FAQs</a></li>
<li><a href="/products">Products</a></li>
<li><a href="/search">Search</a></li>
<li><a href="/email-a-friend">Email a Friend</a></li>
<li><a href="/contact">Contact Us</a></li>
<li><a href="/sitemap">Sitemap</a></li>
</ul>
<div id="contact-info">
<span class="address">Address</span>
<span class="phone">phone: </span>
<span class="phone">toll free:</span>
<span class="email">[email protected]</span>
</div>
</div>
</div> <!-- end wrapper -->
</body>
</html>

24,544 Posts

BobRay Reply #9, 18 years, 2 months ago

I’d like to see the .css file (default.css) but It suggests a js problem to me. Try commenting out the ajaxgoogleapis line.

Did I help you? Buy me a beer
Get my Book: MODX:The Official Guide
MODX info for everyone: http://bobsguides.com/modx.html
My MODX Extras
Bob's Guides is now hosted at A2 MODX Hosting

21 Posts

beefknuckle Reply #10, 18 years, 2 months ago

We tried commenting out the jquery, and it didn’t have any effect. Below is the css.

We’ve discovered that the problem is somehow related to the overflow: hidden rule on #pageContents. If that rule is removed, the problem disappears (while creating other problems, of course). Still not sure WHY it’s happening though.

a img {
	border: 0;
}
/*-----------TYPOGRAPHY----------*/
body {
	font: 68.75%/1.65 Arial, Helvetica, sans-serif;
	color: #666;
	background-color: #FFF;
}
div {
	margin: 0;
}
ul, ol, dl {
	padding: 0 0 0 2em;
	margin: 1.65em 0;
}
ul li ul, ol li ol, ol li ul, ul li ol {
	margin: 0;
	padding: 0;
}
li, dd {
	padding: 0;
	margin: 0 0 0 .5em;
}
ul {
	list-style-type: disc;
}
ol {
	list-style-type: decimal;
}
ol.outline li {
	list-style-type: upper-roman;
}
ol.outline li ol li {
	list-style-type: upper-alpha;
}
ol.outline li ol li ol li {
	list-style-type: lower-roman;
}
ol.outline li ol li ol li ol li {
	list-style-type: lower-alpha;
}
dt {
	font-weight: bold;
	padding: 0;
	margin: 0;
}
table, fieldset {
	margin: 0 0 1.65em 0;
}
h1, h2, h3 {
	font: bold 1.272em/1.1em "Helvetica Neue", Helvetica, Arial, sans-serif; /* 36px */
	letter-spacing: -.01em;
	margin: 0 0 1.297em 0;
	text-transform: uppercase;
 	color: #76871b;	
	border-bottom: 1px solid #f0ee94;
}
body.start h1 {
	border-bottom: 0;
}
h2, h3 {
	border-bottom: 0;
}
h3 {
	text-transform: none;
}
h4 {
	font: bold 1.286em/1.1em "Helvetica Neue", Helvetica, Arial, sans-serif; /*18px*/
	margin: 1.278em 0;
}
h5 {
	font: bold 1.143em/1.1em "Helvetica Neue", Helvetica, Arial, sans-serif;/*16px*/
	margin: 1.438em 0;
}
h6 {
	font: bold 1em/1.1em "Helvetica Neue", Helvetica, Arial, sans-serif;
	margin: 1.65em 0;
}
blockquote {
	margin: 0 0 0 4em;
	font-size: .857em;
	line-height: 1.917em;
}
a {
 	color: #76871b;
 	text-decoration: none;
 	outline: none;
}
a:visited {
 	color: #76871b;
}
abbr, acronym {
 	border-bottom: 1px dotted #333;
 	cursor: pointer;
}
code, kbd, samp, pre {
	font-family: "Courier New", Courier, monospace;
}
pre, pre p {
	margin: 1.5em 0;
	font-family: "Courier New", Courier, monospace;
	line-height: 1.1em;
}
em {
 	font-style: italic;
}
strong {
	font-weight: bold;
}
del {
	text-decoration: line-through;
}
ins {
	text-decoration: underline;
}
sup {
	font-size: .75em;
	margin: 0 0 .15em 0;
	padding: 0;
	line-height: 1em;
}
sub {
	font-size: .75em;
	margin: .15em 0 0 0;
	padding: 0;
	line-height: 1em;
}
.green {
	color: #76871b;
}
/*------------ TABLES ----------------*/
table {
	border: 0;
	border-collapse:collapse;
	border-spacing:0;
	padding: 0;
}
tr {
	background-color: #FFF;
	cursor: pointer;
}
tr:hover {
	background-color: #EAEAEA;
}	
th {
	padding: 2px 5px 5px 5px;
	font-weight: bold;
	text-align: left;
	background-color: #FFF;
	border-width: 0 0 1px 0;
	border-style: solid;
	border-color: #666;
}
td {
	padding: 2px 5px;
	border: 0;
}
.clearfix:after {
	content: ".";
	display: block;
	height: 0;
	width: 100%;
	visibility: hidden;
	display: none;
	clear: both;
}
/*-------------- FORMS ----------------*/
form {
	margin: 0;
	padding: 0;
}
fieldset {
	width: 100%;
	padding: 0;
	margin: 1.5em 0;
	border: 0;
}
fieldset legend {
 	display: none;
}
fieldset.stacked input[type="hidden"], fieldset.inline input[type="hidden"] {
	border: 0;
	background-color: transparent;
	display: none;
}
input.radio, 
input.checkbox, 
input[type=radio],
input[type=checkbox],
fieldset ul li input.radio, 
fieldset ul li input.checkbox,
fieldset ul li input[type="radio"], 
fieldset ul li input[type="checkbox"] {
	border: 0;
	background-color: transparent;
	background-image: none;
	margin-top: .2em;
}
fieldset div {
	clear: both;
	margin: 1.5em 0;
	height: 100%;
}
fieldset div:after {
	content: ".";
	display: block;
	width: 100%;
	clear: both;
	height: 0;
	visibility: hidden;
}
fieldset div.navigationSet {
	margin: 2em 0 0 0;
}
fieldset.inline div.navigationSet {
	padding-left: 13.1em;
}
label {
	font-size: 1.167em; 
	font-family: Arial, sans-serif;
	line-height: 1.167em;
	padding: 3px .35em 0 0;
}
fieldset.inline label {
	width: 11em;
	display: block;
	clear: left;
	float: left;
	font-weight: normal;
}
fieldset div em, em.required {
	font-weight: normal;
	font-style: normal;
	font-size: .9em;
	line-height: 1.2em;
	color: #666666;
}
fieldset div em, em.required {
	font-weight: bold;
	font-size: 16px;
	color: red;
}
div.errors {
	background-color: #fcfbdd;
	border: 1px solid #92916a;
	color: red;
	padding: 5px;
}
input, select, textarea {
	padding: 1px;
	color: #000000;
	font-size: 1.077em;
	font-familt: Arial, sans-serif;
	line-height: 1em;
	color: #333;
	border-width: 1px;
	border-style: solid;
	border-color: #333333 #999999 #999999 #333333;
	width: 16em;
	background-color: #FFFFFF;
	outline: none;
	font-weight: normal;
}
input:focus, 
select:focus, 
textarea:focus,
input.focus, 
select.focus, 
textarea.focus,
input:active, 
select:active, 
textarea:active {
	background-color: #fcfbdd; 
	border-width: 1px;
	border-style: solid;
	border-color: #266b75 #CCCCCC #CCCCCC #266b75;
	outline: none;
}
select[multiple="multiple"], 
select.multiple {
	border: 1px solid #666666;
	width: 11em;
}
fieldset.inline input.percent, 
fieldset.inline input.short,
fieldset.stacked input.percent, 
fieldset.stacked input.short {
	width: 5em;
}
textarea {
	font: 1em Arial, sans-serif;
	width: 240px;
}
input.checkbox,
input.radio {
	border: 0;
	background-color: transparent;
} 
input[type="submit"], 
input[type="button"],
input.button {
	background-color: #f7f6c9;
	color: #000;
	border-width: 2px;
	border-style: solid;
	border-color: #fcfbdd #888771 #888771 #fcfbdd;
	padding: 2px 6px 2px 10px;
	display: inline;
	float: none;
	width: auto;
	clear: none;
	margin: 0;
	padding: 5px 10px;
	outline: 0;
	font-weight: bold;
}
fieldset.inline input, 
fieldset.inline select, 
fieldset.inline textarea {
	float: left;
	clear: none;
	display: block;
}
ul.inlineValueSet, 
ul.inlineValueSet li, 
ul.stackedValueSet, 
ul.stackedValueSet li {
	list-style-type: none;
	list-style-image: none;
	display: block;
	margin: 0;
	padding: 0;
}
fieldset.inline ul {
	float: left;
	clear: none;
	width: 23em;
}
fieldset.stacked ul {
	height: 100%;
	clear: left;
}
fieldset.stacked ul:after {
	content: ".";
	display: block;
	width: 100%;
	clear: both;
	visibility: hidden;
	height: 0;
}
fieldset.inline ul.inlineValueSet {
	float: left;
	clear: none;
}
fieldset ul li input,
fieldset ul li select,
fieldset ul li textarea {
	float: left;
	clear: none;
	width: auto;
}
fieldset.inline ul li label {
	font-size: 1.1em;
	margin-top: .2em;
}
ul.inlineValueSet li {
	float: left;
	clear: none;
}
fieldset.stacked ul.inlineValueSet li {
	display: block;
	width: auto;
}
ul.inlineValueSet li label {
	width: auto;
	float: left;
	clear: none;
	font-weight: normal;
	margin: 0 .25em;
}
fieldset.stacked ul.stackedValueSet label {
	margin-top: 0;
	margin-bottom: 0;
}
ul.stackedValueSet li {
	float: none;
	clear: both;
}
ul.stackedValueSet li label {
	width: auto;
	float: left;
	clear: none;
	margin: 0 .25em;
	font-weight: normal;
}
ul.stackedValueSet li input {
	float: left;
	clear: none;
	margin-right: .25em;
}


/*----------LAYOUT------------*/

.float-right {
	float: right;
	margin: 0 0 10px 10px;
}
body {
	width: 100%;
	padding: 0;
	margin: 0;
	background-color: #edebe6;
	text-align: center;
}
#fixed-width-wrapper {
	width: 980px;
	margin: 25px auto;
	background-color: #FFF;
	text-align: left;
	position: relative;
}
#masthead {
	width: 950px;
	padding: 15px 15px 0 15px;
	margin: 0;
	background: #FFF url(../images/mastheadBg.gif) no-repeat scroll top left;
}
.masthead-image {
	display: block;
	clear: both;
}
#logo {
	float: left;
	margin-bottom: 5px;
}
#main-nav {
	width: 725px;
	height: 40px;
	float: right;
	background-color: #f7f6c9;
	margin: 5px 5px 5px 0;
	padding: 0;
	overflow: hidden;
}
#main-nav li {
	display: block;
	margin: 0;
	padding: 0;
	float: left;
}
#main-nav a {
	display: block;
	text-transform: uppercase;
	color: #77881c;
	font-size: 1.272em;
	font-weight: bold;
	padding: 8px 17px;
	background: transparent url(../images/mainNavDivider.gif) no-repeat scroll top right;
}
#main-nav a.current {
	color: #bd0900;
}
#main-nav a:hover {
	background-color: #f6f5b2;
}
#sign-in {
	position: absolute;
	top: -16px;
	right: 0;
}
#sign-in a, #sign-in a:hover {
	background-color: transparent;
	background-image: none;
	text-transform: none;
	text-decoration: underline;
}
#main-nav #contact-menu-item {
	background: 0;
}
#pageContents {
	clear: both;
	width: 920px;
	padding: 0 25px 25px 35px;
	margin: 0;
	background: #FFF url(../images/pageContentsBg.gif) repeat-y scroll top left;
	overflow: hidden;
}
#main {
	width: 400px;
	float: left;
	margin: 0 10px 0 203px;
	padding-bottom: 30px;
}
* html #main {
	display: inline;
}
body.products #main {
	width: 665px;
	background: transparent url(../images/productsMainBg.gif) repeat-y scroll top left;
	margin-left: 198px;
	margin-bottom: -2000em;
	padding: 0 20px 2000em 20px;
}
body.start #main {
	width: 311px;
	margin-left: 215px;
}
#sub-nav {
	width: 191px;
	float: left;
	margin: 35px 0 0 -618px;
	padding: 0 10px;
}
body.products #sub-nav {
	margin-left: -915px;
}
body.start #sub-nav {
	width: 150px;
	margin-left: -517px;	
	margin-top: 0;
	background-color: #f7f6c9;
	padding-top: 10px;
}
body.start #sub-nav h3 {
	text-transform: none;
	font-weight: normal;
	border-bottom: 1px solid #999;
	padding-bottom: 10px;
}
#sub-nav ul {
	margin: 1.5em 0;
	padding: 0;
}
#sub-nav ul li ul {
	margin: 0;
}
#sub-nav ul li {
	margin: 0;
	padding: 0 0 0 10px;
	list-style-type: none;
	background-image: url(../images/subNavBullet.gif);
	background-repeat: no-repeat;
	background-position: 3px 6px;
}
#sub-nav ul li a {
	font-size: 1.09em;
	font-weight: bold;
}
#sub-nav ul li.current>a {
	color: #bd0900;
}

/*--- hide press release titles in sub nav list ---*/
#page82 ul {
	display: none;
}
#sidebar {
	width: 276px;
	float: left;
	background: transparent url(../images/sidebarBg.gif) repeat-y scroll top left;
	margin-bottom: -2000em;
	padding-bottom: 2000em;
	padding-left: 19px;
	padding-top: 25px;
}
.start #sidebar {	
	width: 330px;
	background: transparent url(../images/homeSidebarBg.gif) repeat-y scroll top left;
	padding-left: 25px;
	padding-right: 25px;
}
.sidebar-box {
	width: 156px;
	height: 70px;
	margin-bottom: 5px;
	padding: 10px 25px 10px 85px;
	background: transparent url(../images/sidebarBoxBg.jpg) no-repeat scroll top left;
}
.sidebar-box h2 {
	font-weight: normal;
	font-size: 16px;
	text-transform: none;
	margin-bottom: 0;
}
.sidebar-box p {
	margin: 0;
}
.sidebar-bix h2 a {
	display: block;
	width: 100%;
	height: 100%;
}
#footer {
	width: 950px;
	height: 50px;
	padding: 5px 15px 5px 15px;
	background: #FFF url(../images/footerBg.gif) no-repeat scroll bottom left;	
	text-align: center;
}
#footer-nav {
	display: inline;
	margin: 0;
	padding: 0;
}
#footer-nav li {
	display: inline;
	padding: 0 .3em;
	margin: 0;
}
#contact {
}
.address, .phone {
	padding-right: 10px;
}
.start .customer-category {
	height: 97px;
	background-color: #f7f6c9;
	padding: 5px 20px 5px 137px;
	margin-bottom: 15px;
}
.start .customer-category h3 {
	font-size: 24px;
	font-weight: normal;
	padding-bottom: 10px;
	border-bottom: 1px solid #76871b;
	margin-bottom: 10px;
}
.start #posts {
	background-image: url(../images/page-ids/01/p.jpg);
	background-repeat: no-repeat;
}
.start #professionals {
	background-image: url(../images/page-ids/01/Professionals.jpg);
	background-repeat: no-repeat;
}
/************FEEDBACK FORM**************/

#something {
	width: 200px;
	float: left;
	clear: none;
}
label {
	width: 160px;
	height: 15px;
	display: block;
	float: left;
	font-size: 10px;
	clear: none;
}
#input {
	width: 15px;
	height: 15px;
	display: block;
	float: left;
	clear: left;
}
.product {
	margin-left: 10px;
}


/************LANDING PAGE BOXES**************/

.product-cat {
	width: 300px !important;
	float: left;
	background-color: #f9f8d7;
	padding: 5px;
	margin: 10px;
	clear: none !important;
}
.product-cat h2 {
	font-size: 18px;
	font-weight: normal;
	text-transform: none;
	width: 300px;
	margin: 0 0 5px 0;
	border-bottom: 1px solid #d9dca8;
	background-image: url(../images/page-ids/02/bg.jpg);
	background-repeat: no-repeat;
}
.product-cat h2 a, .professional-cat h2 a, .investor-cat h2 a {
	display: block;
	width: 215px;
	padding: 25px 15px 25px 70px;

}