Changing height of border at base of header (SOLVED)

[JamesD]

Had a look in the old mssgs but to no avail, sure this is a very common question. In the header there is a small black border 5px high or so below the picture, I can change the colour but not the height in the code below. Anyone any idea where I can change   
the thickness of the border. Thanks. the site for this is at http://www.sharp-shotz.com/index.php

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: 126px;    /* adjust according your image size */
   background: #000000;           
}

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

[michelG]

Hey James.

I see that black space in IE6 but not in Firefox. That black "border" is actually the background color of the DIV#Header.

You probably have that extra spacing because you added a text into the H1 of the header DIV:

Code: Select all

<div id="header">
  <h1><a href="http://sharp-shotz.com/index.php?page=home" title="Home Page, shortcut key=1">Sharp Shotz</a></h1>
  <hr class="accessibility" />
</div>

Delete the "Sharp Shotz" text and it may be fine. I know that the style includes a text-indent: -999em; declaration that displays the text beyond the screen, but IE may not understand it correctly.

If that doesn't work, it may be caused by the HR tag -- just delete it -- or by a default H1 margin or padding. Add this

div#header h1 a {
padding:0;
margin:0;
etc.
}

Let us know...

Michel

Edit:

I noticed that the default template that comes with CMSms has the same problem. You do not see that additional spacing in IE6 because they have been clever: the banner graphic background is actually deeper than the DIV height.

It's a very easy fix to your problem: redesign your banner graphic to a height of -- let's say 35 pixels  -- making sure that your logo and text are kept within your original height of 26 pixels. Firefox will only display 26 pixels. IE will still add an additional space but your graphic will show through -- not your background color.