Question

Currently, I am modifying a css document to make a website compatible in IE 6 and including it using a conditional statement. Everything is slowly starting to look as it should EXCEPT….I can’t seem to modify the height of the background image in the css below. I can make it bigger by increasing the height, but decreasing the height does not make it smaller. The original image is quite thin, so I don’t see why this is a problem.

#title{
text-align:left;
margin-left:170px;
margin-top:0px;
background-image:url(images/gradient.jpg);
background-repeat:repeat-y;
padding: 0px 0px 0px 0px;
width:680px;
height:42px;
color:white;
font-family:Helvetica, Georgia, "Times New Roman", Times, serif;
position:relative;
top:0px;
}

You can see in the attached image that the red gradient background image underneath the cork header image is too big and the text inside is too large also. However, no matter what I change in the css, it doesn’t seem to alter anything.

Image of webpage

The div tag is:

<div id="title">
<h1>
    Historia    </h1>
 </div>

Any thoughts as to why I can’t seem to change this?

Answer 1

I would try first by using firebug lite for IE, that way at least you aren’t guessing whats going wrong and you can identify the padding/height/etc;

My thought is that the height is simply being stretched by the h1 element (perhaps something else sneaking in too), thats my best guess as I don’t have IE6 to test, but since your height is defined for the #title it must be whats inside of it that stretches it. Try setting overflow: hidden; for the #title see if that helps, or at least shows your 42px height.

http://bodegacooperativacigales.com/historianew.html

Try firebuglite, and view the element, it will show you what to get rid of in IE.

EDIT
to define your h1 simply do this:

#title{
   text-align:left;
   margin-left:170px;
   margin-top:0px;
   ...
}

#title h1 {
   height: 20px;
   margin: 0; // remove margin
   padding: 0; // remove padding to check if this is the issue
}

in your IE6 CSS sheet. Don’t set a background image into the h1. The above piece is separate from your #title css definition.