Problem with "position:fixed;" on IE7

Question

ada_a 0 Newbie Poster

15 Years Ago

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&amp;boxtag=5787&amp;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&amp;boxtag=5787&amp;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>

web-design

4 Contributors
4 Replies
436 Views
1 Year Discussion Span
Latest Post 14 Years Ago Latest Post by coolkido

All 4 Replies

cpeeyush1 0 Light Poster

15 Years Ago

hi
the fixed position is a very big draw back for the IE and the IE doen't understand it but in IE7 beta2 it is resolved here i am giving you a link for a complete solution of your problem use the information on this page and do your work fine with IE7

the link is:

http://www.howtocreate.co.uk/fixedPosition.html

-PC(INDIA)

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

ada_a 0 Newbie Poster · Answer 1 · 2008-10-13T20:56:50+00:00

The current code doesn't work on IE7 and I couldn't really care less fore IE6, so the problem isn't among the fixes up there.

The fact that it doesn't implement correctly on IE7, which supposedly supports fixed-positioning is puzzling.

I just need a check on the syntax for any problems as to why it's not displaying correctly D:

If it's not so much of a problem, it would be great if people could review the code cuz it's getting pretty hard and none of the fixes seem to be working for me.

MKala 0 Newbie Poster · Answer 2 · 2008-10-15T20:29:34+00:00

you have to use the strict mode for IE to have your fixed positioned element work properly.

Type this at the very first line of the html file:

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Visit http://www.w3schools.com/ for useful tips, examples and totarials.

coolkido 0 Newbie Poster · Answer 3 · 2010-02-22T18:30:15+00:00

<!DOCTYPE html> is the trick and it works.
Add it in the header of the page.

Problem with "position:fixed;" on IE7

Recommended Answers Collapse Answers

All 4 Replies

Recommended Answers