Posted by Jonathan N. Little on 04/07/07 00:57

Jonathan N. Little wrote:
> dorayme wrote:
>
>> Nah, no good I am afraid. Yes, it is trying, but the effect is so
>> marginal as to count for a fail on this particular size thumbnail. (I
>> will leave you to ponder defences for WinIE, I feel more merciless
>> towards it).
>
> Well this shows why IE is whacked:
>
> http://www.littleworksstudio.com/temp/usenet/alt.html.20070406.png
> alt.html.20070406.png (PNG Image, 719x442 pixels)
>
> IE's value for bodyElement's offsetWidth *includes* the window's
> scrollbar, part of the browser chrome! Whereas other browsers, here
> Seamonkey, do not. So where 6 thumbs should fit IE can on fit 5, hence
> the error.

Okay in IE the clientWidth is the BODY - the scrollBar wide so the value
to calculate from is now constant with other browsers! So revised
function

function centerMe(){
var clientWidth=document.documentElement.clientWidth;
//thumb + border + margin
var thumb=100 + 2 + 4;
//number of thumbails across that will fit
var count=parseInt(clientWidth/thumb);
//width for wrapper
var width=count * thumb;
//left margin calculated
var left=parseInt((clientWidth-width)/2);
//grab the wrapper DIV
var wrap=document.getElementById('wrapper');
//style it
wrap.style.width=width + "px";
wrap.style.marginLeft=left + "px";
}

Great! But guess what? Even though there is room IE always puts 1 less
thumb across! Bugger! IE does not do floats...

Now if you do browser sniffing and insure you got IE and not Opera
(which can to this all correctly I must add) you could add 1/2 the thumb
width allotment to balance the margin...

function centerMe(){
var clientWidth=document.documentElement.clientWidth;
//thumb + border + margin
var thumb=100 + 2 + 4;
//number of thumbails across that will fit
var count=parseInt(clientWidth/thumb);
//width for wrapper
var width=count * thumb;
//left margin calculated
var left=parseInt((clientWidth-width)/2);

//Use so sort of browser sniffer to IS a IE only!
if( IsIE ) left+=(thumb/2); //add 1/2 thumb for IE only

//grab the wrapper DIV
var wrap=document.getElementById('wrapper');
//style it
wrap.style.width=width + "px";
wrap.style.marginLeft=left + "px";
}

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com

[Back to original message]