IE layout problem – gap between divs…

[kanger]

Hello, I am new here, was just wondering if anyone could help with an IE layout problem I have been unable to solve.

In IE a large gap shows up between the topmainsection and mainsection

here is the html for the relevant section…

Code:

Welcome to Marble Design

Marble Design’s aim is to create interesting, attractive websites that are fast and user-friendly. It also aims to provide information on web design. Fellow web designers can find articles and tutorials
on the blog page.

Within seconds users will have made judgements on your website and consequently your business. Some may lose interest altogether if a site doesn’t load quickly. We aim to
make the user-experience as rewarding as possible and a positive reflection of your business’ values.

Web Design Services

• Uniquely coded HTML and CSS websites
• Web Standards compliant
• Search Engine Optimisation (SEO)
• Programmes used Photoshop, Dreamweaver

and here is the CSS

Code:

#tophomesection{
width:960px;
height:265px;
margin-left:auto;
margin-right:auto;
position:relative;
z-index:0;
background-image:url(images/balls7.jpg);
background-repeat:no-repeat;
}

#topmainsection{
width:960px;
height:138px;
margin-left:auto;
margin-right:auto;
position:relative;
margin-bottom:0;
}

#postit{
float:right;
display:block;
position:relative;
z-index:2;
margin-right:-50px;
margin-top:-60px;
}

#postitportfolio{
position:absolute;
left:1000px;
top:350px;
z-index:2;
}

#mainsection{
width:900px;
padding-top:20px;
padding-right:40px;
padding-left:20px;
margin-left:auto;
margin-right:auto;
color:#3e4b54;
background:#ffffff;
font-family:”Helvetica”,Arial, Sans-serif;
font-size:small;
line-height:150%;
position:relative;
z-index:-1;
}

#mainsection img.pic{
float:left;
padding-right:10px;
}

#mainsection p.about{
width:750px;
height:300px;
padding-left:10px;
}

#mainsection a{
text-decoration:none;
color:#02c500;
}

#mainsection a:hover{
color:#FFD100;
}

#mainsection h1{
color:#3e4b54;
font-size:200%;
margin-left:40px;
}

#mainsection p{
width: 840px;
margin-left:40px;
margin-right:50px;
}

#mainsection h4{
margin-left:40px;
text-decoration:none;
border-bottom:1px dashed #f13f19;
width:147px;
font-size:100%;
}

#mainsectiontwo {
margin: 0 auto;
width:960px;
background:#ffffff;
font-size:small;
}

#heading h1{
font-size:17pt;
color:#f13f19;
margin-left:70px;
margin-top:20px;
margin-bottom:5px;
}

#heading h1 a{
font-size:17pt;
color:#f13f19;
margin-top:20px;
margin-bottom:5px;
text-decoration:none;
}

#heading h4{
font-size:13pt;
color:#3e4b54;
margin-left:90px;
border-bottom:1px dashed #f13f19;
width:500px;
margin-bottom:5px;
margin-top:15px;
}

sorry that site isn’t online yet and it’s all a bit messy (the code and everything really!)
but any help or ideas would be much appreciated

Thank you

[kanger]

Thank you, it worked!

[Author]

Posts