IE coding woes...
I'm on a journey to make this site work on all browsers, it's a rough but you guys get the idea... It's basically a ton of fixed divs , but they keep stacking on top of each other on IE. Help!!
Dont worry about the javascript, it doesnt affect the layout.
HTML Code:<html> <head> <title>pokipai</title> <style> body { margin:0; padding:0; background: #bfebf3 url('images/bg.gif') repeat-x; font:11px "Lucida Grande", helvetica,arial,tahoma,verdana; outline:none; } #container { width:100%; height:100%; } #title { position:fixed; top:5; z-index:7; } #main { position:fixed; bottom:0px; z-index:6; } #falling { position:fixed; top:10px; left:420px; z-index:3; } #navi { position:fixed; bottom:305px; right:140px; z-index:7; } #sidetop { position:fixed; top:100px; left:1050px; z-index:2; } #main_middle { position:fixed; bottom:0px; left:784px; z-index:6; } #main_right { position:fixed; bottom:0; left:1138px; z-index:6; } #clouds { position:fixed; bottom:300px; left:754px; z-index:1; } #products { position:fixed; bottom:20px; left:100px; z-index:7; } a:link, a:visited { color:; text-decoration:none; } a:hover { color:; } img { border:0; } </style> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta name="robots" content="index, follow" /> <!-- CSS --> <link rel="stylesheet" type="text/css" href="css/default.css" /> <link rel="stylesheet" type="text/css" href="css/lightwindow.css" /> <link rel="shortcut icon" href="images/favicon.ico"> <!-- JavaScript --> <script type="text/javascript" src="javascript/prototype.js"></script> <script type="text/javascript" src="javascript/effects.js"></script> <script type="text/javascript" src="javascript/lightwindow.js"></script> </head> <body> <div id="containter"> <div id="title"><img src="images/title.png" width="85%" /><br /></div> <div id="main"><img src="images/main.png" width="" /></div> <div id="main_middle"><img src="images/main2.png" width="" /></div> <div id="main_right"><img src="images/sidebottom.png" /></div> <div id="falling"><img src="images/falling.png" /></div> <div id="navi"> <img src="images/navi.png" usemap="#navi" /> <map name="navi"> <area shape="rect" coords="35,14,124,25" href="#about" class="lightwindow page-options"> <area shape="rect" coords="35,54,124,25" href="#contact" class="lightwindow page-options"> <area shape="rect" coords="35,74,124,25" href="#policy" class="lightwindow page-options"> </map> </div> <div id="sidetop"><img src="images/sidetop.png" /></div> <div id="clouds"><img src="images/clouds.png" /></div> <div id="products"> <a href="#inline-sample" class="lightwindow page-options"><img src="images/holder.gif" /></a> </div> <div id="inline-sample" style="posistion:fixed;"> <div > <p>Oh yeah, this content was pulled from within the page!</p> <p>In order to get the LightWindow to fit the content, you have to define the height and width of a div in the inline div or send values for lightwindow_width and lightwindow_height in the url string. Personally I prefer the inner div method, this way you can gracefully degrade the link as I did into an anchor if javascript isn't available.</p> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum hendrerit nibh at libero. Donec lectus enim, condimentum ac, scelerisque non, malesuada id, diam. Sed porta magna. Ut luctus bibendum nulla. Ut sit amet tellus. Aliquam ut justo. Duis sapien magna, sagittis et, molestie at, interdum a, mi. Nunc nisi arcu, tincidunt quis, adipiscing ac, faucibus convallis, ligula. Aenean lacinia laoreet nisi. Integer dictum. Maecenas porttitor dictum felis. </p> </div> </div> <div id="about" > <div > <p>about</p> </div> </div> <div id="contact" > <div > <p>contact</p> </div> </div> <div id="policy" > <div > <p>policy</p> </div> </div> </div> </body> </html>
CSS Codes
Reply With Quote
is this not an css problem?
Bookmarks