2 Колонки - Не Правильно Отображается В Ie6-7

Bredova · September 8, 2010

Здравствуйте!

Очень нужна помощь, так как я сама никак не найду ошибку!

http://www.bredova.ru/temp/cosmos/index-2-col.html

в IE 6-7 вторая колонка расползается на всю страницу

Код страницы

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<title></title>
	<meta name="title" content="" />
	<meta name="keywords" content="" />
	<meta name="description" content="" />
	<link rel="stylesheet" href="style.css" type="text/css" media="screen, projection" />
	<link rel="stylesheet" href="style-2-col.css" type="text/css" media="screen, projection" />
	<!--[if lte IE 6]><link rel="stylesheet" href="style_ie.css" type="text/css" media="screen, projection" /><![endif]-->
	  <script type="text/javascript" src="js/jquery.min.js"></script>
	<script type="text/javascript" src="js/jquery.corner.js"></script>
	<script type="text/javascript">
 		$('#round').corner();

	</script>
</head>

<body>

<div id="wrapper">

	<div id="header">
		<h1>Название сайта</h1>
	</div><!-- #header-->

	<div id="middle">

		<div id="container">
			<div id="content">
				<div id="round">
	<h1>Lorem ipsum dolor</h1>
				<p>
		Lorem ipsum dolor sit amet, consectetuer adipiscing
  elit. Quisque pede felis, consequat sit amet, congue
  in, ultrices id, orci. Phasellus quam lacus, mollis
  nec, interdum et, malesuada nec, mauris. Nulla facilisi.
  Ut pharetra dignissim risus. Etiam at sapien et leo
  porta accumsan. Praesent lacus lectus, elementum
  quis, lobortis vitae, egestas non, dui. Pellentesque
  id mi sed felis sollicitudin imperdiet. Vestibulum
  posuere elit non augue. Nullam pretium. Nam fermentum.
  Aliquam hendrerit lectus eu eros. Sed viverra cursus
  enim. </p>



				<p>Etiam sem. Nullam eget metus non mi accumsan
				  luctus. Nulla tellus lorem, fermentum non,
				  elementum sed, ultrices at, risus. Curabitur
				  nec arcu. Fusce convallis elit quis lorem.
				  Praesent scelerisque. Nunc ultricies tortor
				  non nulla ultrices vestibulum. Nullam rhoncus
				  cursus enim. Morbi molestie feugiat est.
				  Fusce erat ligula, sodales nec, mattis
				  id, scelerisque et, tortor. Aliquam erat
				  volutpat. Vestibulum pharetra lacinia purus.
				  Nunc quam dui, pharetra ac, porta ut, hendrerit
				  et, augue. Fusce purus turpis, pretium
				  at, rhoncus eget, gravida non, purus. Quisque
				  mi purus, mattis sit amet, adipiscing et,
				  suscipit vitae, velit. </p>

				<p>Nulla sollicitudin libero a odio. Nulla
				  facilisi. Nunc vel arcu. In vestibulum
				  faucibus enim. Nulla commodo, dolor et
				  porta placerat, lectus ante pulvinar ligula,
				  quis dignissim sem nisl sed elit. Nam id
				  pede vel ipsum pulvinar pretium. Mauris
				  id nunc. Vivamus lorem. Proin auctor rutrum
				  ligula. Sed suscipit justo et nunc. Praesent
				  ut leo quis neque luctus eleifend. Vestibulum
				  nec nisl. Proin tincidunt. Sed enim. Curabitur
				  posuere purus a quam. Aenean odio wisi,
				  vestibulum sed, accumsan vitae, rhoncus
				  suscipit, lectus. Sed a lacus. </p>
				<p>Aenean erat odio, molestie a, lobortis
				  ut, blandit eu, arcu. Donec mauris. Sed
				  sed libero ac sem venenatis sollicitudin.
				  Donec arcu est, volutpat id, dictum a,
				  molestie eu, justo. Nam aliquet faucibus
				  quam. Pellentesque cursus, neque eu placerat
				  facilisis, metus ante fringilla mi, vitae
				  vestibulum nulla turpis quis orci. Quisque
				  nec turpis vel justo volutpat venenatis.
				  Mauris fermentum. Nulla blandit, augue
				  a laoreet gravida, velit lectus molestie
				  wisi, eget volutpat velit eros sit amet
				  tortor. Suspendisse sollicitudin lectus.
				  Nunc velit mauris, ultrices vel, vestibulum
				  et, rhoncus sed, massa. Curabitur luctus
				  erat ac dolor. In pulvinar posuere sapien.
				  Suspendisse dapibus elementum quam. Ut
				  nec diam. Nulla pulvinar. </p>
				  <p>
		Lorem ipsum dolor sit amet, consectetuer adipiscing
  elit. Quisque pede felis, consequat sit amet, congue
  in, ultrices id, orci. Phasellus quam lacus, mollis
  nec, interdum et, malesuada nec, mauris. Nulla facilisi.
  Ut pharetra dignissim risus. Etiam at sapien et leo
  porta accumsan. Praesent lacus lectus, elementum
  quis, lobortis vitae, egestas non, dui. Pellentesque
  id mi sed felis sollicitudin imperdiet. Vestibulum
  posuere elit non augue. Nullam pretium. Nam fermentum.
  Aliquam hendrerit lectus eu eros. Sed viverra cursus
  enim. </p>



				<p>Etiam sem. Nullam eget metus non mi accumsan
				  luctus. Nulla tellus lorem, fermentum non,
				  elementum sed, ultrices at, risus. Curabitur
				  nec arcu. Fusce convallis elit quis lorem.
				  Praesent scelerisque. Nunc ultricies tortor
				  non nulla ultrices vestibulum. Nullam rhoncus
				  cursus enim. Morbi molestie feugiat est.
				  Fusce erat ligula, sodales nec, mattis
				  id, scelerisque et, tortor. Aliquam erat
				  volutpat. Vestibulum pharetra lacinia purus.
				  Nunc quam dui, pharetra ac, porta ut, hendrerit
				  et, augue. Fusce purus turpis, pretium
				  at, rhoncus eget, gravida non, purus. Quisque
				  mi purus, mattis sit amet, adipiscing et,
				  suscipit vitae, velit. </p>

				<p>Nulla sollicitudin libero a odio. Nulla
				  facilisi. Nunc vel arcu. In vestibulum
				  faucibus enim. Nulla commodo, dolor et
				  porta placerat, lectus ante pulvinar ligula,
				  quis dignissim sem nisl sed elit. Nam id
				  pede vel ipsum pulvinar pretium. Mauris
				  id nunc. Vivamus lorem. Proin auctor rutrum
				  ligula. Sed suscipit justo et nunc. Praesent
				  ut leo quis neque luctus eleifend. Vestibulum
				  nec nisl. Proin tincidunt. Sed enim. Curabitur
				  posuere purus a quam. Aenean odio wisi,
				  vestibulum sed, accumsan vitae, rhoncus
				  suscipit, lectus. Sed a lacus. </p>
				<p>Aenean erat odio, molestie a, lobortis
				  ut, blandit eu, arcu. Donec mauris. Sed
				  sed libero ac sem venenatis sollicitudin.
				  Donec arcu est, volutpat id, dictum a,
				  molestie eu, justo. Nam aliquet faucibus
				  quam. Pellentesque cursus, neque eu placerat
				  facilisis, metus ante fringilla mi, vitae
				  vestibulum nulla turpis quis orci. Quisque
				  nec turpis vel justo volutpat venenatis.
				  Mauris fermentum. Nulla blandit, augue
				  a laoreet gravida, velit lectus molestie
				  wisi, eget volutpat velit eros sit amet
				  tortor. Suspendisse sollicitudin lectus.
				  Nunc velit mauris, ultrices vel, vestibulum
				  et, rhoncus sed, massa. Curabitur luctus
				  erat ac dolor. In pulvinar posuere sapien.
				  Suspendisse dapibus elementum quam. Ut
				  nec diam. Nulla pulvinar. </p>
	</div>
			</div><!-- #content-->
		</div><!-- #container-->

		<div class="sidebar" id="sideLeft">
			<!-- main menu -->
