overflow: hidden, проблема в IE6

woofs · February 7, 2009

Из за чего в ие 6 в браузере не появляется боковая полоса прокрутки а коннент просто уходит под баузер(обрезается)

#content {
padding:2px;
width:978px;
position:relative;
background: #FBFBFB url(img/border_left.jpg) repeat-y left ;
}
#content1 {
width:978px;
position:relative;
background:  url(img/border.jpg)  repeat-y;
background-position: 217px;
}
#content2 {
width:978px;
position:relative;
overflow:hidden;
background:  url(img/border.jpg)  repeat-y;
background-position: 965px;
}
#left {
margin-left: 19px;
width:189px;
float:left;
z-index:4;
display: inline;
}

#right {width:750px;
float: right;
border:1px solid #B3B3B3;
border-top: none;
color:#000066;
z-index:1;
}

Edited February 7, 2009 by woofs

Vlad · February 7, 2009

Ссылку бы желательно на сайт с проблемой или хотя бы привести фрагмент HTML-кода, чтобы понятно было, кто куда входит.

woofs · February 7, 2009

<!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=windows-1251" />
<title>Untitled Document</title>

<link href="template.css" media="screen" rel="stylesheet" type="text/css" />
<!--[if IE 7]>
<link rel="stylesheet" href="ie.css" type="text/css" media="screen" /><![endif]-->
<script type="text/javascript">
function allClose(){
	var list = document.getElementById("menu").getElementsByTagName("ul");
	for(var i=0;i<list.length;i++){
		list[i].style.display = "none";
	}
}
function openMenu(node){
	var subMenu = node.parentNode.getElementsByTagName("ul")[0];
	subMenu.style.display == "none" ? subMenu.style.display = "block" : subMenu.style.display = "none";
}
</script>
</head>

<body>
<div id="container">
 <div id="header"></div>
  <div id="block_menu">
    <div id="block_menu_left"></div>
    <div id="block_menu_right">
    <div id="block_menu_nav">
      <ul>
    <li><a href="#">о компании</a></li>
    <li><a href="#">документы</a></li>
    <li><a href="#">контакты</a></li>
    <li><a href="#">цены</a></li>
    <li><a href="#">преимущества</a></li>
    </ul></div>
    </div>
  </div>
  <div id="ugl"></div>
  <div id="content">
  <div id="content1">
  <div id="content2">
    <div id="left"><img src="img/bu.jpg" width="187" height="124" />
        <div id="nav">
          <ul id="menu">
            <li><a href="#" onclick="openMenu(this);return false">Меню 1</a>
                <ul>
                  <li><a href="#">sub menu 1</a></li>
                  <li><a href="#">sub menu 2</a></li>
                  <li><a href="#">sub menu 3</a></li>
                  <li><a href="#">sub menu 4</a></li>
                  <li><a href="#">sub menu 5</a></li>
                  <li><a href="#">sub menu 6</a></li>
                  <li><a href="#">sub menu 7</a></li>
                </ul>
            </li>
            <li ><a href="#" onclick="openMenu(this);return false">Menu 2</a>
                <ul>
                  <li><a href="#">sub menu 1</a></li>
                  <li><a href="#">sub menu 2</a></li>
                  <li><a href="#">sub menu 3</a></li>
                  <li><a href="#">sub menu 4</a></li>
                  <li><a href="#">sub menu 5</a></li>
                  <li><a href="#">sub menu 6</a></li>
                  <li><a href="#">sub menu 7</a></li>
                </ul>
            </li>
          </ul>
        </div>
      <img src="img/bl.jpg" width="187" height="117" /> </div>
    <div id="right">
      <div id="title_conn">
        <table width="149" border="0">
          <tr>
            <td class="td" align="center" valign="middle" nowrap="nowrap"><div id="img_tit"></div></td>
            <td><div id="tit">
              <p>О компании </p>
            </div></td>
          </tr>
        </table>
      </div>
      <div id="text"><p>тут текст </p>
      </div>
    </div>
    </div>
  </div>
  </div>
  <div id="ugl"></div>
  <div id="footer"></div>
</div>
</body>
</html>

