CSS issue

[mbootsman]

I have a banner in my header which is visible with FF3, but not in IE. I cannot seem to get to a solution, can anyone help?
Thanks in advance !

site http://www.bootsman.org

[Ebola]

The Imagetag in your header is open.

[mbootsman]

Ebola,

thanks, I looked over that. But this doesn't solve the problem, I still don't see the banner in the header (in IE that is) FF3 shows the banner...

[Kevin]

Hmm, I glanced at the source yesterday... I thought I saw an iframe close tag.. but the open tag was missing.. Might that cause this?

[Ebola]

You may call the header.img throu your css.

Code: Select all

#header {
    height: 180px;
    border-bottom: #be3100 solid 4px;
    background-image: url(/images/header.jpg);
}


Then you call the i-frame in absolut position. FF, it is ok. IE must have a z-index.

Code: Select all

#headerad {
    height: 60px;
    width: 486px;
    position: absolute;
    margin: 0px auto 0px 460px;
   
    top: 0px;
   z-index: 3;
}


Hope that will help you out.

[Khevor]

I'm not sure if this will be much help as I haven't looked at your code, but I did look at your site in FF3 and MSIE7... it's not that your banner is missing. It is there. However, take note of your browser's horizontal scrollbar in IE. The banner is there, it's just way over to the far right.

Edit: I've had a look at the code and a few things seem ... odd. The problem is with the code in your #headerad block of your css. You have position set to absolute, but then in your margin, you have the right margin set to 'auto'. Auto is dynamic and generated on the fly by the visiting browser. In your case, you already have a static width declared so you don't even need a right margin specified.

Also, I noticed you used 'top'. Don't. 'top', 'left', 'right', 'bottom' are also dynamic and are especially meant for moving items on the page via javascript. You should use margin-top, margin-left, margin-right, and margin-bottom instead. Having said that, you're using the catch-all 'margin' so that makes using top pointless.

Without actually testing it myself, I try changing your margin line to just be margin-left: 460px; and see if that fixes it.