HTML and CSS RSS HTML and CSS RSS

Problem with "position:fixed;" on IE7

Reply

•
•
Join Date: Feb 2008
Posts: 6
Reputation: ada_a is an unknown quantity at this point 
Solved Threads: 0
ada_a ada_a is offline Offline
Newbie Poster

Problem with "position:fixed;" on IE7

 
0
  #1
Oct 13th, 2008
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(http://www.blogger.com/css/navbar/classic.css);
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 - www.cbox.ws - 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>
Reply With Quote Quick reply to this message  
•
•
Join Date: Sep 2008
Posts: 29
Reputation: cpeeyush1 is an unknown quantity at this point 
Solved Threads: 2
cpeeyush1 cpeeyush1 is offline Offline
Light Poster

Re: Problem with "position:fixed;" on IE7

 
0
  #2
Oct 13th, 2008
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)
Last edited by cpeeyush1; Oct 13th, 2008 at 8:36 am.
Reply With Quote Quick reply to this message  
•
•
Join Date: Feb 2008
Posts: 6
Reputation: ada_a is an unknown quantity at this point 
Solved Threads: 0
ada_a ada_a is offline Offline
Newbie Poster

Re: Problem with "position:fixed;" on IE7

 
0
  #3
Oct 13th, 2008
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.
Reply With Quote Quick reply to this message  
•
•
Join Date: Oct 2008
Posts: 11
Reputation: MKala is an unknown quantity at this point 
Solved Threads: 0
MKala MKala is offline Offline
Newbie Poster

Re: Problem with "position:fixed;" on IE7

 
0
  #4
Oct 15th, 2008
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:
HTML and CSS Syntax (Toggle Plain Text) 
  1. <!DOCTYPE html
  2. PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  3. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Visit http://www.w3schools.com/ for useful tips, examples and totarials.
Reply With Quote Quick reply to this message  
Reply

Quick Reply to Thread
This thread is more than three months old.
Perhaps start a new thread instead?
•
•
•
•
•
•
•
•
Message:
•
•
•
•



Other Threads in the HTML and CSS Forum
Thread Tools Search this Thread



appointments asp background backgroundcolor beta browser bug calendar cart cgi code codeinjection corporateidentity css design development displayimageinsteadofflash dreamweaver emailmarketing epilepsy explorer firefox flash form format google griefers hackers hitcounter hover html ide ie7 ie8 iframe image images internet internetexplorer intranet iphone javascript jpeg layout macbook maps marketshare microsoft mozilla multimedia navigationbars news offshoreoutsourcingcompany opacity opera optimization pnginie6 positioning problem scroll seo shopping studio swf swf. textcolor timecolor titletags url urlseparatedwords visual visualization web webdevelopment webform website windows7
About Us | Contact Us | Advertise | DaniWeb | Acceptable Use Policy | RSS Feed

©2003 - 2009 DaniWeb® LLC