проблемы с ИЕ

Aleksandrid · July 10, 2009

Доброго времени суток Уважаемые Форумчане! проблема следующая, помогите плиз кто чем может :blink: ....дан макет сайта из заголовка и двух расположенных в паралель блока именно меню и основной контент , в опере и мазиле отображается корректно, а в IE все что ниже заголовка съезжает вправо(((как быть????....и подскажите мне неопытному что такое, вернее из за чего при вымещении на сервак странички все изображения с нее пропали???...что я не так делаю????...воть ссылка на тестовую страницу http://exampl-1.narod.ru/INDEX.HTM ! спасибо заранее огромное

Павел Билькис · July 11, 2009

<html>
<head>
<title>Test</title>
<style type="text/css">
body{
  margin:0;
  padding:0;
}

#logo, #content, #menu{
   border:1px solid black;
}

#container{
  width:1000px;
}

#content{
   width:800px;
}

#logo{
  width:950px;
}

#menu{
  width:150px;
}

#menu, #content{
  float:left;
}
</style>
</head>
<body>
<div id="container">
  <div id="logo">
   <h1>Logo</h1>
  </div>
  <div id="menu">
   <ul>
	<li><a href="#">dhffgfg</a></li>
	<li><a href="#">dhffgfg</a></li>
	<li><a href="#">dhffgfg</a></li>
	<li><a href="#">dhffgfg</a></li>
	<li><a href="#">dhffgfg</a></li>
	<li><a href="#">dhffgfg</a></li>
	<li><a href="#">dhffgfg</a></li>
   </ul>
  </div>
  <div id="content">
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam placerat orci id sem vestibulum ut imperdiet purus faucibus. Vivamus sem erat, faucibus sed facilisis at, lacinia quis purus. Vestibulum sem massa, volutpat eget tincidunt pharetra, placerat luctus justo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam fermentum dapibus congue. Morbi blandit varius nibh, ut iaculis arcu vehicula id. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin eu quam vel nulla malesuada aliquam non non felis. Aenean eu elementum sem. Etiam laoreet ultricies lectus ut placerat.

Etiam rutrum semper dui, sed gravida est luctus quis. Aliquam a lorem et tellus imperdiet imperdiet. Maecenas at justo diam. Quisque ut nunc arcu, id eleifend neque. Vestibulum sed est at massa congue congue. In vestibulum aliquet viverra. Proin eu sem lacus, sed imperdiet augue. Morbi interdum, magna in sagittis commodo, enim nulla tincidunt dolor, at cursus erat quam et magna. Sed at nisi nec sem vulputate facilisis vitae quis lectus. Nullam accumsan scelerisque velit vitae ultrices. Donec at lectus quis risus facilisis porta. Mauris tristique, turpis ac luctus pharetra, sem ipsum semper ligula, ut posuere elit ligula a orci. Suspendisse potenti. Maecenas non commodo augue.

Pellentesque consequat nulla et nibh vulputate porttitor. Vestibulum vestibulum cursus elit ullamcorper ultricies. Donec a massa quis lacus cursus volutpat. Vivamus sapien nisl, laoreet pellentesque vulputate ac, dignissim eu turpis. Nunc lobortis porttitor ligula id hendrerit. Maecenas eleifend odio sit amet velit placerat interdum. Etiam vulputate ipsum et arcu semper ac vulputate erat luctus. Donec sed ligula tellus. Donec ut nunc leo, at faucibus nulla. Quisque in justo non sem hendrerit tincidunt tempus ac lectus. In hac habitasse platea dictumst. Vestibulum vestibulum gravida purus ut lacinia. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

