Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 16
  1. #1
    New to the CF scene
    Join Date
    Jul 2011
    Location
    Virginia Beach, VA
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Background image not aligning in Firefox, IE 9

    The background images on my site will only align correctly when IE 9 is running in compatibility mode. The bg image shifts downward, making the text appear to have no top margin. I've been told they don't display correctly in Firefox, either.

    Example page: HERE

    If you view the above page with compatibility view on, then off, you'll see the difference.

    I'm using Joomla 1.5 to build the site, if that helps.

    I could modify the bg image so that it didn't matter where the text landed, but I'd rather fix the coding issue.

    Thanks for your help!
    Last edited by edwards; 07-19-2011 at 04:47 PM.

  • #2
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    take the mce_ out

    Code:
    mce_style="background-image: url('/images/stories/palmbgwhat.jpg');
    http://modxrules.com/articles/detect...e-lefts-behind

    Last edited by Sammy12; 07-18-2011 at 09:51 PM.

  • #3
    New to the CF scene
    Join Date
    Jul 2011
    Location
    Virginia Beach, VA
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thanks for replying so fast, Sammy12. I tried removing the highlighted code but it still displays incorrectly -- did I miss something?

  • #4
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    I see, you commented out the end div tag



    at the very end, you have the </div> within the -->, try setting it outside the comment


    haha, when you set it outside, the entire page gets messed up. You have been coding the entire page with that error! regardless it must be changed or else you will get even more errors. and you will have to fix those errors which will cause errors lolol.
    Last edited by Sammy12; 07-18-2011 at 10:14 PM.

  • #5
    New to the CF scene
    Join Date
    Jul 2011
    Location
    Virginia Beach, VA
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts
    lol, and bang my head on the desk. Thanks for spotting that! I set the </div> outside, but how do I get the text to overlay the bg image now? I'm totally confused!

  • #6
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    the highlighted text is what you need to add to both. after changing, upload back to server, since their undoubtedly needs to be some fixes in ff and ie.



    Last edited by Sammy12; 07-18-2011 at 10:26 PM.

  • #7
    New to the CF scene
    Join Date
    Jul 2011
    Location
    Virginia Beach, VA
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts
    OK. Whew. The text is now overlaying the bg image, but is off-center.

  • #8
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts


    wrap the div with art-content-layout with a div that's set to width: 798px (the width of your background image) and margin: auto;

    dont mimic the ="" in the line below that highlighted one. ONLY add a div wrapper with width and margin. the ="" was an error on my part, but im too lazy to redo my image
    Last edited by Sammy12; 07-18-2011 at 10:42 PM.

  • #9
    New to the CF scene
    Join Date
    Jul 2011
    Location
    Virginia Beach, VA
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts
    That fixed it. . . but now the bottom elements of the page are displaying in the center of the bg image, behind everything.

  • #10
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    Quote Originally Posted by edwards View Post
    That fixed it. . . but now the bottom elements of the page are displaying in the center of the bg image, behind everything.
    you need to set a height for one of the content containers



    This layout is no longer with the flow of the page, therefore a height must be set for the content
    Last edited by Sammy12; 07-18-2011 at 11:11 PM.

  • #11
    New to the CF scene
    Join Date
    Jul 2011
    Location
    Virginia Beach, VA
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts
    And now I will really display my ignorance:

    What do you mean by "content container"?

    Edit: Oooooh. I see now.
    Last edited by edwards; 07-18-2011 at 11:14 PM.

  • #12
    New to the CF scene
    Join Date
    Jul 2011
    Location
    Virginia Beach, VA
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts
    OK. I added height, and now the text is outside the box again!

    Code:
    <div style="height: 817px; width: 798; margin: auto;" class="art-content-layout">
        <div style="background-image: url('/images/stories/palmbgwhat.jpg'); background-repeat: no-repeat; z-index: 1; position: absolute; width: 100%; height: 817px;"></div>
    </div>
    <div class="clear"></div>
    <div style="margin-top: 50px; position: absolute; z-index: 2; margin-left: 145px; margin-right: 145px;" id="content" mce_style="margin-left:145px; margin-top: 50px; margin-right: 145px">

  • #13
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts


    this should fix the pages in all browsers

    -cheers

  • Users who have thanked Sammy12 for this post:

    edwards (07-18-2011)

  • #14
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts


    798px

  • #15
    New to the CF scene
    Join Date
    Jul 2011
    Location
    Virginia Beach, VA
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts
    That was it! THANK YOU. Thanks for taking the time to bear with me and clean up the mistakes!


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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