CODEWITHSUNDEEP
cssgoogle-chromesafariinternet-explorer-7
christine
christine

Reputation: 61

image resizing across browsers

I am a CSS newbie, but I have scoured the web and cannot find a solution for my problem. I cannot publicly post a link to my site, so I have copied the relevant code below.

I am working on a site and CANNOT change the HTML in any way. It is automatically generated by a PHP application which links to a complex database. I can, however, upload an image to appear in the header. The PHP program automaticaly produces HTML.

The problem is with the header image. The image is a site banner/logo. However, I need the header to be small on all pages but the home page. Therefore, sized it in gimp to the smaller pixel size, and used the <body id="home"> as a selector to increase its size.

I also inserted resizing algorithms in my css code to prevent blurry-ness. I don't think the re-sizing css has any effect on the size and position issue, but I included the code in case

The header works just fine on the secondary pages for all browsers, but the home page is badly broken on Chrome, Safari, and IE7. It works great on Firefox and IE8. This is such a weird pattern, I can't find much help on-line.

In IE7 the image is in the right place, and clear, but twice as big as it should be. In safari and chrome the image is shifted down out of the header div, covers other content, and is very badly distorted.

There is also a search div in the header, it is working fine. I use css to move the search div out of the header area on the home page. I abbreviated the relevant HTML, since it is working fine, but I included it so you can understand the full div structure of the header.

the 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>

The 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;}

Sorry for the long winded post, but I am in rather desperate need of help, and I wanted to make sure I gave all the relevant information. I really have no clue what is happening. I work for a non-profit, and my training is in library and archives, not in web design. But for our project to work, I am now doing CSS!

Thanks for any suggestions you can give

Christine CAMc

Upvotes: 1

Views: 675

Answers (1)

JaCraig
JaCraig

Reputation: 1078

Instead of using a percent for the image, try using exact pixel sizes:

#home #site-title img{
width: 200px;
height: 200px;
image-rendering: optimizeSpeed;
image-rendering: -moz-crisp-edges;
image-rendering: -webkit-optimize-contrast;
-ms-interpolation-mode:nearest-neighbor;}

Upvotes: 1

Related Questions