PDA

View Full Version : fixed position layout problem



sonofslim
Jul 6, 2004, 09:23 PM
i'm trying to build an image gallery, based on the following spec: one main column with a fluid width, containing a horizontally centered image. this image has a fixed position, so that when you scroll the page vertically, it is always visible.

on the right, a fixed-width column containing thumbnails in a vertical line. clicking a thumbnail swaps the main image to the corresponding painting.

the page validates, and works in Safari, IE/Mac, and Firefox Mac + Win. IE/Win, however, chews it up and i have had zero luck fixing it... any suggestions would be greatly appreciated. or any alternate methods of doing this that are more cross-browser compatible and/or elegant, for that matter.

here's the code; i've stripped out some alt attributes and other non-essentials for space. (well... non-essential for functionality, at least.)

<!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" xml:lang="en" lang="en">
<head>
<title>Oil Paintings</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
body {
margin: 0;
padding: 0;
padding-top: 6px;
}

div#main {
position: fixed;
width: 100%;
right: 140px;
top: 34px;
text-align: center;
}

img#mainImage {
position: relative;
left: 75px;
}

div#details {
position: absolute;
right: 2px;
top: 20px;
width: 130px;
}

img.detail {
display: block;
clear: right;
margin-top: 14px;
}
</style>
<script type="text/javascript">
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
</script>
</head>
<body onload="MM_preloadImages('painting_1.jpg','painting_2.jpg','painting_3.jpg','painting_4.jpg','painting_5.jpg ','painting_6.jpg','painting_7.jpg','painting_8.jpg','painting_9.jpg','painting_10.jpg')">
<div id="nav"><a href="index.html">&lt;- main</a></div>
<div id="details">
<a href="painting_1.html" onclick="MM_swapImage('mainImage','','img/painting_1.jpg',1); return false;"><img src="img/thumnbail_1.jpg" class="detail"/></a>
<a href="painting_2.html" onclick="MM_swapImage('mainImage','','img/painting_2.jpg',1); return false;"><img src="img/thumbnail_2.jpg" class="detail"/></a>
<a href="painting_3.html" onclick="MM_swapImage('mainImage','','img/painting_3.jpg',1); return false;"><img src="img/thumnbail_3.jpg" class="detail"/></a>
<a href="painting_4.html" onclick="MM_swapImage('mainImage','','img/painting_4.jpg',1); return false;"><img src="img/thumbnail_4.jpg" class="detail"/></a>
<a href="painting_5.html" onclick="MM_swapImage('mainImage','','img/painting_5.jpg',1); return false;"><img src="img/thumbnail_5.jpg" class="detail"/></a>
<a href="painting_6.html" onclick="MM_swapImage('mainImage','','img/painting_6.jpg',1); return false;"><img src="img/thumbnail_6.jpg" class="detail"/></a>
<a href="painting_7.html" onclick="MM_swapImage('mainImage','','img/painting_7.jpg',1); return false;"><img src="img/thumbnail_7.jpg" class="detail"/></a>
<a href="painting_8.html" onclick="MM_swapImage('mainImage','','img/painting_8.jpg',1); return false;"><img src="img/thumbnail_8.jpg" class="detail"/></a>
<a href="painting_9.html" onclick="MM_swapImage('mainImage','','img/painting_9.jpg',1); return false;"><img src="img/thumbnail_9.jpg" class="detail"/></a>
<a href="painting_10.html" onclick="MM_swapImage('mainImage','','img/painting_10.jpg',1); return false;"><img src="img/thumbnail_10.jpg" class="detail"/></a>
</div>
<div id="main"><img id="mainImage" src="select.gif" name="mainImage" alt="Select an image"/></div>
</body>
</html>


thanks in advance for your brainpower!


mnkeybsness
Jul 6, 2004, 11:35 PM
IE for Windows does not really support fixed positioning very well, if at all. You may be able to find some javascript that "corrects" it, but I recommend avoiding using fixed positioning all together.
kgarner
Jul 7, 2004, 12:22 PM
Yeah, IE/Win sucks at fixed positioning. You can either try to find a javascript to get around it or try that IE7 (http://dean.edwards.name/IE7/) fix. It is supposed to correct the fixed position problem along with a bunch of other problems.
sonofslim
Jul 7, 2004, 02:32 PM
i found this, which is a pretty freakin smart solution and doesn't require any server config or javascript:



fixed positioning for Internet Explorer/Windows (http://devnull.tagsoup.com/fixed/)
kgarner
Jul 7, 2004, 03:37 PM
did you get it to work? I tried it for a project of mine, but never could make it work. Probably because I was trying something just a little more complicated than a standard fixed element. I was trying to implement Eric Meyer's image pop-ups with fixed positioning, which worked great in Firefox, by the way.
sonofslim
Jul 7, 2004, 07:50 PM
it did work -- i'll post the solution once i clean it up a bit.
sonofslim
Jul 7, 2004, 09:43 PM
ok, here goes. the link i mentioned above recommends you link your stylesheets, which is sound advice, but in the interest of getting everything in one place for your reading pleasure, it's all one file.

of particular note is the conditional statements the original author uses to hide the IE-specific stylesheets; since every browser but IE reads these as comments, you don't have to rely on parsing bugs to serve browser-specific content.

two things remain that bug the &%$! out of me: first, because i am serving weird hacks to IE, IE/Mac picks that up and adds a horizontal scrollbar for some reason.

second, even though this page validates as XHTML 1.1 Strict (go me!) it will ONLY work with the doctype declared below -- HTML 4.0, and an incomplete doctype (without the URL) at that. why? hell if i know. i died a little inside when i realized that was what i had to do to get the page to work. but it does, so... nertz to you, IE/Win.

i've stripped this code down to the bare minimum so you can see how it's put together. the only CSS i added was to declare a size and border on the images, so you can see where they are. so go ahead, fire this up on a Mac and a Windows box and marvel at the fixed position:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Cross-browser fixed position</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<style type="text/css">
body {
margin: 0;
padding: 0;
padding-top: 6px;
font-family: "Courier New", Courier, mono;
}
img {
border: 1px solid gray;
}
div#main {
position: fixed;
width: 100%;
right: 130px;
top: 34px;
text-align: center;
}
img#mainImage {
position: relative;
left: 65px;
width: 450px;
height: 375px;
}
div#details {
position: absolute;
right: 2px;
top: 20px;
width: 130px;
}
img.detail {
display: block;
clear: right;
margin-top: 14px;
width: 116px;
height: 116px;
}
</style>
<!--[if IE]>
<style type="text/css">
body
{
height: 100%;
overflow: hidden;
font-size: 100%;
}
div#details
{
top: 0;
padding-top: 20px;
position: absolute;
width: 150px;
right: 0px;
height: 100%;
overflow: auto;
}
div#main
{
width: 100%;
position: absolute;
text-align: center;
right: 75px;
}
img#mainImage {
position: static;
}
</style>
<![endif]-->
</head>
<body>
<div id="details">
<img class="detail">
<img class="detail">
<img class="detail">
<img class="detail">
<img class="detail">
<img class="detail">
<img class="detail">
<img class="detail">
<img class="detail">
<img class="detail">
</div>
<div id="main">
<img id="mainImage">
</div>
</body>
</html>