Разнобой с картинками с padding в разных браузерах

Добрый день! У меня такая белеберда. На сайте http://maxsite.org/ras17#comment-61742 вычитала про обрамление картинок.

<div style="display: table;
            width: 0;
            padding: 10px;
            border: 5px solid #007FB5;">
<img src="путь к картинке" style="border: 1px solid #007FB5;">
</div>

И применила их у себе на сайте, как мне казалось довольно успешно (для наглядности – левый сайтбар 2,3 картинки сверху вниз главной страницы. Внимание! В OPERA), пока я не решила посмотреть, а что же покажет Эксплоер.

Код, который трансформировался (для 2-й картинки) следующий:

<div ALIGN="center">
<p STYLE="display: table; width: 0; padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; 
border-top-color: #007fb5; border-left-color: #007fb5; border-right-color: #007fb5; border-bottom-color: #007fb5; 
border-top-width: 5px; border-left-width: 5px; border-right-width: 5px; border-bottom-width: 5px; 
border-top-style: solid; border-left-style: solid; border-right-style: solid; border-bottom-style: solid" ALIGN="center">

<font FACE="times new roman,times"><font SIZE="2"><font COLOR="#4e8eed"><strong>"Vip-персона"</strong><br />
</font></font></font><a HREF="/online/vipperson/">

<img STYLE="border-top-color: #007fb5; border-left-color: #007fb5; border-right-color: #007fb5; border-bottom-color: #007fb5;
border-top-width: 1px; border-left-width: 1px; border-right-width: 1px; border-bottom-width: 1px; 
border-top-style: solid; border-left-style: solid; border-right-style: solid; border-bottom-style: solid" 
SRC="/wp-content/uploads/2008/04/foto_bisness.gif" ALT="Vip-персона" ALIGN="center" WIDTH="90" HEIGHT="40" BORDER="0" /></a><br />

<font FACE="times new roman,times"><font SIZE="2"><font COLOR="#4e8eed">персональные<br />
услуги</font></font></font></p>
</div>

Короче говоря, в Эксплоере padding-right: 10px; (как я поняла) показывает совсем другие px (гораздо уже, так что картинка вылазит за границы), и в итоге получается – ФИГНЯ ПОЛНАЯ!

Может как-то можно привести вид моих картинок в разных браузерах в один НОРМАЛЬНЫЙ ВИД ??? Подскажите, пожалуйста!!!

Коментарии: 3

11.06.2008 17:12

Ответить

Сейчас ради интереса открыла http://maxsite.org/ras17#comment-61742 в Эксплоере – посмотреть, а как там будут отображаться рамки для картинкок – и тоже криво.:(

Народ, зайдите http://maxsite.org/ras17#comment-61742 в Эксплоере, и если нетрудно как у кого отпишитесь. Просто интересно, это у меня такой глючный Эксплоер или у всех тоже кривые рамки показывает???

Что же можно сделать ??????????? …..мдаааааа

11.06.2008 17:29

Ответить

FF2 и IE6 – вроде одинаково. Но все равно: IE КРИВОЙ.

12.06.2008 06:25

Ответить

Поэкспериментировав, пришла к выводу, что для корректного отображения в разных браузерах из кода нужно убрать display: table, а width присвоить 100px (или более 100px).

Т.е. код такой

<div style="width: 100px;
            padding: 10px;
            border: 5px solid #007FB5;">
<img src="путь к картинке" style="border: 1px solid #007FB5;">
</div>

Вот тогда все будет ладушки, по крайней мере у меня 🙂

Разнобой с картинками с padding в разных браузерах

Свежее