проблема с версткой сайта в ie

sitemaker999 · May 13, 2013

http://sitemakers.lo...l/html/comment/

зайдите на эту страницу в IE: тут-то и появились проблемы

во всех остальных браузерах - нормально

HTML:


<!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=utf-8" />
<title>Документ без названия</title>
<link href="/0.css" rel="stylesheet" type="text/css" />
<link href="/favicon.ico" rel="icon" type="image/vnd.microsoft.icon" />
</head>
<body>
<div id="layoutblock">
<div id="headerblock"><h1 align="center">Сайт и сайтостроение</h1></div>
<div id="contentblock">
Контент
</div>
<div id="rightblock"><?php include($_SERVER['DOCUMENT_ROOT']."/menu.php"); ?></div>
<div id="footerblock">© 2013-<?php echo date('Y') ?>. Все права защищены.</div>
</div>
<?php include($_SERVER['DOCUMENT_ROOT']."/xdata.php") ?>
</body>
</html>

CSS:


@charset "utf-8";
/* MAIN STYLE */
body {
background: url(http://sitemakers.lordhosting.ru/template/sitebg.jpg) fixed;
margin: 0;
}
#layoutblock {
background-color: #FFFFFF;
width: 960px;
margin: auto;
border-radius: 50px;
zoom: 1;
}
#rightblock, #contentblock {float: left;}
#headerblock, #footerblock {clear: both;}
#rightblock {
width: 240px;
background-color: #FBE8E1;
zoom: 1;
}
#headerblock {
width: 960px;
background-color: #561D09;
color: #FFFFFF;
height: 50px;
line-height: 50px;
border-top-left-radius: 50px;
border-top-right-radius: 50px;
zoom: 1;
}
#headerblock h1 {margin: 0;}
#contentblock {
width: 704px;
background-color: #FFFFFF;
padding: 8px;
zoom: 1;
}
#footerblock {
width: 960px;
/*background-color: #FFFFFF;*/
padding-left: 50px;
padding-right: 50px;
zoom: 1;
}
/* SITE MENU */
.sitemenu {list-style-type: none; padding: 0;}
.sitemenu li.item {}
.sitemenu a {color: #000000; text-decoration: none;}
.sitemenu li.subitem {padding-left: 10px;}
.sitemenu li.subitem2 {padding-left: 20px;}
.sitemenu li.selected {}
.sitemenu li.subsel {}
.sitemenu li.subsel2 {}
/* CODE */
.insertedcode {
color: #000;
background-color: #D6D6D6;
font-family: "Courier New", Courier, monospace;
font-size: 9pt;
padding: 5px;
white-space: pre-wrap;
}
.insertedcode span.comment {
color: #999999;
}
.insertedcode .tag {
font-weight: bold;
color: #006699;
}
.insertedcode .doctype {
color: #006699;
}
.insertedcode .attribute {
font-weight: normal;
color: #B61039;
}
.insertedcode .attrval {
color: #39892F;
font-weight: normal;
}
.insertedcode .live {
background-color: #666666;
}

/* DOWNLOAD BUTTON */
.buttondownload:link, .buttondownload:visited, .buttondownload:hover  {
display: block;
border-radius: 50px;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ff00', endColorstr='#008000', gradientType=0);
background-image: -o-linear-gradient(top, #00ff00, #008000);
background-image: -moz-linear-gradient(top, #00ff00, #008000);
background-image: -webkit-linear-gradient(top, #00ff00, #008000);
background-image: -ms-linear-gradient(top, #00ff00, #008000);
background-image: linear-gradient(top, #00ff00, #008000);
text-decoration: none;
color: #FFFFFF;
height: 100px;
line-height: 100px;
text-align: center;
font-size: 100px;
}
.buttondownload:active {
display: block;
border-radius: 50px;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#008000', endColorstr='#00ff00', gradientType=0);
background-image: -o-linear-gradient(top, #008000, #00ff00);
background-image: -moz-linear-gradient(top, #008000, #00ff00);
background-image: -webkit-linear-gradient(top, #008000, #00ff00);
background-image: -ms-linear-gradient(top, #008000, #00ff00);
background-image: linear-gradient(top, #008000, #00ff00);
text-decoration: none;
color: #FFFFFF;
height: 100px;
font-size: 100px;
}

klierik · May 13, 2013

ещё один недоклон появился. эх...

У тебя ширина враппера 960пк. Ширина центральной колонки (В ИЕ) равна 750пк. Так что как бы ты не старался, но ширина сайдбара должна быть 210пк.

sitemaker999 · May 13, 2013

ещё один недоклон появился. эх...
У тебя ширина враппера 960пк. Ширина центральной колонки (В ИЕ) равна 750пк. Так что как бы ты не старался, но ширина сайдбара должна быть 210пк.

макет все равно слева

и еще, в нормальных браузерах справа сайдбара пустое пространство

Edited May 13, 2013 by sitemaker999

klierik · May 13, 2013

я проверял в ИЕ9 - все работает.

Открой дев.тулз в ИЕ и посмотри какие реальные размеры у блоков.

Я тестил в интерактивной Win7 IE9

sitemaker999 · May 13, 2013

у меня IE7 под XP

sitemaker999 · May 13, 2013

пустое пространство исправил хаками, а вот то что враппер слева - нет

только появилась проблема: в IE если контента меньше, чем меню, то появляется пустое пространство справа

Edited May 13, 2013 by sitemaker999

klierik · May 13, 2013

IE7 - это недобраузер. но я бы решил так:

#layoutblock {

margin-left: -480px;

position: relative;

left: -50%;

}

sitemaker999 · May 13, 2013

недобраузер

:D :D :D

вы ошиблись:

#layoutblock {

margin-left: -480px;

position: relative;

left: 50%;

}

Edited May 13, 2013 by sitemaker999

klierik · May 13, 2013

эти стили только под ИЕ7 естественно? у нем проверил выравнивание по-центру страницы - все ок.

Или может я не правильно понял проблему.

sitemaker999 · May 13, 2013

Стоп! Если контента меньше чем сайдбара, то в IE сайдбар съезжает немного влево.

эти стили только под ИЕ7 естественно? у нем проверил выравнивание по-центру страницы - все ок.
Или может я не правильно понял проблему.

я уже это исправил

klierik · May 13, 2013

недобраузер
:D :D :D
вы ошиблись:
#layoutblock {
margin-left: -480px;
position: relative;
left: 50%;
}

Ко мне на ты.

#rightblock {
float: right;
width: 240px;
background-color: #FBE8E1;
zoom: 1;
}

Так будет корректнее.

sitemaker999 · May 14, 2013

у меня стоит float:right только не в стиле для IE<=7 а для ВСЕХ браузеров

Стоп! Если контента меньше чем сайдбара, то в IE сайдбар съезжает немного влево.

Идите на главную, все увидите.

Edited May 14, 2013 by sitemaker999

Sign In

проблема с версткой сайта в ie

Question

Link to comment

Share on other sites

11 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Similar Content

Обсуждения

Important Information