[ Поиск ] - [ Пользователи ] - [ Календарь ]
Полная Версия: Background h1 в IE
Форум PHP программистов > Дизайн и верстка
vedmed
6.04.2010 - 10:04
Добрый день, господа!

Подскажите, пожалуйста, бьюсь с фоном в теге h1. Нужно, чтобы перед текстом была картинка. Код CSS такой:

#content h1 {		
	background:url('images/hh.jpg') no-repeat scroll 0px 3px transparent;
	padding:2px 0 2px 20px;		
	text-align: left;
	text-transform: uppercase;
	font-size: 140%;
	margin: 20px 0px;
	color:#300;	
}

Как не крутил - не получается. В FF, как обычно все норм. IE 8 никак не хочет отображать. Может кто подскажет куда смотреть?



Спустя 6 минут, 4 секунды (6.04.2010 - 09:10) ApuktaChehov написал(а):
Уверен что IE поддерживает фон в заголовках? Никогда не сталкивался.

Спустя 1 минута, 7 секунд (6.04.2010 - 09:11) phz написал(а):
Попробуйте указать ширину и высоту картинки.

Спустя 33 секунды (6.04.2010 - 09:11) vedmed написал(а):
Честно говоря не знаю, сам не сталкивался.

Спустя 2 минуты, 35 секунд (6.04.2010 - 09:14) vedmed написал(а):
Каким образом? Если я просто напишу height/width, то это будет применено ко всему заголовку.

Спустя 30 минут, 32 секунды (6.04.2010 - 09:45) ApuktaChehov написал(а):
Попробуй задать еще: display: block;

А может сделать так?
<h1><span class="new_span">Траляля</span></h1>


Со спаном можно делать что угодно.

Спустя 5 часов, 7 минут, 10 секунд (6.04.2010 - 14:52) vedmed написал(а):
Это понятно. Но не хочется "левой рукой за правое ухо". Интересно, как сделать без <span>.

Спустя 11 минут, 44 секунды (6.04.2010 - 15:03) ApuktaChehov написал(а):
C display: block; не вашло?

Спустя 8 минут, 46 секунд (6.04.2010 - 15:12) vedmed написал(а):
Неа. Может IE вообще не поддерживает картинку в заголовке?

Спустя 1 день, 2 часа, 11 минут, 13 секунд (7.04.2010 - 17:23) Панч написал(а):
Цитата
Неа. Может IE вообще не поддерживает картинку в заголовке?

Начиная с 6 должны поддерживать.
Попробуй так:
background:url("images/hh.jpg") no-repeat 0px 3px;

Спустя 17 часов, 11 минут, 42 секунды (8.04.2010 - 10:35) vedmed написал(а):
Неа, не работает sad.gif Млять.

Спустя 40 минут, 21 секунда (8.04.2010 - 11:15) vedmed написал(а):
h1:before {
	content:url("images/hh.jpg");
}


Так тоже не работает, в FF все норм. Я думаю может что-то с DOCTYPE? Сейчас такой:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Спустя 5 часов, 29 минут, 57 секунд (8.04.2010 - 16:45) Панч написал(а):
С доктайпом по идее все нормально. Не разу с такой проблемой не сталкивался, обычно все нормально работает.

А можно полностью код глянуть?

Спустя 1 день, 3 часа, 2 минуты, 2 секунды (9.04.2010 - 19:47) Семён написал(а):
Держи:
h1 {
		background-image:url(images.jpeg);
		background-repeat:no-repeat;
		text-indent:70px;
		color:#300;
	}


<h1>Образец</h1>

Спустя 2 дня, 14 часов, 26 минут, 33 секунды (12.04.2010 - 10:14) vedmed написал(а):
Привет, всем. Спасибо за помощь, но не работает цука) Панч, вот код, но я его приводил в начале:
#content h1 {
	display: block;		
	background:url("images/hh.jpg") no-repeat 0px 3px;	
	padding:2px 0 2px 20px;		
	text-align: left;
	text-transform: uppercase;
	font-size: 140%;
	margin: 20px 0px;
	color:#300;		
	text-indent:10px;		
}


Семен, добавил text-indent, что текст налезает на картинку, тоже думал, но ее бы было видно. В общем, не работает...

Спустя 7 часов, 39 минут, 36 секунд (12.04.2010 - 17:54) kamik написал(а):
Цитата (vedmed @ 12.04.2010 - 07:14)
Привет, всем. Спасибо за помощь, но не работает цука) Панч, вот код, но я его приводил в начале:
#content h1 {
	display: block;  
	background:url("images/hh.jpg") no-repeat 0px 3px;	
	padding:2px 0 2px 20px;  
	text-align: left;
	text-transform: uppercase;
	font-size: 140%;
	margin: 20px 0px;
	color:#300;  
	text-indent:10px;  
}


Семен, добавил text-indent, что текст налезает на картинку, тоже думал, но ее бы было видно. В общем, не работает...

