Проблемы отображения в ИЕ 7 и Операх некоторых

piryaz · July 12, 2010

Здравствуйте. Есть сайт www.adybov.ru

Проблема в сайдбарах. Вылезают черт знает куда. В ИЕ 7 и опере 8.ххх. В старших операх все окей. В 6-ке, кторая у меня в виде тестового ИЕ - тоже все окей.

HTML такой

<!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>
</head>

<body>
	<div id="header">
	</div><!-- #header-->
<div id="wrapper">
<div id="middle">

		<div id="container">
			<div id="content">
			</div><!-- #content-->
		</div><!-- #container-->

		<div class="sidebar1">
		</div><!-- .sidebar.sl -->
		<div class="sidebar2">
		</div><!-- .sidebar.sr -->

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

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

<div id="footer">
<!-- #footer -->
</body>

CSS такой.

* {
	margin: 0;
	padding: 0;
}
html {height: 100%}
body {
	font: 12px/18px Arial, Tahoma, Verdana, sans-serif;
	height: 100%;
}
a {
	color: #636363;
	outline: none;
	text-decoration: underline;
}
a:hover {
	text-decoration: none;
}
p {margin: 0 0 18px}
img {
	border: none;
}
input {vertical-align: middle}
#wrapper {
	width: 100%;
	min-width: 1000px;
	min-height: 100%;
	height: auto !important;
	height: 100%;
	overflow: hidden;
	//overflow: visible;

}


.arch_lnk a {color: #fff; 
font-size: 16px;
font-weight: 500;
margin: 0 0 5px 45px;
display: block;}

.contentheading {color: #636363;
font-size: 20px;
font-weight: 700;}


/* Header
—————————————————————————--*/
#header {
	height: 103px;
background-image: url(../images/AnDy_logo.gif);
	background-repeat: no-repeat;
	background-position: 50% 50%;
	border-bottom-width: 2px;
	border-bottom-style: solid;
	border-bottom-color: #637384;
}

#header_left {
background-image: url(../images/AnDy_logo_left.gif);
	background-repeat: no-repeat;
	background-position: left top;
	height: 103px;
	width: 225px;
	float: left;
	border-bottom-width: 2px;
	border-bottom-style: solid;
	border-bottom-color: #637384;
}

#header_right {
	float: right;
	height: 63px;
	width: 192px;
background-image: url(../images/head_r.gif);
padding-top: 40px;
padding-left: 8px;
	background-repeat: no-repeat;
	background-position: right top;
	border-bottom-width: 2px;
	border-bottom-style: solid;
	border-bottom-color: #637384;
}


#nav {
	background-color: #414141;
	position: relative;
	height: 30px;
	z-index: 1000;
}

.extra {clear: both;}



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

	padding: 10px 220px 0 245px;
}

/* Sidebar Left
—————————————————————————--*/
.sidebar1 {
	float: left;
	width: 225px;
	margin-left: -100%;
	position: relative;
	margin-bottom: -1000em;
	padding-bottom: 1000em;
	//overflow: hidden;
	background-image:url(../images/fon_left_top.gif);
background-repeat: repeat-y;
}
#news {
	background-image:url(../images/Anton.gif);
	height: 310px;
	width: 225px;
	margin-bottom: 8px;
	background-repeat: no-repeat;
}

#cite {
font: 14px/17px Arial, Tahoma, Verdana, sans-serif;
position: relative;
padding: 225px 10px 0 10px; 
display: block;}

#news2 {
	padding-left: 12px;
padding-bottom: 20px;
	width: 213px;

}





/* Sidebar Right
—————————————————————————--*/
.sidebar2 {
	float: left;
	margin-right: -3px;
	width: 200px;
	margin-left: -200px;
	position: relative;
	margin-bottom: -1000em;
	padding-bottom: 1000em;
	overflow: hidden;
	background-image:url(../images/fon_right_side.gif);
background-repeat: repeat-y;
background-position: right top;
}

#help {height: 226px;
background-image:url(../images/nastya.jpg)}

.helptxt {display: block;
padding: 170px 0 0 65px;
font-weight: 700;}


/* Footer
—————————————————————————--*/
#footer {
	margin: -40px auto 0;
	min-width: 1000px;
	height: 40px;
	background: #637383;
border-top-width: 2px;
	border-top-style: solid;
	border-top-color: #fff;
	position: relative;
color: #FFFFFF;
	text-align: center;
}

#hotlog {width: 120px;
height: 35px;
padding-top: 5px;
position: relative;
float: left;}

.extra {
	clear: both;
}

Пинайте

Из HTML всякие news выкинул, чтоб лучше структуру видеть

psywalker · July 12, 2010

Вылезают чёрт знает куда, потому-что сделано чёрт знает как. Есть другие способы колонок одинаковой высоты, а тем-более если у тебя они сплошного цвета. Поищи на форуме или в гугле.

piryaz · July 12, 2010

margin-bottom: -1000em;

padding-bottom: 1000em;

overflow: hidden;

вот это не рулит?

npofopr · July 12, 2010

вот еще с высотами

http://gruzzilkin.110mb.com/newgraal/

http://gruzzilkin.110mb.com/layout/

http://fiddle.jshell.net/mayTh/19/show/light/

piryaz · July 13, 2010

вот еще с высотами
http://gruzzilkin.110mb.com/newgraal/
http://gruzzilkin.110mb.com/layout/
http://fiddle.jshell.net/mayTh/19/show/light/

Подскажите как в первой ссылке поправить высоту футера. Ну не понимаю я(( На height - ноль реакции

Edited July 13, 2010 by piryaz

stars · July 14, 2010

менять надо тут...

#line2 {
	margin-top:-3em;
	height:3em;
}

Sign In

Проблемы отображения в ИЕ 7 и Операх некоторых

Question

piryaz

Link to comment

Share on other sites

5 answers to this question

Recommended Posts

psywalker

Link to comment

Share on other sites

piryaz

Link to comment

Share on other sites

npofopr

Link to comment

Share on other sites

piryaz

Link to comment

Share on other sites

stars

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information