www.webdeveloper.com
Results 1 to 5 of 5

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

  1. #1
    Join Date
    Apr 2011
    Posts
    3

    Question 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:
    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!
    Last edited by Kor; 04-06-2011 at 04:03 AM. Reason: wrap the code [code][/code]

  2. #2
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    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.

  3. #3
    Join Date
    Apr 2011
    Posts
    3
    Quote Originally Posted by Kor View Post
    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.

  4. #4
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428

  5. #5
    Join Date
    Apr 2011
    Posts
    3
    Quote Originally Posted by Kor View Post
    You want IE7 to understand HTML5 ?
    Hehe, right. That's tricky. I will change my markup then. Thanks Kor!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles