I'm helping a friend redesign her blog. Please look at the following URL in IE, and then in FF, with your attention on the banner area. -

http://smwcode.blogspot.com/

In IE it displays correctly (and also DID display correctly in FF before upgrading to Vers. 3), but in FF vers. 3 it doesn't display correctly. What I've done here is set a (negative) -120px top margin for the main and sidebar wrappers to pull that content up into (to blend with) the banner graphic, but in FF3, the header graphic is covering up the content.

I'm aware that this template code has markup errors which I intend to address, but none of those errors are causing this problem. I think I've identified what IS causing this problem in Firefox. See code comment in bold below. There has to be some fix or alternate coding to make this display as I want it to, but I really don't know whether the solution lies in the .CSS, or .JS, or something else.

Can anyone tell me how to fix this?

Thanks.
jdove523@comcast.net


</b:includable>
<b:includable id='main'>

<b:if cond='data:useImage'>
<b:if cond='data:imagePlacement == "REPLACE"'>
<!--Show just the image, no text-->
<div id='header-inner'>
<a expr:href='data:blog.homepageUrl' style='display: block'>
<img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + "_headerimg"' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/>
</a>
</div>
<b:else/>
<!--
Show image as background to text. You can't really calculate the width
reliably in JS because margins are not taken into account by any of
clientWidth, offsetWidth or scrollWidth, so we don't force a minimum
width if the user is using shrink to fit.
This results in a margin-width's worth of pixels being cropped. If the
user is not using shrink to fit then we expand the header.
-->
<div expr:style='"background-image: url(\"" + data:sourceUrl + "\" " + "background-position: " + data:backgroundPositionStyleStr + "; " + data:widthStyleStr + "min-height: " + data:height + "px;" + "_height: " + data:height + "px;" + "background-repeat: no-repeat; "' id='header-inner'>

SOLVED. Removed the negative margin values, sliced the banner graphic horizontally and used the lower portion of graphic to create a new background <div>, laid the <div>inside of outer wrapper - VOILA! Blog temporarily set back to "invite only", but if you'd like to see, email me and I will invite you.