Я новичок в CSS, но я просмотрел сеть и не могу найти решение своей проблемы. Я не могу публично опубликовать ссылку на свой сайт, поэтому скопировал соответствующий код ниже.
Я работаю над сайтом, и НЕ МОГУТ изменить HTML. Он автоматически генерируется приложением PHP, которое ссылается на сложную базу данных. Я могу, однако, загрузить изображение, чтобы появиться в шапке. Программа PHP автоматически генерирует HTML.
Проблема с изображением заголовка. Изображение представляет собой баннер сайта / логотип. Однако мне нужно, чтобы заголовок был маленьким на всех страницах, кроме домашней. Поэтому изменил его размер в gimp до меньшего размера в пикселях и использовал <body id="home"> в качестве селектора для увеличения его размера.
Я также вставил алгоритмы изменения размера в мой код CSS, чтобы предотвратить размытость. Я не думаю, что изменение размера CSS влияет на размер и положение, но я включил код в случае
Заголовок прекрасно работает на дополнительных страницах для всех браузеров, но домашняя страница сильно повреждена в Chrome, Safari и IE7. Отлично работает на Firefox и IE8. Это такой странный паттерн, я не могу найти много помощи онлайн.
В IE7 изображение в нужном месте и четкое, но в два раза больше, чем должно быть. В Safari и Chrome изображение смещено вниз от заголовка div, закрывает другой контент и очень сильно искажается.
В заголовке также есть разделитель поиска, он работает нормально. Я использую css, чтобы переместить div поиска из области заголовка на домашней странице. Я сократил соответствующий HTML, так как он работает нормально, но я включил его, чтобы вы могли понять полную структуру div заголовка.
HTML:
<body id="home">
<div id="wrap">
<div id="header">
<div class="center-div">
<div id="search-container">
<form id="simple-search" action="/items/browse" method="get">
<fieldset><input /><input/></fieldset></form>
<a href="/items/advanced-search">Advanced Search</a></div>
<div id="site-title">
<a href="http://sitename.org" ><img src="http://image_host.png" title="site name" /></a>
</div>
</div>
</div>
CSS:
#home #site-title img{
width: 200%;
height: 200%;
image-rendering: optimizeSpeed;
image-rendering: -moz-crisp-edges;
image-rendering: -webkit-optimize-contrast;
-ms-interpolation-mode:nearest-neighbor;}
#home #header{
min-height: 130px;}
div#header > div.center-div {
position: relative;}
#search-container, #search a{
float: none;
text-align: center;
margin-bottom: 30px;
text-decoration: underline;
margin-top: 15px;
margin-left: 50%;
font-size: 1.5em;}
#home #search-container, #home #search a{
width: 100%;
height: 100%;
margin-top: 360px;
margin-left: -12px;
font-size: 2em;
position: absolute;}
Извините за длинную почту, но мне очень нужна помощь, и я хотел убедиться, что предоставил всю необходимую информацию. Я действительно понятия не имею, что происходит. Я работаю для некоммерческих организаций, и мое обучение в библиотеке и архивах, а не в веб-дизайне. Но чтобы наш проект работал, я сейчас делаю CSS!
Спасибо за любые предложения, которые вы можете дать
Christine
CAMC