css layout question

[Testin da Cable]

ewo lads and lasses. little question here: the pile of shite called "internet explorer" refuses to do my css layout of a certain DIV (placing of some links, with ickle banners and stuff) correctly, and I was wondering if anyone knew a workaround trick.

consider the following page: www.alphanor.org/index.shtml
the css is here: www.alphanor.org/alphanor02.css
the section in question is thus:

DIV.Links {
text-align : center; 
position : fixed; 
left : auto; 
width : 5em; 
bottom : 12%; 
right : 5%; 
}

I've managed to get IE to place the DIV on the proper side and position on the page by reading up about IE's quirks and modifying the css like so:
testpage: www.alphanor.org/test.shtml
testcss: www.alphanor.org/test.css
section in question like so:

DIV.Links {
  text-align: center;
  position: absolute;
  left: auto;
  width: 5em;
  bottom: 12%;
  right: 5%;
}

but with absolute postioning that DIV is suddenly "pinned" in place instead of "floating". You guessed it....I want it to float! Any takers?

Oh, yeah, I tested it with w3c's css validator and the css is good. I also tested it with opera7, mozilla v.1.3a, pheonix 0.5 and they all get it right (hello durzel). IE 5.5 and 6 both get it wrong. Help!

 

[Jonty]

Hi Testin da Cable

IE on Windows has long had a bug that affects some positioning properties, and despite the efforts of MS engineers, we're still waiting for a proper fix. I'll have a play about with the code above and see what I can do. Would you mind if it used a little JavaScript?

Kind Regards

 

[Testin da Cable]

woo thanks for the fast reply matey! well, I'd prefer for it to be squeaky pure html if at all possible (bitchy me there, I know) as java[script] isn't my long suit. however, if you happen to have a bit of code about that positions the link set where it should be I'd use it I'd even say thank you

 

[Jonty]

I understand. Unfortunately I don't think it will be possible to fix this problem with pure CSS. The closest you will come is your absolutely positioned fix. You could, of course, put the links in a frame, but that's a nasty way of doing things, and frames are now frowned upon by the W3C. I'll see if I can knock up some simple JavaScript, but unfortunately such code tends to be rather bulky.

Kind Regards

 

[Testin da Cable]

thanks for your help Jonty. heh frames? teh old! though tbh my html skillz stem from the time that tables were used for layout coolness heh

got me thinking though...can't you do pattern matching in css? then I could make a prefered and alternate stylesheet that switch if something like ^MSIE came along...

 

[Jonty]

hehe, don't worry, I wouldn't touch frames either (XHTML 1.1 all the way ). Pattern matching in CSS does exist, but not to the level of sophistication you suggest. Switching style sheets is possible, but the browser sniff is usually done via JavaScript or PHP etc. Just coding something, should be done soon

Kind Regards

 

[Testin da Cable]

lovely


*wait*


*stare at Jonty*



