Vertical Scrollbar disappears in Opera when using Div Overlay Layout for MySpace
newbie
Posted: Mon, 2008-05-05 16:44
Hello. I have searched up and down here, there and everywhere and have not found a solution for this problem yet.
I am interested in using something similar to the following layout (below) for a MySpace page. However, this site cuts off at the bottom in Opera and does not give a vertical scrollbar option. The scrollbar is missing completely. It looks fine in IE and FF but since Opera is my main browser at home, I'd like it to look decent in that as well. BTW, I've checked it on two different computers with the Opera browser. I am relatively new to CSS and a complete noob to MySpace Div Overlay layouts. Could it have something to do with the current overflow options in the code? Thank you in advance for any light you can shed on this.
About me box code:
<p><a href="http://www.createblog.com/layouts/index.php?layout=myspace_layouts" title="Grab Myspace Layouts and Myspace Codes"><img src="http://www.createblog.com/images/link1.gif" border="0" alt="Myspace Layouts" style="position:absolute;top:0px;left:0px;width:10px;height:27px;" /></a></p><style type="text/css">
table, tr, td { background-color:transparent; border:none; border-width:0;}
body {
background-image: url("");
background-attachment:fixed;
background-repeat: repeat;
background-position:bottom left;
background-color:FFFFFF;}
table, td, p, span, li,b, strong, div{font-family:Georgia; font-size: 11px; color: 110F10; font-weight: none; text-decoration: none; letter-spacing: 1px; text-transform: none; padding: 0px; line-height: 13px; background-color: transparent; border: 0px solid;}
h2 {
margin: 0px;
color:595557;
text-align:left;
border-bottom:0px solid;
font-style:bold;
font-family:Georgia ;
font-size:9pt;
font-weight: normal;
letter-spacing: 4px;
text-transform: uppercase;
background-color: transparent;
line-height: 12pt;
padding:2px;
margin-bottom: 5px;
margin-top: 2px;
padding-left:2px;
}
h3 {
margin: 0px;
color: 110F10;
text-align:center;
border-bottom:2px dotted;
border-color:110F10;
font-style:bold;
font-family:Georgia;
font-size:12pt;
font-weight: normal;
letter-spacing: 5px;
text-transform: uppercase;
background-color: transparent;
line-height: 13pt;
padding:2px;
margin-bottom:2px;
margin-top: 2px;
padding-left:2px;
background-image:url('http://cbimg9.com/layouts/08/04/17/26926aa.png');
background-repeat: no-repeat;
}
h4 {
margin: 0px;
color: 110F10;
text-align:center;
border-bottom:2px dotted;
border-color:76716F;
font-style:bold;
font-family:Georgia;
font-size:9pt;
font-weight: normal;
letter-spacing: 5px;
text-transform: uppercase;
background-color: transparent;
line-height: 16pt;
padding:2px;
margin-bottom: 5px;
margin-top: 2px;
padding-left:2px;
background-image:url('http://cbimg9.com/layouts/08/04/17/26926ab.png');
background-repeat: no-repeat;
<style>
li {
color:BA78B9;
line-height:13px;
font-family:arial;
letter-spacing:0px;
text-align:justify;
}
b{
color:FF0066;
font-size:12pt;
cursor:default;
line-height:13px;
letter-spacing:-1px;
font-family:Georgia;
text-transform:lowercase;
}
s{
color:A8C093;
font-size:9pt;
cursor:default;
line-height:10px;
letter-spacing:-1px;
font-family:arial;
text-transform:none;
background-color:3EB1EC;
line-height:14px;
}
i{
color:E06318;
font-size:10pt;
cursor:default;
line-height:10px;
letter-spacing:0px;
font-family: Verdana;
text-transform:none;
}
u{
color:BA78B9;
font-size:12px;
cursor:default;
line-height:10px;
letter-spacing:0px;
font-family:georgia;
text-transform:none;}
}
</style>
<style>
a:link, a:active {
color:9F9EA2;
font:normal 11px arial;
text-transform: none;
text-decoration:none;
font-weight:normal;
border-bottom: none;
}
a:visited {
color:6A6970;
font:normal 11px arial;
text-transform: none;
text-decoration:none;
}
a:hover {
color:C4C3C7;
font-weight: normal;
border-bottom: none;
text-transform:none;
text-decoration:none;}
</style>
<style type="text/css">
.title{font:30px georgia;
color:170A07;
letter-spacing:-4px;}
.nav{display:block;
color: 110F10!important;
font-family:Georgia;
font-size:10pt;
color:000000;
letter-spacing: 0px;font-weight: normal;
width:190px;
border-left: 5px solid;
border-left-color: 000000;
text-transform:none;
text-decoration:none!important;
line-height:14pt;
background-color:none;margin: 1px;
text-align: center;
}
.nav:hover {display:block;color:none !important;
font-family:Georgia; font-size:10pt; letter-spacing: 3px;font-weight: normal;width:190px; border-left: 5px solid;
border-left-color: 000000;
background-image:url('http://cbimg9.com/layouts/08/04/17/26926ac.png');
background-repeat: repeat;
text-transform:none!important;text-decoration:none!important;line-height:14pt;background-color: F2EBF8;margin: 1px; text-align: center;
}]
</style>
<style type="text/css">
.contacttable,.whitetext12,.nametext,.lightbluetext8,.orangetext15,.blacktext12,.btext,.redtext,.redbtext{display:none;height:0px;!important;visibility:hidden}
td td td td{border:0px;width:0px;text-align:left;}
table,td{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;!important;border:0px;!important}
a.text,table div font a,table div div,.navbar font,tr td font{visibility:hidden;display:none;height:0px;!important;}
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;}
</style>I'd Like To Meet Box Code:
<style type="text/css">
body div table td form img{display:none!important;}
</style>
<div class="bg" style="position: absolute; left:0px; top:170px; width:1024px; height:768px; overflow: hidden;">
<img src="http://cbimg9.com/layouts/08/04/17/26926ad.png">
</div>
<div class="friends"style="position: absolute; left:370px; top:843px; width:402px; height:388px; overflow: none;">
<h3>Moon Flower</h3>
<h2>"here's a little story,about a girl....." </h2>
<p align="left">
<img src="http://cbimg9.com/layouts/08/04/17/26926ae.png" align="left"><b>Name:</b> Name <br>
<b>Location:</b> local<br>
<b>B-day:</b> b-day<br>
<b>Occupation:</b> job<br>
<br>
<i>premonition</i>
<br>
"Only on the surface now I'm toying with you you do not notice a thing
In minus frozen love
in taciturn you, with taciturn love, a taciturn discomfort
in taciturn me, with taciturn love, a taciturn scar
you are the eighteenth one you didn't notice me supported by kindness
this love made frozen
<br>
in quiet you, with quiet love, kill the quiet pleasure
in quiet me, with quiet love, quiet....
I cannot change, I cannot return, taciturn love
quietly, quietly, we two entangled
<br>
my inner heart's reticence, my inner heart's quiet, striking towards the heart
my inner heart's reticence, my inner heart's quiet, even if I try to toy with your heart
<br>
<br>
from sometime ago I had noticed you but
to be only by your side is all I need
I held you close at the end
I don't know if this will become the end
<br>
<br>
the way that we walked together back then is lost
yet always we were walking, someday shall I meet with you?
atop the gently sloping hill, the snow slowly falls I understand that I cannot reach you, yet
in your room, a single flower of the kind that you loved, is now...
the day of last year's final snow a promise firmly exchanged
when I remembered, it started to melt, and spill from the palm of my hand"
</div>
<div class="content" style="position: absolute;
left: 160px; top:888px; width:197px; height:400px; overflow: none; ">
<center>
<h4>Navi</h4>
<a href="http://home.myspace.com/index.cfm?fuseaction=user" class="nav">home</a>
<a href="http://collect.myspace.com/index.cfm?fuseaction=invite.addfriend_verify&friendID=XXXXXX" class="nav">add</a>
<a href="http://messaging.myspace.com/index.cfm?fuseaction=mail.message&friendID=XXXXXXX" class="nav">message</a>
<a href="http://viewmorepics.myspace.com/index.cfm?fuseaction=user.viewAlbums&friendID=XXXXXXX" class="nav">pictures</a>
<a href="http://comment.myspace.com/index.cfm?fuseaction=user.viewComments&friendID=XXXXXXXXX&MyToken=424a2c82-2c9f-453c-9d1e-d47a58681194" class="nav">comments</a>
<a href="http://Saikou.createblog.com/" class="nav">saikou</a>
<br>
<h4>Heroes</h4>
<ul>
<li>YOU</li>
<li>YOU</li>
<li>YOU</li>
<li>YOU</li>
<li>YOU</li></ul>
<br>
<h4>music</h4>
<object type="application/x-shockwave-flash" allowScriptAccess="never" allowNetworking="internal" height="80" width="197" data="http://media.imeem.com/m/8QgVIss1mr">
<param name="allowScriptAccess" value="never" />
<param name="allowNetworking" value="internal" />
<param name="movie" value="http://media.imeem.com/m/8QgVIss1mr" />
</object>
<h4 >friends</h4>
<marquee width="181px" height="102px">
<A HREF="XXXXXFREINDSURLHEREXXXXX"><img src="http://cbimg9.com/layouts/08/04/17/26926ae.png"></A>
<A HREF="XXXXXFREINDSURLHEREXXXXX"><img src="http://cbimg9.com/layouts/08/04/17/26926ae.png"></A>
<A HREF="XXXXXFREINDSURLHEREXXXXX"><img src="http://cbimg9.com/layouts/08/04/17/26926ae.png"></A>
<A HREF="XXXXXFREINDSURLHEREXXXXX"><img src="http://cbimg9.com/layouts/08/04/17/26926ae.png"></A>
<A HREF="XXXXXFREINDSURLHEREXXXXX"><img src="http://cbimg9.com/layouts/08/04/17/26926ae.png"></A>
<A HREF="XXXXXFREINDSURLHEREXXXXX"><img src="http://cbimg9.com/layouts/08/04/17/26926ae.png"></A>
<A HREF="XXXXXFREINDSURLHEREXXXXX"><img src="http://cbimg9.com/layouts/08/04/17/26926ae.png"></A> </marquee><br>
<h4>Credits</h4>
<b>patterns/textures</b>
<a href="http://www.msplinks.com/MDFodHRwOi8vNzd3b3Jkcy5saXZlam91cm5hbC5jb20vMTQ0NjEuaHRtbCNjdXRpZDE=" target="_blank">77words</a>
<a href="http://www.msplinks.com/MDFodHRwOi8vY3JhenlraXJhLXJlc291cmNlcy5kZXZpYW50YXJ0LmNvbS9hcnQvQ3V0aWUtUGF0dGVybnMtNjg3ODE1NjA=" target="_blank">Crazykira</a>
<b>brushes</b>
<a href="http://www.msplinks.com/MDFodHRwOi8vd3d3Lm1vYXJnaC5kZS9lbi9jYW5keV9zaG9wLnBocA==" target="_blank">moargh</a>
<a href="http://www.msplinks.com/MDFodHRwOi8vZGV2aWFudGFsZXMuZGV2aWFudGFydC5jb20v" target="_blank">deviantales</a>
<a href="http://www.msplinks.com/MDFodHRwOi8vZWdnOTcwMC5kZXZpYW50YXJ0LmNvbS8=" target="_blank">egg9700</a>
<br>
<br>
</div>
newbie
Posts: 3
Joined: 2008-04-25
opera divs
Posted: Thu, 2008-05-22 13:53
I'm not so familiar with myspace css layouts, but try adding overflow:auto prior to any other overflow-x or overflow-y css you may have for whatever item(s) you are causing to scroll. Apparently, Opera does recognize axis specific css. I just ran into this problem myself. I hope that helps. good luck.