The achcor (display:block) brings extra space in IE7?
Hi, I am using html5 so i guess i am able to put <div> inside the <a> (display: block). But when the <div> has float: left, it always brings extra space between <a> in IE7. Other browser works quite fine. Does anyone know any reason or solution? Thanks a lot!!
Here is my code:
If you view the code from browser, you will be able to to see there is a gap between 'second' and 'third'. By removing the 'float: left' from 'second', the gap will be gone.Code:<!DOCTYPE HTML> <html> <head> <style> .block { list-style:none; display: block; background: blue; width: 200px; color: black; overflow: hidden; clear: both; } div { line-height: 20px; } div.left { line-height: 30px; float: left; } div.right { float: left; } </style> </head> <body> <ul> <li> <a href="#" class="block"> <div class="left">first</div> <div class="right">second</div> </a> </li> <li> <a href="#" class="block"> <div>third</div> </a> </li> </ul> </body> </html>
Thanks a lot, everyone!
Reply With Quote
Bookmarks