Don’t let anyone ever tell you LaGarde’s StoreFront produces clean HTML. Far from it! Most modern browsers will work around the duplicated attributes, missing tags and non-compliant HTML. But, if your site is targeted to users who may be using assistive devices, you or your technical staff have a lot of cleanup work ahead of you. Additionally, some of this non-compliant HTML affects your design in very annoying ways.
One problem StoreFront has is with the TopSubBanner. To start with, it’s named TopBar in the configuration tool, but the files are named TopSubBanner, and the documentation refers to TopSubBanner. Maybe they’ll invest in a proofreader for version 7.
The display of TopSubBanner is controlled by a checkbox in the configuration tool. This checkbox determines whether or not the contents of TopSubBanner.ascx are displayed. So far, so good, right? So much you know.
The display of the control is actually handled by setting the visibility of the table cell. The control is still loaded and processed (a waste of time and CPU cycles), but visibility is controlled at the HTML level. You can see in this snippet below:
<tr>
<td class=”TopSubBanner” id=”TopSubBannerCell” width=”100%” colSpan=”3″>
<!– Top Sub Banner Start –>
<uc1:topsubbanner id=”TopSubBanner1″ runat=”server”></uc1:topsubbanner>
<!– Top Sub Banner End –>
</td>
</tr>
<tr>
If you choose to display TopSubBanner (or TopBar), this is all well and good. However, if you turn off the display, when your page is rendered, the final HTML is thus:
<tr>
</tr>
An empty pair of TR tags. Not compliant at all! The effect differs with the browser. In some older browsers (and don’t think people aren’t still using them) this will throw your page layout way off. IE will compensate by inserting the missing TD tags, leaving you with a blank row (1 px in height, unless you’ve added additional padding or spacing or such)–see below.
FireFox ignores the tags, which in this case is a better way to handle it.
There are a couple fixes, but unfortunately you will have to make these changes on every page. One simple solution, if you won’t be using the TopSubBanner at all, is to turn off the visibility of the TR tags with a simple HTML modification:
<tr runat=”server” visible=”false”>
<td class=”TopSubBanner” id=”TopSubBannerCell” width=”100%” colSpan=”3″>
<!– Top Sub Banner Start –>
<uc1:topsubbanner id=”TopSubBanner1″ runat=”server”></uc1:topsubbanner>
<!– Top Sub Banner End –>
</td>
</tr>
This will prevent the blank TR tags from showing, and correct the IE rendering of the code. Another fix that will allow toggling of the TopSubBanner with proper display is a little more involved. This might be overkill on a single site, but for developers with the XE version, you might want to update the source files which are copied when a new store is created (be sure to keep backups).
First, give the TR tags an ID attribute:
<tr id=”TopSubBannerRow”>
Then, open the file CWebPage.vb, and do a find for TopSubBannerCell. The first entry (around line 327 in my version) is what sets the visibility of the table cell. Inside the If…Then block, add the following code:
dim TempRow as HtmlTableRow
TempRow = CType(PageSubTable.FindControl(“TopSubBannerRow”), HtmlTableRow)
TempRow.Visible = False
TempRow = Nothing
Compile the code and load your page. The page should display properly, and if the TopSubBanner is set to not display, you should not have an empty set of TR tags. All you need to do from here is give every TR tag which contains the TopSubBannerCell the same ID (FrontPage’s Find command can be used to search all files for TopSubBannerCell, which makes ife easier). When done, compile and you should be good to go.
I’m not sure who’s supposed to check this (if anyone), but this never should have left the farm.