Fitting image to top header bar, height problems (SOLVED)

[JamesD]

Hi, I'm sure you have all heard this one many times so apoligies if it is getting dull.

I am having problems with the top header bar where the logo image sits. I have replaced it with an image of my own and the styling does not allow the image to fill the complete space and there is a red strip under it. Any ideas how I remove this, I have looked for padding and such but can't find any. I would like the image to come down to the black strip, without any red bg showing above or below the top image.

The url is, http://www.thescarmantrustsouthwest.org.uk/index.php

Any help would be much appreciated. Thanks

[RonnyK]

James,

the height of the image is set in the stylesheet under "div#header" and "div#header h1 a", both should reflect the changed height of the image. This can be done in the stylesheet attached to the template.

Ronny

[JamesD]

Hi Ronny, I have these both set to the same height, so in theory there should not be any extra BG. Have tried altering these both, making image bigger, smaller etc, does not seem to make them equal, here is the code I have in my stylesheet for the headers.

Code: Select all

/*** header ***
we will hide text and replace it with a image
we need to assign a height for it so that the image wont cut off
*/
div#header {
   height: 87px;    /* adjust according your image size */
   background: #000000;           
}

div#header h1 a {
/* you can set your own image here */
   background: #ff0000 url(images/cms/logo.gif) no-repeat 0 0px; 
   display: block;
   height: 87px;             /* adjust according your image size */
   text-indent: -777em;  /* this hides the text */
   margin: 0%;
   padding: 0;
   text-decoration:none; /* old firefox would have shown underline for the link, this explicitly hides it */
}

Was wondering if there was maybe some other style somewhere that is effecting it, but can't find it if there is.

Thanks again.

[Dr.CSS]

That image is only 75px tall...

Right now it looks totally diff. in Firefox and IE6...

[JamesD]

Sorted it out, for some reason the csms image uploader was not updating the image when I uploaded a fresh image, this was problem not the css.

So managed to get it done by using my cpanel file manager.

Thanks for help and time.

[JamesD]

Uhm yeh as you say they do look quite different in firefox and IE. I am not too hot on the whole cross browser thing so any suggestions on what may be causing them to appear different would be greatly appreciated. i would like the page to appear as it does in firefox with the slim black border along the bottom rather than the thick one in IE, also not sure why the image is cutting off short in firefox.

Bit of a learning curve here but happy to take it on. Thanks again.

code is:

Code: Select all

/*** header ***
we will hide text and replace it with a image
we need to assign a height for it so that the image wont cut off
*/
div#header {
   height: 100px;    /* adjust according your image size */
   background: #000000;         
}

div#header h1 a {
/* you can set your own image here */
   background: #ff0000 url(images/cms/logo.jpg) no-repeat 0 0px; 
   display: block;
   height: 100px;             /* adjust according your image size */
   text-indent: -777em;  /* this hides the text */
   margin: 0%;
   padding: 0;
   text-decoration:none; /* old firefox would have shown underline for the link, this explicitly hides it */
}

[Dr.CSS]

Part of your image not working problem is in the code "url(images/cms/" I've always thought this should have been changed as it leads ppl. to think this is where their images should go, as you see when you try to use image manager to upload one it wont show, cause: it's in uploads/images which is what the path should reflect "url(uploads/images/image.ext"...

The diff. in IE and Ff for the fat border on the bottom of the image may be due to IE handling of images, you may want to take the height out of the header and put a border on the bottom... border-bottom: 2px solid #000...

The reason it shows diff. in width is due to IE being told max is 950px and firefox 80em if you bump it down a little say 79em it may fit...

[JamesD]

Thanks Mark, seems to have done the trick.