Фон перекрывает картинку в ИЕ. Почему-то...

Alice_vic · January 9, 2008

Привет всем! Помогите пожалуйста, не пойму в ч?м дело.

Есть примерно такая конструция:

Стили:

div.fon {background: url(/pic/fon8.jpg) no-repeat;}
#text {
 position: relative;
 top: 1px;
 padding: 0px 30px;
 vertical-align: top; 
}
#mid {
 background-image: url('pic/mid.gif');
 background-repeat: repeat-y;
 background-position:top;
 height: auto;
 width: 760px;
 text-align: justify;
 position: relative;
}

Код:

<div id="mid"><div id="text"><div class="fon">
<p class="..."> текст</p>
<img src="pic/kart2.jpg" align="right">
<p class="..."> тескт</p>
</div></div></div>

Должно быть так: есть фоновое изображение, и НА н?м текст и картинка kart2, обтекаемая текстом.

Но проблема в том, что в ИЕ (в Опере-все как надо) картинка kart2 перекрывается фоном.

Причем если убрать обтекание, т.е. align="right", то вс? нормально, и фон сидит как надо под картинкой.

Объясните пожалуйста, почему так и, главное, что с этим делать!

Или хотя бы в какую сторону копать!

Vlad · January 10, 2008

Попробуй заменить align="right" на style="float: right"

Alice_vic · January 10, 2008

Пробовала!! То же самое! Как только начинается обтекание - вс?, сразу перекрывает. Без обтекания - вс? ок.

Vlad · January 10, 2008

height: auto; - убери, это значение по умолчанию.

Поставь для фона просто background: url('pic/mid.gif') repeat-y;

Alice_vic · January 10, 2008

Поменяла, но вс? осталось по-прежнему .

В Опере вс? ок.

Vlad · January 10, 2008

Похоже придется код тебе более подробный выкладывать чтобы разобраться.

Alice_vic · January 10, 2008

Гм, это будет много... Ну, если это совсем неудобочитаемо и надо подкорректировать как-то - вы скажите!

Код странички:

<html><head>
<style type="text/css">
@import url("menustyle.css");
@import url("textstyle.css");
</style>
</head>
<body background="pic/ifon2.jpg"><div class="pictop"><img src="pic/ii1.jpg" ></div> <table border=0 

align=center><tr><td align=center><a href="http://www.ya.ru/"><H1>index</H1></a></td></tr><tr><td align=center>

 <div class="press"><a href="functions.php"><span class="one">menu1</span></a></div>
 <div class=outer> 

<a href="description.php"><span class="one">menu2</span></a></div>
 <div class=" outer "><a href="options.php"><span class="two">menu3</span></a></div>
 <div class=" outer "><a href="document.php"><span class="one">menu4</span></a></div>
 <div class=" outer "><a href="about.php"><span class="three">menu5</span></a></div>
</td></tr></table><table width=100% border=0><tr><td width=15% align=center valign=top>

<img 

src="pic/topeg.jpg">

<div class="pic"><img src="pic/i2_.gif"><p>lll lll lll lll</p></div>

<div 

class="pic"><img src="pic/i3.gif" width=60px height=60px><p>lll lll lll lll</p></div>

<div class="pic"><img 

src="pic/i4.gif"><p>Уllll llll lll l</p></div>

</td><td align=center valign=top><table border=0 align=center><tr>
<td align=center valign=top><div id="top"></div>
<div id="mid"><div id="text"><div class="fon">

<p class="title">bbbbbbbbb bbbbbbbb</p>
<p class="text">aaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa 

aaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaa </p>
<p class="text">aaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa 

aaaaaaaaaaaaaaaaaaaaaa aaa aaaaaaaaaaaaaaa </p>
<p class="text">aaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaa 

aaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaa </p>
<p class="text">aaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa 

aaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaa </p>


<p class="title">Над?жный помощник</p>
<p class="text">aaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaa aaaaa 

aaaaaaaaaaa aaaaaaaa aaaaa aaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaa 

aaaaaaaaaaaa aaaaa aaaaaaaaaaaa aaaaaaaaaa 
<img src="pic/kart2.jpg" align="right" hspace="10" alt="lll">
</p>
<p class="title">bbbbbbbbbbbbbbbb</p>
<p class="text">aaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaa </p>


<p class="title">bbb bbbbbbbb bbbbb bbb</p>
<img src="pic/pot3.jpg" align="left" hspace="10" alt="tarampampam"><p 

class="text">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa 

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa 

aaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaa aaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa </p>
<p class="text">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa 

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa </p>
<p class="text">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa 

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa </p>
</div></div></div>
<div id="bottom"></div>
</td></tr></table>
</td><td width=15%></td></tr></table>
</body>

</html>

Содержание файла textstyle.css

p.title {
 font-weight: bold;
 margin: 0 5 5px;
 text-indent: 40px;
}
p.text {
 margin-bottom: 5px; 
 text-indent: 40px;

}
p.textcenter {
 text-indent: 20px;
 font-size: 18;
 text-align: center;
 line-height: 1.5;
font-weight: bold;
}
div.fon {background: url('pic/fon8.jpg') no-repeat;
}
#center { text-align: center;
padding: 0px 30px;
}
p { margin-top: 0px;}
.figure {float: left;
background: #fc0;
 padding: 4px; /* Поля вокруг картинки */
 margin: 
 0px /* Отступ сверху */
 6px /* Отступ справа */
 4px /* Отступ снизу */
 0px; /* Отступ слева */
}

