Master-X
Форум | Новости | Статьи
Главная » Форум » Дизайн » 
Тема: CSS background: white url(white.gif) repeat; не работает
цитата
20/08/08 в 12:52
 COOLJACK
Прописываю для дива белый бекграунд и оно почему-то работает только в ИЕ, лиса и опера див прозрачный. Через TopStyle прописывал белый цвет хуевой тучей вариантов результат один в ИЕ как надо, в опере с лисой прозрачный.

Какие могут быть причины?
цитата
20/08/08 в 13:14
 Spander
кстати тоже пару раз сталкивался с проблемой такой
решения не знаю
интересно услышать мнение верстальщиков
цитата
20/08/08 в 13:43
 Yoni
background-color: #ffffff;
так нельзя?
цитата
20/08/08 в 13:59
 COOLJACK
Можно и так, да дохрена как можно только div прозрачный так и остаётся.


background-color: #ffffff;
background-image: url(template/white.gif);
background-repeat: repeat;
background: white url(template/white.gif) repeat;

Всеми возможноми способами прописал белый цвет для дива, он сцуко всёравно прозрачный в опере и лице.

Пробовал по отдельности прописыть варианты с белым цветом, никуя не помогает.
цитата
20/08/08 в 14:16
 Yoni
Покажи кусок кода и ссылку на этот гиф. Непонятная проблема. По сути, должно работать.
цитата
20/08/08 в 14:41
 nostalgie
стопудово что-то где-то перекрывается.
в первую очередь я бы фаербагом стили проверил...
мало ли у тебя, что-нить типа такого:

Код:

<style>
.div1, .div1 div {
   background-color:#000;
}
.div2 {
   background-color:#FFF;
}

</style>

<div class="div1">
   <div class="div2">хрен я белого цвета</div>
</div>


ну а если не поможет - выложи нерабочий пример...
цитата
20/08/08 в 14:42
 nostalgie
уммм... попробуй стили напрямую через style прописать для блока.
цитата
20/08/08 в 15:07
 AniS
а дело именно в белом цвете?остальные нормально идут?
если только в белом то возьми почти-почти-почти белый цвет да и все icon_cool.gif
у меня кстати тоже такое было но честно говоря для какого цвета не помню. я просто прошлась по стилям и где надо было clear:both делала...
цитата
20/08/08 в 15:11
 COOLJACK
