Форум PHP программистов > Конфликт Опера с text-indent

[ Поиск ] - [ Пользователи ] - [ Календарь ]

Полная Версия: Конфликт Опера с text-indent

Владимир55

8.01.2014 - 15:00

Страница соостоит из трех колонок, в одной из которых имеется текст и изображение ( Смотрите). При этом текст наползает на изображение на величину отступа, установленного в text-indent. Причем, этот неприятный дефект существует только в Опера (скриншот, слово "потом").

Как бы от него избавиться?

<!DOCTYPE html>
    <html>
    <head>
<title>Проверка верстки. С графикой. </title>
<meta name="description" content="Бизнес ">
<meta name="keywords" content="Россия">
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
 
 
<style>
 
/* ОЧИЩАЕМ УСТАНОВКИ БРАУЗЕРА ПО УМОЛЧАНИЮ */
 
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
vertical-align: middle;
background: transparent; 
font:15px Arial,sans-serif;
}
 
 
#Contour_page {max-width:1000px; margin:0 auto; padding: 1%; background-color:#FFF;}
 
 
/* КОНТЕНТ ВЦЕЛОМ */
#Content {margin: 0 auto; padding-top:0; display:table;}
#string_content ul {display:table-row;}
 
#Left_column{width:28%; display:table-cell; vertical-align:top; background-color:#9FF}
#Central_column{width:50%; display:table-cell; vertical-align:top; padding: 0 2% 0 2%; background-color: #FCF}
#Right_column{width:20%;display:table-cell; vertical-align:top; background-color:#FF9}
 
.text_p {font-size:100%; text-indent:7%; text-align:justify; }
 
.img_center { width:40%; height:auto; padding:0 2% 0 2%;}
 
 
</style>
 
</head>
 
<body>
 
    <div id="Content">
        <div id="string_content">
            <ul>
                <li id="Left_column">-</li>
 
                
                <li id="Central_column">  <!-- Начало кода средней колонки -->
 
    <div class="text_p">
<p>Материалы публикуются на сайте в следующем порядке.</p>
<p>Сначала их пишут, 
<img src="/1-my-images/328904408.jpg" style="float:right;" class="img_center" /> 
потом исправляют ошибки, потом регистрируют, 
потом модерируют, потом публикуют и 
уже после всего этого их читают.</p>
    </div>    
               
                </li> <!-- Конец кода средней колонки -->
 
                
                <li id="Right_column">-</li>
        </ul>
 
    </div> <!-- Конец id="string_content" -->
    </div> <!-- Конец id="Content" -->
 
 
</body>
</html>

Быстрый ответ:

Здесь расположена полная версия этой страницы.