Problem with "position:fixed;" on IE7

Question

ada_a 0 Newbie Poster

17 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="">K02 Arellano</a> 
  ~ <a href="">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="">K08 Del Castillo</a> 

  ~ <a href="">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="">K14 Luna</a> 
  ~ <a href="http://monkeydumpling.blogspot.com/">K15 Magsalin</a> 
  ~ <a href="http://coolblognumeroadrienne14.blogspot.com/">K16 Mendoza</a> 
  ~ <a href="">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="">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="">Cesium</a>
  ~ <a href="http://lithium2010.wordpress.com/">Lithium</a>
  ~ <a href="http://magnesium2010.wordpress.com/">Magnesium</a>
  ~ <a href="">*Potassium*</a>
  ~ <a href="http://magicalrubidium.wordpress.com/">Rubidium</a>
  ~ <a href="">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="">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="" 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="" 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=""><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="">Return to Main Page</a>
</ArchivePage>
<ItemPage>
<br><a class="link2" href="">Return to Main Page</a>
</ItemPage>
</div>


 

</html>

html-css user-interface web-design

4 Contributors
4 Replies
461 Views
1 Year Discussion Span
Latest Post 16 Years Ago Latest Post by coolkido

Dani AI

Generated 9 Months Ago

Quick diagnosis: the layout problems are caused by invalid CSS combined with IE7 running in quirks mode. As noted by and confirmed by , position:fixed only behaves correctly in IE7 when the page is rendered in standards mode (so adding a proper standards DOCTYPE at the top is necessary). That alone won’t help if stylesheet declarations are syntactically wrong — the sample contains many unitless lengths and malformed values that some browsers forgive and others ignore.

Immediate, prioritized fixes (apply in order)

Ensure a standards-mode DOCTYPE is the very first line of the template so IE7 uses standards rendering.
Add explicit units to every non‑zero length (px, %, em, etc.). Left/top/width/height/font-size values must include units.
Use valid color syntax (hex colors need the #).
Replace invalid declarations such as font-weight: none with valid values like font-weight: normal.
Run the page through a validator or create a minimal test page with only the fixed elements to confirm the problem is resolved.

Corrected example for the two sidebar rules (units and hashes added)

.sidebar {
  position: fixed;
  left: 555px;
  top: 11px;
  z-index: 8;
  height: auto;
}

.sidebarcontent {
  position: fixed;
  width: 220px;
  height: 544px;
  left: 570px;
  top: 35px;
  overflow: auto;
  text-align: center;
  z-index: 10;
}

Troubleshooting notes: use the browser’s developer tools to inspect computed styles and check rendering mode (document.compatMode should be CSS1Compat). If the blog is served from Blogger, confirm the DOCTYPE sits before any comments or injected code in the template. The page’s invalid declarations are the likeliest reason IE7 ignores the fixed positioning, so fixing syntax will make the DOCTYPE change effective.

All 4 Replies

cpeeyush1 0 Light Poster

17 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

Dani AI

Recommended Answers Collapse Answers

All 4 Replies

Recommended Answers