Проблемы с плавающими блоками

ownercoder · May 12, 2009

HTML:


<?xml version="1.0" encoding="utf-8"?>
<!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" xml:lang="ru-ru" lang="ru-ru" dir="ltr" >
<head>
	  <title>Продукция-Столярные Технологии Михайловск - СТМ</title>
  <meta name="robots" content="index, follow"/>

  <meta name="title" content="Продукция-Столярные Технологии Михайловск - СТМ" />
  <link href="/stm-ltd.com/templates/stmltd/favicon.ico" rel="shortcut icon" type="image/x-icon" />

	<link rel="stylesheet" href="/stm-ltd.com/templates/stmltd/css/style.css" type="text/css" />
	<!--[if lte IE 6]>
	<link href="/stm-ltd.com/templates/stmltd/css/ie6.css" rel="stylesheet" type="text/css" />
	<![endif]-->
	<!--[if lte IE 7]>
	<link href="/stm-ltd.com/templates/stmltd/css/ie7_6.css" rel="stylesheet" type="text/css" />
	<![endif]-->

</head>
<body>
	<div id="main">
		<div id="main2">
			<div id="header">
				<div>
				</div>
			</div>
			<div>
				<div id="rightmenu">

					<ul class="menu"><li class="item10"><a href="/stm-ltd.com/index.php/2009-05-03-20-27-37.html"><img src="/stm-ltd.com/images/stories/makezakaz.jpg" alt="2009-05-03-20-27-37" /><span>Сделать заказ</span></a></li><li class="item11"><a href="/stm-ltd.com/index.php/2009-05-03-20-57-00.html"><img src="/stm-ltd.com/images/stories/materials.jpg" alt="2009-05-03-20-57-00" /><span>Используемые материалы</span></a></li><li class="item12"><a href="/stm-ltd.com/index.php/-a-.html"><img src="/stm-ltd.com/images/stories/designproekt.jpg" alt="-a-" /><span>Дизайн & Проектирование</span></a></li></ul>
				</div>
				<div id="menulist">
					<div class="content_menu">
						<ul class="menu_top"><li class="item2"><a href="http://localhost/stm-ltd.com/"><span>О компании</span></a></li><li id="current" class="active item3"><a href="/stm-ltd.com/index.php/2009-04-30-13-22-45.html"><span>Продукция</span></a></li><li class="item4"><a href="/stm-ltd.com/index.php/2009-04-30-13-23-09.html"><span>Дилерам</span></a></li><li class="item14"><a href="/stm-ltd.com/index.php/2009-05-05-20-15-07.html"><span>Портфолио</span></a></li><li class="item13"><a href="/stm-ltd.com/index.php/2009-05-05-19-46-54.html"><span>Контакты</span></a></li></ul>

					</div>
				</div>
				<div id="wood">
				</div>
				<div id="leftmenu">
					<ul class="menu"><li class="item1"><a href="/stm-ltd.com/index.php/2009-04-30-13-27-06.html"><span>Лестницы</span></a></li><li class="item7"><a href="/stm-ltd.com/index.php/2009-04-30-13-24-50.html"><span>Столы и стулья</span></a></li><li class="item8"><a href="/stm-ltd.com/index.php/2009-04-30-13-25-25.html"><span>Кафе и бары</span></a></li><li class="item9"><a href="/stm-ltd.com/index.php/2009-04-30-13-25-45.html"><span>Предметы интерьеры</span></a></li></ul>
				</div>

				<div id="content">
					asd ajsdlka jsdl kasdjk ajdasdjl ajsdlasjd asdlkjlasdflksjf asd ajsdlka jsdl kasdjk ajdasdjl ajsdlasjd asdlkjlasdflksjf asd ajsdlka jsdl kasdjk ajdasdjl ajsdlasjd asdlkjlasdflksjf asd ajsdlka jsdl kasdjk ajdasdjl ajsdlasjd asdlkjlasdflksjf asd
				</div>
				<div id="page-empty"></div>
			</div>
		</div>
	</div>
	<div id="footer">

		<div>
		</div>
	</div>

</body>
</html>

CSS style.css:


/*****************************/
/*** Core html setup stuff ***/
/*****************************/

html {
    height: 100%;
    width: 100%;
}

body {
    font-family: "Times New Roman", "Arial", serif;
    font-size: 12pt;
    color: #000;
    margin: 0;
    padding:0;
    height: 100%;
    width: 100%;
    background-color: #c29f75;
}