Код:
<DIV id=sceleton>
<DIV id=header>
<H1><SPAN>BLA BLA BLA</SPAN></H1>
<DIV id=bookmark></DIV>
<DIV id=text>
<div align="justify">Welcome YADA YADA!</div>
</DIV>
<DIV id=mainmenu_top></DIV>
<DIV id=mainmenu_bottom></DIV>
</DIV>
<DIV>
<DIV id=thumbs><DIV id=fame><img src=img.php width=0 height=0 style='visibility: hidden;'></DIV>
<a href="streamrotator/out.php?l=#POS#&u=/out.php?url=#GAL#p=60"><img src="#THUMB#" width="150" height="200" alt="#DESC#"></a>
<a href="streamrotator/out.php?l=#POS#&u=/out.php?url=#GAL#p=60"><img src="#THUMB#" width="150" height="200" alt="#DESC#"></a>
<a href="streamrotator/out.php?l=#POS#&u=/out.php?url=#GAL#p=60"><img src="#THUMB#" width="150" height="200" alt="#DESC#"></a>
<a href="streamrotator/out.php?l=#POS#&u=/out.php?url=#GAL#p=60"><img src="#THUMB#" width="150" height="200" alt="#DESC#"></a>
<a href="streamrotator/out.php?l=#POS#&u=/out.php?url=#GAL#p=60"><img src="#THUMB#" width="150" height="200" alt="#DESC#"></a>
<a href="streamrotator/out.php?l=#POS#&u=/out.php?url=#GAL#p=60"><img src="#THUMB#" width="150" height="200" alt="#DESC#"></a>
<a href="streamrotator/out.php?l=#POS#&u=/out.php?url=#GAL#p=60"><img src="#THUMB#" width="150" height="200" alt="#DESC#"></a>
<a href="streamrotator/out.php?l=#POS#&u=/out.php?url=#GAL#p=60"><img src="#THUMB#" width="150" height="200" alt="#DESC#"></a>
<a href="streamrotator/out.php?l=#POS#&u=/out.php?url=#GAL#p=60"><img src="#THUMB#" width="150" height="200" alt="#DESC#"></a>
<a href="streamrotator/out.php?l=#POS#&u=/out.php?url=#GAL#p=60"><img src="#THUMB#" width="150" height="200" alt="#DESC#"></a>
<a href="streamrotator/out.php?l=#POS#&u=/out.php?url=#GAL#p=60"><img src="#THUMB#" width="150" height="200" alt="#DESC#"></a>
<a href="streamrotator/out.php?l=#POS#&u=/out.php?url=#GAL#p=60"><img src="#THUMB#" width="150" height="200" alt="#DESC#"></a>
<a href="streamrotator/out.php?l=#POS#&u=/out.php?url=#GAL#p=60"><img src="#THUMB#" width="150" height="200" alt="#DESC#"></a>
<a href="streamrotator/out.php?l=#POS#&u=/out.php?url=#GAL#p=60"><img src="#THUMB#" width="150" height="200" alt="#DESC#"></a>
<a href="streamrotator/out.php?l=#POS#&u=/out.php?url=#GAL#p=60"><img src="#THUMB#" width="150" height="200" alt="#DESC#"></a>
<a href="streamrotator/out.php?l=#POS#&u=/out.php?url=#GAL#p=60"><img src="#THUMB#" width="150" height="200" alt="#DESC#"></a>
<a href="streamrotator/out.php?l=#POS#&u=/out.php?url=#GAL#p=60"><img src="#THUMB#" width="150" height="200" alt="#DESC#"></a>
<a href="streamrotator/out.php?l=#POS#&u=/out.php?url=#GAL#p=60"><img src="#THUMB#" width="150" height="200" alt="#DESC#"></a>
<a href="streamrotator/out.php?l=#POS#&u=/out.php?url=#GAL#p=60"><img src="#THUMB#" width="150" height="200" alt="#DESC#"></a>
<a href="streamrotator/out.php?l=#POS#&u=/out.php?url=#GAL#p=60"><img src="#THUMB#" width="150" height="200" alt="#DESC#"></a>
<a href="streamrotator/out.php?l=#POS#&u=/out.php?url=#GAL#p=60"><img src="#THUMB#" width="150" height="200" alt="#DESC#"></a>
<a href="streamrotator/out.php?l=#POS#&u=/out.php?url=#GAL#p=60"><img src="#THUMB#" width="150" height="200" alt="#DESC#"></a>
<a href="streamrotator/out.php?l=#POS#&u=/out.php?url=#GAL#p=60"><img src="#THUMB#" width="150" height="200" alt="#DESC#"></a>
<a href="streamrotator/out.php?l=#POS#&u=/out.php?url=#GAL#p=60"><img src="#THUMB#" width="150" height="200" alt="#DESC#"></a>
<a href="streamrotator/out.php?l=#POS#&u=/out.php?url=#GAL#p=60"><img src="#THUMB#" width="150" height="200" alt="#DESC#"></a>
<a href="streamrotator/out.php?l=#POS#&u=/out.php?url=#GAL#p=60"><img src="#THUMB#" width="150" height="200" alt="#DESC#"></a>
<a href="streamrotator/out.php?l=#POS#&u=/out.php?url=#GAL#p=60"><img src="#THUMB#" width="150" height="200" alt="#DESC#"></a>
<a href="streamrotator/out.php?l=#POS#&u=/out.php?url=#GAL#p=60"><img src="#THUMB#" width="150" height="200" alt="#DESC#"></a>
<a href="streamrotator/out.php?l=#POS#&u=/out.php?url=#GAL#p=60"><img src="#THUMB#" width="150" height="200" alt="#DESC#"></a>
<a href="streamrotator/out.php?l=#POS#&u=/out.php?url=#GAL#p=60"><img src="#THUMB#" width="150" height="200" alt="#DESC#"></a>
<a href="streamrotator/out.php?l=#POS#&u=/out.php?url=#GAL#p=60"><img src="#THUMB#" width="150" height="200" alt="#DESC#"></a>
<a href="streamrotator/out.php?l=#POS#&u=/out.php?url=#GAL#p=60"><img src="#THUMB#" width="150" height="200" alt="#DESC#"></a>
<a href="streamrotator/out.php?l=#POS#&u=/out.php?url=#GAL#p=60"><img src="#THUMB#" width="150" height="200" alt="#DESC#"></a>
<a href="streamrotator/out.php?l=#POS#&u=/out.php?url=#GAL#p=60"><img src="#THUMB#" width="150" height="200" alt="#DESC#"></a>
<a href="streamrotator/out.php?l=#POS#&u=/out.php?url=#GAL#p=60"><img src="#THUMB#" width="150" height="200" alt="#DESC#"></a>
<a href="streamrotator/out.php?l=#POS#&u=/out.php?url=#GAL#p=60"><img src="#THUMB#" width="150" height="200" alt="#DESC#"></a></DIV>
<DIV id=advfooter><B>TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT
TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT</B></DIV>
<DIV id=topsites>
<div align="center">
<p><br>
<br>
<img src="template/top.jpg"></p>
</div>
</DIV>
<DIV id=footer><B>BLA BLA BLA BLA BLA</B></DIV>
</DIV></DIV>
</BODY></HTML>


