Help - Search - Members - Calendar
Full Version: Firefox Div Class problems
Forums > Resource Center > Support Center > MySpace Support > Myspace Resolved Topics
Brighter
Wasn't sure whether to put this here or in Myspace help.

I've made this DIV overlay layout that functions perfectly fine in IE, but for some reason the second div (with the navigation links) doesn't show up in Firefox.

Here's a screenshot.
Those bottom nav links aren't showing in Firefox.

Here's the coding I've used. I can't find anything wrong with it, it's the same codes I've used for all my layouts and they've all worked fine in Firefox.

CODE
<style>
.contacttable,.whitetext12,.nametext,.lightbluetext8,.orangetext15,.blacktext12,
btext,.redtext,.redbtext{display:none;height:0px;;visibility:hidden}
td td td td{border:0px;width:0px;text-align:left;}
table,td,tr{padding:0px;width:;background-color:transparent}
table table table{padding:1px;height:.01%;width:100%;}
table table,table table table table,table,tr,td{height:0px;border:0px;}
a.text,table div font a,table div div,.navbar font,tr td font{visibility:hidden;display:none;height:0px;}
table table table table,table table table table td.text, td.text td.text table{display:none;}
td.text table table{display:inline;visibility:visible;}
table td table tr td.text table{visibility:hidden;}
table td table tr td.text table table,table td table tr td.text table table td.text{visibility:visible;}
body div table td form img{display:none;}
body div table td form option{display:none;}
body div table td form select{display:none;}
body div table td form input{display:none;}

div div table div {display:none;} .clearfix table div div {display:block;}
tr td div, div td, div tr, div table {background-color:transparent !important;}
.profile, div ul {display:none !important; }

body div table tbody tr td font {visibility:hidden;}
body table div table tbody tr td font {visibility:visible;}
</style>

<style>div[id="googlebar"],
div div select{
opacity:0;
filter:alpha(opacity=0);
display:none !important;
position:absolute !important;
bottom:2000px !important;}</style>
<style>

.div{
position: absolute;
left: 50%;
margin-left:-410px;
top: 80px;
z-index: 0; }

.one{
position: absolute;
left: 50%;
margin-left: 0px;
top: 190px;
z-index:5;
width: 280px;
height: 356px;
overflow: auto;
border: 3px;
scrollbar-arrow-color:fff;
scrollbar-track-color:FF00FF;
scrollbar-shadow-color:FF00FF;
scrollbar-face-color:FF00FF;
scrollbar-highlight-color:FF00FF;
scrollbar-darkshadow-color:FF00FF;
scrollbar-3dlight-color:FF00FF;
filter: chroma(color=FF00FF);}
}

.nav{
position: absolute;
left: 50%;
margin-left: -330px;
top: 560px;
z-index:5;
width: 600px;
height: 50px;
overflow: auto;
border: 3px;
text-align:right;
scrollbar-arrow-color:fff;
scrollbar-track-color:000;
scrollbar-shadow-color:000;
scrollbar-face-color:000;
scrollbar-highlight-color:000;
scrollbar-darkshadow-color:000;
scrollbar-3dlight-color:000;
}

h1 {
font-family:arial!important;
font-size:23px!important;
font-weight:bold!important;
letter-spacing:-3px;
line-height:21px!important;
color: fff!important;
text-transform:lowercase; }

body{
background-color:1E1E1E;
scrollbar-arrow-color:fff;
scrollbar-track-color:1E1E1E;
scrollbar-shadow-color:1E1E1E;
scrollbar-face-color:1E1E1E;
scrollbar-highlight-color:1E1E1E;
scrollbar-darkshadow-color:1E1E1E;
scrollbar-3dlight-color:1E1E1E;}

body,table, td, li, p, div{
font-family: arial;
size: 10px;
color:fff;
font-weight: normal;
border:0px;
text-transform: none;
line-height:11px;
letter-spacing: 0px;}

b, strong {
color: fff; }

u {
color: fff; }

i, em {
color: fff;
font-family:georgia;}

a {font: normal 11px georgia!important; text-decoration: none!important; color:545454!important;}
a:hover {font: normal 11px georgia!important; text-decoration: none!important; color: fff!important; cursor: default;}

a.navi:link, a.navi:visited, a.navi:active {
font-family:georgia!important;
font-size:23px!important;
font-weight:bold!important;
letter-spacing:-3px;
line-height:19px!important;
color: 1e1e1e!important;
cursor: default;
margin: 0;
margin-bottom: 0em;
padding: 0px;}
a.navi:hover {
font-family:georgia!important;
font-size:23px!important;
font-weight:bold!important;
letter-spacing:-3px;
line-height:19px!important;
color: CDCDCD!important;
cursor: default;
margin: 0;
margin-bottom: 0em;
padding: 0px;}


