The achcor (display:block) brings extra space in IE7?

**Kesakissa** · 04-05-2011, 06:50 AM

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:

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>

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.

Thanks a lot, everyone!

**Kor** · 04-06-2011, 04:07 AM

Block elements (DIV) can not be nested within inline elements (A). The fact that you gave a display block to the anchor does not change its native display type, which remains inline.

You should modify the structure of the HTML according to this principle.

**Kesakissa** · 04-06-2011, 07:22 AM

Originally Posted by Kor

Block elements (DIV) can not be nested within inline elements (A). The fact that you gave a display block to the anchor does not change its native display type, which remains inline.

You should modify the structure of the HTML according to this principle.

I heard that in HTML5 the <div> can be nested in <a>.

I validated my html code, and it seems it is valid.