HTML Layout, ASP.Net, Browser Difference…there had to be a better way

Question

First of all let me say I'm not much of a design guy. Most of the work I do is usually on the backend/infrastructure (WCF, DB, Business Objects). We don't have a formal web designer unless you consider someone with a communication major who uses frontpage type programs to design web pages a web designer. I know basic HTML of course but i have not kept up with the latest design technology/standards in HTML: XHTML, CSS Design, etc...

Today I was given the task of some pretty major design changes of some of our webforms. The pages were a total mess! Most of the alignment was done using nested tables. I got everything to look right and it looked fine in IE7. Our site says we support both Firefox & IE. So I go and try to and load it in Firefox (latest version) and boy did it look messed up. At first I thought....well the browsercaps must not be installed in the machine.config on my machine (which is a mess in itself the way its maintained, so I go to codeproject, which unfortunately where I think its maintained, and get the latest version (which I think is from 2006) and it makes no difference. So then I go try a slew of different browsers: Opera, Chrome, and Safari. It looks slightly different on them but well within acceptable limits. Firefox is really the only browser that looks messed up. So after trying and trying all kind of different layout options (which many worked for all browser but not Firefox) I was getting very frustrated and about to pull out the little hair I had.

After going through all of this.....I'm thinking THERE HAS TO BE A BETTER WAY! How can you use tables for precise layout? There are to many differences in browser rendering especially when your layout requirements are very precise (for example there was code where they were attempting to draw draw a line under a custom header by using the bottom border on each TD in the header section which is one of a few areas Firefox was screwing up). I know the layout can be accomplished with CSS (even though I've never done it). Please tell me its a lot more browser independent or at least give me some pointers so I know the code we are writing will be browser complaint....which I don't know how hard it is since how many browsers are 100% ACID complaint?

Any pointers/suggestions would be appreciated.

Answer 1

Like Meatball said, "Welcome to web development!"

That said, CSS and standards-based web development should definitely help. Standards-based development generally avoids the use of tables as a layout option, and confines their use to tabular data (some would argue that you should NEVER use tables, ever, in a standards-based design...however anyone who has done web development for any significant period of time and has any significant skill will tell you to save some headache, and use tables for what they were designed for: tabular data...information normally displayed as rows and columns.)

An excellent site that should get you started is A List Apart. It is a great repository of solutions to all of the most common, and many fairly obscure, web design problems.

Having lived the web design nitemare for most of my career, I have learned one little trick that might help you out. Intriguingly enough, Opera is actually the most standards-compliant browser I have ever used. It was the first to pass the Acid 2 test, and is also currently the only browser that passed Acid 3 100%. I've learned that by designing and testing a site in Opera first helps me achieve a good, fully standards-compliant baseline for CSS and XHTML. Once you have a site looking perfect in Opera, move on to Firefox, IE7/8, Chrome, etc. and add tweaks or hacks as needed to get everything looking correct in all of the browsers you need to support. Doing this has saved me hours, sometimes days or weeks even, of messing around trying to get FF and IE to play nice with each other, while never actually achieving any kind of standards-based compliance.

Answer 2

As you say there are much better ways to doing web design. However, you're in a bit of a pickle in that you're trying to maintain an existing project. I don't think that it would be wise to totally rip it apart and try to start from scratch.

Having said that. I think that you could still use CSS principles to your advantage to accomplish things like borders and backgrounds.

I would recommend that you spend some time teaching yourself CSS and HTML. There are some good sites like w3schools.com where you can learn about it and practice various methods.

You may even want to download a trial version of Adobe Dreamweaver and/or Expression Web as those are good WYSIWYG web editors with built-in support for CSS and standards-based layouts.

Answer 3

Hey Buddy, this is right time u dig into CSS and XHTML;

To write browsers compliant markup (XHTML) , style (CSS) and behavior(Javascript) u need good amount of experience with lots of experiments, and patience ( Especially with IE).

The golden rule I follow is code the markup taking firefox as the base and use its plugins ( Mentioned Below) to check the W3C complaint markup and for each change check in all the browsers, most of the time would go to make it work in IE , use CSS hacks ( LINK1 ) use Conditional Comments..

Avoid using TABLE for forms design, use divs ,li,ul,ol,span tags

Browser incompatibility arises because different browsers read HTML differently and all u need little experiments and tools.

TOOLS : HTML Validator Fire Bug for Firefox IE Developer for IE

Some Good Articles to kick start

Browsers Test and tools @ Smashing Magazine UI Patterns Designing Web Forms

In parallel make ur basics strong on DOM , XHTML , CSS , web usability ; There are many books ( CSS Mastery , Eric Meyer Books) ; sites like a list apart , Smashingmagazine, and the list goes on...

Answer 4

Firefox in my opinion is the best tool for learning html and CSS because of the excellent Firebug add-in. If you install this add in it will allow you to inspect elements and see exactly what css styles are being applied to the element, and in what order, and edit them in real time. I did not get a good understanding of CSS until started using Firebug.

Also each browser include default styles for all html elements. It may be helpful to introduce a style sheet which will reset all the base styles to a set standard. Try googling reset.css you should find a multitude of examples.

Answer 5

Folks answered before should gave enough information and details for you to kick start into web layout engineering. Maybe I could have some experience to share with you.

Start with standards. In other words, most things accepted in firefox should be ok with the standard (of coz you can do standard check). But you sometimes don't really have to complete everything before you move on. My normal practice is, I start with the largest components within the page, in firefox, and then you can first fix those "hacks" in IE for those things you have. And then dig into details in firefox, and then fix those for IE, and dig into even more details and so on....

Actually we have only two camps in the world, one is M$ IE, and one is W3C standard. In almost 99% of normal usage, those work in firefox should work in safari, opera etc.

Answer 6

If you want your tables to be formatted consistently, try these HTML and CSS techniques.

1) Use the CSS property table-layout:fixed

Example:

<table cellpadding="2" cellspacing="2" style="table-layout:fixed;width:400px;">

This will ensure that the table size stays errr fixed.

2) Use COL WIDTH

<table cellpadding="2" cellspacing="2" style="table-layout:fixed;width:400px;">
<col width="50" /><col width="50" /><col width="200" /><col width="100" />

This will keep the columns consistently sized.

3) Avoid using the HEIGHT attribute on the table, rows and cells.

4) Use TBODY for styling it's contained elements.

<table cellpadding="2" cellspacing="2" style="table-layout: fixed; width: 400px;">
        <col width="50" />
        <col width="50" />
        <col width="200" />
        <col width="100" />
        <tbody>
            <tr>
                <td>Stuff</td>
                <td>and</td>
                <td>Nonsense</td>
                <td>!</td>
            </tr>
    </table>

And in your CSS file:

tbody td {
   background-color: yellow;
}

There are other things, of course, but this should make life slightly better in the immediate term.

I will leave the argument between using column or not for others. I don't use them, but that doesn't mean they are useless for presentational code.

Answer 7

You have gotten some good advice from many answers here. I want to add that you should look into a CSS grid system that will support cross browser efforts while reducing your time tweaking the layouts.

960 CSS grid allows you to correctly align the elements on your page. By it's very nature you get a clean, uniform presentation that is preserved between FF and IE 6,7,8. You easily get rid of many of the tables that you are using now. Just place your datagrids, menus and other items in the CSS columns and you will immediately see the results.

You'll be surprised how much mileage you'll get out of the applying the CSS grid as it will give you the right proportions that are considered good layout.