Firefox/Safari DIV positioning different on IE Options

[kaliiiiiiiii]

I'm sure there's been other topics about this but I've tried searching and changing my codes so many times and nothing has worked...

I've had a MySpace DIV layout up for a couple of weeks that worked absolutely fine with Firefox and Safari. Today, I was on IE, looking at my layout when I noticed that only some of the DIV boxes were not in the right space and the width was different...not all of the DIVs but only some...

Can anyone help me out?
If you need codes just let me know.

Thank you.

[Mikeplyts]

Yeah, it would be great if you could post your codes or a link to your profile.

[aQuafly]

when you make your divs try using this code, it's what I use, and it works in IE, Mozilla & Safari

CODE

.div {
position:absolute;
top:140px;
left:50%;
margin-left:-300px;}

just adjust the code to fit the name of the div, the width, the height, and adjust the positioning if need be
just leave the left:50%; and the Margin-left: it's what makes the code work properly.

Get back to me after you've tried the code to see if further help is required.

[Mickey]

If it looks alright on FireFox and Safari, duplicate position and/or size attributes for the couple or more DIVs that look weird on Internet Explorer but add underscores before them. Then, change the values of those properties and it should only change how it looks on IE.

[aQuafly]

^ I never knew that, I may actually start using that, cause some layouts are always a pixel or two off in IE and it bothers me when the layout isn't aligned right thanks, lol.

[Mickey]

No problem.

[kaliiiiiiiii]

Here is how the DIV looks on Safari...I made one of the DIVs blue to show the difference...
 LAYOUT_S.png ( 7.63K ) Number of downloads: 8


Here is how the DIV looks on IE...
 LAYOUT_IE.png ( 6.06K ) Number of downloads: 7


Notice how not only the blue DIV on IE is short but the other DIVs (Block, Comment, Pictures, etc.) are cut off by white space...the place where the DIV is turning white is where the links are just starting. I'm not sure if this is even making any sense...but in any case, here are the codes...

This is in my 'General' area...

CODE

.message {
background-color:BLUE;
color:FFFFFF;
border:0px solid;
border-color:transparent;
width:48px;
height:9px;
overflow:auto;
position:absolute;
z-index:2;
left:50%;
top:0%;
margin-left:57px;
margin-top:207px;
text-align:center;
visibility:visible;}

This is in my 'Music' area...

CODE

<a href="http://www.msplinks.com/MDFodHRwOi8vbWVzc2FnaW5nLm15c3BhY2UuY29tL2luZGV4LmNmbT9mdXNlYWN0aW9uPW1haWwubWVz
2FnZSZmcmllbmRJRD0gMTU1NDI0MzQy" target="_blank">
<div class="message">
</div></a>

Sorry if it's messy and I'm not making sense. The box on the layout where it should say 'Message' should be one link to message me...

[Mickey]

Do you mind posting all of your codes?

[aQuafly]

Are you sure you have all your widths set properly?
cause sometimes IE picks up on things that Safari and Mozilla don't.

Like you may have something coded twice somehow with different widths, IE would pick up both and use the one it chooses.

I know that that used to happen to me.
Try going back and make sure that the sections don't have a doubled code, or a second code is applying itself to the div.

for example table div div, and div div can be picked up as editing the same thing.

[aQuafly]

^ Ah, I figured, I'm just trying a DIY approach I suppose.

[kaliiiiiiiii]

There's A LOT so here it goes...

'General' section...

CODE

</td></tr></table></td></tr></table></td></tr></table></div>


<style>
b{font-family:tahoma;color: RED;font weight:lighter;}
i, em{font-family:georgia;color: c0c0c0;}
U {font-family:tahoma; color: 000;letter-spacing: 0; font-style: border; border-bottom: 1px dashed; border-bottom-color: RED;}


body, div, p, strong, td, .text, .blacktext10 {
color: 000;
font-family: Tahoma;
font-size:;}
</style>