Попробуйте без #content или так: 

h1:before { 
              content:url("images/hh.jpg");


В первом случае блок h1 будет иметь фон, а во втором изображение выводится перед содержимым тега h1.

Спустя 1 час, 26 минут, 1 секунда (12.04.2010 - 19:20) Gabriel написал(а):
а может поступить еще пороще? если картинка не нужна под текстом вынести ее перед h1 в отдельный тег

Спустя 1 час, 21 минута, 21 секунда (12.04.2010 - 20:41) Панч написал(а):
я имел в виду и весь хтмл код тоже, если кроме заголовка таковой присутствует. Возможно проблема в нем, в осле много глюков в этом плане, у меня вот например постоянно с бекграундами в списках фигня была. Там картинка вообще когда хотела, тогда и появлялась =)

А если ты делаешь на локальной машине, то возможно с путем к картинке проблема.

Спустя 37 минут, 48 секунд (12.04.2010 - 21:19) Семён написал(а):
Нарисуй в пейнте как должно выглядеть
Затем прикрепи используемые в пейнте изображения сюда.

Спустя 11 часов, 58 минут, 8 секунд (13.04.2010 - 09:17) vedmed написал(а):
Добрый день всем!

Вчера попробовал такую конструкцию:
<h1>
<?php print theme('image',path_to_theme().'/images/hh.jpg'); print $title; ?>
</h1>
(CMS Drupal). В FF все отобразилось, в IE пустое окошко... Я в полном недоумении, не понимаю как так может быть. Почему-то IE не хочет упорно видеть эту картинку.

Спустя 37 минут, 27 секунд (13.04.2010 - 09:54) moskitos80 написал(а):
Блин смотрю я вашу тему второй день и не догоняю в чём проблема?
Сделал ради эспиремента:

<h1>Привед</h1>

и css к нему:

h1 {
	background-image: url(themes/light-blue/images/menu_back.jpg);
	background-repeat: repeat-x;
	background-position: left center;	
}

Блин всё работает как надо, во всех ослах от 8 вплоть до 5.5
Вчём проблема то?
Или я что то упускаю?

Спустя 19 минут, 34 секунды (13.04.2010 - 10:14) vedmed написал(а):
Сам не понимаю в чем проблема. В FF все работает, IE никак не хочет. Вот гляньте:
http://www.hram-v-lesnom.ru/. 123 123

Спустя 57 минут, 34 секунды (13.04.2010 - 11:12) moskitos80 написал(а):
а физический путь от индекса к картинкам какой?

Спустя 24 минуты, 13 секунд (13.04.2010 - 11:36) vedmed написал(а):
/sites/all/themes/lesnoy/images/hh.jpg

Спустя 44 минуты, 37 секунд (13.04.2010 - 12:20) moskitos80 написал(а):
Вообще беда..! blink.gif Просматриваю твой сайт через web developer tools IE8 - всё нормально!
Стиль вроде ни где не перебивается... если пути правильные (а в FF вроде с этими путями работает) он по всем законам природы д о л ж е н работать! Ну, у меня то картинка в бэке у h1 в IE8 - отображается! Пробуй: другую картинку, другое расширение(формат), пробуй в другом элементе такое сделать. А ещё лучше создай новый файл с одним лишь этим заголовком, создай файл стилей с единственным стилем для него линкуй их добавляй атрибуты по одному, смотри что происходит... и добивай до победного. Так сказать смоделируй ситуацию изолированно, что б соседний код глаза не мозолил... и отлаживай - в большинстве случаев помогает. Думаю так поймешь в чём дело.

Спустя 27 минут, 24 секунды (13.04.2010 - 12:48) vedmed написал(а):
Вот и я никак не пойму в чем дело! Буду пробовать. В лоб решить не удалось.

Спустя 1 час, 9 минут, 45 секунд (13.04.2010 - 13:57) vedmed написал(а):
Коллеги, решил вопрос. В общем, видимо, дело было в формате картинки, хоть она и была jpg, но была вырезана из векторного изображения. И какие-то у IE были проблемы с ее отображением, хотя FF отрабатывал нормально. Сменил изображение и все заработало. Спасибо всем!

Спустя 1 день, 4 часа, 33 минуты, 1 секунда (14.04.2010 - 18:31) Панч написал(а):
Блин точно! Осёл же не работает с изображениями в цветовой схеме CMYK.
Надо всегда сохранять в схеме RGB.

Спустя 5 месяцев, 13 дней, 1 час, 50 минут, 49 секунд (27.09.2010 - 20:21) Guest написал(а):
спасибо большое!!
тоже была эта проблема, сменила изображение и все получилось!
Быстрый ответ:
Powered by dgreen

 Графические смайлики |  Показывать подпись
Здесь расположена полная версия этой страницы.
Invision Power Board © 2001-2024 Invision Power Services, Inc.