I spent a bit of time today cleaning up the style formatting in the West Wind West Wind Web Store. The store has been designed primarily with Internet Explorer and while it worked reasonably well in FireFox there were a number of things that rendered significantly differently. So much so that the FireFox version was somewhat ugly. I've been slowly picking up tips on how to use explicit CSS styles for most things to force browsers into using roughly the same display formats.

The thing that's been giving me the most trouble are grid formats and even now I can't get the two browsers to render the formats the same.

One of the things I like to do for grids is have a solid outer border and lightly colored grid rows for the inside of the grid. Using BORDER=1 doesn't give you any control over this so a few styles are required. I started out with the following:

I started out with the following:

TABLE
{
 	BORDER-COLLAPSE: collapse;
}
TABLE.blackborder
{
	border-style:solid;
	border-width: 2px;
	border-color: black;
}
TD
{
     Border-collapse: collapse;
     border-color: LightGrey;
}
TH
{
	Border-collapse: collapse;
	font-weight: bold;
	text-align: center;
} 

If I apply blackborder style to my CssClass in a DataGrid:

<asp:datagrid cssclass="blackborder" cellpadding="4"
   id="dgItemList" runat="server"
    width="90%">
...
</asp:datagrid>

I get output like this:

http://www.west-wind.com/wwStore/itemlist.aspx

If you check this with IE and FireFox you'll see that IE renders the grid lines in lightgrey which is a lot more subtle than the black gridlines you see in FireFox.

It appears FireFox is not respecting the TD border-color tag unless the border-width is set. Firefox seems to use the Table's border color instead. Setting a border width in TD of course is problematic because it causes every cell on a form to take on that tag. That leaves setting the style (or creating a class to set) for each of the cells, which I'm not fond about.

Anybody see a different way to make this happen generically?

My workaround for the moment is to remove the rules and instead rely on the alternating color effect to provide the separation for readability. This works in some cases but not others. Here it works for both IE and FireFox:

http://www.west-wind.com/wwStore/itemlist_abstract.aspx

However on other forms this doesn't work so well. For example, if you add some items to the shopping cart with IE:

http://www.west-wind.com/wwstore/item.aspx?sku=WEBSTORE_NOSRC&Action=Add

Here grid lines would actually be beneficial.

Interestingly enough here I added some code to add a border-bottom of size 1px to each row. This works with FireFox, but Internet Explorer gleefully ignores it. With FireFox this form looks quite a bit nicer actually.

<tr class='gridnormal' style='vertical-align:top;border: solid 1px lightgrey;' >

The definition of the lines makes this look cleaner.

Button Formatting

Another area where IE and FireFox are different is in display of button elements. Frankly the default FireFox buttons more often than not look really crappy because they're too skinny by default. I also wanted a special button style for some of my forms to make the button operation a bit more obvious. I know, I know most people use image buttons, but I prefer to keep things lightweight.

I created a special button style that's a bit bigger than normal with Fat text:

.submitbutton
{
	font-weight:bold;
	height:35px;
	width:200px;
}

Unfortunately IE does some weird sizing trick on the button so it ends up looking like shit. FireFox's button looks reasonable since it apparently redraws at the proper size unlike IE which seems to simply take an image bitmap and resize it and pixelating the image in the process.

You can also use your own colors and backgrounds for buttons, which actually works pretty well:

.submitbutton
{
	font-weight:bold;
	height:35px;
	width:200px;
	background: DarkBlue;
	color: CornSilk;
	border: solid 2px Black;
}
.submitbutton:hover { Background:Cornsilk;color: darkRed; border: solid 4px DarkBlue;} 

Unfortunately IE doesn't support the hover, so while I now can have a simple themed button it can no longer be easily made to behave like a button. <sigh> In the end I went back to using the stock big button. When I get some time I'll have to create some image buttons.

HR tag

I wrote about the HR tag before - the default HR tag in Mozilla looks pretty crappy. Adjusting the style gives consistent results in both IE and FireFox.

HR 
{ color:DarkBlue; background: DarkBlue; border: 0; Height:1px;}

Explict Text Padding

I found that IE and FireFox have very different default values for text spacing. Usually this is not a big deal but it beomes pretty noticable if you have a table for links. For example, in any of the links above the Category list table originally looked fine in IE but absolutely horrible in FireFox. FireFox bunched up the links inside of the table very tightly and made the table look very busy. It took a while to find the right combination to make this look right which primarily involved using padding properties to leave some extra space and explicitly forcing block mode and turning off text-decoration. Alot of these things were handled by IE explicitly but are required manually by FireFox.

.menulink
{
    COLOR: White;
    FONT-SIZE: 8pt;
    FONT-WEIGHT: normal;
    TEXT-DECORATION: none ;
    display:block;
    width:155px;
    text-align:left;
    padding-top:2px;
    padding-bottom: 2px;
    padding-left: 4px;
}

Overall I'm Ok with how things turned out now, although there are a still a few open issues such as the gridlines dilemma. It's a pain to have these browser differences.

It sure would be great if the CSS standard would define default values for all settings and if (ha!) browsers actually implemented these default settings. That way we'd at least have a steady baseline.

I don't even want to think what things will look like in other browsers <g> - it'll work no doubt, but probably not be 'perfect'.