<style>
body {background-color:fff;
background-image:none;}

a {color:FFFFFF !important;} img {border:0px;}
table, tr, td {background:fff; border:0px;}
img, .contactTable { display:none; }
.bbzContainer img, .comt img { display:inline; }
table div, td td td, table div div { visibility:hidden; }
font, a, .bbzsc a { visibility:hidden; }
marquee { visibility:visible !important; }

.bbzComment { This is where you control the position of the player. }
table table embed {display:block; width:202px; height:35px; position:absolute; top:0px; left:0px; visibility:visible;}
table table table embed, .bbzContainer div embed {position:static !important; width:auto; height:auto; }
.text, table table table table a,
table table table table div,table table table table div a {visibility:visible;}
.bbzComment { You selected to hide comments. }
.bbzsc { display:none; }
.text, td.text td.text table, .contactTable, .lightbluetext8 {display:none;}
table table, table table td {padding:0px; height:0px;}

.background {
background-color:transparent;
color:FFFFFF;
border:0px solid;
border-color:transparent;
width:850px;
height:650px;
overflow:auto;
position:absolute;
z-index:2;
left:50%;
top:0%;
margin-left:-422px;
margin-top:200px;
text-align:center;
visibility:visible;}

.kali {
background-color:transparent;
color:000;
border:0px solid;
border-color:transparent;
width:262px;
height:139px;
overflow:auto;
position:absolute;
z-index:2;
left:50%;
top:0%;
margin-left:-86px;
margin-top:262px;
text-align:justify;
visibility:visible;}



.friends {
background-color:transparent;
color:000;
border:0px solid;
border-color:transparent;
width:262px;
height:269px;
overflow:auto;
position:absolute;
z-index:2;
left:50%;
top:0%;
margin-left:-86px;
margin-top:484px;
text-align:justify;
visibility:visible;}

.friendsname {
background-color:transparent;
color:000;
border:0px solid;
border-color:transparent;
width:152px;
height:31px;
overflow:auto;
position:absolute;
z-index:2;
left:50%;
top:0%;
margin-left:25px;
margin-top:723px;
text-align:justify;
visibility:visible;}



.message {
background-color:BLUE;
color:FFFFFF;
border:0px solid;
border-color:transparent;
width:48px;
height:9px;
overflow:auto;
position:absolute;
z-index:2;
left:50%;
top:0%;
margin-left:57px;
margin-top:207px;
text-align:center;
visibility:visible;}

.block {
background-color:transparent;
color:FFFFFF;
border:0px solid;
border-color:transparent;
width:48px;
height:9px;
overflow:auto;
position:absolute;
z-index:2;
left:50%;
top:0%;
margin-left:57px;
margin-top:223px;
text-align:justify;
visibility:visible;}

.comment {
background-color:transparent;
color:FFFFFF;
border:0px solid;
border-color:transparent;
width:48px;
height:9px;
overflow:auto;
position:absolute;
z-index:2;
left:50%;
top:0%;
margin-left:57px;
margin-top:239px;
text-align:justify;
visibility:visible;}

.pictures {
background-color:transparent;
color:FFFFFF;
border:0px solid;
border-color:transparent;
width:48px;
height:9px;
overflow:auto;
position:absolute;
z-index:2;
left:50%;
top:0%;
margin-left:113px;
margin-top:207px;
text-align:justify;
visibility:visible;}

.blog {
background-color:transparent;
color:FFFFFF;
border:0px solid;
border-color:transparent;
width:48px;
height:9px;
overflow:auto;
position:absolute;
z-index:2;
left:50%;
top:0%;
margin-left:113px;
margin-top:223px;
text-align:justify;
visibility:visible;}

.facebook {
background-color:transparent;
color:FFFFFF;
border:0px solid;
border-color:transparent;
width:48px;
height:9px;
overflow:auto;
position:absolute;
z-index:2;
left:50%;
top:0%;
margin-left:113px;
margin-top:239px;
text-align:justify;
visibility:visible;}



