Resolved Background image not aligning in Firefox, IE 9

[edwards]

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!

[Sammy12]

take the mce_ out

mce_style="background-image: url('/images/stories/palmbgwhat.jpg');

http://modxrules.com/articles/detect...e-lefts-behind

[edwards]

Thanks for replying so fast, Sammy12. I tried removing the highlighted code but it still displays incorrectly -- did I miss something?

[Sammy12]

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.

[edwards]

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!

[Sammy12]

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.

[edwards]

OK. Whew. The text is now overlaying the bg image, but is off-center.

[Sammy12]

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

[edwards]

That fixed it. . . but now the bottom elements of the page are displaying in the center of the bg image, behind everything.

[Sammy12]

Originally Posted by edwards

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

[edwards]

And now I will really display my ignorance:

What do you mean by "content container"?

Edit: Oooooh. I see now.

[edwards]

OK. I added height, and now the text is outside the box again!

<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">

[Sammy12]

this should fix the pages in all browsers

-cheers

[Sammy12]

798px

[edwards]

That was it! THANK YOU. Thanks for taking the time to bear with me and clean up the mistakes!