CSS Float Drop в IE?

Ошибка в старых версиях IE. У меня есть три левых плавающих divs над тремя плавающими divs, как в отдельных обертках. Нижние divs перекрывают верхние в более старых версиях IE. Safari, mobile и firefox - это прекрасно.CSS Float Drop в IE?

Пожалуйста, помогите.

Мой код:

#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: left; 
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 Большое спасибо за предложения и сожалею о посте дублировать. Я пробовал все эти предложения, а также xml1 переходный doctype и html 4.01 переходный, и ничего не сработало ???

источник

2011-02-02 Rob

Возможно, попробуйте '
' под плавающими блоками – Neddy

Не могли бы вы добавить в верхние строки своего HTML? Особенно доктрины. Какую версию IE вы смотрите на это? Какая минимальная версия IE должна работать? IE7? – thirtydot

Вы можете попробовать добавить:

_clear: both

на нижней обертку, это будет воспроизведен только в IE6.

источник

2011-02-02 23:55:12 TNC

Поскольку у вас есть два одинаковых вопроса, я отвечу обоим; один из них будет закрыт.

Ну, вот некоторые вещи, чтобы посмотреть на:

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

Ваш код чрезвычайно повторы. Я бы группа повторила заявления в стиле вместе, чтобы сделать его более удобным для чтения (и для экономии места):

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

Этот код может быть сжата:

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

в border-style: none;. Я не знаю каких-либо других направлений, кроме верхнего, нижнего, левого, правого, так что вы могли бы также применить его ко всем из них сразу.

Что касается проблемы с перекрытием, я бы сделал это так. Скажите мне, если это работает (я не IE-эксперт, я не очень заботятся, чтобы быть.):

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

Удачи!

источник

2011-02-02 23:55:21 Blender

Это не было необходимо - я бы поместил вопрос обманы для мод, чтобы объединить оба вопроса. – BoltClock

Хорошо, просто убедившись (я тоже). – Blender

CSS Float Drop в IE?

ответ

Смежные вопросы