.clickhere {
background-color:transparent;
color:FFFFFF;
border:0px solid;
border-color:transparent;
width:48px;
height:9px;
overflow:auto;
position:absolute;
z-index:2;
left:50%;
top:0%;
margin-left:-76px;
margin-top:454px;
text-align:justify;
visibility:visible;}

.kalico {
background-color:transparent;
color:FFFFFF;
border:0px solid;
border-color:transparent;
width:102px;
height:50px;
overflow:auto;
position:absolute;
z-index:2;
left:50%;
top:0%;
margin-left:70px;
margin-top:415px;
text-align:justify;
visibility:visible;}



.music {
background-color:transparent;
color:FFFFFF;
border:0px solid;
border-color:transparent;
width:240px;
height:400px;
overflow:auto;
position:absolute;
z-index:2;
left:50%;
top:0%;
margin-left:190px;
margin-top:257px;
text-align:left;
visibility:visible;}



.about {
background-color:transparent;
color:FFFFFF;
border:0px solid;
border-color:black;
width:30px;
height:6px;
overflow:auto;
position:absolute;
z-index:2;
left:50%;
top:0%;
margin-left:206px;
margin-top:695px;
text-align:justify;
visibility:visible;}

.faq {
background-color:transparent;
color:FFFFFF;
border:0px solid;
border-color:BLUE;
width:18px;
height:6px;
overflow:auto;
position:absolute;
z-index:2;
left:50%;
top:0%;
margin-left:251px;
margin-top:695px;
text-align:justify;
visibility:visible;}

.terms {
background-color:transparent;
color:FFFFFF;
border:0px solid;
border-color:RED;
width:28px;
height:6px;
overflow:auto;
position:absolute;
z-index:2;
left:50%;
top:0%;
margin-left:284px;
margin-top:695px;
text-align:justify;
visibility:visible;}

.privacy {
background-color:transparent;
color:FFFFFF;
border:0px solid;
border-color:GREEN;
width:78px;
height:6px;
overflow:auto;
position:absolute;
z-index:2;
left:50%;
top:0%;
margin-left:328px;
margin-top:695px;
text-align:justify;
visibility:visible;}

.safety {
background-color:transparent;
color:FFFFFF;
border:0px solid;
border-color:BROWN;
width:60px;
height:6px;
overflow:auto;
position:absolute;
z-index:2;
left:50%;
top:0%;
margin-left:225px;
margin-top:703px;
text-align:justify;
visibility:visible;}

.contact {
background-color:transparent;
color:FFFFFF;
border:0px solid;
border-color:PINK;
width:87px;
height:6px;
overflow:auto;
position:absolute;
z-index:2;
left:50%;
top:0%;
margin-left:301px;
margin-top:703px;
text-align:justify;
visibility:visible;}

.abuse {
background-color:transparent;
color:FFFFFF;
border:0px solid;
border-color:GREY;
width:68px;
height:6px;
overflow:auto;
position:absolute;
z-index:2;
left:50%;
top:0%;
margin-left:237px;
margin-top:710px;
text-align:justify;
visibility:visible;}

.advertise {
background-color:transparent;
color:FFFFFF;
border:0px solid;
border-color:BLACK;
width:48px;
height:6px;
overflow:auto;
position:absolute;
z-index:2;
left:50%;
top:0%;
margin-left:322px;
margin-top:710px;
text-align:justify;
visibility:visible;}

.international {
background-color:transparent;
color:FFFFFF;
border:0px solid;
border-color:SILVER;
width:118px;
height:6px;
overflow:auto;
position:absolute;
z-index:2;
left:50%;
top:0%;
margin-left:197px;
margin-top:717px;
text-align:justify;
visibility:visible;}

.latino {
background-color:transparent;
color:FFFFFF;
border:0px solid;
border-color:TURQUOISE;
width:80px;
height:6px;
overflow:auto;
position:absolute;
z-index:2;
left:50%;
top:0%;
margin-left:332px;
margin-top:717px;
text-align:justify;
visibility:visible;}




