Background picture dont fill out header space in IE

[stig-s]

Howdy!
I don't know where I went wrong but..
My header looks great in FF but i IE (6) I get an empty line at the bottom of the picture (see http://stromstadss.se with IE)
I've been bending my brains about it but can't fix it. Someone who got an idea??

My code:
The stylesheet


/*****************
basic layout
*****************/
body {
  background-color: #ccc;
  color: #333;
  margin:1em; /* gives some air for the pagewrapper */
}

/* center wrapper, min max width */
div#pagewrapper {
  border: 1px solid black;
  margin: 0 auto;    /* this centers wrapper */
  max-width: 80em; /* IE wont understand these, so we will use javascript magick */
  min-width: 60em;
  background-color: #fff;;
  color: black;
}


/*** header ***
we will hide text and replace it with a image
we need to assign a height for it
*/

div#header {
  height: 100px; /* adjust according your image size */
  background-color: #000000;     
}

div#header h1 a {
/* you can set your own image here */
    background: #FFFFFF url(uploads/images/top-bg.jpg) no-repeat 0 0px;
  display: block;
  height: 100px;            /* 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 */
}

div#search {
  float: right;
  width: 23em;    /* enough width for the search input box */
  text-align: right;
  padding: 0.6em 0 0.2em 0;
  margin: 0 1em;
}

The code
Template


{literal}

=b){nw=b+"px";}if(w



#pagewrapper {width:expression(P7_MinMaxW(720,950));}
#container {height: 1%;}


{/literal}














   
   
      {anchor anchor='menu_vert' title='Skip to navigation' accesskey='n' text='Skip to navigation'}
      {anchor anchor='main' title='Skip to content' accesskey='s' text='Skip to content'}
   
   


   
   


 
 
          {cms_selflink dir="start" text="$sitename"}
 
 
 

Any help would be deeply appreciated

Stig-s

[Dr.CSS]

Try taking the height out of the header... do you know you have 2/duplicate style sheets attached to this template with the same calls in them?

Start of CMSMS style sheet 'top menu + 2columns-home'  and /* Start of CMSMS style sheet 'Layout: Top menu + 2 columns' */

[stig-s]

Try taking the height out of the header... do you know you have 2/duplicate style sheets attached to this template with the same calls in them?

Start of CMSMS style sheet 'top menu + 2columns-home'  and /* Start of CMSMS style sheet 'Layout: Top menu + 2 columns' */

Hi Mark!
Yes, I'm aware of my 2 stylesheets, I just wanted a background pic on start page (which also is messed up in IE, it's to large).
Sorry to say, reducing height in header doesn't do the trick. It's just cropping the picture. The black line (= emtpty space)
still remains on every page and only in IE.

I'm baffled!

//Stig S.

[stig-s]

I'm Happy!!
After guzzling FAQ's etc., I found the answer.
It's overflow:hidden;

If u put that in the header-sektion, the space goes away.
May not be the right way but it solved my problem.

//Stig S

[ethical]

thank you for the solution! works for me too.

this was bugging me for the last half hour

cheers

[hakki_dogusan]

Hi,


Just want to add my thanks!

[Bob]

I'm Happy!!
After guzzling FAQ's etc., I found the answer.
It's overflow:hidden;

If u put that in the header-sektion, the space goes away.
May not be the right way but it solved my problem.

//Stig S

Sounds like what I need too! Where do I put "overflow:hidden;"
Unfortunately (or fortunately) I don't have access to IE 6, so I won't be able to see it here...
Just Safari and Firefox at the moment.

Thanx!

[RonnyK]

//Stig S,

in the area you quoted is the postion written. It says "If u put that in the header-sektion". So you can put it in your CSS, where the styling for "div#header" is put.

Ronny

[Bob]

//Stig S,

in the area you quoted is the postion written. It says "If u put that in the header-sektion". So you can put it in your CSS, where the styling for "div#header" is put.

Ronny

That's what I thought, but it's still not working.

[Bob]

Would it make that much of a difference between IE6 and IE7? I just realized that I'm cross-checking this on IE7. It does work in FF and Safari.... but no good on IE7

Below is my CSS if that helps you help me. Thanks again.

div#header {
  border-bottom: 1px solid red;
  border-top: 1px solid red;
  height: 150px;    /* adjust according your image size */
  background: url(images/images/header-bckgrnd.jpg)repeat-x;
  overflow: hidden;
}

div#header h1 a {
/* you can set your own image here */
  background: url(images/images/xtremelogohd.png) no-repeat 0 12px;
  display: block;
  height: 80px;            /* 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 */

}

[Dr.CSS]

Bob did you try putting in the h1 a section? and you may want to make both the same height...