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 (http://sixfigureshingle.com/index.php?option=com_content&view=article&id=48&Itemid=55)

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!

take the mce_ out


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


http://modxrules.com/articles/detect-empty-html-elements-tinymce-lefts-behind

http://i1114.photobucket.com/albums/k535/auroralight1/Untitled-13.png

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

I see, you commented out the end div tag

http://i1114.photobucket.com/albums/k535/auroralight1/Untitled-14.png

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.

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!

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.

http://i1114.photobucket.com/albums/k535/auroralight1/Untitled-15.png

http://i1114.photobucket.com/albums/k535/auroralight1/Untitled2-2.png

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

http://i1114.photobucket.com/albums/k535/auroralight1/Untitled-17.png

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

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

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

http://i1114.photobucket.com/albums/k535/auroralight1/Untitled-20.png

This layout is no longer with the flow of the page, therefore a height must be set for the content

And now I will really display my ignorance:

What do you mean by "content container"?

Edit: Oooooh. I see now.

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

http://i1114.photobucket.com/albums/k535/auroralight1/Untitled-21.png

this should fix the pages in all browsers

-cheers

http://i1114.photobucket.com/albums/k535/auroralight1/Untitled-22.png

798px

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

no problem