img {
    border: 0;
    margin: 0;
    padding:0;
}

a:link, a:hover, a:visited {
}

div {
    margin:0;
    padding:0;
}

/*****************************/
/*** Main html setup stuff ***/
/*****************************/

#main {
    height: 100%;
    width: 100%;
    min-width: 990px;
    text-align:center;
    margin-bottom: -65px;
    background: url('../images/menuleft_repeat.jpg') repeat-y left top;
    clear:both;
}

#main2 {
    height: 100%;
    width: 100%;
    min-width: 990px;
    text-align:center;
    background: url('../images/submenu.gif') no-repeat left bottom;

}

#header {
    width: 100%;
    height: 202px;
    background: url('../images/header_repeat.jpg') repeat-x;
    text-align: left;
}

#header div {
    width: 990px;
    height: 202px;
    background: url('../images/header.jpg') no-repeat;
}


#menulist {
    text-align:left;
    width: auto;
    height: 53px;
    background: url('../images/menu_repeat.jpg') repeat-x;
}

#rightmenu {
    text-align:left;
    border:0;
    padding:0;
    width: 223px;
    height: 268px;
    float:right;
    background: #8b6e50;
}

#leftmenu {
    clear: left;
    text-align: left;
    width: 219px;
    float:left;
}

#footer {
    height: 65px;
    width: 100%;
    background-color: #120000;
}

#footer div {
    width: 990px;
    height: 65px;
    background: url('../images/footer.gif') no-repeat;
}

#page-empty {
    clear:both;
    overflow:auto;
    height: 1px;
    overflow:hidden;
}

#wood {
    width: 219px;
    height: 43px;
    background: url('../images/wood.jpg') no-repeat;
    float:left;
}

#submenuimage {
    clear:left;
    float:left;
    width: 219px;
    height: 173px;
    background: url('../images/submenu.jpg') no-repeat;
}

#content {
    padding-bottom: 75px;
    text-align:left;
    width: auto;
    padding-left: 225px;
}

/*****************************/
/***      mod_mainmenu     ***/
/*****************************/
.menu li {
    list-style: none;
    margin-top: 5px;
}

.menu a:hover, #current a {
    color: #c29f75;
}

.menu a {
    color: #FFF;
    font-size: 14px;
    font-weight: bold;
    text-decoration:none;
}

.content_menu {
    margin-left: 219px;
    padding: 16px;
}
ul.menu_top {
    margin: 0;
    padding:0;
}

ul.menu_top li {
    display: inline;
    margin-right: 5px;
    padding: 5px;
}

.menu_top a:hover {
    color: #c29f75;
}

.menu_top a {
    color: #FFF;
    font-size: 14px;
    font-weight: bold;
    text-decoration:none;
}

CSS ie6.css

* html #main {
	width:expression(document.body.clientWidth < 990? "990px": "100%" ); /*ie fixe*/
}
#rightmenu {
	margin-left:-3px;
}

В общем суть проблемы, в ie6 все работает так как нада, тоесть родительский див растягивается так как нада а вот в ie7 и FF div с id content выползает за пределы родительского div. Помогите пожалуйста разобраться с этой проблемой.

Edited May 13, 2009 by ownercoder

Aleksandrid · July 14, 2009

Посмотрите вот эту статью, там про плавающие блоки есть))))

http://habrahabr.ru/blogs/webdev/31236/

Edited July 14, 2009 by Aleksandrid

Searcher · July 15, 2009

Если до доктайпа что-то есть, даже пустая строка, то в ie6 это отключает работу по стандартам и он переходит в квирк режим. Отсюда вывод, все, что вы сделали в указанном доктайпе не будет работать как вы хотите, это выглядит нормально только в режиме совместимости в ie6.

уберите это <?xml version="1.0" encoding="utf-8"?>

укажите кодировку метатэгом в хэдере

изучите особенности стандарта, который вы указали

psywalker · July 17, 2009

а во вторых заметил у тебя в коде такие вещи, которые ненужны совершенно, зачем ты задаёшь ширину 100% элементам div, когда они по умолчанию растягиваются на всю ширину своего родителя . Может кстати это и является твоей проблемой

Sign In

Проблемы с плавающими блоками

Question

ownercoder

Link to comment

Share on other sites

3 answers to this question

Recommended Posts

Aleksandrid

Link to comment

Share on other sites

Searcher

Link to comment

Share on other sites

psywalker

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information