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

[zigfrid]

Добрый вечер

Создал первый в свой веб-сайт: 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]

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

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

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

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

[zigfrid]

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

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

[zigfrid]

Изменил код согласно этой 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]

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

[zigfrid]

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

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

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

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

[Scrum]

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

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

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

[zigfrid]

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

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

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

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

[zigfrid]

Спасибо, 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]

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

[zigfrid]

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

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

[Scrum]

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

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

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

[zigfrid]

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

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

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

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

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

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

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

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