<div class="main-menu">
<h1>SCIENCE</h1>
<ul>
  <li><a href="#">News</a></li>
  <li><a href="#">Scientific Dates & Deadlines</a></li>
  <li><a href="#">Scientific Bodies</a></li>
  <li><a href="#">Scientific Meetings</a></li>
  <li><a href="#">Special Sessions (GA)</a></li>
  <li><a href="#">Publications</a></li>
</ul>
<h1>EDUCATION AND CAPACITY BUILDING</h1>
<ul>
  <li><a href="#">Commission 46</a></li>
  <li><a href="#">Scientific Dates &  Deadlines</a></li>
  <li><a href="#">Scientific Bodies</a></li>
  <li><a href="#">Scientific Meetings</a></li>
  <li><a href="#">Special Sessions (GA)</a></li>
  <li><a href="#">Publications</a></li>
</ul>
</div>
<!-- /main menu -->
		</div><!-- .sidebar#sideLeft -->

	</div><!-- #middle-->

</div><!-- #wrapper -->

<div id="footer">
	<div class="foot-right">
	  <a href="http://validator.w3.org/check?uri=referer" target="_blank"><img src="http://www.w3.org/Icons/valid-xhtml10-blue" width="88" height="31" alt="Valid XHTML 1.0 Transitional" /></a>
	  <a href="http://jigsaw.w3.org/css-validator/" target="_blank"><img src="http://jigsaw.w3.org/css-validator/images/vcss-blue" width="88" height="31" alt="Valid CSS!" /></a>
	</div>
	<div class="copyrights">
	  © Ваш сайт, 2010
	</div>