Donec adipiscing libero in tellus ornare sed malesuada mauris tincidunt. Cras posuere, lorem ac gravida ultricies, metus eros fringilla magna, ac lobortis nisi turpis vel lectus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris tempor consectetur consectetur. Phasellus lectus sapien, pulvinar sed facilisis non, dignissim quis metus. Nunc porta rutrum vehicula. Nullam vehicula dapibus risus sit amet volutpat. Pellentesque sed feugiat mauris. Aenean vel libero sit amet purus vestibulum vulputate sit amet sed velit. Pellentesque leo diam, malesuada id bibendum nec, dictum sed dui. Nunc ante sem, scelerisque sed aliquet at, porta dignissim metus. Integer quis eros lacus. Pellentesque consequat fringilla posuere. Phasellus dui ipsum, vestibulum vel accumsan eget, sagittis eget elit. Quisque vitae neque augue. Duis quam lectus, egestas vel pellentesque sed, pharetra ac nisi. Quisque tincidunt sem nec diam vehicula eleifend.

Quisque sagittis porta justo nec lacinia. Fusce nec tincidunt lacus. Etiam aliquet feugiat augue, a pretium justo interdum et. Aenean nibh arcu, tincidunt a feugiat eu, mattis ac neque. Maecenas vitae nibh elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aenean sed dui nulla. Donec purus ipsum, ullamcorper ut mattis sed, accumsan convallis magna. Proin elementum est vitae neque hendrerit in tempor magna aliquam. Integer vestibulum luctus augue, vel pellentesque leo dictum vitae. Nullam sit amet erat sit amet elit lobortis sodales eget eu libero. Sed tempor lorem metus. In quis nisi elit. Fusce eros sem, ultricies sit amet facilisis et, tempor id neque. Integer eget fringilla ipsum. Praesent orci augue, adipiscing at blandit sed, congue sit amet ipsum. </p>
  </div>
</div>
</body>
</html>

Edited July 11, 2009 by Павел Билькис

Aleksandrid · July 12, 2009

Павел, я не могу понять что изменится после редоктирования...все также рабатает, только с другими цифирками(((((

body{
	padding:0px;
	margin:0px;
	font-family:Trebuchet MS, Verdana, Arial, Helvetica, sans-serif;
	font-size:11px;
	background:#000000 url(bg000000.gif) repeat-x top left;
	width:100%;
}

img{
	border:0px;
}

a{
	color:#c2e254;
	text-decoration:none;
}

form, table, ul, li{
	padding:0px;
	margin:0px;;
}

.sub{
	border:0px;
}

input, textarea{
	border:1px solid #cecece;
	font-size:12px
}

div#page{
	width: 800px;
	text-align:center;
}

/*header*/
#header{
	width:100%;
	height:249px;
	text-align:left;
}

#header_top{
	width:100%;
	height:77px;
	background:url(header_t.gif) no-repeat bottom;
}

#header_end{
	width:100%;
	height:188px;
	background:url(header_e.gif) no-repeat top;
}

#header_title{
	color:#ffffff;
	font-size:31px;
	padding-top:15px;
	padding-left:25px;
}
/*#blog*/
div#page #blog{
    padding-top:0px;
	float:left;
	width:100%;
	height:100%;

}

div#blog #blog_left{
	position: absolute;
	width:196px;
	padding-top:10px;
	float:left;
	padding-left:8px;

}

div#blog #targetArea{
	color: #FFFFFF; 
	position: absolute; 
 	margin-left: 200px; 
 	background: #000000; 
 	padding: 10px;
	width: 600px;
	height: 100%
	font-size:11px;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-weight:bold;
}

/* sidebar*/

#blog_left #sidebar{
	text-align:left;
	width:100%;
}


#blog_left #sidebar ul{
	padding:0px;
	padding-left:0px;
	margin:0px;
}
#blog_left #sidebar li{
	padding-left:0px;
	text-align: left;
	padding:0px;
	margin:0px;
	list-style-type:none;
}

#blog_left #sidebar div{
	color:#c1c1c1;
	font-size:11px;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-weight:bold;
	padding-left:0px;
	margin-top:0px;
	text-align: left;

}

#blog_left #sidebar li a{
	padding-left:0px;
	color:#c1c1c1;
	font-size:11px;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	text-decoration:none;
	text-align: left;
	font-weight:normal;
	line-height:19px;
}