css

Код:
* {
   PADDING-RIGHT: 0px;
   PADDING-LEFT: 0px;
   PADDING-BOTTOM: 0px;
   MARGIN: 0px;
   PADDING-TOP: 0px;
   LIST-STYLE-TYPE: none;
}
BODY {
   FONT: 11px Verdana, Geneva, Arial, Helvetica, sans-serif;
   background-image: url(template/bge.jpg);
}
A {
   COLOR: #595959; TEXT-DECORATION: underline
}
A:hover {
   TEXT-DECORATION: none
}
SPAN {
   DISPLAY: none
}
#sceleton {
   MARGIN: 0px auto;
   WIDTH: 1000px;
   POSITION: relative;
   background-color: #ffffff;
   color:white;
   }
   
#header {
   FLOAT: left
}
#footer {
   FLOAT: left
}
#header {
   WIDTH: 1000px;
   POSITION: relative;
   HEIGHT: 163px;
   background-image: url(template/kittyxboy.jpg);
}
#bookmark {
   LEFT: 800px;
   WIDTH: 188px;
   POSITION: absolute;
   TOP: 168px;
   height: 35px;
   background-repeat: no-repeat;
   background-image: url(template/bookmark.jpg);
}
#header #text {
   LEFT: 485px;
   WIDTH: 479px;
   POSITION: absolute;
   TOP: 75px;
   HEIGHT: 70px;
}
#header #mainmenu_top {
   LEFT: 482px;
   WIDTH: 487px;
   POSITION: absolute;
   TOP: 5px;
   height: 28px;
   background-repeat: no-repeat;
}
#fame {
   LEFT: 13px;
   WIDTH: 300px;
   POSITION: absolute;
   TOP: 168px;
   height: 35px;
   color: #000000;
   background-repeat: no-repeat;
   background-image: url(template/today.jpg);
}
#header #mainmenu_bottom {
   LEFT: 24px;
   POSITION: absolute;
   TOP: 109px;
   width: 443px;
   background-repeat: no-repeat;
   height: 39px;
}
#header UL LI {
   BORDER-RIGHT: #868686 1px solid; PADDING-RIGHT: 15px; DISPLAY: inline; PADDING-LEFT: 10px; PADDING-BOTTOM: 0px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none
}
#header UL LI.none {
   BORDER-TOP-STYLE: none; BORDER-RIGHT-STYLE: none; BORDER-LEFT-STYLE: none; BORDER-BOTTOM-STYLE: none
}
#header UL LI A {
   FONT-WEIGHT: bold;
   COLOR: #FFFFFF
}
#content {
   PADDING-LEFT: 25px; MARGIN: 10px 0px; WIDTH: 955px
}
#content P {
   PADDING-RIGHT: 20px; PADDING-LEFT: 0px; PADDING-BOTTOM: 5px; PADDING-TOP: 5px; TEXT-ALIGN: justify
}
#content A {
   PADDING-RIGHT: 3px; PADDING-LEFT: 3px; FLOAT: left; PADDING-BOTTOM: 0px; PADDING-TOP: 0px
}
#content IMG {
   BORDER-RIGHT: #fa6696 1px solid; BORDER-TOP: #fa6696 1px solid; MARGIN-BOTTOM: 5px; BORDER-LEFT: #fa6696 1px solid; BORDER-BOTTOM: #fa6696 1px solid
}
#content A:hover IMG {
   BORDER-RIGHT: #f33072 1px solid; BORDER-TOP: #f33072 1px solid; BORDER-LEFT: #f33072 1px solid; BORDER-BOTTOM: #f33072 1px solid
}
#thumbs {
   MARGIN-TOP: 45px;
   PADDING-LEFT: 8px;
   FLOAT: left;
   WIDTH: 1000px;
   background-image: url(template/white.gif);
   background-color: white;
   background-repeat: repeat;
   background: white url(template/white.gif) repeat;
}
#thumbs P {
   PADDING-RIGHT: 20px; PADDING-LEFT: 0px; PADDING-BOTTOM: 5px; PADDING-TOP: 5px; TEXT-ALIGN: justify
}
#thumbs A {
   PADDING-RIGHT: 3px; PADDING-LEFT: 3px; FLOAT: left; PADDING-BOTTOM: 0px; PADDING-TOP: 0px
}
#thumbs IMG {
   BORDER-RIGHT: #cdcdcd 1px solid;
   BORDER-TOP: #cdcdcd 1px solid;
   MARGIN-BOTTOM: 5px;
   BORDER-LEFT: #cdcdcd 1px solid;
   BORDER-BOTTOM: #cdcdcd 1px solid;
   padding-bottom: 3px;
   padding-left: 3px;
   padding-right: 3px;
   padding-top: 3px;
}
#thumbs A:hover IMG {
   BORDER-RIGHT: #f33072 1px solid;
   BORDER-TOP: #f33072 1px solid;
   BORDER-LEFT: #f33072 1px solid;
   BORDER-BOTTOM: #9a9a9a 1px solid;
   background-color: #FB72A0;
}
#footer {
   WIDTH: 1000px;
   POSITION: relative;
   HEIGHT: 120px;
   background-color: #1A1A1A;
}
#footer P {
   FONT-SIZE: 10px;
   LEFT: 283px;
   WIDTH: 410px;
   COLOR: #fff;
   POSITION: absolute;
   TOP: 205px;
   HEIGHT: 66px;
   TEXT-ALIGN: center
}
#footer B {
   FONT-WEIGHT: normal;
   FONT-SIZE: 10px;
   LEFT: 150px;
   WIDTH: 630px;
   COLOR: #CCCCCC;
   POSITION: relative;
   TOP: 20px;
   HEIGHT: 100px;
   TEXT-ALIGN: left
}
#footer B A {
   PADDING-RIGHT: 10px; COLOR: #dedede; TEXT-DECORATION: underline
}
#footer B A:hover {
   TEXT-DECORATION: none
}
#footer #copy {
   FONT-SIZE: 10px; LEFT: 311px; WIDTH: 376px; COLOR: #fff; POSITION: absolute; TOP: 176px; HEIGHT: 24px; TEXT-ALIGN: center
}
#footer #copy A {
   COLOR: #fff
}

