Меня давно мучает вопрос, почему FireFox и IE по разному показывают картинки. FireFox или IE зачем-то делает цвета ярче или темнее. Вот посмотрите на сайт hackish code. обратите внимание, как выглядит градиент на фоне. Это картинка градиента. Когда градиент заканчивается, то он переходит в цвет фона. Цвет фона в обоих браузерах конечно одинаковый, но в IE почему-то между градиентом каритнки и цветом фона идет большой скачок.
А если посмотреть на тот же градиент в опере, то это вообще оборжаться. Зачем так издеваться над картинкой.
Кто нибудь знает, какого фака это происходит и можно ли пофиксить? Дизайнеры есть?
Понравилось? Кликни Лайк, чтобы я знал, какой контент более интересен читателям. Заметку пока еще никто не лайкал и ты можешь быть первым
По-видимому, это "любимые" глюки IE с форматом PNG. Попробуйте заливку сделать JPEG-ом. И второй вариант - удлинить паттерн заливки по вертикали вниз зеркальным отражением его же. Это, конечно, уже не то, о чём вы спрашивали, но вполне приемлемо. Ну и "background-repeat: repeat-x" убрать при этом из стиля HTML. А почему, кстати, HTML заливается, обычно BODY?
Да, все браузеры по разному цвета отдают. Можете потом потестить.
А так, надо писать скрипты для каждого браузера..
И тестить под всеми браузерами вид сайта.. (
2crow999
Мне нужен repeat-x, чтобы расплодить картинку погоризонтали.
Последний вопрос не понял.
Не всосал, как я добьюсь того же эффекта, если я будут патерном плодить по всей странице
Мы просто не поняли друг друга. Как вариант решения я предложил удлинить паттерн вниз (в два раза) и доработать его: чтобы он начинался сверху и заканчивался снизу одним и тем же цветом (черным), а в середине был #454545. И сразу же заметил, что это не совсем то, о чем вы спрашивали, но может быть вам подойдёт. Но в этом случ. его надо ещё и по вертикали расплодить, ну, т.е. фон страницы будет идти вниз волнами от черного к серому и обратно. Паттерн можно и ещё больше 2-х раз удлинить, но чтобы только его верх и низ стыковались по цвету.
Ну вот, например, я удлинил как говорил - можно взять отсюда http://crow999.0fees.net/background.png и попробовать, только добавить ему ещё клонирование по вертикали.
Аааааааааа, я такого не хочу. Проще по вертикали растянуть картинку до 5000 пикселей и для большинства страниц этого будет достаточно. При этом размер картинки увеличиться не сильно.
Хозяин - барин :-)
А IE действительно задолбал засадами на ровном месте... У меня тут ещё, кроме ФФ, - Опера и Сафари - в них тоже всё нормально.
Может быть я немного не понимаю требуется, но можно сделать вот так:
body, html {
background-color: #00213d;
background-image: url("http://ваш_сайт.ру");
background-repeat: repeat-x;
background-attachment: scroll;
background-position: left top;
}
IE конечно же многое коверкает, но и Firefox далеко не ушел. У меня была проблема, когда я пытался в таблице стилей указать что не нужно делать рамку вокруг картинки. Во всех браузерах работало нормально, а вот Firefox отображал рамку.
Кстати, если кто знает как в каскадных стилях прописать запрет отображения рамки вокруг картинок-ссылок, пожалуйста, поделитесь идеей.
2 Серега
А какие проблемы-то?
a img { border: 0;}
Если речь идёт о пунктирном выделении при клике мышью - тогда добавить ещё что-то типа:
a { outline: none; }
Всем добрый день.
Когда посмотрел сайт из под IE долго угорал над таким извращением)) Сам долгое время юзал лисицу но тормознутость её на винде перекрывает все плюсы. Поэтому начал юзать хром, всё намного быстрей и на нём таких косяков не замечал :)Знал конечно , что бывают косяки с отображением на разных браузерах, если есть такой косяк то он вроде описывается для каждого браузера по своему.
2crow999 (Павел)
Да, но это сложно объяснить Firefox'у. Не знаю почему, но он у меня не понял что рамка вокруг картинки-ссылки не нужна.
2 Серега
Значит сработал какой-то другой селектор CSS, не тот на который ты думал. Уж что-что, а с рамками вокруг картинок у лисы все вменяемо, глюков не замечал.
Вот кусок кода:
<div id="image">
<p><a href="http://www.сайт.ру/"><img class="logo" src="image/logo.jpg"></a>
</div>
А вот CSS:
#image {margin: 20px; padding: 0px; margin-top: 0px;}
image.logo {border: 0; width: 960px; height: 175px;}
Может быть где-то здесь ошибка, я не большой профи, но Firefox отображает рамку, хот явно пнаписано что этого не следует делать.
2 Серега
:))) не кати бочку на лису.
Ты уж тогда пиши или
#image [пробел] .logo {...}
или
img.logo {...}
А когда image.logo {...} - это значит, что ты наделяешь неведомый браузеру тэг image класса logo какими-то стилями.
Хотите найти еще что-то интересное почитать? Можно попробовать отфильтровать заметки на блоге по категориям.
Программист, автор нескольких книг серии глазами хакера и просто блогер. Интересуюсь безопасностью, хотя хакером себя не считаю
Copyright © 2024 Михаил Флёнов. Тираж 1 штука. Отпечатано на ноутбуке. А за права отвечаю, или постараюсь.
А здесь еще и копирайт поставлю: Professional Web Development.