#blog_left #sidebar div ul li{
	font-size:11px;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-weight:bold;
	padding-right:5px;
	padding-bottom:5px;
	background:none;
	padding-left:40px;
	margin-top:0px;
}
#blog_left #sidebar div ul li ul li{
	font-size:11px;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-weight:normal;
	color:#c1c1c1;
	padding-bottom:0px;
	padding-left:5px;
}
#blog_left #sidebar div ul li ul li a{
	font-size:11px;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-weight:normal;
	color:#c1c1c1;
}

#blog_left #sidebar div ul li{
	border-bottom:0;
	padding-left:10px;
	background: url(solid_li.gif) center bottom no-repeat;
}

#blog_left #sidebar .no_border{
	border-bottom:0;
	background: none;
}

#blog_left #sidebar div.widget_categories ul li ul li{
	padding-left:0px;
	border-bottom:0;
	background: none;
}

#blog_left #sidebar div.widget_categories div{
	background: url(cat_top0.gif) no-repeat top left;
}

#blog_left #sidebar div{
	border-bottom:0px;
 	background: url(cat_top_.gif) repeat-y top right;
	width:198px;
	margin:0px 0px 0px 0px; 

}


#blog_left #sidebar div.widget_archives ul{
	border-bottom:0;
	background: url(ar_top_l.gif) no-repeat top left;
	min-height:150px;
}

#blog_left #sidebar div.widget_categories ul li ul{
	border-bottom:0;
	background: none;
	min-height:0px;
}

#blog_left #sidebar div.w_end{
	border-bottom:0;
	padding:0px;
	margin:0px;
	background: url(w_end000.gif) no-repeat top left;
	height:31px;
}

#blog_left #sidebar div ul li ul{
	padding-left:10px;
	background:none;
}

#blog_left #sidebar div ul li a{
	background: url(bl_li000.htm) left top no-repeat;
	padding-left:9px;
}

#blog_left #sidebar div ul li a:hover{
	color:#FFFFFF;
}

#blog_left #sidebar div.widget_categories ul li a{
	background: url(cat_li00.htm) left top no-repeat;
	padding-left:9px;
}

#blog_left #sidebar div.widget_archives ul li a{
	background: url(ar_li000.htm) left top no-repeat;
	padding-left:9px;
}

#blog_left #sidebar div.widget_meta ul li a{
	background: url(meta_li0.htm) left top no-repeat;
	padding-left:9px;
}

#blog_left #sidebar div.widget_categories li ul.children li a{
	background: url(line_li0.gif) left top no-repeat;
	padding-left:9px;
}



#targetArea {
padding-top:15px;

		width: 700px; 
		height: 100%;
        font color:#FFFFFF;
        float: right;
        font-size: 12px;
        margin-left:12px;
        margin-right:12px;
        text-align: left;
        }

* html #targetArea {
        font color: #FFFFFF;
        float: right;
        margin-left: 12px;
        margin-right: 15px;
        clear: both;
        text-align: left;
        width: 632px;
        overflow: hidden; }

.targetArea a:hover { text-decoration: underline; }

.simplePage {
  padding: 10px 20px 0px 20px;
  margin: 0px;
}
#wrap1 {border: 1px solid #EBF0F4; border-top: 0px; }
#wrap2 {border-right: 1px solid #F6F8FA; border-top: 0px; //border-right: 0px; }

#content {
        padding: 5px;
        border-bottom: solid 1px #C3CAD2;
        border-left: solid 1px #DAE1E8;
        border-right: solid 1px #DAE1E8; }



        #content:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
        /* #content li a:hover { text-decoration: none; } */

/* Hides from IE-Mac \*/
* html #content { height: 1%; }
/* End hide from IE-Mac */

#wrapH {
        border-right: solid 1px #EAEEF3;
        border-left: solid 1px #EAEEF3;
}

#wrapHI {
        border-right: solid 1px #D5DDE6;
        border-left: solid 1px #D5DDE6;
}