td td object {position: absolute;
left:0px;
top: 0px;
width:45px;}

</style>

<div class="div">
<img src="http://i225.photobucket.com/albums/dd39/liiishaa/voguee.png" usemap="#vogue" border="0" />
<map name="vogue">
<area shape="RECT" coords="138,502,172,511" href="http://www.myspace.com/cosmoblink" alt="credit" />
</map></div>

<div class="one"><h1>about me</h1>
<b>Bold Text.</b> <u>Underlined Text.</u> <i>Italic Text.</i> <a href="http://www.myspace.com" target="_blank">Link Text</a>. <br />
About Me Here.
<br /><br /></div>

<div class="nav">
<a class="navi" href="http://home.myspace.com/index.cfm?fuseaction=user">home</a>

<a class="navi" href="http://collect.myspace.com/index.cfm?fuseaction=invite.addfriend_verify&friendID=XXXXXXXX">add</a>

<a class="navi" href="http://comment.myspace.com/index.cfm?fuseaction=user.viewComments&friendID=XXXXXXXX">comment</a>

<a class="navi" href="http://messaging.myspace.com/index.cfm?fuseaction=mail.message&friendID=XXXXXXXX">message</a>

<a class="navi" href="http://viewmorepics.myspace.com/index.cfm?fuseaction=user.viewAlbums&friendID=XXXXXXXX">photos</a>

<a class="navi" href="http://collect.myspace.com/index.cfm?fuseaction=block.blockUser&userID=XXXXXXXX">block</a>

<a class="navi" href="http://blog.myspace.com/index.cfm?fuseaction=blog.ListAll&friendID=XXXXXXXX">blog</a>

<a class="navi" href="http://home.myspace.com/Modules/ViewFriends/FriendsView.aspx?friendID=XXXXXXXX">friends</a>
<br /><br /></div>
Mickey
Topic moved to MySpace Support. Try replacing your codes with this:

CODE
<style>
.contacttable,.whitetext12,.nametext,.lightbluetext8,.orangetext15,.blacktext12,
btext,.redtext,.redbtext{display:none;height:0px;;visibility:hidden}
td td td td{border:0px;width:0px;text-align:left;}
table,td,tr{padding:0px;width:;background-color:transparent}
table table table{padding:1px;height:.01%;width:100%;}
table table,table table table table,table,tr,td{height:0px;border:0px;}
a.text,table div font a,table div div,.navbar font,tr td font{visibility:hidden;display:none;height:0px;}
table table table table,table table table table td.text, td.text td.text table{display:none;}
td.text table table{display:inline;visibility:visible;}
table td table tr td.text table{visibility:hidden;}
table td table tr td.text table table,table td table tr td.text table table td.text{visibility:visible;}
body div table td form img{display:none;}
body div table td form option{display:none;}
body div table td form select{display:none;}
body div table td form input{display:none;}

div div table div {display:none;} .clearfix table div div {display:block;}
tr td div, div td, div tr, div table {background-color:transparent !important;}
.profile, div ul {display:none !important; }

body div table tbody tr td font {visibility:hidden;}
body table div table tbody tr td font {visibility:visible;}
</style>

<style>div[id="googlebar"],
div div select{
opacity:0;
filter:alpha(opacity=0);
display:none !important;
position:absolute !important;
bottom:2000px !important;}</style>
<style>

.div{
position: absolute;
left: 50%;
margin-left:-410px;
top: 80px;
z-index: 0; }

.one{
position: absolute;
left: 50%;
margin-left: 0px;
top: 190px;
z-index:5;
width: 280px;
height: 356px;
overflow: auto;
border: 3px;
scrollbar-arrow-color:fff;
scrollbar-track-color:FF00FF;
scrollbar-shadow-color:FF00FF;
scrollbar-face-color:FF00FF;
scrollbar-highlight-color:FF00FF;
scrollbar-darkshadow-color:FF00FF;
scrollbar-3dlight-color:FF00FF;
filter: chroma(color=FF00FF);
}

.nav{
position: absolute;
left: 50%;
margin-left: -330px;
top: 560px;
z-index:5;
width: 600px;
height: 50px;
overflow: auto;
border: 3px;
text-align:right;
scrollbar-arrow-color:fff;
scrollbar-track-color:000;
scrollbar-shadow-color:000;
scrollbar-face-color:000;
scrollbar-highlight-color:000;
scrollbar-darkshadow-color:000;
scrollbar-3dlight-color:000;
}

