Welcome to WebmasterWorld Guest from

Forum Moderators: open

Message Too Old, No Replies

JS on IE for Mac not playing nicely!

I'm trying to animate some text in JS it works everywhere but on IE for Mac



2:28 pm on May 22, 2003 (gmt 0)

10+ Year Member

The problem seems to be that in the Mac IE browser, it doesn't like relative positioning. This works if the positioning is absolute, but that won't work for my purposes.

My Code is as follows:
<title>Cross-Browser Div Moving</title>
body {
font-size: 8pt;
font-family: trebuchet ms;

#holder {
width: 150px;
height: 180px;
border: 1px #000000 solid;
overflow: hidden;
padding: 3px;
<script type="text/javascript">
function scrollNews() {
var the_style = findDOMStyle("newsScroller");
var the_top = parseInt(the_style.top);

if (the_style.top == 0 the_style.top == "0px") {
window.alert("the top has been reached");
} else {
if (document.layers) {
the_style.top = the_top--;
} else {
the_style.top = the_top - 1 + "px";
setTimeout("scrollNews()", 10);

function findDOMStyle(objectID) {
// cross-browser function to get an object's style object given its
if(document.getElementById && document.getElementById(objectID)) {
// W3C DOM
return document.getElementById(objectID).style;
} else if (document.all && document.all(objectId)) {
return document.all(objectID).style;
} else if (document.layers && document.layers[objectID]) {
// NN 4 DOM.. note: this won't find nested layers
return document.layers[objectID];
} else {
return false;
// -->

<body onLoad="scrollNews(); return false;">
<h1>Moving the Div</h1>
<div id="holder">
<div id="newsScroller" style="position: relative; top: 180px;">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.


[edited by: Compmouse at 3:23 pm (utc) on May 22, 2003]


2:47 pm on May 22, 2003 (gmt 0)

WebmasterWorld Senior Member blobfisk is a WebmasterWorld Top Contributor of All Time 10+ Year Member

Welcome to WebmasterWorld, Compmouse!

Well, first and foremost, IE5.x on the Mac is one of the most bug riddled [macedition.com] browsers there is around!

A couple of things that strike me about you code:

<div id="newsScroller" style="position: relative; top: 180px;">

If the div is relative, should it have a top: value? I wonder if this could be causing trouble?

font-size: 8pt;
font-family: trebuchet ms;

Points are a print unit and should be avoided for online sizes - px, em, % are a few alternatives! You should specify another font in case the user doesn't have Trebuchet, eg:

font-family: Trebuchet MS, Verdana, sans serif;



3:19 pm on May 22, 2003 (gmt 0)

10+ Year Member

Ok. The top value is there because if you take it out the code doesn't work at all, in any browser. So yes it's necessary. What's causing the trouble (as stated in my original post) is that it doesn't seem to like relative positioning period. It only seems to work if the layer is absolutely positioned.

Featured Threads

Hot Threads This Week

Hot Threads This Month