View Full Version : Display problem in Firefox 3

07-19-2008, 09:39 PM
I'm helping a friend redesign her blog. Please look at the following URL in IE, and then in FF. -


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 top margin value on the main and sidebar wrappers to pull the content up into (and blend with) the banner. I thought this was the simplest solution to achieve the effect I wanted but it must display correctly in all browsers which it presently doesn't. Can anyone suggest a fix or a better way of doing this?

Code file is attached, feel free to include the fix in it and send back if you're so inclined. - and THANKS!

07-20-2008, 02:11 PM
You have some mark-up errors.

Check here. (http://validator.w3.org/#validate_by_input)

and here for css check. (http://jigsaw.w3.org/css-validator/#validate_by_input)


07-20-2008, 04:08 PM
I really have no knowledge of XHTML. This was a standard blogger template that I'm simply try to modify with a new aesthetic, and I see that it has several markup errors, but I think I've identified the area that causing this problem in Firefox. (and the problem is I set a -120px top margin for the main and sidebar wrappers to pull that content up into the banner graphic, but in FF3, the header graphic is covering up the content) See comment in bold below. There has to be some fix or alternate coding to make this display as I want it to.

<b:includable id='main'>

<b:if cond='data:useImage'>
<b:if cond='data:imagePlacement == &quot;REPLACE&quot;'>
<!--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 + &quot;_headerimg&quot;' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/>
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='&quot;background-image: url(\&quot;&quot; + data:sourceUrl + &quot;\&quot;); &quot; + &quot;background-position: &quot; + data:backgroundPositionStyleStr + &quot;; &quot; + data:widthStyleStr + &quot;min-height: &quot; + data:height + &quot;px;&quot; + &quot;_height: &quot; + data:height + &quot;px;&quot; + &quot;background-repeat: no-repeat; &quot;' id='header-inner'>