float & ie6

rutt · May 24, 2011

Приветствую всех, вот такая загвоздка.


#cont {width:100%;}
#left {float:left; width:100px; height:20px;}
#center {margin:0 30px 0 100px; height:20px;}
#right {float:right; width:30px; height:20px;}

<div id="cont">
<div id="left"></div>
<div id="center"></div>
<div id="right"></div>
</div>

в ie6 у div#center есть маленькие отступы по несколько пикселей справа и слева от div#right и div#left соответственно

как с этим справится не подскажите?

Mavrun · May 24, 2011

Попробуйте это

http://shublog.ru/html-and-css/kak-podruzhit-internet-explorer-6-i-css-svojjstvo-margin/

или паддинг по нулям поставьте

rutt · May 24, 2011

забыл background'ы проставить, но думаю понятно

Mavrun, padding 0 margin 0 это конечно.

щас проверю, но первый способ сразу нет

Great Rash · May 24, 2011


#cont {}
#left {float:left; width:100px; height:20px;}
#center {overflow: hidden; height:20px;}
#right {float:right; width:30px; height:20px;}

<div id="cont">
<div id="left"></div>
<div id="right"></div>
<div id="center"></div>
</div>

rutt · May 24, 2011

Great Rash, поясню подробнее, div#center должен быть резиновый, да и даже с фиксированным такая же проблема.

Добавлено:

Сам додумался, на свежую голову) с фиксированным правда вариантом, но для ie6 пойдет

у div#center убрал margin добавил float left ну и ширину поставил.

а может с резиновым вариантом кто подскажет? откуда отступы

Great Rash · May 24, 2011

В примере что я вам написал #center резиновый. Проверять надо перед тем как отписываться...

rutt · May 24, 2011

Сами то проверяли свой?

мало то что в ie6 остались отступы так еще и в других ie появились

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

вот мой вариант везде отлично работает кроме ишака 6 там отсупы небольшие

Gaspode · May 24, 2011

#cont { }
#left {float:left; width:100px; height:20px; background: black; margin-right: -100px;}
#center { height:20px; background: red; margin-left: 100px; margin-right: 30px;}
#right {float:right; width:30px; height:20px; background: green; margin-left: -30px;}

dostel1 · May 24, 2011

Используйте спец. теги для кода

Edited May 24, 2011 by Great Rash

Great Rash · May 24, 2011

Нате...


<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title></title>

	<style type="text/css">
		body {margin: 0;}

		html, body, div {height: 100%}
		.left, .right {display: inline; width: 100px; background: pink;}
		.left {float: left; margin: 0 -3px 0 0;}
		.right {float: right; margin: 0 0 0 -3px;}
		.center {overflow: hidden; background: lightgreen;}
	</style>
</head>
<body>

	<div class="left"></div>
	<div class="right"></div>
	<div class="center"></div>

</body>
</html>

dostel1 · May 24, 2011

если не то --извеняйте

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Документ без названия</title>
<style type="text/css">
*{padding:0;margin:0}
html,body{height:100%;min-height:100%;}
body{
background:red;}

#left {float:left; width:100px; height:200px;
background:#663;
left:3px;
position:relative;
}
#center {margin:0 30px 0 100px; height:400px;
overflow:hidden;
background:#939;
z-index:0;}
#right {float:right; width:30px; height:200px;
position:relative;
right:3px;
background:#3F9}
#cont{overflow:hidden;}
</style>
</head>

<body>
<div id="cont">
<div id="left"></div>
<div id="right"></div>
<div id="center"></div>

</div>
</body>
</html>

rutt · May 24, 2011

Всем спасибо за помощь.

Gaspode, класс! Спасибо. То что нужно.

Great Rash, такой вариант самый логичный, но фишка в том что в дивах фоном png с прозрачностями, с тенями, и при таком варианте тени накладываются, и утолщаются.

dostel1, отступы то пропали между центром левом и правом но весь рисунок сузился, справа и слева эти отступы появились, что логично

еще раз спасибо, что уделили внимание

Sign In

float & ie6

Question

Link to comment

Share on other sites

11 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information