[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 556
  • Last Modified:

IE7 CSS problem

I've put together a very basic css/div based layout.  It looks right in FF but not under IE7.  Since many of our users are on ie7 this presents a problem.  

The problem is a strange ~4px gap between 2 divs:

<div id="banner">
            <img id="banner_img" src="Images/banner.png" alt="banner"/>
</div>
<div id="gray_bar"></div>


#banner
{    
    margin-bottom:0px;        
}

#gray_bar
{    
    background-color:#545454;
    margin-top:0px;    
    border-top:solid 1px white;
    border-bottom:solid 1px maroon;
    margin-bottom:0px;
    height:30px;
}

IE7 displays a 4px gap between the 2 elements.   How do I close the gap?


<%@ Master Language="C#" AutoEventWireup="true"  %>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">    
    <link href="./Style/StyleSheet.css" rel="stylesheet" type="text/css" />    
</head>
<body>
    <div id="page_container">            
        
        <div id="banner">
            <img id="banner_img" src="Images/banner.png" alt="banner"/>
        </div>
        <div id="gray_bar">            
        </div>
        <div id="mainContent">   
            <asp:ContentPlaceHolder id="MainContentPlaceHolder" runat="server"></asp:ContentPlaceHolder>
        </div>                                        
        <div id="footer">       
            <img src="Images/footer.jpg" id="footerImg" />
            
        </div>               
    </div>
</body>
</html>
 
 
html, body 
{
	margin: 0px;
	padding: 0px;
	background: #eaeaea url("../images/pageBackground.jpg") repeat-x;
}
 
div 
{
    padding:0px 0;
}
 
#page_container
{
    width:800px;
    margin:auto;
    margin-top:1cm;
    border-style:solid;
    border-width:1px;
    border-color:Maroon;    
    
    
}
 
#banner
{    
    margin-bottom:0px;        
}
 
#gray_bar
{    
    background-color:#545454;
    margin-top:0px;    
    border-top:solid 1px white;
    border-bottom:solid 1px maroon;
    margin-bottom:0px;
    height:30px;
}
 
 
 
 
#mainContent
{         
    display:inline-block;
    top:0px;
    margin:0px;
    padding:0px;   
    background-color:white;
    height:600px; 
    width:800px;
}
 
#actualContent
{
    display:block;
    margin-left:2cm;
    margin-top:2cm;
}
 
#footer
{             
    border-top:solid 1px maroon;     
    background-color:#545454;
    margin:0px;
    padding:0px;
    height:50px;
}
 
#footerImg
{
    padding-left:25px;
    padding-top:10px;
}

Open in new window

0
trey_carroll
Asked:
trey_carroll
  • 2
1 Solution
 
nanharbisonCommented:
Use a conditional style sheet for IE 7, which is explained in this article:
http://www.456bereastreet.com/archive/200612/internet_explorer_and_the_css_box_model/
in suggestion #3.

this is a good article on it too:
http://css-tricks.com/how-to-create-an-ie-only-stylesheet/
0
 
nanharbisonCommented:
Also, this is probably one of many IE bugs, here is an excellent article on all IE bugs and how to work around them:

http://www.positioniseverything.net/explorer.html
0

Featured Post

Vote for the Most Valuable Expert

It’s time to recognize experts that go above and beyond with helpful solutions and engagement on site. Choose from the top experts in the Hall of Fame or on the right rail of your favorite topic page. Look for the blue “Nominate” button on their profile to vote.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now