Left Aligned Wrapper

I’ve been trying to tweak the styling on http://beecycle-co-uk.domain-ref.http.xenon.lon.periodicnetwork.com/Products.aspx?category=2&product=8 for a while now, and for some reason that page’s #wrappper is aligned left, not center. I’ve picked through each element but I can’t see any reason for it to do that. Am I missing something?

Is this solved? I see the page aligned center (FF, Chrome, Opera)

*** WARNING *** I do not sugarcoat problems or suggest throwing silver bullet fixes at things. This post will be brutally honest with you and please take it in the context it is offered; I’m TRYING to be helpful.

That should be my new signature

I’m getting a horribly broken layout across the board here, Opera 11 and IE 6/7. IE8 and FF seem ok, Chrome is somewhere in the middle… and of course you have ZERO images off graceful degradation defeating the point of using image replacement on your menu.

Peeking under the hood, this is a NEW website, right? If so what’s with the tranny doctype? Transitional is for supporting old/outdated/half-assed coding techniques, not for building new sites… You appear to have 600k (mein gott!) of javascript… FOR WHAT? Just TRYING to make sure the page takes a day and a half to load? Your page size is a megabyte TOTAL – which in my book usually means you have a non-viable layout/codebase for deployment.

While much of that bloat can be blamed on the 300k of alpha transparency images (which I don’t consider viable for use on websites in the first place), when you have twice as much javascript as you do images, and a whopping total of 1049k in 53 separate files while only delivering 787 bytes of actual content – it’s time to throw some “gee ain’t it neat” scripting AND images away.

Digging deeper the 22k of markup is a sure sign something is amiss. There is only one content image present on the page, only two form elements, I find it highly unlikely that page should be more than 7-8k of markup… Again, much of that appears to be “javascript for nothing useful”, though the absurd ID names on links (id=“ct100_ct100_ct100_link1”?!? Descriptive…), outdated pagebuilding methods (clearfix?), fictional REL values (for that shadowbox thing that doesn’t even appear to work here) unnecessary elements, and form wrapping the entire page for lord only knows what…

Time to throw that ALL away and start over… starting over also meaning that mundane functions (like login/register) not be accessibility scripting train wrecks like:

href=“javascript:__doPostBack(‘ctl00$ctl00$ctl00$cntContent$LoginView1$LoginStatus2$ctl02’,‘’)”>Login / Register</a>

EXCELLENT example of “just say NO to scripting for nothing”… If you are going to use javascript to ‘enhance’ the page it should still work for those of us who either don’t have it enabled, enable it on a case by case basis, or intentionally block it; 70 million+ downloads of the latest NOSCRIPT plugin can’t be wrong.

I often say that CSS is only as good as the markup it’s applied to – and frankly what you have for markup is problematic at best… I would HIGHLY suggest throwing it ALL away and starting over from scratch as there is NOTHING there I would even TRY to save code-wise.

Though a LOT of that bloat is likely something whatever you are building your ASP nonsense with… there’s a reason I hate ASP, or more specifically the ‘markup creation’ tools for things like forms associated with it… this ‘problem’ is evident in that absolute DISASTER of a ‘viewstate’ hidden input. If you need to send 6k of values in a hidden INPUT, there is something hideously wrong with your server side script… AND you are likely sending information over the Internet that shouldn’t be sent!

So first order of business would be to clean up the markup – fixing things like the nonsensical H3’s in the sidebar (are those subsections of “Jelly worms” – of course not, so why are they H3) and stripping out all the pointless ID’s and bloated scripting.

As such, there is VERY little legitimate reason for the markup on that page to be much more than:


&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
&lt;html
	xmlns="http://www.w3.org/1999/xhtml"
	lang="en"
	xml:lang="en"
&gt;&lt;head&gt;

&lt;meta
	http-equiv="Content-Type"
	content="text/html; charset=utf-8"
/&gt;

&lt;meta
	http-equiv="Content-Language"
	content="en"
/&gt;

&lt;link
	type="text/css"
	rel="stylesheet"
	href="screen.css"
	media="screen,projection,tv"
/&gt;

&lt;link
	type="application/rss+xml"
	rel="alternate"
	href="Feed.ashx"
	title="BeeCycle News Feed"