#fame {
   LEFT: 13px;
   WIDTH: 300px;
   POSITION: absolute;
   TOP: 168px;
   height: 35px;
   background-repeat: no-repeat;
   background-image: url(template/fame.jpg);
}

#today {
   LEFT: 13px;
   WIDTH: 300px;
   POSITION: absolute;
   TOP: 1610px;
   height: 35px;
   background-repeat: no-repeat;
   background-image: url(template/today.jpg);
}

#yesterday {
   LEFT: 13px;
   WIDTH: 300px;
   POSITION: absolute;
   TOP: 2627px;
   height: 35px;
   background-repeat: no-repeat;
   background-image: url(template/yesterday.jpg);
}

#archive {
   LEFT: 13px;
   WIDTH: 300px;
   POSITION: absolute;
   TOP: 3645px;
   height: 35px;
   background-repeat: no-repeat;
   background-image: url(template/archive.jpg);
}

#bonus {
   LEFT: 13px;
   WIDTH: 300px;
   POSITION: absolute;
   TOP: 5513px;
   height: 35px;
   background-repeat: no-repeat;
   background-image: url(template/bonus.jpg);
}

#header #topsites {
   LEFT: 30px;
   POSITION: absolute;
   width: 48px;
   background-repeat: no-repeat;
   height: 48px;
}