html, body {position:relative;
background:#dbdbdb;
;}

* {border:0;
margin:0;
padding:0;
}
#container {
margin:auto;
width: 995px;
position:relative;
border: 1px solid #006600;


}
#header {
position:relative;
width:995px;
height:142px;
background:url(img/header.jpg);}
#block_menu {width:995px;
position:relative;}
#block_menu_left {
position:absolute;
background:url(img/memust.jpg);
width:476px;
height:64px;}
#block_menu_right {
left:476px;
position:relative;
background:url(img/memu.jpg);
width:519px;
height:64px;
}
#block_menu_nav {
	position:absolute;
	width:479px;
	top: 2.45em;
	padding:0px;
	left: -0.06em;
}
#block_menu_nav li {
padding-left:1.61em;
list-style-type:none;
text-align:center;
display: block;
font-weight:bold;
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#FFFFFF;
float:left;
font-size:9px;
width: 78px;
text-transform: uppercase;
}
#block_menu_nav li a{color:#FFFFFF;}
#block_menu_nav li a:hover{color:#000;}
a{ text-decoration:none;}
#content {
padding:2px;
width:978px;
position:relative;

background: #FBFBFB url(img/border_left.jpg) repeat-y left ;
}
#content1 {

width:978px;
position:relative;

background:  url(img/border.jpg)  repeat-y;
background-position: 217px;
}
#content2 {
width:978px;
position:relative;
overflow: hidden;
background:  url(img/border.jpg)  repeat-y;
background-position: 965px;
}



#right {width:750px;


float: right;
border:1px solid #B3B3B3;
border-top: none;
color:#000066;
z-index:1;
}

#title_conn {
width:750px; /*он долженн выставить чтобы содержимое равнялось по вертикал-центр*/
background-color:#eeeeee;
position:relative;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
font-weight:bold;
min-height:30px;
height:30px;
display: table-cell;
vertical-align: middle;
}

#tit { /*он должен встать по центру вертикали*/
position:relative;
padding:2px;
padding-top:3px;
padding-left:2px;
font-weight:bold;
color:#14508E;
width:149px;
position:relative;
margin-top: expression((parentNode.offsetHeight - this.offsetHeight)<0 ? "0" : (parentNode.offsetHeight - this.offsetHeight)/2 + "px");}
#img_tit {
width:9px;
height:9px;
background-color:#DEB24F;
margin:3px;
margin-left:4px;
}
.td {
padding-top:3px;}
#ugl {
position:absolute;
background:url(img/ugl.gif);
width:62px;
height:42px;
left: 374px;
top: 188px;
z-index:2;
}
#text {
width:712px;
position:relative;
padding:19px;
padding-top:7px;
font-family:Arial, Helvetica, sans-serif;
font-size:13px;
text-align:justify;

}
#text ul{
padding-left:40px;
font-family:Arial, Helvetica, sans-serif;
font-size:13px;
}
#text p{
padding-bottom:10px;
padding-top:10px;
}

#footer {
position:relative;
top:-4px;
background:#FFFFFF url(img/footerleft.jpg) no-repeat left;
width:982px;
height:61px;
clear:both;}
#left {
	margin-left: 19px;
	width:189px;
	float:left;
	z-index:4;
	display: inline;

}

woofs · February 7, 2009

Ссылку бы желательно на сайт с проблемой или хотя бы привести фрагмент HTML-кода, чтобы понятно было, кто куда входит.

Код предоставил

artist_id · February 8, 2009

Как мне показалось на мой беглый взгляд, это все из-за того, что у div`а content2 прописано свойство overflow: hidden. Так как для этого дива жестко не задана высота, то осел её на автомате считает равной высоте видимого окна браузера. А так как стоит оверфлоу то он и обрезает, то что не вмещается. Попробуй убрать оверфлоу.

Sign In

overflow: hidden, проблема в IE6

Question

woofs

Link to comment

Share on other sites

4 answers to this question

Recommended Posts

Vlad

Link to comment

Share on other sites

woofs

Link to comment

Share on other sites

woofs

Link to comment

Share on other sites

artist_id

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information