Confused, Xanga related Options

[PimpMyXan_ga]

Okay, so I made this layout on Xanga. View it here for referance purposes

The problem is when I resize my browser the div's don't stay in place with the part of the image where it's supposed to be.

Can anyone help me with this problem? I know a lot of people have the same problem.

[PimpMyXan_ga]

I figured it out!
AND It shouldn't interrupt browser compatibility issues nyah.

I'm going to post what I did for future reference if that's okay with you guys because I know many people have the same problems.

Okay, here is the code I was working with (should be similar to yours if you are having this problem):

<!-- begin code provided by createblog.com --><br /><br /><br /><!-- begin code --><br /><style type="text/css"><br />/*Spiderman*/<br />/*by TheDerekEffect1 or PimpMyXan_ga*/<br />body {<br />background-image:url();<br />background-repeat: repeat-y-x;<br />background-color: #000000;<br />scrollbar-face-color: #A10200;<br />scrollbar-shadow-color: #000000;<br />scrollbar-highlight-color: #000000;<br />scrollbar-3dlight-color: #000000;<br />scrollbar-darkshadow-color: #000000;<br />scrollbar-track-color: #000000;<br />scrollbar-arrow-color: #000000;<br />} <br /><br />#rblEprops, #pnlEnabled table, #pnlEprops table { <br />width: auto !important; <br />}<br /><br />table.blogbody {<br />width: 340px;<br />font-family: Arial;<br />font-weight: none;<br />font-size: 12pt;<br />color: #ffffff;<br />text-align: justify;<br />padding: 0px;<br />margin-top: 2px;<br />}<br />div.smalltext{<br />width: 300px;<br />padding: 3px;<br />text-align: left;<br />}<br />.caption, .blogheader {<br />width: 320px;<br />padding: 3px;<br />font-family: Arial;<br />font-size: 16pt;<br />text-align: center;<br />color: #A10200;<br />background-color: #;<br />text-transform: lowercaps;<br />margin-top: 10px;<br />}<br /><br />P, B, I, TD, TH <br />{font-family: FONT; color: #ffffff; font-size: 8pt; }<br />A:link, A:visited, A:active<br />{color:#A10200; text-decoration:none; font-size:8pt;}<br />a:hover<br />{text-decoration: underline; color:#ffffff; font-size: 8pt; );}<br />b, strong, i, u, {<br />/* edit colors when bold italic underline */<br />font-family: arial;<br />font-size: 8pt;<br />color: #A10200;<br />font-weight: bold; <br />text-transform: lowercaps;<br /></style><br /><br /><MAP NAME='imgmap'><br /><AREA SHAPE='rect' COORDS='381,351,475,362' HREF='http://www.xanga.com' ALT='Xanga'><br /><AREA SHAPE='rect' COORDS='380,369,469,379' HREF='http://www.xanga.com/signin.aspx' ALT='Sign In'><br /><AREA SHAPE='rect' COORDS='380,387,494,397' HREF='http://www.xanga.com/logout.aspx' ALT='Log Out'><br /><AREA SHAPE='rect' COORDS='377,402,527,412' HREF='http://www.xanga.com/Private/SubscribeTo.aspx?user=YOURXANGAUSER' ALT='Subscribe'><br /><AREA SHAPE='rect' COORDS='583,350,745,359' HREF='http://www.xanga.com/claf' ALT='Look and Feel'><br /><AREA SHAPE='rect' COORDS='583,366,743,375' HREF='http://www.xanga.com/guestbook.aspx?user=YOURXANGAUSER' ALT='Guestbook'><br /><AREA SHAPE='rect' COORDS='625,382,741,393' HREF='http://www.xanga.com/private' ALT='Private'><br /><AREA SHAPE='rect' COORDS='548,399,744,409' HREF='http://www.xanga.com/Private/subs.aspx' ALT='Subscriptions'><br /></MAP><br /><br /><IMG SRC='http://i23.photobucket.com/albums/b374/TheDerekEffect1/spideyblog2.jpg' border=0 width=750 height=900 USEMAP='#imgmap'> <br /><br /><div style="overflow: auto; width: 302px; height: 305px; margin-top: -386px; margin-left: 402px;"> <b><FONT SIZE="3">About Me</font></b><br><br><FONT COLOR="#FFFFFF" size="1">Name: Peter Parker<br>Age: 20<br>Birthday: February 10, 1985<br>Hobbies: Photography<Br>Expertise: Science<Br><br> <br /><b><FONT SIZE="3">Favorite Links:</font></b><br><br> <a href="http://www.createblog.com">Createblog</a><br /><br> <a href="http://www.blogring">Blogring</a><Br><br /><a href="http://www.xanga.com/pimpmyxan_ga">Pimp My Xanga</a><br><br> <br /><b><FONT SIZE="3">Subscriptions:</font></b><br><br> <a href="http://www.xanga.com/USERNAME">Batman</a> <br><br><br /><b><FONT SIZE="3">CREDITS:</font></b><br><i>Please do not remove</i><br><br> <a href="http://www.xanga.com/PimpMyXan_ga">PimpMyXan_ga</a><br><br> </div><br /><br /><div style="<br />overflow: auto;<br />width: 386px;<br />height: 250px;<br />margin-top: -248px;<br />margin-left: -342px;"> <br /><br /><style type="text/css"><br />.#rblEprops{display:none;}<br />#pnlEnabled table, #htmleditor, #lblTimeZone, #pnlEprops, #rblEprops <br />/* width of the comment page */<br />{width:245px;}<br />.leftmoduletitlebar, .leftmoduleborder, .leftmoduleinterior, table.left, table.left TH, table.left TD, table.navigation, table.footer <br />{display: none;} <br /></style><br /><!-- end code  --><br /><br /><br /><!-- end code provided by createblog.com -->

The part that says "img src="whatever.jpg" is the part we have to change. This is the part where you put your background image.

Instead of putting a simple code for an image we're going to do this:

<!-- begin code provided by createblog.com --><br /><br /><br /><div style="height: #px"></div> <div align="left"> <div style="position:static; margin-left:-10px; margin-right:0px; margin-top:-192px;"><IMG SRC='http://i23.photobucket.com/albums/b374/TheDerekEffect1/spideyblog2.jpg' border=0 width=750 height=900 USEMAP='#imgmap'></div><br /><br /><br /><!-- end code provided by createblog.com -->

See what I did was put my background image in it's own div that hides behind the other two. And I gave it the div align=left code. Now, nothing moves!

You CAN do this simply by adding the div align="left" code before your normal div's. But what that does is keeps your div's in place as your background will move.

If you really need your image centered add this code at the very top of your coding:

<!-- begin code provided by createblog.com --><br /><br /><br /><center><br /><table><br /><tr><br /><td><br /><br /><br /><!-- end code provided by createblog.com -->

So, your new code should look something like this:

<!-- begin code provided by createblog.com --><br /><br /><br /><!-- begin code provided by createblog.com--><br /><br /><center><br /><table><br /><tr><br /><td><br /><style type="text/css"><br />/*Spiderman*/<br />/*by TheDerekEffect1 or PimpMyXan_ga*/<br />body {<br />background-image:url();<br />background-repeat: repeat-y-x;<br />background-color: #000000;<br />scrollbar-face-color: #A10200;<br />scrollbar-shadow-color: #000000;<br />scrollbar-highlight-color: #000000;<br />scrollbar-3dlight-color: #000000;<br />scrollbar-darkshadow-color: #000000;<br />scrollbar-track-color: #000000;<br />scrollbar-arrow-color: #000000;<br />}<br /><br />#rblEprops, #pnlEnabled table, #pnlEprops table { <br />width: auto !important; <br />}<br /><br />table.blogbody {<br />width: 300px;<br />font-family: Arial;<br />font-weight: none;<br />font-size: 12pt;<br />color: #ffffff;<br />text-align: justify;<br />padding: 0px;<br />margin-top: 2px;<br />}<br />div.smalltext{<br />width: 300px;<br />padding: 3px;<br />text-align: left;<br />}<br />.caption, .blogheader {<br />width: 320px;<br />padding: 3px;<br />font-family: Arial;<br />font-size: 16pt;<br />text-align: center;<br />color: #A10200;<br />background-color: #;<br />text-transform: lowercaps;<br />margin-top: 10px;<br />}<br /><br />P, B, I, TD, TH <br />{font-family: FONT; color: #ffffff; font-size: 8pt; }<br />A:link, A:visited, A:active<br />{color:#A10200; text-decoration:none; font-size:8pt;}<br />a:hover<br />{text-decoration: underline; color:#ffffff; font-size: 8pt; );}<br />b, strong, i, u, {<br />/* edit colors when bold italic underline */<br />font-family: arial;<br />font-size: 8pt;<br />color: #A10200;<br />font-weight: bold; <br />text-transform: lowercaps;<br /></style><br /><br /><MAP NAME='imgmap'><br /><AREA SHAPE='rect' COORDS='381,351,475,362' HREF='http://www.xanga.com' ALT='Xanga'><br /><AREA SHAPE='rect' COORDS='380,369,469,379' HREF='http://www.xanga.com/signin.aspx' ALT='Sign In'><br /><AREA SHAPE='rect' COORDS='380,387,494,397' HREF='http://www.xanga.com/logout.aspx' ALT='Log Out'><br /><AREA SHAPE='rect' COORDS='377,402,527,412' HREF='http://www.xanga.com/Private/SubscribeTo.aspx?user=YOURXANGAUSER' ALT='Subscribe'><br /><AREA SHAPE='rect' COORDS='583,350,745,359' HREF='http://www.xanga.com/claf' ALT='Look and Feel'><br /><AREA SHAPE='rect' COORDS='583,366,743,375' HREF='http://www.xanga.com/guestbook.aspx?user=YOURXANGAUSER' ALT='Guestbook'><br /><AREA SHAPE='rect' COORDS='625,382,741,393' HREF='http://www.xanga.com/private' ALT='Private'><br /><AREA SHAPE='rect' COORDS='548,399,744,409' HREF='http://www.xanga.com/Private/subs.aspx' ALT='Subscriptions'><br /></MAP> <br /><br /><div style="height: 177px"></div><div align="left"> <div style="position:static; margin-left:-10px; margin-right:0px; margin-top:-192px;"><IMG SRC='http://i23.photobucket.com/albums/b374/TheDerekEffect1/spideyblog2.jpg' border=0 width=750 height=900 USEMAP='#imgmap'></div><br /><br /><div style="overflow: auto; width: 302px; height: 305px; margin-top: -386px; margin-left: 415px;"> <b><FONT SIZE="3">About Me</font></b><br><br><FONT COLOR="#FFFFFF" size="1">Name: Peter Parker<br>Age: 20<br>Birthday: February 10, 1985<br>Hobbies: Photography<Br>Expertise: Science<Br><br> <br /><b><FONT SIZE="3">Favorite Links:</font></b><br><br> <a href="http://www.createblog.com">Createblog</a><br /><br> <a href="http://www.blogring">Blogring</a><Br><br /><a href="http://www.xanga.com/pimpmyxan_ga">Pimp My Xanga</a><br><br> <br /><b><FONT SIZE="3">Subscriptions:</font></b><br><br> <a href="http://www.xanga.com/USERNAME">Batman</a> <br><br><br /><b><FONT SIZE="3">CREDITS:</font></b><br><i>Please do not remove</i><br><br> <a href="http://www.xanga.com/PimpMyXan_ga">PimpMyXan_ga</a><br><br> </div><br /><div style="overflow: auto; width: 386px; height: 250px; margin-top: -248px; margin-left: 1px;"><br /><br /><style type="text/css"><br />.#rblEprops{display:none;}<br />#pnlEnabled table, #htmleditor, #lblTimeZone, #pnlEprops, #rblEprops <br />/* width of the comment page */<br />{width:245px;}<br />.leftmoduletitlebar, .leftmoduleborder, .leftmoduleinterior, table.left, table.left TH, table.left TD, table.navigation, table.footer <br />{display: none;} <br /></style><br /><!-- end code provided by createblog.com --><br /><br /><br /><!-- end code provided by createblog.com -->