кроссбраузерность - частный случай

zigfrid · June 2, 2007

Добрый вечер

Создал первый в свой веб-сайт: http://peartree.ho.com.ua

Сильно за дизайн не пинайте

Писал, как посоветовали, под Мозиллу. Под Мозиллой работает нормально ? так как и планировал.

Но если его открыть через ИЕ ? беда. Сразу возненавидел ИЕ?

Подскажите, отчего все мои круглые уголки в левой части сместились вниз? Это хорошо видно здесь: http://peartree.ho.com.ua/news.php

Вот кусок кода. Часть ПХП кода забрал, чтобы не отвлекал:

.leftcol{
float: left;
width: 170px;
}
.leftcol1,.leftcol2,.leftcol3{
background: #E8E8E8;
position: relative;
margin-bottom: 10px;
}
.leftcol4{
background: #E8E8E8;
position: relative;
}

.bolt-top-left{
width: 18px; height: 18px;
position:absolute;
top:0; left:0;
background: url(../pic/bolt-top-left.gif) no-repeat;
}
.bolt-top-right{
position:absolute;
width: 18px; height: 18px;
top:0px; right:0px;
background: url(../pic/bolt-top-right.gif) no-repeat;
}
.bolt-bottom-left{
position:absolute;
width: 18px; height: 18px;
bottom:0; left:0; 
background: url(../pic/bolt-bottom-left.gif) no-repeat;
}
.bolt-bottom-right{
position:absolute;
width: 18px; height: 18px;
bottom:0; right:0;
background: url(../pic/bolt-bottom-right.gif) no-repeat;


<div class='leftcol'>
<div class='leftcol1'><div class='bolt-top-left'></div><div class='bolt-top-right'></div><div class='bolt-bottom-left'></div><div class='bolt-bottom-right'></div>
<div class='text_block_zag'>Log In</div>
<div class='text_block_obich'>
 <form action='login.php' method='POST'>
 Login:
<input type='text' name='Ln'>

 Password:
<input type='password' name='Ps'>

 <input type='submit' value='Login'>
 </form></div>
<div class='register'><a href='register.php'>Register</a></div> 
</div> 

<div class='leftcol2'><div class='bolt-top-left'></div><div class='bolt-top-right'></div><div class='bolt-bottom-left'></div><div class='bolt-bottom-right'></div>
<div class='text_block_zag'>Statistics</div>
<div class='text_block_obich'>Users:  22</div>
</div>
</div>

Помогите, кто чем может?

Tokolist · June 2, 2007

У тебя верстка ИМХО в корне не правильная.

Ты создаешь для каждого уголка отдельный див и один общий, а надо так

http://htmlbook.ru/content/?id=106

Кроме того если смотреть на страницу в целом, то она нормально не отображается ни в одном браузере.

zigfrid · June 3, 2007

А разве в FireFox не нормально отображается?

У меня стоит 2.0.0.3 и я не вижу в н?м никаких недочетов...

zigfrid · June 3, 2007

Изменил код согласно этой http://htmlbook.ru/content/?id=106 рекомендации. В результате по Мозилле попрежнему нормально отбражается. В ИЕ попрежнему проблема - но немного другая. Что опять не так?

.leftcol{
float: left;
width: 170px;
}
.leftcol1,.leftcol2,.leftcol3{
background: #E8E8E8;
position: relative;
margin-bottom: 10px;
}
.leftcol4{
background: #E8E8E8;
position: relative;
}

.bolt-top-left{
background: url(../pic/bolt-top-left.gif) top left no-repeat;
}
.bolt-top-right{
background: url(../pic/bolt-top-right.gif) top right no-repeat;
}
.bolt-bottom-left{
background: url(../pic/bolt-bottom-left.gif) bottom left no-repeat;
}
.bolt-bottom-right{
background: url(../pic/bolt-bottom-right.gif) bottom right no-repeat;
}


<div class='leftcol'>
<div class='leftcol1'><div class='bolt-top-left'><div class='bolt-top-right'><div class='bolt-bottom-left'><div class='bolt-bottom-right'>
<div class='text_block_zag'>Log In</div>
<div class='text_block_obich'>
 <form action='login.php' method='POST'>
 Login:
<input type='text' name='Ln'>

 Password:
<input type='password' name='Ps'>

 <input type='submit' value='Login'>
 </form></div>
<div class='register'><a href='register.php'>Register</a></div> 
</div></div></div></div></div>

<div class='leftcol2'><div class='bolt-top-left'><div class='bolt-top-right'><div class='bolt-bottom-left'><div class='bolt-bottom-right'>
<div class='text_block_zag'>Statistics</div>
<div class='text_block_obich'>Users:  22</div>
</div></div></div></div></div>
</div>

Scrum · June 3, 2007

Скинь архивчик на мыло.

zigfrid · June 3, 2007

Скинь архивчик на мыло.

А что именно скидывать?

Внутри кода заросы к БД идут - локально сайт отображаться нормально не будет....

Я вот уже думаю, а может попроще чего-нибудь сделать. Без круглых углов да и без выпадающих альбомов. Если с углами такая проблема, то с выпадающими альбомами чувствую полная ж... в IE будет

Scrum · June 4, 2007

вот посмотри по поводу углов.

делал давно, но работает под всем.

http://photoexclusive.narod.ru/test/index.html

zigfrid · June 4, 2007

вот посмотри по поводу углов.
делал давно, но работает под всем.
http://photoexclusive.narod.ru/test/index.html

Ок. Спасибо. Сегодня вечером дома разберу...

zigfrid · June 7, 2007

Спасибо, Scrum, это мне помогло :-)

В жизнь бы не догодался подумать в этом направлении...

Но появилась другая проблема. Начал вылазить рисунок из блока.

http://peartree.ho.com.ua/news.php

Видно на предпоследнем блоке новостей снизу. Т.е., если высота рисунка больше, чем текстовое содержимое блока, то он вылазит.

Подскажите, как побороть это?

Ниже привожу код блока. ПХП забрал из него для удобочитаемости:

.rightcoln{ 
border-top: 1px solid #BFBFBF;
margin-bottom: 10px;
clear: both;
background: #E8E8E8;
position: relative;
overflow: hidden;
}

#news-top-left{
background: url(../pic/news-top-left.gif) left top no-repeat;
height: 18px;
text-align: right;
font-size: 0px;
}
#news-top-right, #news-bottom-right{
height: 18px; width: 18px;
font-size: 0px;
}
#news-bottom-left{
background: url(../pic/news-bottom-left.gif) left bottom no-repeat;
height: 18px;
text-align: right;
font-size: 0px;
}

.text_block_news_zag{
font-size: 110%;
font-weight: bold;
padding: 0px 0px 10px 10px;
float: left;
position: relative;
}
.text_block_news_data{
font-size: 100%;
font-style: italic;
text-align: right;
clear: left;
margin: 0px 10px 0px 0px;
}
.text_block_news_obich{
padding: 10px 10px 1px 10px;
text-align: justify;
font-style: italic;
}

.img_news{
position: relative;
overflow: hidden;
float: left;
padding: 0px 10px 0px 10px;
}

<div class='rightcoln'>
<div id='news-top-left'><span id='news-top-right'>
<img src='../pic/news-top-right.gif' height='18' width='18'></span></div> 
<div class='text_block_news_zag'>Zagolovok</div>
<div class='text_block_news_data'>DataNews</div>

<div class='img_news'><img src=image.jpg></div>
<div class='text_block_news_obich'>News</div>
<div id='news-bottom-left'><span id='news-bottom-right'>
<img src='../pic/news-bottom-right.gif' height='18' width='18'></span></div>
</div>

Scrum · June 8, 2007

попробуй для самого блока поставить float: left;

zigfrid · June 9, 2007

попробуй для самого блока поставить float: left;

К сожалению не получилось. Засунул float: left в rightcoln{}. В результате в ИЕ сильно вс? покор?жилось, а в фаерфоксе ничего не изменилось.

:lol:

Scrum · June 9, 2007

а у меня все нормально.

для .rightcoln ставлю float: left;

для #news-bottom-left clear: both;

zigfrid · June 9, 2007

а у меня все нормально.
для .rightcoln ставлю float: left;
для #news-bottom-left clear: both;

Да, действительно помогло :lol:

я не ставил #news-bottom-left clear: both

Честно говоря, я до сих думал, что float влияет на соседние блоки, а не на внутренние...

А в мо?м случае - это какой-то хак получается? Не могу понять - в ч?м его смысл?

Нельзя ли пояснить?

Sign In

кроссбраузерность - частный случай

Question

Link to comment

Share on other sites

12 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

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information