marquee { z-index:8; }
table div, span, td td td, table div div { visibility:hidden !important; }
.bbzContainer div, .bbzContainer div font, .bbzContainer div a, .bbzContainer div div, .bbzContainer font a, .bbzContainer span, .bbzContainer div table a, .bbzContainer div table img, .bbzContainer div table font, .bbzContainer div table, .bbzContainer div table td, .comt, .comt td, .comt span, .comt a, .comt div {visibility:visible !important;}

.bbzDiv {content:"Overlay Generator beta";}
</style>
<div style="display:none;"><table><tr><td><table><tr><td><table><tr><td>

'Music' section...

CODE

</td></tr></table></td></tr></table></td></tr></table></div>

<div class="bbzContainer">
<div class="background">
<img src="http://img377.imageshack.us/img377/1558/xtinalayoutsh1.png" />
</div>

<div class="kali">
ABOUT ME TEXT HERE
</div>

<div class="friends">
PICTURES HERE
</marquee></div>

<div class="friendsname">
<img src="http://img520.imageshack.us/img520/1364/friendsoq6.png" /></div>

<a href="http://www.msplinks.com/MDFodHRwOi8vbWVzc2FnaW5nLm15c3BhY2UuY29tL2luZGV4LmNmbT9mdXNlYWN0aW9uPW1haWwubWVz
2FnZSZmcmllbmRJRD0gMTU1NDI0MzQy" target="_blank">
<div class="message">
</div></a>

<a href="http://www.msplinks.com/MDFodHRwOi8vZnJpZW5kcy5teXNwYWNlLmNvbS9pbmRleC5jZm0/ZnVzZWFjdGlvbj1ibG9jay5ibG9ja1VzZXImdXNlcklEPTE1NTQyNDM0Mg==" target="_blank">
<div class="block">
</div></a>

<a href="http://www.msplinks.com/MDFodHRwOi8vY29tbWVudC5teXNwYWNlLmNvbS9pbmRleC5jZm0/ZnVzZWFjdGlvbj11c2VyLnZpZXdQcm9maWxlX2NvbW1lbnRGb3JtJmZyaWVuZElEPTE1NTQyNDM0Mg==" target="_blank">
<div class="comment">
</div></a>

<a href="http://www.msplinks.com/MDFodHRwOi8vdmlld21vcmVwaWNzLm15c3BhY2UuY29tL2luZGV4LmNmbT9mdXNlYWN0aW9uPXVzZXIu
mlld0FsYnVtcyZmcmllbmRJRD0xNTU0MjQzNDI=" target="_blank">
<div class="pictures">
</div></a>

<a href="http://www.msplinks.com/MDFodHRwOi8vYmxvZy5teXNwYWNlLmNvbS9pbmRleC5jZm0/ZnVzZWFjdGlvbj1ibG9nLkxpc3RBbGwmZnJpZW5kSUQ9MTU1NDI0MzQy" target="_blank">
<div class="blog">
</div></a>

<a href="http://www.msplinks.com/MDFodHRwOi8vd3d3LmZhY2Vib29rLmNvbS9wcm9maWxlLnBocD9pZD01NzE2MDgxNDMmcmVmPXByb2Zp
GU=" target="_blank">
<div class="facebook">
</div></a>



<a href="http://profile.myspace.com/index.cfm?fuseaction=user.viewProfile&friendID=199129327" target="_blank">
<div class="clickhere">
</div></a>



<a href="http://profile.myspace.com/index.cfm?fuseaction=user.viewProfile&friendID=199129327" target="_blank">
<div class="kalico">
</div></a>



<div class="music">
MUSIC PLAYER HERE
</div>



<a href="http://www.myspace.com/index.cfm?fuseaction=misc.aboutus" target="_blank">
<div class="about">
</div></a>

