Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате
Форум программистов > Вёрстка веб-сайтов > Проблема кроссбраузерности...


Автор: Iktash 1.8.2008, 18:09
Сильно не ругайте - я совсем начинающий верстальщик. Решил для примера сделать такую вещь:
user posted image

В опере получилось сностно (скрин из Оперы). А вот в ИЕ элемент Н5 уплыл далеко вверх и вправо. Как можно это поправить?

Код HTML:
Код

<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div><h5>Статистика</h5></div>
</body>
</html>


Код CSS:
Код

body{
text-align: center
}
div{
margin: 10px auto 0;
width: 250px;
height: 400px;
border-color: red;
border-width: 2px;
border-style: solid;
background-color: white;
}
h5{
position: relative;
top: -31px;
left: 10px;
background-color: white;
width: 70px;
padding-left: 2px;
border-color: red;
border-width: 2px;
border-style: solid;
}

Автор: bars80080 1.8.2008, 18:13
Код
* html h5 { top: 0px; }

Автор: Iktash 1.8.2008, 18:30
bars80080, уже лучше, но все равно неправильно позиционируется (теперь Н5 находится под рамкой дива и правее нужного положения). 
П.С. А это вы мне посоветовали хак для ие? И может есть где-то собрание полезных хаков?

Автор: NDenis 1.8.2008, 18:54
а обнулить отступы для заголовка?
Код

h5 {margin:0; padding:0;}


вот так, примерно
Код

<style type="text/css">
body{
/*text-align: center; зачем?*/ 
}
div{
margin: 10px auto 0;
width: 250px;
height: 400px;
border-color: red;
border-width: 2px;
border-style: solid;
background-color: white;
}
h5{
position: relative;
top: -10px; /* 31px очень много */
left: 10px;
background-color: white;
width: 70px;
padding-left: 2px;
border-color: red;
border-width: 2px;
border-style: solid;
}
</style>

Код

<div><h5>Статистика</h5></div>

Автор: Iktash 1.8.2008, 19:22
NDenis, спасибо, в Опере все пучком, но в ИЕ все равно плохо располагается, причем теперь положение вообще не контролируется (изменение значения top ничего не меняет smile )
Цитата

/*text-align: center; зачем?*/ 

Это просто для центрирования в ИЕ.

Автор: bars80080 1.8.2008, 19:49
и даже хаком не удаётся впарвить в нужное место? (хак должен идти после всех стилей)

Автор: Iktash 1.8.2008, 20:00
bars80080, неа, не удается. Еще пробовал вынести заголовок за див:
Код

<div></div><h5>Статистика</h5>

Тогда этот заголовок прижимается к левому верхнему углу окна.

Да, кстати, в Firefox тоже неправильное расположение, причем не похожее ни на что...

Автор: IBS 1.8.2008, 23:31
Попробуй так - у меня работает в opere и ie, с остальными не прокатит:
Код

<html><head>
<style>
body{
text-align: center; margin:0; padding:0;
}
div{
text-align: left; 
margin: 10px auto 0;
width: 250px;
height: 400px;
border-color: red;
border-width: 2px;
border-style: solid;
background-color: white;
}
h5{
position: relative;
top: -31px;
left: 10px;
background-color: white;
width: 70px;
padding-left: 2px;
border-color: red;
border-width: 2px;
border-style: solid;
}
</style>

<!--[if IE]>
<style>
h5{
position: relative;
top: -8px;
left: 10px;
background-color: white;
width: 70px;
padding-left: 2px;
border-color: red;
border-width: 2px;
border-style: solid;
}
</style>
<![endif]-->
</head><body>
<div><h5>Статистика</h5></div>
</body></html>


Добавлено через 12 минут и 30 секунд
Я сам не проверял, но возможно этот код будет работать под все браузеры.

<html><head>
<style>
body{
text-align: center; margin:0; padding:0;
}
div{
text-align: left;
margin: 10px auto;
padding:0;
width: 250px;
height: 400px;
border-color: red;
border-width: 2px;
border-style: solid;
background-color: white;
}
h5{
position: relative;
top:-8px;
left: 10px;
background-color: white;
width: 70px;
padding-left: 2px;
border-color: red;
border-width: 2px;
border-style: solid;
margin-top:0px;
}
</style>
</head><body>
<div><h5>Статистика</h5></div>
</body></html>

Все основные изменения я отметил красным, основная фишка в том, что opera для тегов Н создаёт отступы(margin) - надо их обнулять smile 

Автор: webster 1.8.2008, 23:47
IBS совершенно прав, для "сбрасывания" выравнивания блока по центру видимой области экрана, необходим вернуть свойство text-align в прежнее состояние - выравнивание по-левому краю, в противном случае позиционированные элементы относительно div будут рассчитывать свои координаты относительно центра блока:
Код

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title> </title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<style type="text/css">
* {
    margin: 0px; padding: 0px;
}
body{
text-align: center
}
div{
position: relative;
text-align: left;
margin: 10px auto 0;
width: 250px;
height: 400px;
border-color: red;
border-width: 2px;
border-style: solid;
background-color: white;
}
h5{
position: absolute;
margin-top: -10px;
margin-left: 10px;
background-color: white;
width: 70px;
padding-left: 2px;
border-color: red;
border-width: 2px;
border-style: solid;
}

</style>
</head>
<body>
<div><h5>Статистика</h5></div>
</body>
</html>

Автор: Iktash 2.8.2008, 00:33
webster, IBS, спасибо. Вот теперь действительно работает везде. Даже сам в шоке, что забыл вернуть прежнее значение text-align.
Для ясности может объясните еще, когда какое позиционирование лучше использовать. Ведь я изначально пробовал относительное, а диву вообще нормальное оставил. Как понять? 
И еще: h5{position: absolute;} Здесь элемент позиционируется абсолютно, но координаты его рассчитываются все равно относительно дива, в котором заголовок находится. Что изменяется, если заголовок будет позиционирован как relative?

Автор: webster 2.8.2008, 00:45
relative - при использовании этого свойства элемент не изымается из нормального хода документа, т.е. он продолжает занимать определенное место в родительском элементе и просто смещается относительно его, иногда это не очень удобно, потому как, например, надо начинать еще и заполнение родительского элемента текстом с самого его начала, в таком случае можно использовать position: absolute; в таком случае элемент уже не оказывает никакого влияния на окружающие его элементы, он как бы не занимает вообще место в нормальном ходе документа, а просто располагается сверху (или снизу, но это уже регулируется свойством z-index). Для того, чтобы элемент со свойством position: absolute; имел точку позиционирования отличную от левого верхнего угла окна броузера, надо задать свойство позиционирования position: relative; для родительского элемента, в таком случае позиционирование будет осуществляться относительно левого верхнего угла родителя.

Автор: Iktash 2.8.2008, 00:50
webster, большое спасибо! Вот теперь я разобрался.

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)