Как убрать нижнее поле под рисунком 3 рх в IE6...

Serjinio · December 20, 2007

Рисунок вставлен в DIV с текстом...при добавлении текста образовалось внизу поле высотой в 3 рх ,как его убрать....?

Dimitry Wolotko · December 20, 2007

В стили вписать:

* {padding:0;margin:0;}

Без кода это вс? что могу посоветовать.

rash · December 20, 2007

vertical-align: bottom; (или text-bottom)

сейчас, похоже, выравнивание - baseline.

А еще, подозреваю, что у вас не указан доктайп, или указан неправильно.

walaby · December 20, 2007

если маргины и паддинги обнулены и все равно не получается, то если стоит

- убрать его

Serjinio · December 21, 2007

Код примера

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Новый Документ</title>

</head>
<style type="text/css">
* {
 margin: 0;
 padding: 0;
 border: 0;
 font-size: 100.01%;
}
#s{
 background: #FFFCDF;
}
</style>

<body>
<div id="s"><img src="house.jpg" alt="ss" width="285" height="165">ggggcc</div>
</body>
</html>

maddogrts · December 21, 2007

http://www.artlebedev.ru/tools/technogrette/html/doctype2/

Думаю это то что вам нужно

Serjinio · December 21, 2007

Спасибо за ссылку ,понял что бороться бесполезно...

maddogrts · December 21, 2007

доктайп убрать

strix · December 21, 2007

доктайп убирать неправильно

если очень важно сделать именно так - оберните картинку в плавающий див с такой же высотой, как картинка

rash · December 21, 2007

Спасибо за ссылку ,понял что бороться бесполезно...

Вертикальное выравнивание не помогло?

Serjinio · December 21, 2007

нет...

walaby · December 21, 2007

а так?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Новый Документ</title>

</head>
<style type="text/css">
* {
 margin: 0;
 padding: 0;
 border: 0;
 font-size: 100.01%;
}
#s{
 background: #FFFCDF;
}
</style>

<body>
<div id="s"><img src="house.jpg" alt="ss" width="285" height="165">
ggggcc</div>
</body>
</html>

rash · December 21, 2007

Кстати, кто-нибудь, объясните, зачем иногда размер шрифта указывается как 100,01%?

Вроде сколько ни указываю 100% - никаких неприятностей не замечал.

Кстати, кроссбраузерно решить вашу задачу у меня по-быстрому получилось так:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Новый Документ</title>
<style type="text/css">
* {
 margin: 0;
 padding: 0;
 border: 0;
 font-size: 100.01%;
}

#s{
	background: #FF9999;
}

#s * {
	vertical-align: bottom;
}

</style>
</head>

<body>
<div id="s"><img src="hat.jpg" alt="ss" width="96" height="96"><span>ggggcc</span></div>
</body>
</html>

Хотя решение "на коленке", и на элегантность не претендует.

Serjinio · December 22, 2007

Кстати, кто-нибудь, объясните, зачем иногда размер шрифта указывается как 100,01%?
Вроде сколько ни указываю 100% - никаких неприятностей не замечал.
Кстати, кроссбраузерно решить вашу задачу у меня по-быстрому получилось так:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Новый Документ</title>
<style type="text/css">
* {
 margin: 0;
 padding: 0;
 border: 0;
 font-size: 100.01%;
}

#s{
 background: #FF9999;
}

#s * {
 vertical-align: bottom;
}

</style>
</head>

<body>
<div id="s"><img src="hat.jpg" alt="ss" width="96" height="96"><span>ggggcc</span></div>
</body>
</html>
Хотя решение "на коленке", и на элегантность не претендует.

Хорошее решение...проверил в IE6 и Firefox 2.0

С :

quot;-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

http://www.w3.org/1999/xhtml">

quot;-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

http://www.w3.org/1999/xhtml">

quot;-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

quot;-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Без проблемм...Откликнитесь как смотрится в Опере...

Serjinio · December 22, 2007

Интересный эффект при легком изменении кода..может кому то и пригодиться...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Новый Документ</title>
<style type="text/css">
* {
 margin: 0;
 padding: 0;
 border: 0;
 font-size: 100.01%;
}
#s * {vertical-align: bottom;background: #FF9999;} 
</style>
</head>
<body>
<div id="s"><img src="house.jpg" alt="ss" width="285" height="165"><span>Интересный эффект,при легком иэменении кода может кому пригодиться..</span></div>
</body>
</html>

Serjinio · December 23, 2007

Ты наверное замечал, что некоторые версии Opera отображают шрифт мельче, чем IE и Mozilla.

Выставив для body 100.01% ,мы избавляемся от этой проблемы. Теперь все шрифты будут отображаться во всех браузерах одинаково, какой бы размер шрифта ты не ставил. (Кстати на xhtml.ru об этом тоже писали. Ищи статью "Правила хорошего тона")

А вот выставляя для body font-size: 62.5%; мы приводим 1em к 10px.

IMHO нужно всегда выставлять 100.01, а далее для всех элементов величину шрифта в процентах.

Vlad · December 23, 2007

Надо было обратиться вначале к типографике. Суть в том, что высота букв не равна расстоянию от верхнего до нижнего края, как многие думают. Грубо говоря, высота это брусок, на который наносится буква. Это хорошо заметно при выделении текста. Базовая линия же, по которой происходит выравнивание - это линия под текстом без учета выносных элементов вроде хвостика у буквы "р". Вот эти хвостики и дают прибавку в три пиксела в данном случае.

Sign In

Как убрать нижнее поле под рисунком 3 рх в IE6...

Question

Link to comment

Share on other sites

16 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

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