<a href="http://www.msplinks.com/MDFodHRwOi8vZmFxLm15c3BhY2UuY29tLw==" target="_blank">
<div class="faq">
</div></a>

<a href="http://www.myspace.com/index.cfm?fuseaction=misc.terms" target="_blank">
<div class="terms">
</div></a>

<a href="http://www.myspace.com/index.cfm?fuseaction=misc.privacy" target="_blank">
<div class="privacy">
</div></a>

<a href="http://www.myspace.com/index.cfm?fuseaction=cms.viewpage&placement=safety_pagehome" target="_blank">
<div class="safety">
</div></a>

<a href="http://www.myspace.com/index.cfm?fuseaction=misc.contact" target="_blank">
<div class="contact">
</div></a>

<a href="http://www.myspace.com/index.cfm?fuseaction=help.reportabuse&AbuseType=Profile&ProfileContentID=6221" target="_blank">
<div class="abuse">
</div></a>

<a href="http://www.msplinks.com/MDFodHRwczovLy4uY29tLy4uP2Fkdj1nZi4x" target="_blank">
<div class="advertise">
</div></a>

<a href="http://www.myspace.com/index.cfm?fuseaction=InternationalMap" target="_blank">
<div class="international">
</div></a>

<a href="http://www.msplinks.com/MDFodHRwOi8vbGF0aW5vLm15c3BhY2UuY29tLw==" target="_blank">
<div class="latino">
</div></a>





</div>
<div> class="bbzsc"><table><tr><td><table><tr><td><table><tr><td>

[aQuafly]

^ Agreed, so let's get to searching x]

[aQuafly]

Quite Honestly from a few attempts, I'm baffled, or maybe I'm just our of it.

I think that since you aren't using any special hover effects
you should just use an image map. As I recall I think myspace allows
them, and one can easily be made using a program such as Gimp

Just search on google or yahoo the word 'gimp' to get a download of the free program

Edit: Also, you can post the first code into your about me and the second in your who I'd like to meet if you'd like, the code works the same way.

[Mickey]

It's because you turned DIVs into links. You're supposed to have links inside DIVs. I fixed all of them up for you. Here's your revised code:

CODE

</td></tr></table></td></tr></table></td></tr></table></div>

<div class="bbzContainer">
<div class="background">
<img src="http://img377.imageshack.us/img377/1558/xtinalayoutsh1.png" />
</div>

<div class="kali">
ABOUT ME TEXT HERE
</div>

<div class="friends">
PICTURES HERE
</marquee></div>

<div class="friendsname">
<img src="http://img520.imageshack.us/img520/1364/friendsoq6.png" /></div>


<div class="message">
<a href="http://www.msplinks.com/MDFodHRwOi8vbWVzc2FnaW5nLm15c3BhY2UuY29tL2luZGV4LmNmbT9mdXNlYWN0aW9uPW1haWwubWVz
2FnZSZmcmllbmRJRD0gMTU1NDI0MzQy" target="_blank"></a></div>


<div class="block">
<a href="http://www.msplinks.com/MDFodHRwOi8vZnJpZW5kcy5teXNwYWNlLmNvbS9pbmRleC5jZm0/ZnVzZWFjdGlvbj1ibG9jay5ibG9ja1VzZXImdXNlcklEPTE1NTQyNDM0Mg==" target="_blank"></a></div>


<div class="comment">
<a href="http://www.msplinks.com/MDFodHRwOi8vY29tbWVudC5teXNwYWNlLmNvbS9pbmRleC5jZm0/ZnVzZWFjdGlvbj11c2VyLnZpZXdQcm9maWxlX2NvbW1lbnRGb3JtJmZyaWVuZElEPTE1NTQyNDM0Mg==" target="_blank"></a></div>


<div class="pictures">
<a href="http://www.msplinks.com/MDFodHRwOi8vdmlld21vcmVwaWNzLm15c3BhY2UuY29tL2luZGV4LmNmbT9mdXNlYWN0aW9uPXVzZXIu
mlld0FsYnVtcyZmcmllbmRJRD0xNTU0MjQzNDI=" target="_blank"></a></div>

