DIV tags not working properly in IE

Discussion in 'CSS' started by jimmy4feb, Feb 17, 2010.

  1. #1
    Hello DP Members,

    I have created a DIV Frame, In which if I will place an image then it automatically adjust its height according to the height of the image & its horizontal width depends upon its outer container(you will understand when you will see code). I have facing a problem that it appears good in Firefox but not in Internet Explorer. See the images below to see the problem:

    [​IMG]
    Firefox Screen Shot(if you can't see image here then follow link:http://img163.imageshack.us/i/ffimage.jpg/)

    [​IMG]
    Internet Explorer Screen Shot(if you can't see image here then follow link:http://img717.imageshack.us/i/ieimage.jpg/)

    You can see the difference in the images that there is some empty space between the image & the bottom frame border. I want to eliminate empty space in Internet Explorer.

    The code for is as follows:
    
    <html>
    	<head>
    		<title>3 Column Liquid Fixed Fixed CSS Layout</title>
    		<style type='text/css'>
    			.header
    			{
    				width:440px;
    				height:550px;
    				border: 1px solid #000000;
    			}
    			.top 
    			{
    				background: url('images/20px.png') 0 0 repeat-x; 
    				width:auto;
    			}
    			
    			.bottom 
    			{
    				background: url('images/20px.png') 0 100% repeat-x;
    			}
    			
    			.left 
    			{
    				background: url('images/20px.png') 0 0 repeat-y;
    			}
    			
    			.right 
    			{
    				background: url('images/20px.png') 100% 0 repeat-y;
    			}
    			
    			.bottomLeft 
    			{
    				background: url('images/20px.png') 0 100% no-repeat;
    			}
    			
    			.bottomRight 
    			{
    				background: url('images/20px.png') 100% 100% no-repeat;
    			}
    			
    			.topLeft 
    			{
    				background: url('images/20px.png') 0 0 no-repeat;
    			}
    			
    			.topRight 
    			{
    				background: url('images/20px.png') 100% 0 no-repeat; 
    				padding:20px;
    			}
    		</style>
    	</head>
    
    	<body bgcolor="#000000">
    	<div class="header">
    		<div class="top">
    			<div class="bottom">
    				<div class="left">
    					<div class="right">
    						<div class="bottomLeft">
    							<div class="bottomRight">
    								<div class="topLeft">
    									<div class="topRight">
    										<img src="images/image.jpg">
    									</div>
    								</div>
    							</div>
    						</div>
    					</div>
    				</div>
    			</div>
    		</div>
    	</div>
    	</body>
    </html>
    
    HTML:
    You can download HTML code(including images & screen shots) by following this link:http://uploading.com/files/8mfc2755/Sample+Code.zip/

    Please tell me where I am making the mistake in this code. I shall be very thankful to you.

    Jimmy
     
    Last edited: Feb 17, 2010
    jimmy4feb, Feb 17, 2010 IP