I've been having problems with the sidebar div on a blog layout on this site. It works fine on FF but displays incorrectly on IE7. Supposedly, IE7 has implemented the use of position:fixed in their CSS so I don't see what the problem is.
Anyone care to help me debug the problem?
Here's the base code (some blogspot tags are there, so please ignore) Highlighted are the divs that are not functioning properly.
Sorry for the crudeness and disorder of the coding. I'm very much an amateur at this kind of stuff.
<html>
<head>
<title>POTAblog ~ speshul RAVE edition</title>
<meta http-equiv="imagetoolbar" content="no">
<style type="text/css">
#b-navbar { height:0px; visibility:hidden; display:none; }
A:link, A:visited, A:active
{ text-decoration: none; font-weight: none; color: #F94167; cursor: move; font-family: georgia; filter: none;}
A:hover
{ color: #26A3E3; cursor:move;}
body {
background-color: #000000; background-image:url("http://i85.photobucket.com/albums/k70/ada_akutenshi/bg-5.jpg");
font-family: tahoma;
color: #FFFFFF;
font-size: 8pt;
cursor: crosshair;
scrollbar-face-color: #323232;
scrollbar-highlight-color: #A7A7A7;
scrollbar-3dlight-color: #A7A7A7;
scrollbar-darkshadow-color: #323232;
scrollbar-shadow-color: #323232;
scrollbar-arrow-color:#FF2D58;
scrollbar-track-color:#26A1E4;
}
.blackheader {
font-family: georgia;
color: #FBF9D6;
font-size: 11pt;
font-weight: none;
line-height: 10px;
padding: 5px;
border-left: 4px solid #141414;
text-align: left;
border-bottom: 2px dotted #141414;
letter-spacing: -1px;
background-color: #323232;
}
.greenheader {
font-family: georgia;
color: #39F31B;
font-size: 11pt;
font-weight: none;
line-height: 10px;
padding: 5px;
border-left: 4px solid #39F31B;
text-align: left;
letter-spacing: -1px;
background-color: #323232;
}
.blueheader {
font-family: georgia;
color: #00ABFF;
font-size: 10pt;
font-weight: none;
line-height: 10px;
padding: 5px;
border-left: 4px solid #00ABFF;
text-align: left;
letter-spacing: -1px;
background-color: #323232;
}
.redheader {
font-family: georgia;
color: #FF0054;
font-size: 10pt;
font-weight: none;
line-height: 10px;
padding: 5px;
border-left: 4px solid #FF0054;
text-align: left;
letter-spacing: -1px;
background-color: #323232;
}
.postheader {
font-family: Georgia;
color: #73EBFF;
font-size: 14pt;
font-weight: none;
text-transform: none;
letter-spacing: 0px;
line-height: 16px;
background-color: 2A2A2A;
}
.postsubheader {
font-family: Georgia;
color: #71FF6C;
font-size: 8pt;
font-weight: none;
padding-top:5px;
text-transform: none;
letter-spacing: 0px;
line-height: 14px;
border-left: 4px solid #FF466C;
background-color: transparent;
}
.posts {
font-family: tahoma;
color: #FFFFFF;
font-size: 8pt;
line-height:12px;
padding-top: 3px;
font-weight: none;
text-transform: none;
letter-spacing: 0px;
}
blockquote {
font-family: verdana;
color: #292929;
margin-left: 20px;
margin-right: 20px;
background-color: #FFFFFF;
border-left: 3px dashed #7B7B7B;
padding: 5px; }
u
{
color: #FFFFFF;
border-bottom: #ffffff 1px dotted #07FF00;
}
b,strong
{
color: #A1FFF5;
background-color: none;
border-bottom: #000000 0px dashed;
}
i,em
{
color: #FF2A6B;
font-family: georgia;
font-size: 7pt;
border-bottom: #000000 0px dashed;
}
.sidebar {
position:fixed; height: auto; left: 555; top: 11; z-index:8;
}
.sidebarcontent {
position:fixed; width:220; height: 544; left: 570; top: 35; overflow:auto; text-align:center;z-index: 10;
}
.sidebarcontent2 {
display:none; position:fixed; width:220; height: 544; left: 570; top: 35; overflow:auto; text-align:center;z-index: 10;
}
a.link
{background:#323232;letter-spacing:1px;line-height:12pt;display:block;color:4CCF37;text-align:center;font-size:14;}
a.link:hover
{background:#4CCF37;letter-spacing:2px;line-height:12pt;display:block;color:323232;text-align:center;font-size:14;}
a.link2
{background:#323232;letter-spacing:1px;line-height:8pt;display:block;color:00ABFF;text-align:center;font-size:10;}
a.link2:hover
{background:#00ABFF;letter-spacing:2px;line-height:8pt;display:block;color:323232;text-align:center;font-size:10;}
</style>
<link rel="me" href="http://www.blogger.com/profile/07667333856840571335" />
<link rel="openid.server" href="http://www.blogger.com/openid-server.g" />
<!-- --><style type="text/css">@import url([url]http://www.blogger.com/css/navbar/classic.css);[/url]
div.b-mobile {display:none;}
</style>
<script>
var isNS = (navigator.appName == "Netscape") ? 1 : 0;
if(navigator.appName == "Netscape") document.captureEvents(Event.MOUSEDOWN||Event.MOUSEUP);
function mischandler(){
return false;
}
function mousehandler(e){
var myevent = (isNS) ? e : event;
var eventbutton = (isNS) ? myevent.which : myevent.button;
if((eventbutton==2)||(eventbutton==3)) return false;
}
document.oncontextmenu = mischandler;
document.onmousedown = mousehandler;
document.onmouseup = mousehandler;
</script>
<script>
function changeNavigation(id)
{document.getElementById('welcome').innerHTML=document.getElementById(id).innerHTML}
</script>
</head>
<noembed>
<body ondragstart="return false" onselectstart="return false">
</noembed>
<div class="sidebar">
<img src="http://i85.photobucket.com/albums/k70/ada_akutenshi/sidebar.png">
</div>
<div class="sidebarcontent" id="welcome">
<div class="blackheader">Welcome</div>
<br>
<div style="padding: 5px;">
<img src="http://i85.photobucket.com/albums/k70/ada_akutenshi/potablog.jpg"><Br>
You've stumbled upon the <b><font color="#FF0053">P</font><font color="#FF4E00">O</font><font color="#FF00C6">T</font><font color="#FFE400">A</font><font
color="#A200FF">S</font><font color="#30FF00">S</font><font color="#505CFF">I</font><font color="#00FFF6">U</font><font color="#00AAFF">M</font></b> blog :). To start navigating
click the buttons to the right.
<br><bR>
The theme of this quarter's blog is RAVE :D, for no apparent reason. There are now a total of <font color=red><b>3</b></font> Potassium headers that will rotate randomly as you
visit the site. Refresh to get a new header. To submit header recommendations, email <a href="mailto:adahikari@yahoo.com">ada</a> with the name of the featured Potassium student
with pictures you wish to use [ada is short on stock photos]. Feel free to roam around and please enjoy your visit :)
</div>
</div>
</div>
<div class="sidebarcontent2" id="profile">
<div class="redheader">Profile<br></div>
<br>
<img src="http://i85.photobucket.com/albums/k70/ada_akutenshi/profile1-1.jpg"><Br>
<br>
<div style="padding: 3px; font-size: 7pt;">
<b>POTASSIUM 2010</b> Thin Tei ~ Kind Karlos ~ Outgoing Oona ~ Little Lobitz ~ Merry Mirko ~ Good Gino ~ Amazing Aldrich ~ Resourceful Remo ~ Incredible Ianne ~ Hyper Hannah ~
Lucky Leo ~ Jolly Jed ~ Super Shua ~Tall Trixy ~ Friendly Felipe ~ Jollogs Justine ~ Charismatic Courtney ~ Jolly Goma ~ Enchanted Elvis ~ Joyful John John ~ Courteous Chuck ~
Adventurous Arvin ~ Autistic Alvin ~ Artistic Ada ~ Colorful Cat ~ Invisible Isma ~ Naughty Nesty ~ Lazy LC ~ Jurassic JC ~ Naughtier Nixxx ~ Our One and Only Chocolately Buddy
XD
<Br><br>
<img src="http://i85.photobucket.com/albums/k70/ada_akutenshi/chuckie.jpg" align="left">
<b>Class Council</b>
<Br><b>Class President:</b> Courtney Mathay
<br><b>Vice President:</b> Cat Angangco
<br><b>Secretary:</b> Trixy Carreon
<br><b>Treasurer:</b> Oona Nery
<br><b>PRO:</b> Gino Arellano
<br><b>Monitor:</b> Mirko Uy
<br><b>Class Adivser:</b> Sir Chuckie Fer Calsado
</div>
</div>
<div style="display:none; position:fixed; width:220; height: 544; left: 570; top: 35; overflow:auto; text-align:center; z-index: 10;" id="archive">
<div class="greenheader">Archive<br></div>
<br><br>
<BloggerArchives>
<a class="link" href='<$BlogArchiveURL$>'><$BlogArchiveName$></a>
<br>
</BloggerArchives>
</div>
<div style="display:none; position:fixed; width:220; height: 544; left: 570; top: 35; overflow:auto; text-align:center; z-index: 10;" id="older">
<div class="blueheader">Older Posts<br></div>
<br><br>
<BloggerPreviousItems>
<a class="link2" href="<$BlogItemPermalinkURL$>">
<$BlogPreviousItemTitle$>
</a><br />
</BloggerPreviousItems>
</MainPage>
<ItemPage>
<Br>
<BloggerPreviousItems>
<a class="link2" href="<$BlogItemPermalinkURL$>">
<$BlogPreviousItemTitle$>
</a><br />
</BloggerPreviousItems>
</ItemPage>
</div>
<div style="display:none; position:fixed; width:220; height: 544; left: 570; top: 35; overflow:auto; text-align:center; z-index: 10;" id="links">
<div class="redheader">Links<br></div>
<br><br>
<b>Potassium Blogs</b>
<Br><bR>
~ <a href="http://leoalfonsoaabella.blogspot.com/">K01 Abella</a>
~ <a href="http://httpcolonslashslashwwwblogspotdotcom.blogspot.com/">K02 Arellano</a>
~ <a href="http://noobsilog.blogspot.com/">K03 Ayroso</a>
~ <a href="http://coolblognumerouno.blogspot.com/">K04 Bataclan</a>
~ <a href="http://coolblognumerodos.blogspot.com/">K05 Cachuela</a>
~ <a href="http://shuavetsin.blogspot.com/">K06 Carangan</a>
~ <a href="http://thewormprophet-remote.blogspot.com/">K07 Dandoy</a>
~ <a href="http://malfunctioningobservatory.blogspot.com/">K08 Del Castillo</a>
~ <a href="http://thegoldenageofjohnchristianesguerra.blogspot.com/">K09 Esguerra</a>
~ <a href="http://infiniteatmosphere.blogspot.com/">K10 Garcia</a>
~ <a href="http://mazaiigo.blogspot.com/">K11 Hizon</a>
~ <a href="http://coolblognumerounoren.blogspot.com/">K12 Ilaga</a>
~ <a href="http://lobitzzz.blogspot.com/">K13 Lobitana</a>
~ <a href="http://coolblognumerosisentaynueve.blogspot.com/">K14 Luna</a>
~ <a href="http://monkeydumpling.blogspot.com/">K15 Magsalin</a>
~ <a href="http://coolblognumeroadrienne14.blogspot.com/">K16 Mendoza</a>
~ <a href="http://www.whatthero.blogspot.com/">K17 Suarez</a>
~ <a href="http://infinitelychaotic.blogspot.com/">K18 Suratos</a>
~ <a href="http://lifeisnotalwaysliving.blogspot.com/">K19 Tiongson</a>
~ <a href="http://rainbowcoloredhelixslashdna.blogspot.com/">K21 Uy</a>
~ <a href="http://ada-nikki.blogspot.com/">K22 Agupitan</a>
~ <a href="http://cat-angangco.blogspot.com/">K23 Angangco</a>
~ <a href="http://3xyyyy.blogspot.com/">K24 Carreon</a>
~ <a href="http://kamaitachinojutsu-kamaitachinojutsu.blogspot.com/">K25 Castellano</a>
~ <a href="http://fruitoftheoverusedmind.blogspot.com/">K26 Malubag</a>
~ <a href="http://lastchronicles.blogspot.com/">K27 Mathay</a>
~ <a href="http://oo-na-oona.blogspot.com/">K28 Nery</a>
~ <a href="http://istillwishicouldfly.blogspot.com/">K29 Rioflorido</a>
~ <a href="http://heakoess.blogspot.com/">K30 Sanchez</a>
<br><br>
<b>Other Class Blogs</b>
<Br><br>
<a href="http://berybigbetblog.blogspot.com/">Beryllium</a>
~ <a href="http://cesium2010.wordpress.com/">Cesium</a>
~ <a href="http://lithium2010.wordpress.com/">Lithium</a>
~ <a href="http://magnesium2010.wordpress.com/">Magnesium</a>
~ <a href="http://thepotatocorner.blogspot.com/">*Potassium*</a>
~ <a href="http://magicalrubidium.wordpress.com/">Rubidium</a>
~ <a href="http://na10.multiply.com/">Sodium</a>
~ <a href="http://strontium2010.wordpress.com/">Strontium</a>
<Br><br>
<b>Useful Links</b>
<br>
<a href="http://groups.yahoo.com/group/bayopisay2010/">Bayo Pisay</a>
<br><a href="http://groups.yahoo.com/group/potassium2010/">Potassium Yahoo Group</a>
<br><a href="http://tech.groups.yahoo.com/group/3-K_Bio2/">Sir Chuckie's Bio Group</a>
<br><a href="http://groups.yahoo.com/group/pshsmainchem2jmanoop/">Sir Manoop's Chem Group</a>
<br><a href="http://bayo2pisay.wordpress.com/">Ma'am Crisologo's Bio/STR Blog</a>
</div>
<div style="display:none; position:fixed; width:220; height: 544; left: 570; top: 35; overflow:auto; text-align:center; z-index: 10;" id="tag">
<div class="greenheader">Shout Out<br></div>
<br><br>
<!-- BEGIN CBOX - [url]www.cbox.ws[/url] - v001 -->
<div id="cboxdiv" style="text-align: center; line-height: 0">
<div><iframe frameborder="0" width="200" height="263" src="http://www4.cbox.ws/box/?boxid=3252789&boxtag=5787&sec=main" marginheight="2" marginwidth="2" scrolling="auto"
allowtransparency="yes" name="cboxmain" style="border:#000000 1px solid;" id="cboxmain"></iframe></div>
<div><iframe frameborder="0" width="200" height="117" src="http://www4.cbox.ws/box/?boxid=3252789&boxtag=5787&sec=form" marginheight="2" marginwidth="2" scrolling="no"
allowtransparency="yes" name="cboxform" style="border:#000000 1px solid;border-top:0px" id="cboxform"></iframe></div>
</div>
<!-- END CBOX -->
<br><br>
<b>No Profanity
<br>No Spamming
<br>No Flaming
<br>No Trolling
<br>Treat Others With Respect
</b>
</div>
<div class="sidebarcontent2" id="updates">
<div class="blueheader">Shout Out<br></div>
<br><br>
<b>Upcoming Birthdays</b><Br><Br>
10/17 Chuck<Br>
10/27 Leo<Br>
10/30 Lobitaña<br>
<Br>
<b>Things Due</b>
<bR><Br>
STR - 10/13<br>
Retreat Payments - 10/17<br>
English - 10/24
</div>
<div style="display:none; position:fixed; width:220; height: 544; left: 570; top: 35; overflow:auto; text-align:center; z-index: 10;" id="layout">
<div class="redheader">Layout<br></div>
<br><br>
This customlayout was created by <a href="mailto:adahikari@yahoo.com">Ada</a>. Graphics and Webdesign by Ada. Please do not repost and claim as your own. Images from <a
href="http://oo-na-oona.blogspot.com/">Oona Nery</a> and Ada.
<br><br>
For more custom layouts and graphics please visit <A href="http://ada-nikki.blogspot.com/2008/10/blog-layout-order-form.html">Ada no Nikki</a>.
</div>
<div style="position:fixed; left: 795; top: 42; z-index: 15">
<a href="http://thepotatocorner.blogspot.com"><img src="http://i85.photobucket.com/albums/k70/ada_akutenshi/home-1.png" border="0"></a>
<br><Br>
<img src="http://i85.photobucket.com/albums/k70/ada_akutenshi/profile-2.png" onclick="changeNavigation('profile')" border="0">
<br><Br>
<img src="http://i85.photobucket.com/albums/k70/ada_akutenshi/archive.png" onclick="changeNavigation('archive')" border="0">
<br><Br>
<img src="http://i85.photobucket.com/albums/k70/ada_akutenshi/OLDER.png" onclick="changeNavigation('older')" border="0">
<br><Br>
<img src="http://i85.photobucket.com/albums/k70/ada_akutenshi/links.png" onclick="changeNavigation('links')" border="0">
<br><Br>
<img src="http://i85.photobucket.com/albums/k70/ada_akutenshi/tag-1.png" onclick="changeNavigation('tag')" border="0">
<br><Br>
<img src="http://i85.photobucket.com/albums/k70/ada_akutenshi/updates.png" onclick="changeNavigation('updates')" border="0">
<br><Br>
<img src="http://i85.photobucket.com/albums/k70/ada_akutenshi/layout-1.png" onclick="changeNavigation('layout')" border="0">
</div>
<div style="position:absolute; left: 0; top: 0;z-index:6;">
<script type="text/javascript">
<!-- hide
numquotes = 4;
var quotes = new Array(numquotes);
quotes[0]="<img src=http://i85.photobucket.com/albums/k70/ada_akutenshi/headerleo.jpg border=0>";
quotes[1]="<img src=http://i85.photobucket.com/albums/k70/ada_akutenshi/headerelvis.jpg border=0>";
quotes[2]="<img src=http://i85.photobucket.com/albums/k70/ada_akutenshi/headergino.jpg border=0>";
quotes[3]="<img src=http://i85.photobucket.com/albums/k70/ada_akutenshi/headerchuckie.jpg border=0>";
var rand = Math.floor(Math.random()*numquotes);
document.write(quotes[rand]);
// --></script> </div>
<div style="position:absolute; width:506; height: auto; left: 27; top: 459;z-index:7;">
<div style="color: #2489CF; border-right: 3px dashed #FFFFFF; padding: 5px;">
<blogger>
<div class="postheader"><$BlogItemTitle$></div>
<div class="postsubheader"><BlogDateHeader><$BlogDateHeaderDate$></BlogDateHeader></div>
<div class="posts"><$BlogItemBody$> <br> </div>
<BlogItemCommentsEnabled>
<a href="<$BlogItemCommentCreate$>"
<$BlogItemCommentFormOnClick$>>
<$BlogItemCommentCount$> comments</a>
</BlogItemCommentsEnabled>
</blogger>
</div>
<ArchivePage>
<br>
<a class="link2" href="http://thepotatocorner.blogspot.com">Return to Main Page</a>
</ArchivePage>
<ItemPage>
<br><a class="link2" href="http://thepotatocorner.blogspot.com">Return to Main Page</a>
</ItemPage>
</div>
</html>
