...

View Full Version : Resolved Background image not aligning in Firefox, IE 9



edwards
07-18-2011, 08:34 PM
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!

Sammy12
07-18-2011, 08:45 PM
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

edwards
07-18-2011, 08:57 PM
Thanks for replying so fast, Sammy12. I tried removing the highlighted code but it still displays incorrectly -- did I miss something?

Sammy12
07-18-2011, 09:02 PM
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.

edwards
07-18-2011, 09:16 PM
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
07-18-2011, 09:17 PM
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

edwards
07-18-2011, 09:31 PM
OK. Whew. The text is now overlaying the bg image, but is off-center.

Sammy12
07-18-2011, 09:39 PM
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

edwards
07-18-2011, 10:05 PM
That fixed it. . . but now the bottom elements of the page are displaying in the center of the bg image, behind everything.

Sammy12
07-18-2011, 10:07 PM
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

edwards
07-18-2011, 10:12 PM
And now I will really display my ignorance:

What do you mean by "content container"?

Edit: Oooooh. I see now.

edwards
07-18-2011, 10:24 PM
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
07-18-2011, 10:25 PM
http://i1114.photobucket.com/albums/k535/auroralight1/Untitled-21.png

this should fix the pages in all browsers

-cheers

Sammy12
07-18-2011, 10:29 PM
http://i1114.photobucket.com/albums/k535/auroralight1/Untitled-22.png

798px

edwards
07-18-2011, 10:38 PM
That was it! THANK YOU. Thanks for taking the time to bear with me and clean up the mistakes!

Sammy12
07-18-2011, 10:41 PM
no problem



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum