CSS Float Drop in IE?_问答_开发者_运维开发者技术经验分享

Having a problem in older versions of IE. I have three left floated divs above three floated divs, both in seperate wrappers. The lower divs are overlapping the upper ones in older versions of IE. Safari, mobile, and firefox its fine.

Please help.

My code:

#header {
z-index: 1000;
background-image: 
background-repeat: repeat-x;
height: 39px;
margin-right: auto;
margin-left: auto;
}

#wrapper {
background-position: center bottom;
background-repeat: no-repeat;
width: 980px;
margin-right: auto;
margin-left: auto;
height: 650px;
}

#headwrapper {
margin-right: auto;
margin-left: auto;
height: 39px;
width: 900px;
background-position: left;
background-repeat: no-repeat;
}

#slidercontainer {
padding-top: 20px;
float: right;
background-repeat: repeat;
background-image: 
padding-right: 50px;
height: 280px;
width: 750px;
background-color: black;
}

#botwinleft {
padding-left: 20px;
padding-top: 30px;
border-left-style: none;
border-bottom-style: none;
border-right-style: none;
border-top-style: none;
float: l开发者_开发技巧eft;
height: 335px;
width: 410px;
}

#botwinleft h3 {

text-shadow: 3px 3px #e1e1e1;

color: #da1922;

}

#botwincenter {
border-left-style: none;
border-bottom-style: none;
border-right-style: none;
border-top-style: none;
height: 365px;
float: left;
width: 95px;
}

#botwinright {
padding-top: 50px;
border-left-style: none;
border-bottom-style: none;
border-right-style: none;
border-top-style: none;
background-repeat: no-repeat;
height: 315px;
float: left;
width: 445px;
}

body {
background-image: 
background-color: black;
background-repeat: repeat;
padding: 0px;
margin: 0px;
}

#left {
background-image: 
background-repeat: repeat;
padding-right: 20px;
padding-left: 40px;
border-style: none;
height: 250px;
float: left;
width: 239px;
}

#left img {
padding-right: 15px;

}

#center {
background-image: 
background-repeat: repeat;
padding-right: 20px;
padding-left: 20px;
border-style: none;
height: 250px;
float: left;
width: 260px;
}


#center img {
padding-right: 15px;
}


#right {
background-image: 
background-repeat: repeat;
border-style: none;
height: 250px;
float: left;
width: 375px;
}


#right img {
padding-right: 15px;
}


#footer {
border-top-style: groove;
border-top-color: #4c4c4c;
border-top-width: 2px;
background-image: 
background-repeat: repeat;
clear: both;
height: 150px;
margin-right: auto;
margin-left: auto;
}

#nav {
background-image: 
background-repeat: repeat-y;
height: 300px;
float: left;
width: 150px;
}

#menu {
padding: 0px;
margin: 0px;
width: 0px;
}

#menu li {
list-style-type: none;
margin:0 0 0.25em 0;
}

#menu a, #menu a:visited {
background-color: #4c4c4c;
display:block;
width:9em;
text-align: center;
text-decoration:none;
color:#eee;
}

#menu a:hover {
background: #ddd;
color: red;
}
#leftfloat {
border-left-style: none;
border-bottom-style: groove;
border-right-style: none;
border-top-style: none;
border-bottom-color: #595959;
border-bottom-width: 3px;
background-image: 
background-repeat: repeat;
height: 300px;
background-color: #858585;
margin-left: auto;
}
#bottomwrap {
background-position: 0 bottom;
background-image: 
background-repeat: no-repeat;
height: 700px;
margin-right: auto;
margin-left: auto;
width: 980px;
}
#lowerbackground {
border-top-style: none;
background-image: 
background-position: 0 bottom;
background-repeat: repeat-x;
height: 700px;
margin-right: auto;
margin-left: auto;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title></title>
</head>
<body>
<div id="header">
<div id="headwrapper"></div>
</div>
<div id="leftfloat">
<div id="wrapper">
<div id="nav">
menu here


</div>
<div id="slidercontainer">
<div id="slider">
<ul>
images here
</ul>
</div>

</div>
<div id="botwinleft">
<h3>Welcome to S & L Motors</h3>
<p>text here</p></div>
<div id="botwincenter"></div>
<div id="botwinright"><iframe width="325" height="250" frameborder="0" >View Larger Map</a></small></div>
</div>
</div>
<div id="lowerbackground">
<div id="bottomwrap">
<div id="left">
<h3 align="center">Great Service</h3>

<p>text here
</p>
</div>
<div id="center">
<h3 align="center">Weekend Work</h3>

<p>text here.</p>
</div>
<div id="right">
<h3 align="center">Expert Staff</h3>

<p>texte.</p>
</div>
</div>
</div>
<div id="footer"></div>
</body>
</html>

EDIT:

Ok thanks very much for the suggestions and sorry about the dup post. I tried all of those suggestions as well as xml1 transitional doctype and html 4.01 transitional and nothing has worked???

As you have two identical questions, I'll answer both; one of them will be closed.

Well, here's some stuff to look at:

#header {
z-index: 1000;
background-image:   /* This might be screwing up IE */
background-repeat: repeat-x;
height: 39px;
margin-right: auto;
margin-left: auto;
}

Your code is extremely repetitive. I would group repeated style declarations together to make it more readable (and to save space):

#header, #wrapper, #headwrapper {
margin-right: auto;
margin-left: auto;
}

This code can be condensed:

border-left-style: none;
border-bottom-style: none;
border-right-style: none;
border-top-style: none;

into border-style: none;. I don't know of any other directions besides top, bottom, left, right, so you might as well apply it to all of them at once.

As for the problem with overlap, I would do it like this. Tell me if it works (I'm not an IE-expert. I don't really care to be either):

#wrapper1, #wrapper2
{
  overflow: auto; /* This stops the floated elements from "deflating" the parent. Remove it and you'll see. */
  display: block;
}

Good luck!

You could try adding: