I really tire of dealing with so called “web standards”.  Why cannot the browsers authors come together and finally make something that works.  At the same time, “fix” the so-called standards, such as the stupid box model!  Why not have a layout element working as grids of various cell dimensions, borders and padding?  

After years of battling these “standards”, I am getting frustrated at the amount of wasted time trying to make things work in different browsers and attempting to use the fragile web standards.  If it were up to me, I would scrap the standards and make IE the standard and work to fix its issues.

Where is all this coming from you might ask?  Well, I was working on a DNN skin for one of my sites and spent more than 7-8 hours tracking down alignment issues in the layout which was based in DIVs that all displayed properly in IE (7 and 6).  When I checked it in Firefox 1.5.0.10, it looked horrible. 

I worked and worked to get things to look the same and fixed most areas, but one I had big problems.  In the end, for one part, I had to resort to a table for a header (I know, those evil tables, yeah, yeah, yeah, but it works - or at least it should).  For the last year or so, I have worked little with tables as a layout tool and much to my surprise, Firefox does not like strict XHTML when images are inside a td tag.

Here is an image of what it is supposed to look like (as it does in IE):

This is what Firefox gives:

You will notice the gray extends below the image.  This is simple html and it should not require any other styles just to have the table cell wrap the image, however, Firefox fails to show it correctly.  It seems to have a link to font size, if I reduce the font size to a low number the gray under the image is decreased and if I increase the font size (still smaller than the image) the gray is extended even further.

I know, I will have to spend time digging on the Internet to find the solution to this issue, but this is what I am overly tired of doing.  Just think how many developers out there have the same problems and waste the same time just because there is no real standard.  How can it be considered a standard when it is not implemented the same in all browsers.  If anything is a standard, IE’s rendering is the standard as it is use by the majority of people on the planet.

These games are pathetic!  I just hope WPF of something of that nature becomes popular enough we can dump these stupid web standards!

For those that want to view the valid strict XHTML for this issue it is at:

http://www.ReflectedThought.com\TestTableImageBox\

update: As pointed out by Andrew, this is yet another "standard" that seems to get in the way.  By default, under the standards, a table cell will have a baseline which images will be aligned by, even though there is no text in the cell, it will use the parent baseline.  This means it will have a gap at the bottom of your image to allow of descenders for the current font, even though there is no text.  Of course, IE does the smart thing when there is no text and aligns your images to the bottom of the block (cell). 

To rid yourself of this problem, you can either do a:

td img
{
    vertical-align:bottom; 
}

or add the style to the image.  Even if you set the vertical-align of on the cell, it does not effect the image.

Another example of the IE leading the standard and the standard should be adjusted, but you know it never will!