ie 8 adds unnecessary top and bottom padding

elmedicoXY

New Member
ie 8 is adding unnecessary padding to a div. I cannot see any unusual styling here. Can somebody help ?
jRkyo.png
Html The div highlighed in blue is the one in context.
F277o.png
\[code\].block { clear: both;}.inline { float: left; clear: none; padding: 0;}div.content { padding: 0 18px 0 0;}\[/code\]Here is the html code that will reproduce this issue. Sorry about the length. But if you copy this to a html file and open it in ie8, you'll be able to reproduce it.\[code\]<!DOCTYPE html><html><head><meta charset=utf-8 /><title>JS Bin</title><style> .block { clear: both; } div.block .inline:last-child { float: none; overflow: hidden; } div.content-root { padding: 0 0 0 18px; } .inline { float: left; clear: none; padding: 0; } div.content.input-container { padding-right: 0; } div.content { padding: 0 18px 0 0; }</style></head><body> <div id="contentPane" style="background-color: transparent; display: block;"> <form> <div class="block content-root"> <div class="block"> <div class="block"> <div class="block"> <div class="inline"> <label> <div class="block"> <div class="inline content input-container"> <input type="checkbox" /> </div> <div class="inline"> <div class="block"> <div class="block"> <div class="inline" style="float: left;"> <div class="block content"> <p> <span style="font-family: arial; font-size: 11pt;">C. </span> </p> </div> </div> <div class="inline"> <div class="inline"> <p><span>Correct</span></p> </div> </div> </div> </div> </div> </div> </label> </div> </div> </div> </div> </div> </form> </div></body></html>\[/code\]
 
Top