Debugging CSS - Debugging the page

HTML validated as well as our CSS we can debug the page.

The page that we use as an example was posted by its author in a help forum. It has been reduced to a test case, borders have been added and three versions can be displayed here:

Editing for Firefox

Our page with Firefox :

without html and css errors mozilla

The best method is to correct the styles (embedded or linked) with Firefox and check that Internet Explorer reacts correctly.

Thus we use the option Edit CSS of Web Developer to examine the result of the modifications.

The first error for Firefox is that the links do not stay in their container. Two solutions : add overflow:hidden; in the parent container (#menu li) or add float:left;.

Thus we add the rule #menu li and test the two declarations. The best is float:left;. As float:left; in #menu li a becomes useless, we can remove it.

step 1

The second problem is the text which is not in its container #separateur2. Here, the simplest is to take height off as Internet Explorer interprets it as min-height while other browsers try to apply the value.

step 2

Next we have spaces around the image in #separateur. Most of the time display:block; applied to the image in the container fixes the issue.

step 3

The author's problem was that the border of #all did not enclose #content. Internet Explorer wrongly encloses floated content (here #content) while other browsers don't. There are a few methods with modern browsers, we will use overflow:hidden; in the parent container of #content (#all).

step 4

We then check with Internet Explorer and Opera. We are lucky, everything has been fixed. With some content, we will have to set the margins for the tag <p> to achieve almost a similar display whatever the browser.

Actually, we can remove a few useless instructions and we should add a clear in the HTML if we modify the width of #all.

Web Developer will allow us to do this modification with the option Miscellaneous/Edit HTML:

step 5

And here is the final result: