HTML and CSS Reference
Figure 10-16. There's a slight, but perceptable misalignment with the sidebar in IE 9
in iE 9, press F12 to launch the developer tools. if you don't have access to Windows,
just read the following steps to understand what's causing the misalignment.
in the HTML section on the left, expand <body> , and select one of the <li> items.
Click the Layout button on the right to display a diagrammatic representation of its
box model. As Figure 10-17 shows, the list item's dimensions in iE 9 are
155px × 40.59px . This is approximately 5px taller than in other browsers.
Figure 10-17. Inspecting the size of a list item in IE 9's developer tools
15. one way to fix this would be to create an internet Explorer conditional comment to
set a different top margin for iE 9. you would also need a different one for iE 6 and
iE 7. doing so would work, but it's an unsatisfactory solution. What's more, iE 10
doesn't support conditional comments, so you can't rely on them to solve problems
with iE 10 and later. Fortunately, there's an alternative.
16. Change the top margin of the main<div> back to 15px :
margin: 15px 1% 10px 35%;
padding: 18px 0;