#topsites {
   FLOAT: left
}

#topsites{
   WIDTH: 1000px;
   POSITION: relative;
   HEIGHT: 250px;
}
#topsitesP {
   FONT-SIZE: 10px;
   LEFT: 283px;
   WIDTH: 410px;
   COLOR: #fff;
   POSITION: absolute;
   TOP: 205px;
   HEIGHT: 66px;
   TEXT-ALIGN: center
}
#topsitesB {
   FONT-WEIGHT: normal;
   FONT-SIZE: 10px;
   LEFT: 150px;
   WIDTH: 630px;
   COLOR: #CCCCCC;
   POSITION: relative;
   TOP: 20px;
   HEIGHT: 100px;
   TEXT-ALIGN: left
}
#topsitesB A {
   PADDING-RIGHT: 10px; COLOR: #dedede; TEXT-DECORATION: underline
}
#topsitesB A:hover {
   TEXT-DECORATION: none
}
#topsites#copy {
   FONT-SIZE: 10px; LEFT: 311px; WIDTH: 376px; COLOR: #fff; POSITION: absolute; TOP: 176px; HEIGHT: 24px; TEXT-ALIGN: center
}
#topsites#copy A {
   COLOR: #fff
}
#advfooter {
   FLOAT: left
}
#advfooter {
   WIDTH: 1000px;
   POSITION: relative;
   HEIGHT: 120px;
}
#advfooter P {
   FONT-SIZE: 10px;
   LEFT: 283px;
   WIDTH: 410px;
   COLOR: #fff;
   POSITION: absolute;
   TOP: 205px;
   HEIGHT: 66px;
   TEXT-ALIGN: center
}
#advfooter B {
   FONT-WEIGHT: normal;
   FONT-SIZE: 10px;
   LEFT: 175px;
   WIDTH: 650px;
   COLOR: #000000;
   POSITION: absolute;
   TOP: 10px;
   HEIGHT: 100px;
   TEXT-ALIGN: center
}
#advfooter B A {
   PADDING-RIGHT: 10px; COLOR: #dedede; TEXT-DECORATION: underline
}
#advfooter B A:hover {
   TEXT-DECORATION: none
}
#advfooter #copy {
   FONT-SIZE: 10px; LEFT: 311px; WIDTH: 376px; COLOR: #fff; POSITION: absolute; TOP: 176px; HEIGHT: 24px; TEXT-ALIGN: center
}
#advfooter #copy A {
   COLOR: #fff
}
цитата
20/08/08 в 15:13
 COOLJACK
AniS писал:
а дело именно в белом цвете?остальные нормально идут?
если только в белом то возьми почти-почти-почти белый цвет да и все icon_cool.gif
у меня кстати тоже такое было но честно говоря для какого цвета не помню. я просто прошлась по стилям и где надо было clear:both делала...

