A webpage that I am pretty fed up with has some issues with scrollable dynamic content in Internet Explorer for Mac. IE for windows displays the divs just fine with some relative positioning. Firefox/Mozilla and all other high standard compliant browsers also display the scrollable content/layout just fine.
The problem starts on page load. The style sheet isnt called (I dont think) and the layer contained within the div (the scrollable content) displays initially (albeit in the wrong location) and when the page is fully loaded, disapears into the abyss.
The ie_mac.css is not complete, but it is hard to work on it, when you cant SEE it.
If the page isnt displaying properly in those browsers or lags...I am ftp-ing over more content. Probably will break the CSS...agenttwitch,
I just tested your website in all my Mac browsers (IE, Safari, Opera, Netscape). Hate to tell ya, but NONE of them display the text properly. You better just leave out any dynamic content because you struck out on all 4 Mac of my Mac browsers.Master00,
That is indeed bad news! I am bewildered as to the strike outs you witnessed. I am developing this page on my mac and have tested it on Safari, FF, and Mozilla with no issues.
Would you mind sending me some system information and/or a screen shot?
email (<!-- e --><a href="mailto:[email protected]">[email protected]</a><!-- e -->)ooooLuck for you, I have a 23" Monitor (1920x1200), so I can easily screenshot 3 browsers at once (otherwise I probably wouldn't have done it). This is what they look like as soon as they are opened. In IE the text is nowhere to be found.
I wouldn't even mess around with the dynamic content because the design looks pretty good on it's own, and since it doesn't work on any of my Mac browsers, it really makes waste of a nice design. The script seems to have minimum capatibility so it is not something I would not invest much time in. Good luck either way!
HERE is your screenshot (<!-- m --><a class="postlink" href="http://www.tillc.com/2.pdf">http://www.tillc.com/2.pdf</a><!-- m -->). Please let me know when you have viewed it so it can be delted.
- Far left browser = Safari
- Top right browser = IE
- Bottom right browser = OperaSorry about the multiple posts. Try this JavaScript instead. It is more stable and compatible.
THIS IS THE NECESSARY JAVASCRIPT
//browsercheck
function checkBrowser(){
this.ver=navigator.appVersion
this.dom=document.getElementById?1:0
this.ie5=(this.ver.indexOf("MSIE 5")>-1 && this.dom)?1:0;
this.ie4=(document.all && !this.dom)?1:0;
this.ns5=(this.dom && parseInt(this.ver) >= 5) ?1:0;
this.ns4=(document.layers && !this.dom)?1:0;
this.bw=(this.ie5 || this.ie4 || this.ns4 || this.ns5)
return this
}
bw=new checkBrowser()
//set scroll speed:
var speed=50
//sets variables to keep track of what's happening
var dloop, uloop, timer;
// object constructor
function makeObj(obj,nest){
nest=(!nest) ? '':'document.'+nest+'.'
this.el=bw.dom?document.getElementById(obj):bw.ie4?document.all[obj]:bw.ns4?eval(nest+'document.'+obj):0;
this.css=bw.dom?document.getElementById(obj).style:bw.ie4?document.all[obj].style:bw.ns4?eval(nest+'document.'+obj):0;
this.scrollHeight=bw.ns4?this.css.document.height:this.el.offsetHeight
this.clipHeight=bw.ns4?this.css.clip.height:this.el.offsetHeight
this.up=goUp;this.down=goDown;
this.moveIt=moveIt; this.x; this.y;
this.obj = obj + "Object"
eval(this.obj + "=this")
return this
}
function moveIt(x,y){
this.x=x;this.y=y
this.css.left=this.x
this.css.top=this.y
}
//makes the object go up
function goDown(move){
if(this.y>-this.scrollHeight+oCont.clipHeight){
this.moveIt(0,this.y-move)
if(dloop) setTimeout(this.obj+".down("+move+")",speed)
}
}
//makes the object go down
function goUp(move){
if(this.y<0){
this.moveIt(0,this.y-move)
if(uloop) setTimeout(this.obj+".up("+move+")",speed)
}
}
//calls the scrolling functions. Also checks whether the page is loaded or not.
function scroll(speed){
if(loaded){
if(speed>0) {uloop=false;dloop=true;oScroll.down(speed);}
else {dloop=false;uloop=true;oScroll.up(speed);}
}
}
//stops the scrolling (called on mouseout)
function noScroll(){
if (dloop) dloop=false;
if (uloop) uloop=false;
if(timer) clearTimeout(timer);
}
//makes the object
var loaded;
function scrollInit(){
oCont=new makeObj('divCont')
oScroll=new makeObj('divText','divCont')
oScroll.moveIt(0,0)
oCont.css.visibility='visible'
loaded=true;
}
//call the init on page load
onload=scrollInit;
THIS IS THE NECESSARY CSS
#divCont {
position:absolute;
width:455;
height:250;
overflow:hidden;
top:100px;
left:200px;
clip:rect(0,455,250,0);
visibility:hidden;
z-index:12;
}
#divUp {
position:absolute;
width:15;
height:15;
left:748px;
top:92px;
z-index:12;
}
#divScrollBar {
position:absolute;
width:15;
height:102;
left:510;
top:285;
z-index:12;
}
#divDown {
position:absolute;
width:15;
height:15;
left:748px;
top:294px;
z-index:12;
}
#divText {
position:absolute;
top:0;
left:0;
font-size: 12px;
font-family: verdana, sans-serif;
color: #cccccc;
line-height: 12px;
}
THIS IS THE NECESSARY HTML
<div id="divUp">
<a href=http://www.webdeveloper.com/forum/archive/index.php/"#" onmouseover="scroll(-5); toggle(up,15);" onmouseout="noScroll(); toggle(up,14);">
<img src=http://www.webdeveloper.com/forum/archive/index.php/"http://www.integreat-dev.com/img/up2.gif" width="15" height="15" alt="" name="up" border="0"></a>
</div>
<div id="divDown">
<a href=http://www.webdeveloper.com/forum/archive/index.php/"#" onmouseover="scroll(5); toggle(down,17);" onmouseout="noScroll(); toggle(down,16);">
<img src=http://www.webdeveloper.com/forum/archive/index.php/"http://www.integreat-dev.com/img/down2.gif" width="15" height="15" alt="" name="down" border="0"></a>
</div>
<div id="divCont">
<div id="divText">
<b>Purchase Application Process</b>
<p>
<p>The Hub of the Donor Relations Profession </p>
<p>ADRP is an international organization, with members from all sectors of the
non-profit world: education, health care, arts, community organizations. This
website is an on-line resource to help you get instant answers to some of the
most commonly asked questions in our field, read our newsletter,and find other
members. In addition, ADRP will offer an annual conference and regional workshops. </p>
<p>We are a new organization that wants to meet your professional needs! So let
us know what you need to make you more effective in your job responsibilities — or
even better, get involved and help us. Our goal is to provide you with the
same level of service you give to your donors! <br>
</p>
<p>2005 International Conference </p>
<p>Laissez Les Bon Temps Rouler! </p>
<p>That's right-- Let the Good Times Roll! December 7-9 in New Orleans. If you
haven't done so already, mark your calendars now for the 2005 International
Conference. </p>
<p>Planning is underway, and we want the 2005 conference to be the most comprehensive
ever! We need your input to develop sessions that address current issues and
concerns you face every day. </p>
<p>More information is available on the International Conference area. <br>
</p>
<p>Charter Memberships lapse on June 30th. </p>
<p>Renew your membership now to continue to receive the latest information in
donor relations and to support our profession. To renew now, use our renewal
form. <br>
</p>
<p>Exciting News! StewList is coming, StewList is coming! </p>
<p>Yes, just as our Donor Relations profession is growing and improving, so is
our listserve. The stewardship listserve is morphing into the ADRP StewList.
Same great professional community and collegial exchange of best ideas and
practices. A newfound sense of security as StewList becomes an official part
of the ADRP organization and gains a permanent home and host. StewList will
remain a free resource to anyone in the Donor Relations/Stewardship profession.
Plus, ADRP members will gain access to a brand new feature—the StewList
Archives. Stay tuned for details! Toni Robinson , StewList Owner, University
of Hartford. <br></p>
</p>
</div>
</div>OK, Thanks...Got the screen shot, go ahead and remove it.
I am going to take a very close look at the CSS and see if it works out for me.
I am still confused as to why the pages arent lining up for you when they work for me using OS X.3 and Safari/Mozilla/FF.
Thanks!
I'm sure if we could see the HTML and CSS that we could come up with a non-javascript solution to your problem. The biggest issue with javascript is that it can be disabled by the user. agenttwitch, it sounds like you are trying to create a CSS "frames" layout?
The problem starts on page load. The style sheet isnt called (I dont think) and the layer contained within the div (the scrollable content) displays initially (albeit in the wrong location) and when the page is fully loaded, disapears into the abyss.
The ie_mac.css is not complete, but it is hard to work on it, when you cant SEE it.
If the page isnt displaying properly in those browsers or lags...I am ftp-ing over more content. Probably will break the CSS...agenttwitch,I just tested your website in all my Mac browsers (IE, Safari, Opera, Netscape). Hate to tell ya, but NONE of them display the text properly. You better just leave out any dynamic content because you struck out on all 4 Mac of my Mac browsers.Master00,
That is indeed bad news! I am bewildered as to the strike outs you witnessed. I am developing this page on my mac and have tested it on Safari, FF, and Mozilla with no issues.
Would you mind sending me some system information and/or a screen shot?
email (<!-- e --><a href="mailto:[email protected]">[email protected]</a><!-- e -->)ooooLuck for you, I have a 23" Monitor (1920x1200), so I can easily screenshot 3 browsers at once (otherwise I probably wouldn't have done it). This is what they look like as soon as they are opened. In IE the text is nowhere to be found.
I wouldn't even mess around with the dynamic content because the design looks pretty good on it's own, and since it doesn't work on any of my Mac browsers, it really makes waste of a nice design. The script seems to have minimum capatibility so it is not something I would not invest much time in. Good luck either way!
HERE is your screenshot (<!-- m --><a class="postlink" href="http://www.tillc.com/2.pdf">http://www.tillc.com/2.pdf</a><!-- m -->). Please let me know when you have viewed it so it can be delted.
- Far left browser = Safari
- Top right browser = IE
- Bottom right browser = OperaSorry about the multiple posts. Try this JavaScript instead. It is more stable and compatible.
THIS IS THE NECESSARY JAVASCRIPT
//browsercheck
function checkBrowser(){
this.ver=navigator.appVersion
this.dom=document.getElementById?1:0
this.ie5=(this.ver.indexOf("MSIE 5")>-1 && this.dom)?1:0;
this.ie4=(document.all && !this.dom)?1:0;
this.ns5=(this.dom && parseInt(this.ver) >= 5) ?1:0;
this.ns4=(document.layers && !this.dom)?1:0;
this.bw=(this.ie5 || this.ie4 || this.ns4 || this.ns5)
return this
}
bw=new checkBrowser()
//set scroll speed:
var speed=50
//sets variables to keep track of what's happening
var dloop, uloop, timer;
// object constructor
function makeObj(obj,nest){
nest=(!nest) ? '':'document.'+nest+'.'
this.el=bw.dom?document.getElementById(obj):bw.ie4?document.all[obj]:bw.ns4?eval(nest+'document.'+obj):0;
this.css=bw.dom?document.getElementById(obj).style:bw.ie4?document.all[obj].style:bw.ns4?eval(nest+'document.'+obj):0;
this.scrollHeight=bw.ns4?this.css.document.height:this.el.offsetHeight
this.clipHeight=bw.ns4?this.css.clip.height:this.el.offsetHeight
this.up=goUp;this.down=goDown;
this.moveIt=moveIt; this.x; this.y;
this.obj = obj + "Object"
eval(this.obj + "=this")
return this
}
function moveIt(x,y){
this.x=x;this.y=y
this.css.left=this.x
this.css.top=this.y
}
//makes the object go up
function goDown(move){
if(this.y>-this.scrollHeight+oCont.clipHeight){
this.moveIt(0,this.y-move)
if(dloop) setTimeout(this.obj+".down("+move+")",speed)
}
}
//makes the object go down
function goUp(move){
if(this.y<0){
this.moveIt(0,this.y-move)
if(uloop) setTimeout(this.obj+".up("+move+")",speed)
}
}
//calls the scrolling functions. Also checks whether the page is loaded or not.
function scroll(speed){
if(loaded){
if(speed>0) {uloop=false;dloop=true;oScroll.down(speed);}
else {dloop=false;uloop=true;oScroll.up(speed);}
}
}
//stops the scrolling (called on mouseout)
function noScroll(){
if (dloop) dloop=false;
if (uloop) uloop=false;
if(timer) clearTimeout(timer);
}
//makes the object
var loaded;
function scrollInit(){
oCont=new makeObj('divCont')
oScroll=new makeObj('divText','divCont')
oScroll.moveIt(0,0)
oCont.css.visibility='visible'
loaded=true;
}
//call the init on page load
onload=scrollInit;
THIS IS THE NECESSARY CSS
#divCont {
position:absolute;
width:455;
height:250;
overflow:hidden;
top:100px;
left:200px;
clip:rect(0,455,250,0);
visibility:hidden;
z-index:12;
}
#divUp {
position:absolute;
width:15;
height:15;
left:748px;
top:92px;
z-index:12;
}
#divScrollBar {
position:absolute;
width:15;
height:102;
left:510;
top:285;
z-index:12;
}
#divDown {
position:absolute;
width:15;
height:15;
left:748px;
top:294px;
z-index:12;
}
#divText {
position:absolute;
top:0;
left:0;
font-size: 12px;
font-family: verdana, sans-serif;
color: #cccccc;
line-height: 12px;
}
THIS IS THE NECESSARY HTML
<div id="divUp">
<a href=http://www.webdeveloper.com/forum/archive/index.php/"#" onmouseover="scroll(-5); toggle(up,15);" onmouseout="noScroll(); toggle(up,14);">
<img src=http://www.webdeveloper.com/forum/archive/index.php/"http://www.integreat-dev.com/img/up2.gif" width="15" height="15" alt="" name="up" border="0"></a>
</div>
<div id="divDown">
<a href=http://www.webdeveloper.com/forum/archive/index.php/"#" onmouseover="scroll(5); toggle(down,17);" onmouseout="noScroll(); toggle(down,16);">
<img src=http://www.webdeveloper.com/forum/archive/index.php/"http://www.integreat-dev.com/img/down2.gif" width="15" height="15" alt="" name="down" border="0"></a>
</div>
<div id="divCont">
<div id="divText">
<b>Purchase Application Process</b>
<p>
<p>The Hub of the Donor Relations Profession </p>
<p>ADRP is an international organization, with members from all sectors of the
non-profit world: education, health care, arts, community organizations. This
website is an on-line resource to help you get instant answers to some of the
most commonly asked questions in our field, read our newsletter,and find other
members. In addition, ADRP will offer an annual conference and regional workshops. </p>
<p>We are a new organization that wants to meet your professional needs! So let
us know what you need to make you more effective in your job responsibilities — or
even better, get involved and help us. Our goal is to provide you with the
same level of service you give to your donors! <br>
</p>
<p>2005 International Conference </p>
<p>Laissez Les Bon Temps Rouler! </p>
<p>That's right-- Let the Good Times Roll! December 7-9 in New Orleans. If you
haven't done so already, mark your calendars now for the 2005 International
Conference. </p>
<p>Planning is underway, and we want the 2005 conference to be the most comprehensive
ever! We need your input to develop sessions that address current issues and
concerns you face every day. </p>
<p>More information is available on the International Conference area. <br>
</p>
<p>Charter Memberships lapse on June 30th. </p>
<p>Renew your membership now to continue to receive the latest information in
donor relations and to support our profession. To renew now, use our renewal
form. <br>
</p>
<p>Exciting News! StewList is coming, StewList is coming! </p>
<p>Yes, just as our Donor Relations profession is growing and improving, so is
our listserve. The stewardship listserve is morphing into the ADRP StewList.
Same great professional community and collegial exchange of best ideas and
practices. A newfound sense of security as StewList becomes an official part
of the ADRP organization and gains a permanent home and host. StewList will
remain a free resource to anyone in the Donor Relations/Stewardship profession.
Plus, ADRP members will gain access to a brand new feature—the StewList
Archives. Stay tuned for details! Toni Robinson , StewList Owner, University
of Hartford. <br></p>
</p>
</div>
</div>OK, Thanks...Got the screen shot, go ahead and remove it.
I am going to take a very close look at the CSS and see if it works out for me.
I am still confused as to why the pages arent lining up for you when they work for me using OS X.3 and Safari/Mozilla/FF.
Thanks!
I'm sure if we could see the HTML and CSS that we could come up with a non-javascript solution to your problem. The biggest issue with javascript is that it can be disabled by the user. agenttwitch, it sounds like you are trying to create a CSS "frames" layout?