Debugging CSS
Debugging the page for Internet Explorer
The page that we use as an example was posted in a help forum, its author wanted to get rid of the space in the News Box menu in Internet Explorer.
As HTML is valid as well as CSS we can debug the page.
It has been reduced to a test case and three versions can be displayed here:
As the corrections have been done for Firefox, we can consider Internet Explorer.
Editing for Internet Explorer
As we can see it, there are a few problems:
- the space in the News Box menu
- the position of the links in the same menu
- the main menu jumping when hovering a link or when refreshing
The space
The problem is in #ulNewsBox outlined in blue by the DOM inspector in the screenshot below and after a few tests setting margin-bottom:17px; fixes the issue.
The position of the links
While it may not be very useful, adding margin:15px; in #ulNewsBox li will move the links into the box.
When the menu is styled we will have to reconsider the rule.
The main menu jumping when hovering a link
This shift is much more unpleasant. Nothing in the rule for a:hover can explain it.
As hasLayout is triggered in #divLeftColumn and #ulPrimaryNav, we will examine height and width in the rules.
#divLeftColumn specifies a height of 90%. To remove this attribute, we will enter height | auto.
It seems to fix the problem and we can remove all the useless attributes such as position:relative...
These corrections done, we can work on the right column, the length of the columns, a clearing technique which is missing...