h1 {
font-family:arial!important;
font-size:23px!important;
font-weight:bold!important;
letter-spacing:-3px;
line-height:21px!important;
color: fff!important;
text-transform:lowercase; }

body{
background-color:1E1E1E;
scrollbar-arrow-color:fff;
scrollbar-track-color:1E1E1E;
scrollbar-shadow-color:1E1E1E;
scrollbar-face-color:1E1E1E;
scrollbar-highlight-color:1E1E1E;
scrollbar-darkshadow-color:1E1E1E;
scrollbar-3dlight-color:1E1E1E;}

body,table, td, li, p, div{
font-family: arial;
size: 10px;
color:fff;
font-weight: normal;
border:0px;
text-transform: none;
line-height:11px;
letter-spacing: 0px;}

b, strong {
color: fff; }

u {
color: fff; }

i, em {
color: fff;
font-family:georgia;}

a {font: normal 11px georgia!important; text-decoration: none!important; color:545454!important;}
a:hover {font: normal 11px georgia!important; text-decoration: none!important; color: fff!important; cursor: default;}

a.navi:link, a.navi:visited, a.navi:active {
font-family:georgia!important;
font-size:23px!important;
font-weight:bold!important;
letter-spacing:-3px;
line-height:19px!important;
color: 1e1e1e!important;
cursor: default;
margin: 0;
margin-bottom: 0em;
padding: 0px;}
a.navi:hover {
font-family:georgia!important;
font-size:23px!important;
font-weight:bold!important;
letter-spacing:-3px;
line-height:19px!important;
color: CDCDCD!important;
cursor: default;
margin: 0;
margin-bottom: 0em;
padding: 0px;}


td td object {position: absolute;
left:0px;
top: 0px;
width:45px;}

</style>

<div class="div">
<img src="http://i225.photobucket.com/albums/dd39/liiishaa/voguee.png" usemap="#vogue" border="0" />
<map name="vogue">
<area shape="RECT" coords="138,502,172,511" href="http://www.myspace.com/cosmoblink" alt="credit" />
</map></div>

<div class="one"><h1>about me</h1>
<b>Bold Text.</b> <u>Underlined Text.</u> <i>Italic Text.</i> <a href="http://www.myspace.com" target="_blank">Link Text</a>. <br />
About Me Here.
<br /><br /></div>

<div class="nav">
<a class="navi" href="http://home.myspace.com/index.cfm?fuseaction=user">home</a>

<a class="navi" href="http://collect.myspace.com/index.cfm?fuseaction=invite.addfriend_verify&friendID=XXXXXXXX">add</a>

<a class="navi" href="http://comment.myspace.com/index.cfm?fuseaction=user.viewComments&friendID=XXXXXXXX">comment</a>

<a class="navi" href="http://messaging.myspace.com/index.cfm?fuseaction=mail.message&friendID=XXXXXXXX">message</a>

<a class="navi" href="http://viewmorepics.myspace.com/index.cfm?fuseaction=user.viewAlbums&friendID=XXXXXXXX">photos</a>

<a class="navi" href="http://collect.myspace.com/index.cfm?fuseaction=block.blockUser&userID=XXXXXXXX">block</a>

<a class="navi" href="http://blog.myspace.com/index.cfm?fuseaction=blog.ListAll&friendID=XXXXXXXX">blog</a>

<a class="navi" href="http://home.myspace.com/Modules/ViewFriends/FriendsView.aspx?friendID=XXXXXXXX">friends</a>
<br /><br /></div>

See if doing that fixes the issue.
Brighter
Oh, thankyou, the nav is showing up & working, but my image mapping credit isn't linked.

Just in Firefox, IE it's working fine.
Mickey
I thought image maps didn't work for regular MySpace profiles anymore? I say just position the link separately like this:

CODE
<a style="position:absolute; top:#px; left:50%; margin-left:#px; z-index:9;" href="http://myspace.com/cosmoblink" alt="credit"><img style="height:#px; width:#px;" src="http://x.myspacecdn.com/modules/common/static/img/clear.gif" /></a>

Replace the pound symbols with the appropriate values. Make sure it's placed over the credit area of your layout image.
Mickey
Oh, I thought it was the opposite. In that case, I don't know why it's not working on Firefox. I suggest just following my previous post.
Brighter
Yeah, I use imagemapping for regular profiles all the time and they function just fine in firefox, using may I say the exact same codes stubborn.gif

Well, thankyou thumbsup.gif

Firefox is just being a dick today, I guess.
Mickey
Yeah, it might fix itself sooner or later or something. Well I assume your issues are resolved. PM me if you need this opened again.

Topic closed & moved.
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.