Ну такая идея меня тоже посетила только такая хрень со всеми цветами.
цитата
20/08/08 в 16:54
 ivango
попробуй тому диву, который прозрачный, а должен быть белым, приписать свойство "opacity: 1.0;"
цитата
20/08/08 в 17:06
 COOLJACK
Пока всё безрезультатно!

И если кто не догодался, то <DIV id=sceleton> должен быть белым.

И посоветуйте какой нить дизайнерский форум на русском.
цитата
20/08/08 в 18:10
 wMaster
Во-первых, следует знать, что нельзя сделать полностью универсальный стиль, который будет работать одинаково для всех браузеров. Поэтому и делают часто определние типа браузера, а затем подставляют соответсвующий стиль на ходу.
Во-вторых, AniS, какое отношение clear: both; имеет к цвету? Это относится к обтеканию эдемента.
цитата
20/08/08 в 18:53
 kuindzi
Жаль что не весь код приведен icon_smile.gif
Да и времени у меня мало. Из за этого я так и не нашел причину.
Там любой цвет не попадает

Но могу подсказать где искать...

После беглого просмотра бросился в глаза вот этот кусок
Код:

#topsites {
   FLOAT: left
}

#topsites{
   WIDTH: 1000px;
   POSITION: relative;
   HEIGHT: 250px;
}

Что это? Зачем это?
Я убрал "FLOAT: left" и все стало нормально.
Короче, ищи здесь...

Вот несколько форумов по теме
Один
Второй
Удачи
цитата
20/08/08 в 18:56
 erobrand
Аниска имела в виду не забыть зачистить флоаты, чтобы в родительском диве для плавающих элементов бэк не пропадал.

В коде не разбирался, чёто много там всего. Кинь десятку $ проф кодеру, за минут 10 найдёт и решит проблему.
цитата
20/08/08 в 18:59
 COOLJACK
Не ну как мне нравится это блядство с барузерами не одно так другое icon_mrgreen.gif
Если задать для дива POSITION: absolute; то див закрашивается в белый, и выравнивание по центру работает только в опере и листе.
Крч wMaster, как в воду глядел придётся делать для браузеров разные стили icon_smile.gif
цитата
20/08/08 в 19:08
 wMaster
Dizman©, а да, кстати, есть такое дело. smail54.gif
COOLJACK, тот див скорее просто смещен/невиден, зачекай флоаты.
цитата
20/08/08 в 21:43
 COOLJACK
wMaster писал:
COOLJACK, тот див скорее просто смещен/невиден, зачекай флоаты.

Да в попу что-то чекать, куда проще для ИЕ отдельный css загрузить icon_wink.gif
цитата
20/08/08 в 23:42
 Uwe Morgenstern
зачем тебе отдельный цсс? юзай хаки.
полный комплект:
Код:

.class { background: white } /* Для оперы и прочего */
.class {
#background: yellow !important; /* IE 7 */
_background: gray; /* IE6 */
}

html*.class { background: green; } /* IE 6 */
*+html .class { background: green; } /* IE 7 */


.class, x:-moz-any-link { background: green; } /* FF */
@-moz-document url-prefix(){.class {background: red;}}/* FF */
@-moz-document url-prefix(){.class, x:-moz-any-link, x:default {background: black;}}/* FF3 */

html:root*.class { background: red !important; } /* Safari */

html:first-child .class {background: red;} /* Opera 9 */
цитата
21/08/08 в 09:04
 pierx
Хз у меня нормально отображается и в мозилле и в фф.
Урл страницы дай
цитата
21/08/08 в 10:15
 AniS
Dizman©: понял меня с полслова smail101.gif
у меня вообще решение всех проблем clear:both и float:none icon_smile.gif COOLJACK: а че хрень то с цветами) фотошоп и вперед)нарезанные гифы менять еще легче)зато сделал бы и с версткой не мучался)
цитата
21/08/08 в 11:00
 Skat
стукни мне, если там не совсем все криво, попробую подправить


Эта страница в полной версии