<div class="blog">
<a href="http://www.msplinks.com/MDFodHRwOi8vYmxvZy5teXNwYWNlLmNvbS9pbmRleC5jZm0/ZnVzZWFjdGlvbj1ibG9nLkxpc3RBbGwmZnJpZW5kSUQ9MTU1NDI0MzQy" target="_blank"></a>
</div>

<div class="facebook"><a href="http://www.msplinks.com/MDFodHRwOi8vd3d3LmZhY2Vib29rLmNvbS9wcm9maWxlLnBocD9pZD01NzE2MDgxNDMmcmVmPXByb2Zp
GU=" target="_blank"></a></div>


<div class="clickhere">
<a href="http://profile.myspace.com/index.cfm?fuseaction=user.viewProfile&friendID=199129327" target="_blank"></a>
</div>




<div class="kalico"><a href="http://profile.myspace.com/index.cfm?fuseaction=user.viewProfile&friendID=199129327" target="_blank"></a>
</div>



<div class="music">
MUSIC PLAYER HERE
</div>




<div class="about"><a href="http://www.myspace.com/index.cfm?fuseaction=misc.aboutus" target="_blank">
</a></div>


<div class="faq"><a href="http://www.msplinks.com/MDFodHRwOi8vZmFxLm15c3BhY2UuY29tLw==" target="_blank"></a>
</div>


<div class="terms"><a href="http://www.myspace.com/index.cfm?fuseaction=misc.terms" target="_blank"></a>
</div>


<div class="privacy"><a href="http://www.myspace.com/index.cfm?fuseaction=misc.privacy" target="_blank"></a>
</div>


<div class="safety"><a href="http://www.myspace.com/index.cfm?fuseaction=cms.viewpage&placement=safety_pagehome" target="_blank"></a>
</div>


<div class="contact"><a href="http://www.myspace.com/index.cfm?fuseaction=misc.contact" target="_blank"></a>
</div>


<div class="abuse"><a href="http://www.myspace.com/index.cfm?fuseaction=help.reportabuse&AbuseType=Profile&ProfileContentID=6221" target="_blank"></a>
</div>


<div class="advertise"><a href="http://www.msplinks.com/MDFodHRwczovLy4uY29tLy4uP2Fkdj1nZi4x" target="_blank"></a>
</div>


<div class="international"><a href="http://www.myspace.com/index.cfm?fuseaction=InternationalMap" target="_blank"></a>
</div>


<div class="latino"><a href="http://www.msplinks.com/MDFodHRwOi8vbGF0aW5vLm15c3BhY2UuY29tLw==" target="_blank"></a>
</div>





</div>
<div> class="bbzsc"><table><tr><td><table><tr><td><table><tr><td>

Replace all of your Music codes with that and it should all go back to normal.

[aQuafly]

^ I should have known that. My mind is a little rusty on myspace I guess, I haven't made a div like that in a while.

I feel stupid, lol.

[kaliiiiiiiii]

I just tried to put it all in, and now the links aren't working...when I go to click on where the link should be, nothing happens :(

[Mickey]

Take the class from the <div> tag and put it on the <a> tag. For example, take this code:

CODE

<div class="about"><a href="http://www.myspace.com/index.cfm?fuseaction=misc.aboutus" target="_blank">
</a></div>

If I were to fix it, it'll turn out like this:

CODE

<div><a href="http://www.myspace.com/index.cfm?fuseaction=misc.aboutus" target="_blank" class="about">
</a></div>

See if that fixes it.

[kaliiiiiiiii]

It did the same thing, the link isn't clickable...
Oh well, I need a new layout anyway, I feel bad for taking up so much time! Lol
But thanks for helping, I'll know to look out for all of those other factors in the future.

[Mickey]

Topic closed & moved.