Free Consultation: +1 (888) 374 0906

Recently I spent way too much time trying to get consistent cross browser layout in a table. I thought this was a reliable method? I cursed at my computer. Borders on I went back to basics and re-wrote the table giving each element it's own cell. No more of this trying to group things together nonsense.

I pulled all of the formatting out of the table (widths, alignment etc) gave every cell a class and put all my formatting into my css. The result? A table that I could actually control!


Here is what I was trying to do:

And the HTML markup:
















FT sign up for the newsletter and save the tax">

Store Locator

[NumberOfItemsInBasket] Shopping Cart:
Naivgation Goes here


My CSS had the background image in the class for the tr (which was not displaying consistently) and various formatting on each of the span classes which were not netting the correct results and had things ALL over the place in my various browsers (which included three versions of IE).
After I thought I was going to go completely bonkers I put each element I was trying to control in it's own cell, gave each cell a class. Removed my formatting in the table itself and then put it all into the css.

What happened was I had a simpler table to read and update because I wasn't searching all over the place trying to figure out what was what.

The HTML markup:














FT sign up for the newsletter and save the tax">
Naivgation Goes here


And the CSS:

.ui_locator{background: transparent url(/images/ft_storelocator.jpg) no-repeat bottom right;
width:124;
text-align:right;
height:43;
vertical-align: bottom;}
.ui_cart{background: transparent url(/images/ft_cart.jpg) no-repeat bottom center;
width:209;
vertical-align:bottom;
text-align:right; }
.ui_login{background: transparent url(/images/ft_login.jpg) no-repeat bottom left;
width:315; }

a.storelocator,
a.carttext,
.cartitems{display: block;
font-size: 13px;
text-decoration: none;
font-weight: bold;
color: #666;
padding: 0 5px 5px 0; }
a.carttext,
.cartitems{float: right; }
.cartitems{color: #036;}
.loginform{display: block; width: 200px;}


As you can see this is much nicer to read and (I should have screen capped my mess) is giving me nice and consistent results. Lesson learned... when in doubt go back to basics. A lesson I learned very early on was when trying things always remove what you tried if it didn't work. It is much easier to track down problems in the simple trustworthy code than with the 5 things you did to try and make it work and then trace which ones are affecting what.

* the markup in this post is a simplified version of the original code. Much of it was originally our asp CommerceCM and SiteCM designer controls.
Write A Comment

Post A Comment

 
Submit

Sign up for email updates from our team

View Our Privacy Policy or Terms of Use