#header {
        font-weight: bold;
        font-size: 11px;
        padding: 0px 10px 5px;
        margin: 0px;
        background-position: top left;
        background-repeat: repeat-x;
        color: black;

#header h1 {
        font-size: 11px;
}

#header h1 a {
        color: #696029;
}

#header span {
 color: #8E8443;
	color: #C8BF85;
}

#header b{
	color: #C8BF85;
	float:right;
}

#footer {
        text-align: center;
        color: #36638E;
        font-weight: bold;
        line-height: 21px;
        font-size: 11px;
        margin: 0px;
        padding: 0px 10px;
        background: #DAE1E8;
        border-bottom: solid 1px #36638E; }


/* ADS */

.leftAd {
 padding:3px; margin: 0pt auto; width: 100%; color: #000;
 background-color: #f7f7f7;
}
.leftAd p{
 margin:1px 5px;
 overflow: hidden;
 word-wrap: break-word;
 color: #222;
}
.leftAd h4 {
    text-align: center;
    font-size: 12px;
    border-bottom: solid 1px #DAE1E8;
    padding: 0px 0px 3px;
    margin: 0px 5px 3px;
}
.leftAd h3 {
    text-align: center;
    margin: 4px 5px 3px;
    color: black;
    font-weight: bold; }

/* TABS */

ul.tabs,ul.tabs li{list-style-type:none;margin:0;padding:0}
ul.tabs{width:600px}
ul.tabs li{float:left;margin-right: 3px;text-align: center;}
ul.tabs a{float:left;width: 7em;padding: 5px 0; text-decoration:none;}
ul.tabs a:hover{background: #DAE1E8; text-decoration:none;}

ul.tabs li.activeLink a,ul.tabs li.activeLink a:hover{background: #36638E;color: #FFF;}

я выложил полностью файл ссс, что в нем нужно доредоктировать чтоб блок div#blog #targetArea не съезжал в IE, есще и в мазиле шривты немного больше чем хотелось бы(((????????

sandro-css · July 12, 2009

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

поставь для начала

Aleksandrid · July 14, 2009

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
поставь для начала

какие еще предложения могут поступить???смерть а не жизнь...IE это ужасти какие то!!!...может чтото в коде не так ???

Justnewone · July 14, 2009

какие еще предложения могут поступить???смерть а не жизнь...IE это ужасти какие то!!!...может чтото в коде не так ???

Почитайте про haslayout, я когда впервые знакомился, волосы дыбом вставали... но сильно помогло.

Aleksandrid · July 14, 2009

Почитайте про haslayout, я когда впервые знакомился, волосы дыбом вставали... но сильно помогло.

огромное спасибо, а не могли бы Вы посоветовать ресурс по этой теме , а то в поисковиках всего много но всего почуть-чуть)

Justnewone · July 14, 2009

огромное спасибо, а не могли бы Вы посоветовать ресурс по этой теме , а то в поисковиках всего много но всего почуть-чуть)

первичное - http://msdn.microsoft.com/en-us/library/bb...28VS.85%29.aspx

общее знакомство на русском - http://html-css.info/2009/07/haslayout-ie/

Aleksandrid · July 14, 2009

первичное - http://msdn.microsoft.com/en-us/library/bb...28VS.85%29.aspx
общее знакомство на русском - http://html-css.info/2009/07/haslayout-ie/

Спасибо вам огромное очень помогла выставил в родительском и дочернем блоке zoom:1 и все заработало как надо!!!

Sign In

проблемы с ИЕ

Question

Aleksandrid

Link to comment

Share on other sites

8 answers to this question

Recommended Posts

Павел Билькис

Link to comment

Share on other sites

Aleksandrid

Link to comment

Share on other sites

sandro-css

Link to comment

Share on other sites

Aleksandrid

Link to comment

Share on other sites

Justnewone

Link to comment

Share on other sites

Aleksandrid

Link to comment

Share on other sites

Justnewone

Link to comment

Share on other sites

Aleksandrid

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information