I was working on a new theme for an existing site and while adjusting the CSS settings for a Views Slideshow, something very odd happened.
The site is msvehicles.com
You will need to login to see the new theme I am working on:
u:tester
p:tester
I looked at the HTML output and I can see that for some strange reason the Footer was placed inside the div that contains the slideshow.
What I changed immediately before I noticed the problem was the contents of the "rewrite the output of this field" field in views.
Here is what is inside:
<div id="transparency"></div>
<div id="news_item">
<h2>[title]</h2>
<p>[teaser]</p>
<h3>[view_node]</h3>
</div>The only other field I am using is the image field for that content type ([field_blog_image_fid]) and that is placed before the other fields are called. I have cleared all of the site caches, using the link in both the admin menu as well as the one on the performance page.
Has anyone seen anything like this before?
Comments
I just recreated the
I just recreated the slideshow in views and it looks like the footer is included in the rotation as a "slide".
Has anyone had an issue similar to this before using slideshow?
You have a broken div.
You have a broken div. Copypasta the HTML source into the W3C validator (or point the validator at the URL if it's public) to find it if it's not immediately obvious.
Orlando, FL Web Developer | http://www.garethsprice.com/
Thanks. I ran it through
Thanks. I ran it through Validator and it did everything but yell at me. Going through the errors now. I know it has something to do with the view. If I remove the block with the view the problem goes away.
I've gone through both the
I've gone through both the HTML output and the page.tpl.php. Ran both through W3 HTML validator. No broken DIVs reported. I'm going to go through the View again and see what is triggering it. I thought I had used the Views Slideshow on another site with the same sort of feature and it worked there but when I reviewed the settings for the view I realized that I was using "cycle" on the one that is working properly as opposed to "Slideshow".
Eventually I will figure out what is breaking the page.
I hope.
Okay, so after playing with
Okay, so after playing with the view and testing each field, it turns out that using [teaser] in "Rewrite the output of this field" breaks the layout. Not sure why. I've tried checking the "Strip HTML Tags" to no avail.
I haven't been able to find a broken DIV anywhere else in the page.tpl.php file so I don't know what's causing it to come apart. Anyone else have an issue like this?
I was working on adjusting
I was working on adjusting some of the CSS settings and all of the sudden it stopped working with [view_node] as well. I'm pretty much at a loss as to why. I've cleared all of the caches and tried reloading the Views module.
I got nothing. For some odd reason, when I add either [teaser] or [node_view] to my "Rewrite the output of this field" HTML, it breaks everything. Here is my page.tpl.php code in case someone sees something I missed:
<?php // $Id: page.tpl.php,v 1.1.2.1 2009/02/24 15:34:45 dvessel Exp $ ?>
<!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" xml:lang="<?php print $language->language ?>" dir="<?php print $language->dir ?>" xmlns:og="http://opengraphprotocol.org/schema/" xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
<title><?php print $head_title; ?></title>
<?php print $head; ?>
<?php print $styles; ?>
<?php print $scripts; ?>
<!-- START GSA HGAC DROP MENU CODE -->
<script type="text/javascript">
var cssmenuids=["cssmenu1"] //Enter id(s) of CSS Horizontal UL menus, separated by commas
var csssubmenuoffset=-1 //Offset of submenus from main menu. Default is 0 pixels.
function createcssmenu2(){
for (var i=0; i<cssmenuids.length; i++){
var ultags=document.getElementById(cssmenuids[i]).getElementsByTagName("ul")
for (var t=0; t<ultags.length; t++){
ultags[t].style.top=ultags[t].parentNode.offsetHeight+csssubmenuoffset+"px"
var spanref=document.createElement("span")
spanref.className="arrowdiv"
spanref.innerHTML=" "
ultags[t].parentNode.getElementsByTagName("a")[0].appendChild(spanref)
ultags[t].parentNode.onmouseover=function(){
this.style.zIndex=100
this.getElementsByTagName("ul")[0].style.visibility="visible"
this.getElementsByTagName("ul")[0].style.zIndex=0
}
ultags[t].parentNode.onmouseout=function(){
this.style.zIndex=0
this.getElementsByTagName("ul")[0].style.visibility="hidden"
this.getElementsByTagName("ul")[0].style.zIndex=100
}
}
}
}
if (window.addEventListener)
window.addEventListener("load", createcssmenu2, false)
else if (window.attachEvent)
window.attachEvent("onload", createcssmenu2)
</script>
<!-- END GSA HGAC DROP MENU CODE -->
<!-- Start Google Site verification -->
<meta name="google-site-verification" content="liE2fQ2XWD4TqupOp2g29xJgM7a1UvOzQ9RFf10P6TI" />
<meta name="google-site-verification" content="njZ6lyhHssYfg0ivBxrsfaWOvvpM8L3liEHaPJBL4pY" />
<meta name="google-site-verification" content="trEJVVtopuY_85YVB_e2r-s2hts3F0imYh2qkXJEWtc" />
<!-- End Google Site Verification -->
</head>
<body class="<?php print $body_classes; ?> show-grid">
<!-- START HEADER WRAPPER -->
<div id="wrapper_header">
<!-- START PAGE HEADER -->
<div id="page_header" class="container-12">
<!-- START LOGO -->
<?php if ($logo) { ?>
<div id="logo" style="">
<a href="<?php print $base_path ?>" title="<?php print t('Home') ?>">
<img src="<?php print $logo ?>" alt="<?php print t('Home') ?>" />
</a>
</div>
<?php } ?>
<!-- END LOGO -->
<!-- START PARTNER LINKS -->
<div id="partner-links" class="grid-6">
<img src="<?php print $base_path; ?>sites/all/themes/msv3.5/images/partner_links.png" width="456" height="25" usemap="#Map" />
<map name="Map" id="Map">
<area shape="rect" coords="31,2,135,21" href="http://www.matthewsbuses.com" target="_blank" alt="Matthews Buses, Inc. Website" />
<area shape="rect" coords="151,2,262,22" href="http://www.matthewsmobile.com" target="_blank" alt="Matthews Mobile Media Website" />
<area shape="rect" coords="291,4,439,24" href="http://www.rifledair.com" target="_blank" alt="Rifled Air Conditioning Website" />
</map>
<!-- Top Links -->
<div id="top-links" class="right"><?php print $top_links; ?></div>
<!-- 800 Number -->
<div id="800number" class="right">
<img src="http://msvehicles.com/sites/all/themes/msv3.5/images/800-number.png" alt="877-905-4678" width="300" height="60" />
</div>
</div>
<!-- END PARTNER LINKS -->
<!-- START GSA-HGAC Block -->
<div id="gsa-hgac-block" class="grid-3">
<div class="gsa-block">
<ul id="cssmenu1">
<li class="tab"><a href="#">GSA</a>
<ul><li><?php print $gsa; ?></li></ul>
</li>
<li class="tab"><a href="#">HGAC</a>
<ul><li><?php print $hgac; ?></li></ul>
</li>
</ul>
</div>
</div>
<!-- END GSA-HGAC Block -->
</div>
<!-- END PAGE HEADER -->
</div>
<!-- END HEADER WRAPPER -->
<!-- START WRAPPER CONTENT -->
<?php if($is_front != true){?>
<!-- START WRAPPER CATEGORY -->
<div id="wrapper_category_menu">
<div id="page_category_menu" class="container-12">
<!-- Block Title -->
<div id="category_title" class="grid-9"><h1>The Matthews Specialty Vehicles Product Line</h1></div>
<!-- GSA Advantage Block -->
<div id="gsa_advantage" class="grid-3">
<a href="https://www.gsaadvantage.gov/advantage/s/search.do?q=0:0matthews%20specialty%20vehicles&q=0:0MATTHEWS%20SPECIALTY%20VEHICLES&searchType=1&db=0" target="_blank"><img src="<?php print $base_path; ?>sites/all/themes/msv3.0/images/gsa-advantage-logo.jpg" border="0" /></a>
</div>
<div style="clear: both;"></div>
<!-- START CATEGORY MENU -->
<div class="grid-2"><?php print $category_col_1; ?></div>
<div class="grid-2"><?php print $category_col_5; ?></div>
<div class="grid-2"><?php print $category_col_2; ?></div>
<div class="grid-2"><?php print $category_col_3; ?></div>
<div class="grid-2"><?php print $category_col_4; ?></div>
<div class="grid-2"><?php print $category_col_6; ?></div>
<!-- END CATEGORY MENU -->
</div>
</div>
<!-- END WRAPPER CATEGORY -->
<div id="wrapper_content">
<!-- START CONTENT BLOCK -->
<div id="page_content" class="container-12">
<!-- PRINT MESSAGES -->
<?php print $messages; ?>
<!-- PRINT BREADCRUMB -->
<?php if ($breadcrumb): ?><?php print $breadcrumb; ?><?php endif; ?>
<!-- PRINT TITLE -->
<?php if ($title): ?><h1 class="title" id="page-title"><?php print $title; ?></h1><?php endif; ?>
<!-- PRINT TABS -->
<?php if ($tabs): ?><div class="tabs"><?php print $tabs; ?></div><?php endif; ?>
<!-- PRINT HELP -->
<?php print $help; ?>
<!-- START PAGE CONTENT -->
<div class="grid-8"><?php print $content;?></div>
<!-- END PAGE CONTENT -->
<!-- START SIDEBAR -->
<div id="sidebar_content" class="grid-3"><?php print $sidebar; ?></div>
<!-- END SIDEBAR -->
</div>
<!-- END CONTENT BLOCK -->
</div>
<?php }else{?>
<!-- START WRAPPER INDEX (Only used on front page of website ) -->
<?php if($is_front == true){ ?>
<div id="wrapper_index_splash">
<div id="index_splash" class="container-12">
<div id="news_feed" class="grid-9 alpha omega"><?php print $news_feed; ?></div>
<!-- INDEX SIDE MENU -->
<div id="index_side" class="grid-3 alpha omega">
<div id="side_container">
<div id="side_top_cap"></div>
<?php print $index_side; ?>
<div id="side_bott_cap"></div>
</div>
</div>
<!-- INDEX SIDE MENU -->
</div>
</div>
<?php } ?>
<!-- END WRAPPER INDEX-->
<?php }?>
<!-- END WRAPPER CONTENT -->
<!-- START WRAPPER FOOTER -->
<div id="wrapper_footer">
<div id="page_footer" class="container-12">
<div class="grid-2"><?php print $footer_col_1; ?></div>
<div class="grid-2"><?php print $footer_col_2; ?></div>
<div class="grid-2"><?php print $footer_col_3; ?></div>
<div class="grid-2"><?php print $footer_col_4; ?></div>
<div class="grid-2"><?php print $footer_col_5; ?></div>
<div class="grid-2"><?php print $footer_col_6; ?></div>
<div id="address_bug" class="grid-12"><?php print $footer; ?></div>
</div>
</div>
<!-- END WRAPPER FOOTER -->
<!-- CLOSURE -->
<?php print $closure; ?>
<!-- BEGIN GETCLICKY.COM CODE -->
<script src="http://static.getclicky.com/js" type="text/javascript"></script>
<script type="text/javascript">clicky.init(245101);</script>
<noscript><p><img alt="Clicky" width="1" height="1" src="http://in.getclicky.com/245101ns.gif" /></p></noscript>
<!-- END GETCLICKY.COM CODE -->
</body>
</html>