/&gt;

&lt;title&gt;
	Jelly Worms &raquo; BeeCycle
&lt;/title&gt;

&lt;/head&gt;&lt;body&gt;

&lt;div id="pageWrapper"&gt;

	&lt;h1&gt;&lt;a href="default.aspx"&gt;WIGGOS&lt;span&gt;&lt;/span&gt;&lt;/a&gt;&lt;/h1&gt;

	&lt;div id="columnWrapper"&gt;

	&lt;div id="firstColumn"&gt;

		&lt;ul id="mainMenu"&gt;
			&lt;li class="home"&gt;&lt;a href="Default.aspx"&gt;Home&lt;span&gt;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
			&lt;li class="aboutUs"&gt;&lt;a href="AboutUs.aspx"&gt;About Us&lt;span&gt;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
			&lt;li class="schools"&gt;&lt;a href="Schools.aspx"&gt;Schools&lt;span&gt;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
			&lt;li class="fun"&gt;&lt;a href="Fun.aspx"&gt;Fun&lt;span&gt;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
			&lt;li class="shop"&gt;&lt;a href="Category.aspx"&gt;Shop&lt;span&gt;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
		&lt;/ul&gt;

		&lt;a
			href="Testimonials.aspx"
			title="See what our customers think"
			id="testimonialLink"
		&gt;Testimonials&lt;span&gt;&lt;/span&gt;&lt;/a&gt;
		
		&lt;hr /&gt;
		
		&lt;div class="borderTop"&gt;&lt;/div&gt;
		&lt;div class="borderSides"&gt;

			&lt;h2&gt;Jelly Worms&lt;/h2&gt;

			&lt;ul class="breadCrumbs"&gt;
				&lt;li&gt;&lt;a href="/Category.aspx"&gt;Shop&lt;/a&gt;&gt;&lt;/li&gt;
				&lt;li&gt;&lt;a href="/Category.aspx?category=2"&gt;Worms&lt;/a&gt;&gt;&lt;/li&gt;
				&lt;li&gt;&lt;a href="/Products.aspx?category=2&amp;product=8"&gt;Jelly Worms&lt;/a&gt;&lt;/li&gt;
			&lt;/ul&gt;

			&lt;div class="product"&gt;

				&lt;div class="summary"&gt;
					&lt;a href="/Uploads/Products/j.jpg"&gt;
						&lt;img src="/Uploads/Products/j_thumb.jpg" alt="View full-size" /&gt;
					&lt;/a&gt;

					In Stock &lt;span class="price"&gt;£2.00 each&lt;/span&gt;

	        &lt;form method="post" action="Products.aspx?category=2&amp;product=8"&gt;
		        &lt;fieldset&gt;
		        	&lt;input type="hidden" name="productId" value="jellyWorms" /&gt;
							&lt;input type="text" name="quantity"  value="1" /&gt;
							&lt;input type="submit" value="Add to Cart" /&gt;
						&lt;/fieldset&gt;
					&lt;/form&gt;
				&lt;!-- .summary --&gt;&lt;/div&gt;

				&lt;p&gt;
					Wriggly Jelly Worms - now these are horribly nice!
				&lt;/p&gt;&lt;p&gt;
					They are multi coloured, soft jelly, segmented tasty wormies - each	about 6 inches (15cm) long.&nbsp; So they are great for dangling and lowering  slowly into your mouth... well that`s what I do anyway.
				</p><p>
					Plus I`ve just tied a know in one!&nbsp; You can have hours of fun with	your wormy pal... and then eat the little blighter!
				&lt;/p&gt;

			&lt;!-- .product --&gt;&lt;/div&gt;

		&lt;!-- .borderSides --&gt;&lt;/div&gt;
		&lt;div class="borderBottom"&gt;&lt;/div&gt;

	&lt;!-- .firstColumn --&gt;&lt;/div&gt;
	
	&lt;hr /&gt;

	&lt;div id="secondColumn""&gt;

		&lt;ul class="userLogin"&gt;
			&lt;li class="login"&gt;&lt;a href="login.aspx"&gt;Login&lt;span&gt;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
			&lt;li class="register"&gt;&lt;a href="register.aspx"&gt;Register&lt;span&gt;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
		&lt;/ul&gt;

		&lt;div class="borderTop"&gt;&lt;/div&gt;
		&lt;div class="borderSides"&gt;

			&lt;div class="subSection categories"&gt;
				&lt;h2&gt;Categories&lt;span&gt;&lt;/span&gt;&lt;/h2&gt;
				&lt;ul&gt;
					&lt;li&gt;&lt;a href="/Category.aspx?category=11"&gt;Misc&lt;/a&gt;&lt;/li&gt;
					&lt;li&gt;&lt;a href="/Category.aspx?category=10"&gt;Seeds&lt;/a&gt;&lt;/li&gt;
					&lt;li&gt;&lt;a class="active" href="/Category.aspx?category=2"&gt;Worms&lt;/a&gt;&lt;/li&gt;
				&lt;/ul
				&lt;div class="subSectionbottom"&gt;&lt;/div&gt;
			&lt;!-- .subSection.categories--&gt;&lt;/div&gt;
			
			&lt;hr /&gt;

			&lt;div class="subSection cart"&gt;
				&lt;h2&gt;Cart&lt;span&gt;&lt;/span&gt;&lt;/h2&gt;
				&lt;p&gt;Your cart is empty&lt;/p&gt;
				&lt;a href="Cart.aspx"&gt;View Cart&lt;/a&gt;
			&lt;!-- .subSection.cart --&gt;&lt;/div&gt;

			&lt;hr /&gt;

			&lt;div id="registerPodCode"&gt;
				&lt;h2&gt;Register Pod Code&gt;&lt;span&gt;&lt;/span&gt;&lt;/h2&gt;
				&lt;p&gt;
					&lt;a href="Login.aspx"&gt;Login&lt;/a&gt; to register your pod code.
				&lt;/p&gt;
			&lt;!-- #registerPodCode --&gt;&lt;/div&gt;

			&lt;hr /&gt;

			&lt;div id="upgradeAccount"&gt;
				&lt;a
					href="tests.aspx"
					title="Take a test to upgrade your account and unlock products"
					class="test"
				&gt;Upgrade My Account&lt;span&gt;&lt;/span&gt;&lt;/a&gt;
				&lt;br /&gt;
				&lt;a
					title="Take a test to upgrade your account and unlock products"
					href="WhatAreTests.aspx"
					class="info"
				&gt;What's This?&lt;/a&gt;
			&lt;!-- #upgradeAccount --&gt;&lt;/div&gt;

			&lt;hr /&gt;

		&lt;!-- .borderSides --&gt;&lt;/div&gt;
		&lt;div class="borderBottom"&gt;&lt;/div&gt;

	&lt;!-- #secondColumn --&gt;&lt;/div&gt;