</div><!-- #footer -->

</body>
</html>

Основные стили

html, body, img, form {margin: 0px; padding: 0px; border: none;}
html, body {height:100%;}
body {background: #000 url(img/bg.jpg) no-repeat left top;}
body, td {font: 13px Arial, sans-serif; color: #000;}
a {color: #000;	text-decoration: underline;}
a:hover {text-decoration: none;}
table {border: 0px; border-collapse: collapse;}
td {vertical-align: top;}
p {padding: 0px; margin: 0px 0px 12px 0px; line-height:18px;}
object {outline:none;}

h1 {font-size:22px; padding: 0px; margin: 0px 0px 10px 0px; text-transform:uppercase;}
h2 {font-size:19px; padding: 0px; margin: 0px 0px 10px 0px; text-transform:uppercase;}
h3 {font-size:17px; padding: 0px; margin: 0px 0px 10px 0px; text-transform:uppercase;}

#wrapper {
	width: 100%;
	min-width: 1000px;
	min-height: 100%;
	height: auto !important;
	height: 100%;
}


/* Header
—————————————————————————--*/
#header {
	height: 120px;
	background: none;
}

#header h1 {
	color:#FFF;
	padding:35px 0 0 20px;
	font-size:30px;
	text-transform:none;
	color:#F90;
}


/* main-menu */
.main-menu h1 {
	color:#F90;
	font-size:14px;
	 padding: 0px; margin: 0px 0px 10px 0px;
}
.main-menu ul{
	margin:0;
	padding: 0 0 20px 20px;
	color:#FFF;
	line-height:20px;
}

.main-menu ul li a{
	color:#FFF;
}




div#round { background-color: #fff; float: right; padding: 20px; }


/* Sidebar Left
—————————————————————————--*/
#sideLeft {
	float: left;
	width: 250px;
	margin-left: -100%;
	position: relative;
	background: none;
	padding-left:20px;
	padding-top:20px;
}


/* Sidebar Right
—————————————————————————--*/
#sideRight {
	float: left;
	margin-right: -3px;
	width: 250px;
	margin-left: -250px;
	position: relative;
	background: none;
	color:#FFF;
}


/* Footer
—————————————————————————--*/
#footer {
	margin: -100px auto 0;
	min-width: 1000px;
	height: 100px;
	background: none;
}

.copyrights {padding:35px 0 0 20px; color:#fff;}
.foot-right {width:50%; float:right; padding:35px 20px 0 0; text-align: right;}

Середина страницы

/* Middle
—————————————————————————--*/
#middle {
	width: 100%;
	padding: 0 0 100px;
	height: 1%;
}
#middle:after {
	content: '.';
	display: block;
	clear: both;
	visibility: hidden;
	height: 0;
}
#container {
	width: 100%;
	float: left;
	overflow: hidden;
}
#content {
	padding: 0 20px 0 270px;
}

psywalker · September 8, 2010

поставь левой колонке ширину и флоат, а правой overflow: hidden; и zoom:1;

klierik · September 8, 2010

add to css file this

#content { _zoom: 1; }

Bredova · September 8, 2010

Спасибо вам ОГРОМНОЕ!!! :lol:

Помогло!!! :lol:

Sign In

2 Колонки - Не Правильно Отображается В Ie6-7

Question

Bredova

Link to comment

Share on other sites

3 answers to this question

Recommended Posts

psywalker

Link to comment

Share on other sites

klierik

Link to comment

Share on other sites

Bredova

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information