PDA

View Full Version : ie + absolute positioning + resolutions


dbunder
09-20-2005, 12:36 AM
I've got a layout I've been working on that uses absolute positioning for a few elements. It looks pristine in firefox at all resolutions, but ie (natually) screws it up differently at each resolution.

My question is... is there any way I can get the positioning correct in ie without defining a seperate stylesheet for each and every screen width?

If it'd be helpful to look at the layout, the url is here (http://iterator.besmirched.org/test.html). Thanks so much for any help... and I'm sorry if this has already been covered on these forums. I wasn't able to find anything.

Oh, the current layout works perfectly in ie at 1600x1200, but explodes at all other resolutions.

dbunder
09-20-2005, 04:11 AM
update:

I got sick of it and just wrote a javascript that dynamically writes the css for the absolutely positioned elements. For ie, since I can't get the browser size before the document loads (it throws errors at me and bombs), i used ie's hacky expression() thing in css. Posting this code cause I hope someone can use it.

javascript for all browsers but ie:

var layoutWidth = 760;

var width = browserWidth();

if (document.getElementById)
{
var layoutLeftPosition = (width / 2) - (layoutWidth / 2);
document.write(' \
<style type="text/css"> \
table#mainTable \
{ \
position: absolute; \
top: 0px; \
left: ' + layoutLeftPosition + 'px; \
width: 760px; \
height: 100%; \
min-height: 100%; \
border: none; \
border-collapse: collapse; \
} \
div#logo \
{ \
position: relative; \
left: ' + (layoutLeftPosition + 15) + 'px; \
top: 16px; \
z-index: 0; \
} \
</style>');
}

function browserHeight ()
{
if (window.innerHeight != null)
return window.innerHeight;
return (null);
}

function browserWidth ()
{
if(window.innerWidth != null)
return window.innerWidth;
return (null);
}

ie stylesheet:
table#mainTable
{
position: absolute;
left: expression((document.body.clientWidth / 2) - (760 / 2));
top: 0px;
width: 760px;
height: 100%;
border: none;
border-collapse: collapse;
}

div#logo
{
position: absolute;
left: expression((document.body.clientWidth / 2) - (760 / 2) + 15);
top: 17px;
z-index: 0;
}


Only problem with this is if someone resizes their browser. You can add an onresize to the body tag to reload the document when it's resized.