Hello and welcome to our community! Is this your first visit?
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    Regular Coder
    Join Date
    Jul 2008
    Thanked 0 Times in 0 Posts

    Display problem in Firefox 3

    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!
    Attached Files Attached Files

  • #2
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Clapham Junction - London SW
    Thanked 204 Times in 203 Posts
    You have some mark-up errors.

    Check here.

    and here for css check.

    Last edited by effpeetee; 07-20-2008 at 03:03 PM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #3
    Regular Coder
    Join Date
    Jul 2008
    Thanked 0 Times in 0 Posts
    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'>


    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts