Debugging CSS
Debugging the page for Firefox
The page that we use as an example was posted in a help forum, its author wanted to get rid of the space between the images and the text in Firefox.
As HTML is valid as well as CSS we can debug the page.
It has been reduced to a test case and two versions can be displayed here:
The desired display is the one of Internet Explorer 6 and 7 and we have the same unwanted display in Firefox, Opera or Safari.
The screenshots below show the differences between browsers.
- MSIE 6
- Mozilla
Editing for Firefox
We will use Web Developer in order to Outline Block Level Elements.
We can see that the HTML tag <p> enclosing Welcome has a margin at the top and the bottom.
As margin has only been set on the left for .custom-font, we will add a declaration with Edit css" and set a value to all the margins : margin:0 0 0 20px;.
The display is improving and we are going to do the same with the paragraph containing the images.
Things are better now and we only have to remove the space still remaining under the images.
As we have more than one image, we cannot apply display:block;. Thus we will use vertical-align:bottom;.
Our final display will be almost the same with recent browsers.
Now we have to modify the HTML markup to use .custom-font in another context.
There is no reason to use tables here, it just means useless markup and it makes the page loads slower. A good idea would be to convert it to table-less layout.
Building the page and testing it with Firefox, then checking with Internet Explorer that does not respect the standards, would have avoided much trouble to the author.