Cодержимое файла menustyle.css:

div.press {
 float: left; 
 background: url('pic/knoppppp3.gif'); /* Путь к файлу с исходным рисунком */
 display: block; /* Рисунок как блочный элемент */
 width: 166px;
 height: 56px;
 border: none; /* Рамка вокруг картинки */ 
 font: bold 12pt;
 text-decoration: none;
 color:#039;
 text-align: center;
 position: relative;
 z-index: 2; 
}
div.press.a {
 text-decoration: none;
 color:#039;
}
div.press a: visited{
 background: url('pic/knoppppp2.gif'); /* Путь к файлу с заменяемым рисунком */
 text-decoration: none;
 color:#039;
}

div.pictop {
 position: absolute;
 left: 0px;
 top: 0px;
 z-index: 1; 
}

div.outer {
 float: left; 
 background: url('pic/knoppppp1.gif'); /* Путь к файлу с исходным рисунком */
 display: block; /* Рисунок как блочный элемент */
 width: 166px;
 height: 56px;
 font-size: 12pt;
 text-align: center;
 border: none; /* Рамка вокруг картинки */ 
 text-decoration: none;
 position: relative;
 z-index: 2; 
 color:#039;
}

div.outer a {
 background: url('pic/knoppppp1.gif'); /* Путь к файлу с исходным рисунком */
 display: block; /* Рисунок как блочный элемент */
 width: 166px;
 height: 56px;
 border: none; /* Рамка вокруг картинки */ 
 text-decoration: none;
 color:#039;
}

div.outer a:hover {
 background: url('pic/knoppppp2.gif'); /* Путь к файлу с заменяемым рисунком */
 text-decoration: none;
 color:#039;
}
div.outer a: visited{
 background: url('pic/knoppppp2.gif'); /* Путь к файлу с заменяемым рисунком */
 text-decoration: none;
 color:#039;
}


span.three {
 display: block;
 margin:0; padding: 15px 12px;
 text-decoration: none;

 color:#039;
}
span.two {
 display: block;
 margin:0; padding: 15px 8px;
 text-decoration: none;

 color:#039;
}
span.one {
 display: block;
 margin:0; padding: 9px;
 text-decoration: none;
 color:#039;
}

H1 {
 font-size: 20pt;
 color: #ffffff;
 text-decoration: none;
}

#top {
 background-image: url('pic/top.gif');
 background-repeat: no-repeat;
 background-position: bottom;
 height: 15px;
 width: 760px;
 position: relative;
}
#mid {
background: url('pic/mid.gif') repeat-y;
 background-repeat: repeat-y;
 background-position:top;

 width: 760px;
 text-align: justify;
 position: relative;
}
 #bottom {
 background-image: url('pic/bottom.gif');
 background-repeat: no-repeat;
 background-position:top;
 height: 15px;
 width: 760px;
 position: relative;
}

#text {
 position: relative;
 top: 1px;
 padding: 0px 30px;
 vertical-align: top; 
}

.pic img {
 border: none; /* Рамка вокруг изображения */
} 
.pic p {
 margin: 0px; /* Убираем отступы вокруг абзаца */
 padding-top: 0px; /* Расстояние от рисунка до текста */
 text-align: center; /* Выравнивание по центру */
 line-height: 10px; /* Межстрочное расстояние */
 font-size: 8pt;
} 


 H2 {
 background: 
 url('sample.gif') /* Путь к изображению */
 no-repeat /* Не устанавливать повторение фона */
 1px /* Смещаем рисунок вправо */
 2px; /* Смещаем рисунок вниз */
 padding-left: 20px; /* Отступ слева от текста */
}

maddogrts · January 10, 2008

Доктайп поставьте (если не знаете, что это такое поищите в яндексе). Залейте на сайт, хотя бы бесплатный, например мне гораздо легче посмотреть на сайте чем разбирать чужой код.

Опять надеюсь в разделе для начинающих алфавит не будут спрашивать , а то совсем плохо будет

Dimitry Wolotko · January 10, 2008

maddogrts, замечание тебе, в этом разделе в поисковики не тыкают.

Alice_vic · January 10, 2008

Пробовала доктайпы, получалось то же самое.

Вот, залила сюда: http://gosha-parrot.narod.ru/i/i.html .

maddogrts · January 11, 2008

Присвойте изображение относительную позицию.

Либо

img {position: relative}

либо присвойте класс или айди и сделайте тоже самое

Alice_vic · January 11, 2008

О!

Сделала

img {position: relative;

float: right;}

и вс? заработало. Спасибо большое!!!

Bdfy · April 10, 2011

Спасибо мне тоже это помогло, раньше не размещал изображения по краям, а попробовал, во всех браузерах нормально, а в ИЕ чушь - НЕТ НИЧЕГО ПО КРАЯМ....

Как в Денвере - Ура Заработало. Вообще все стили надо перетрехнуть... Это здесь, если кому интересно http://voshodzhizni.ru/?p=577 .

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