&lt;!-- #pageWrapper --&gt;&lt;/div&gt;

&lt;div id="footer"&gt;
	&lt;ul&gt;
		&lt;li&gt;&lt;a href="Privacy.aspx"&gt;Privacy Policy&lt;/a&gt;&lt;/li&gt;
		&lt;li class="last"&gt;&lt;a href="Terms.aspx"&gt;Terms and Conditions&lt;/a&gt;&lt;/li&gt;
	&lt;/ul&gt;
	&lt;a href="http://www.informaticschester.org.uk/"&gt;
		University of Chester Informatics Centre &copy;2006 - 2010
	&lt;/a&gt;
&lt;!-- #footer --&gt;&lt;/div&gt;

&lt;/body&gt;&lt;/html&gt;

IF you are going to bloat it out with scripting, get the page working WITHOUT the javascript FIRST, THEN enhance the user experience with the scripting. What you have there is SUPPLANTING the user experience with javascript – a recipe for failure.

I have time Sunday I can toss together the CSS for that and redo the images to show you exactly what I mean by unnecessary bloat in the design as well. (can I assume the rounded corners on testimonials is supposed to be on the menu as well?!?)

For what you have for a layout there is NO excuse to be using more than 100k TOTAL for HTML+CSS+Javascript+images, and you have ten times that! For a page of something semi-critical (an order form) that doesn’t even work scripting off!