take your time mate, no rush (unless you're just about finished ) I really have to go to the gym (tdc == lazy bugger), back around fiveish. thanks for your trouble mate

 

[Embattle]

/Pokes TDC in the EYEs

Didn't your mother ever tell you not to stare

 

[Jonty]

lol, I don't think I've ever coded something so quickly without having a clue how to do it before I started Right, this is what you have to do . . .

Step One In your 'proper' webpage (not the work around one) scroll down to the line . . .

<div class="Links">

And replace with . . .

<div class="Links" id="Links">

This just makes it easier to target that specific DIV tag

Step Two Open a new, blank document and paste the following code . . .

function Actuate ()
{
  if (document.body.clientHeight)
  {
    TargetDiv = document.getElementById("Links");
    BodyHeight = document.body.clientHeight;
    TargetDiv.style.position = "absolute";
    TargetTop = Math.round(BodyHeight / 2) - TargetDiv.offsetHeight;
    if (TargetTop > 0) TargetDiv.style.top = TargetTop + "px";
  }
}

function Position ()
{
  if (document.body.clientHeight)
  {
    TargetScroll = document.getElementsByTagName('html')[0].scrollTop;
    if (TargetTop < TargetTop + TargetScroll && TargetScroll > BodyHeight) TargetDiv.style.top = TargetTop + TargetScroll + "px";
  }
}

window.onload = Actuate;
window.onscroll = Position;

Save that document as something you'll remember, say, "scripts.js" (it must end in '.js').

Step Three Add the following code somewhere in the <head></head> of the webpage . . .

<script src="scripts.js" type="text/javascript"></script>

Remember to change the src="" according to where the file is and what it's called.

Step Four Load the page in IE and scroll

- - -

Like I say, I'm quite surprised this works. The usual fixed scrolling systems you can get hold are very big (10s, even 100s of lines of code in length). This one, however, should work in IE5 and above (maybe even IE4 too).

How does it work? When the page loads the Actuate function is called. The code inside only works if an IE-specific variable can be found (hence it won't muck things up for Mozilla etc). If the variable is found, the function calculates the height of the page, divides that by two and subtracts the height of the links DIV (this effectively calculates how far from the top the DIV needs to be in order to be vertically central). It then absolutely positions the links DIV and sets it height accordingly.

Every time the user scrolls the Position function is called which adjusts the links DIV so it appears to be floating in the centre.

Simple (he says ). If there are any problems please do let me know.

Kind Regards

 

[Testin da Cable]

the positioning is lovely, Jonty, you rock.
slight prob though...it doesn't float and -strangely- the only browser that has a clue what's going on is opera. Mozilla gets fooled by the javascript and does what IE does with it.

</confused>


edit: and yeah, lazy me isn't going to the gym today

 

[Jonty]

Ah, I knew it was too good to be true I stuck some code in prior to giving it you to fix a bug, that's part of the problem. The other is that Mozilla recognises what I thought was an IE only variable. Don't worry, I'll fix it soon

Kind Regards

 

[Testin da Cable]

*cracks whip*



no worries matey, I'll http/put you a nice cuppa while you work

 

[Jonty]

No, Testing de Cable, no, not the minigun, I was just resting .... :mgwhore2:

Well, I've fixed it so that it works in IE6 (but probably not in IE5, is that a problem?). Mozilla now ignores it and uses CSS, as does Opera 7. A bug which allows a user to scroll to infinity has also been fixed.

For now, try this code in place of the above, but you need alter nothing else . . .

function Actuate ()
{
  TargetObject = document.getElementById("Links");
  BodyHeight = document.documentElement.clientHeight;
  TargetObject.style.position = "absolute";
  TargetTop = Math.round((BodyHeight - TargetObject.offsetHeight) / 2);
  if (TargetTop > 0) TargetObject.style.top = TargetTop + "px";
}

function Position ()
{
  TargetScroll = document.getElementsByTagName('html')[0].scrollTop;
  if (TargetTop <= TargetTop + TargetScroll && TargetScroll < BodyHeight + TargetObject.offsetHeight) TargetObject.style.top = TargetTop + TargetScroll + "px";
}

if (document.documentElement.clientHeight && navigator.userAgent.toLowerCase().indexOf('opera') == -1)
{
  window.onload = Actuate;
  window.onscroll = Position;
  window.onresize = Actuate;
}

Hope this helps. It's not great (no where near as static as CSS's float), but it's a start.

Kind Regards

 

[Testin da Cable]

indeed, indeed, it works now
quite chuffed with it really. let's hope that the evil ones get off their arses and fix IE heh.

thanks again for your trouble.

-TdC

 

[Jonty]

Well, like I say, it isn't great. But until IE7 (or 6.5) we'll just have to make do :wall:

Kind Regards

 

[Testin da Cable]

at workies we have a customized ie, gives its version as 5.5.45 (which may or may not be accurate). it has no idea what's going on with the layout no worries though, I'll fiddle together a browsersniff and set up an extra layout for people with older browsers.

 

[Jonty]

Hi again

Just thought I'd impart some information. Basically, the 'document.documentElement.clientHeight' is an IE6 only property. This allows Opera and Mozilla to ignore the script, but let's IE run it. IE5, however, will not recognise this variable and thus will not run the script either. Change this variable to something IE5 and above recognises, but everyone else ignores, and you'll be fine (perhaps 'window.attachEvent'). You could use a browser sniff, but this frowned upon in all design circles nowadays (especially now you can customise what the browser identifies itself as).

It should be noted IE5 might not be capable of some of the fancier CSS requirements even if you could get it to run the script.

Kind Regards

 

[Will]

Just to annoy you, the floating bit doesn't display quite right in Omniweb, since its only half-floating on the lower left, it seems to stick itself to the bottom of the page.

Works just fine in IE 5.2 for Mac, though it builds itself a little bizarrely...it is dialup though, on a proper connection, I'm sure I wouldn't get to notice.

 

[Testin da Cable]

bah, shurrup biznitches

you know, I'll just redirect all clients with ^MSIE to www.disney.com and let the rest through. IE users don't deserve to view my fine site

 

[Will]

Omniweb is based on Mozilla, rather than IE. Then again, how many Omniweb users do you know?

 

[Testin da Cable]

well...1 actually. I'd advise not using it anymore: it's obviously crap as it doesn't do css correctly

 

[Jonty]

Hello again

IE5 on the Mac is probably the best browser available anywhere since the rendering engine was created from scratch, and easily rivals Mozilla in terms of standards compliance (unlike IE on Windows, it has to be said). As for Omniweb, I'm tempted to say that there comes a time when you have to stop supporting browsers with an almost infinitesimal market share.

Anyway, you removed the test page (well, that is to say I can't seem to access it) but if you try the following code it should (no promises) function on IE5.

function Actuate ()
{
  TargetObject = document.getElementById("Links");
  BodyHeight = document.body.clientHeight;
  TargetObject.style.position = "absolute";
  TargetTop = Math.round((BodyHeight - TargetObject.offsetHeight) / 2);
  if (TargetTop > 0) TargetObject.style.top = TargetTop + "px";
}

function Position ()
{
  TargetScroll = document.getElementsByTagName('html')[0].scrollTop;
  if (TargetTop <= TargetTop + TargetScroll && TargetScroll < BodyHeight + TargetObject.offsetHeight) TargetObject.style.top = TargetTop + TargetScroll + "px";
}

if (window.attachEvent && navigator.userAgent.toLowerCase().indexOf('opera') == -1)
{
  window.onload = Actuate;
  window.onscroll = Position;
  window.onresize = Actuate;
}

What we have changed is simple. Firstly, we check that the browser supports the 'window.attachEvent' function. We don't actually use this function, but it's something Microsoft came up with and, as such, only IE browsers will recognise the function and allow the script to be run. Then, we simply change how we get the document's height to use the 'document.body.clientHeight' method. This is an older standard, and hence IE5 will support it.

Like I say, whether this will work, I do not know, but hopefully it'll be third time lucky.

Kind Regards

 

[Testin da Cable]

I'll put it in when I get home matey! Thanks again for your time

 

[Jonty]

My pleasure Be sure to let us all know how you get on.

Kind Regards

 

[Will]

The "random browsers" thing probably seemed a bit weird, but TdC did ask me to check for him.

And IE for the Mac is very nice indeed, Omniweb is just a little more OS X-like at times.

 

[Testin da Cable]

I did indeed....and I forgot to thank you.

 

[Will]

That's because you are evil.

 

[Testin da Cable]

pah!


I'm no feeling well though...perhaps that's it

 

[Testin da Cable]

works like a charm now jonty...you rock!!

 

[Jonty]

Originally posted by Testin da Cable
works like a charm now jonty...you rock!!

Could I have that in writing? hehe, failing that just send a nice big cheque in the post, teeheehee

:bazbeer:

Kind Regards