HTML and CSS Reference
In-Depth Information
Figure 10-16.
There's a slight, but perceptable misalignment with the sidebar in IE 9
12.
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.
13.
14.
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
:
#main {
width: 64%;
margin:
15px
1% 10px 35%;
background-color: #FFF;
padding: 18px 0;
}
