flunn Posted September 7, 2007 Share Posted September 7, 2007 Greetings to all! I'm having problems getting a page on my educational website to appear as I want it to on IE6. These problems occurred when I redesigned the page so the content was centered and a "logo" appeared in a fixed position div in the blank space to the right. In an attempt to solve the problems, I've written a simple experimental page which contains just three "divs." The html code for this page, is valid, as is the css code. The address of the page is: http://flesl.net/Experimental/IE6/basic_centered.html On Firefox, IE7, and Safari, this code works as I want it to: the blue-bordered div which contains the word "hello" is centered in the orange-bordered div, close to the top. Before the page is scrolled, the top of green-bordered, vertical div is in almost the same position as the top of the blue-bordered div. When the page is scrolled, the orange-bordered and blue-bordered divs move "up" together while the green-bordered div remains stationary. In IE6, however, before the screen is scrolled, the blue-bordered div is vertically misplaced: its upper right-hand corner is adjacent to the lower left-hand corner of the green-bordered, vertical div. Also: when the page is scrolled, the green-bordered div moves along with everything else instead of remaining stationary. The code for the page is below. Any suggestions as to how I could change it to make it work properly in IE6 would be greatly appreciated: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <title> <?php if (defined ('TITLE')) { print TITLE; }else{ print 'flesl.net - ESL materials'; } ?></title> <script type="text/javascript" src="swfobject.js"></script> <style type="text/css"> body { text-align:center; } p { color: black; font-size: 14px; font-family:Arial; margin-top: 0px; margin-bottom: 22px; margin-left: 16px; margin-right: 16px; line-height: 150%; } #wrapper { margin: 0 auto; position: relative; top:4px; width: 824px; height: 1000px; border: 1px solid red; background: white; } #banner_box { margin: 0 auto; position: relative; top:4px; width: 624px; height: 63px; border: 1px solid blue; background: white; } #logo_box { position: fixed; margin-left: 730px; top: 18px; width: 75px; height: 150px; border: 1px solid green; } </style> </head> <body> <div id="wrapper"> <div id="logo_box"> </div> <!--logo--> <div id="banner_box"> <p>hello</p> </div> <!--banner--> </div> <!--wrapper--> </body> </html> Quote Link to comment Share on other sites More sharing options...
calabiyau Posted September 7, 2007 Share Posted September 7, 2007 IE 6 only allows position: fixed on the body element, unfortunately. Quote Link to comment Share on other sites More sharing options...
flunn Posted September 7, 2007 Author Share Posted September 7, 2007 Thank you, Calabiyau, for your reply and for an important piece of information. But now I have another question: If I "fix" the body element, won't that have the effect of "fixing" all the divs? (It seems that that is what should happen since all the divs are presumably nested inside the "body.") Quote Link to comment Share on other sites More sharing options...
calabiyau Posted September 8, 2007 Share Posted September 8, 2007 Um...I only tried to work with position fixed one time on one project but from the research I did, IE 6 you can fix the background-image on the body element only. Sorry if I confused you. As far as applying position:fixed to a div or any other element on the page, I don't think it will work at all. I think IE 6 interprets it as position: absolute. I'm not sure if there is any workaround or hack that can do what you want, but you can try to make it so that it looks right still in IE 6 but still has the correct behavior in other browsers. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.