homepage Welcome to WebmasterWorld Guest from 54.204.182.118
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
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
Compmouse

10+ Year Member



 
Msg#: 415 posted 2:28 pm on May 22, 2003 (gmt 0)

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:
<html>
<head>
<title>Cross-Browser Div Moving</title>
<style>
body {
font-size: 8pt;
font-family: trebuchet ms;
}

#holder {
width: 150px;
height: 180px;
border: 1px #000000 solid;
overflow: hidden;
padding: 3px;
}
</style>
<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)) {
// MSIE 4 DOM
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;
}
}
// -->
</script>
</head>

<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.
</div>
</div>

</body>
</html>

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

 

BlobFisk

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



 
Msg#: 415 posted 2:47 pm on May 22, 2003 (gmt 0)

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;

HTH

Compmouse

10+ Year Member



 
Msg#: 415 posted 3:19 pm on May 22, 2003 (gmt 0)

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.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved