Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10
  1. #1
    Senior Coder
    Join Date
    Jul 2003
    Location
    My pimped-out igloo in Canadia
    Posts
    1,966
    Thanks
    36
    Thanked 0 Times in 0 Posts

    div wont center & goes wonky in FF

    hey,

    two odd little errors i'm getting.

    1) if you go here and click "The Investigator", the image on the bottom (the blonde) wont center in IE, and if FF it centers but her name (above it) is like at the top of that section (name = Liane Kandler).

    2) when "The Investigator" is clicked... the page focus scrolls down to the top of the first picture... how can i have it not do that (like on all the other links)

    the code for question #1 is (excuse the ugly CSS... i left in everything i tried, feel free to trim it)
    Code:
    ...
    #sara {
    clear: both;
    height: 350px;
    width: 275px;
    position: relative;
    float: left;
    margin-right: 25px;
    margin-top: 50px;
    text-align: center;
    }
    #MP {
    display: inline;
    height: 350px;
    width: 275px;
    position: relative;
    float: right;
    margin-right: 25px;
    margin-top: 50px;
    text-align: center;
    }
    #liane {
    clear: left;
    position: relative;
    display: block;
    height: 350px;
    width: 275px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    margin-top: 25px
    }
    
    ...
    
    		<div id="Link3">
    			<img src="images/David_Forman.jpg" id="formanPic">
    			<p>This study is directed by Dr. David R. Forman, an Associate Professor in the department of Psychology at Concordia University and a member of the Center for Research on Human Development. Dr. Forman received his PhD in psychology at the University of Iowa where he studied collaboration in young children and the mother-child relationship.</p>
    			<p>Dr. Forman works with a team of psychology students who study early-childhood development and have a great deal of experience working with young children.</p>
    			<p></p>
    			<div id="sara">
    				Sarah Vannier: Research Manager
    				<br>
    				<br>
    				<img src="images/S_Vannier.jpg">
    			</div>
    			<div id="MP">
    				Marie-Pierre Gosselin: Masters Student
    				<br>
    				<br>
    				<img src="images/MP_Gosselin.jpg">
    			</div>
    			<p></p>
    			<div id="liane">
    				Liane Kandler: Research Assistant
    				<br>
    				<br>
    				<img src="images/L_Kandler.jpg">
    				<br>
    			</div>
    		</div>
    and the entire page code is
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <title>The Concordia Collaboration Lab</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    
    <script language="JavaScript" type="text/javascript" src="js/borderFade.js"></script>
    <script type="text/javascript"> 
      var arrPrevDiv = [null, null];
    
      function toggle(id, linkGroup) {
    
    	if (arrPrevDiv[linkGroup] != null) {
    		arrPrevDiv[linkGroup].style.display = "none"; 
    	}         
    
    	var s = document.getElementById(id);
    				
    	if (id != 'intro') {
    		document.getElementById("intro").style.display = "none"	
    		}
    		
    	s.style.display = (s.style.display=="") ? "block" : (s.style.display=="none") ? "block" : "none"; 
    	arrPrevDiv[linkGroup] = s; 
    	// window.location.href='#'+ id;
    	window.status=''
    
    /* if (linkGroup==0 && arrPrevDiv[1] && arrPrevDiv[1].id=="stopShow") { 
     		alert("Please stop the slideshow before continuing.");
    	 	return false; 
    	} 
    	
    	window.onload = function(){
    	arrPrevDiv[1] = document.getElementById("startShow");
    	}
    */
    	}  
    
    </script>
    
    <script type="text/javascript">
    function ball(s){ 
            while(s.nodeType!=1){ 
                s=s.previousSibling; 
            } 
            var balls=document.getElementById('links').getElementsByTagName('img'); 
            var i=0, b 
            while(b=balls[i++]){ 
                if(b.id!='noGreen'){ 
                    b.className=b==s?'vis':'hid'; 
                    b.style.float = 'left'; 
    				b.style.display = 'inline';
    				b.style.position = 'absolute';
                }
            } 
        }  
    
    </script>
    
    <style type="text/css">
    * {
    padding: 0;
    margin: 0;
    }
    html, body {
    height: 100%;
    text-align: center;
    font-family: "verdana", trebuchet ms, arial, sans-serif;
    font-size: 11px;
    background-color: white;
    }
    #pageContainer {
    min-height: 100%;
    }
    * html #pageContainer {
    height: 100%;
    }
    A:link, A:visited, A:active {
    text-decoration: none; 
    color: #0000a0;
    font-size: 8pt
    }
    #welcome {
    margin-left: auto;
    margin-right: auto;
    margin-top: 50px;
    margin-bottom: 50px;
    position: relative;
    font-size: 14pt;
    }
    #links {
    float: left;
    display: inline;
    width: 200px;
    margin-top: 75px;
    position: relative;
    text-align: right;
    border-right: 1px #ccc solid;
    line-height: 0.7cm;
    padding-bottom: 10px
    }
    .mainLinks {
    position: relative;
    text-decoration: none;
    margin-left: 25px;
    margin-right: 25px;
    }
    #mainDisplay {
    position: relative;
    margin-right: 100px;
    margin-left: 175px;
    }
    #mainDisplay p {
    margin-bottom: 15px;
    text-indent: 1cm
    }
    #mainDisplay ul {
    list-style: url(images/check_ul.gif) none outside;
    padding-left: 50px;
    margin:5px 0px 2px 0px;
    }
    #mainLogo {
    display: block;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    height: 315px;
    width: 417px;
    padding: 20px;
    }
    #Link2, #Link3, #Link4, #Link5, #Link6, #Link7, #Link8, #Link9  {
    display: none;
    margin-top: 175px;
    margin-left: 60px;
    text-align: left;
    font-size: 10pt;
    }
    #intro {
    margin-left: 205px;
    margin-top: -25px;
    }
    #mainLogo {
    display: block;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    height: 315px;
    width: 417px;
    padding: 20px;
    }
    .vis{
    visibility:visible;
    }
    .hid{
    visibility:hidden;
    display: inline;
    position: absolute;
    z-index: -2
    }
    .clear {
    clear:both;
    font-size:0;
    line-height:0px;
    }
    .emailLinks a{
    font-size: 10pt
    }
    #formanPic {
    float: left;
    margin-right: 20px
    }
    #sara {
    clear: both;
    height: 350px;
    width: 275px;
    position: relative;
    float: left;
    margin-right: 25px;
    margin-top: 50px;
    text-align: center;
    }
    #MP {
    display: inline;
    height: 350px;
    width: 275px;
    position: relative;
    float: right;
    margin-right: 25px;
    margin-top: 50px;
    text-align: center;
    }
    #liane {
    clear: left;
    position: relative;
    display: block;
    height: 350px;
    width: 275px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    margin-top: 25px
    }
    </style>
    
    
    </head>
    
    <body onload="zxcInit('mainLinks','#FFFFFF','#000000',15)">
    <div id="pageContainer">
    	<div id="welcome">Welcome to the Concordia Collaboration Lab</div>
    	<div id="links">
    		<img src="images/green_google_ball.gif" class="vis" id="normalBall"><a href="#intro" onclick="ball(this.previousSibling); return toggle('intro', 0);"><img src="images/no_green_google_ball.gif" id="noGreen" border="0"></a>
    		<br><br>
    		<img src="images/green_google_ball3.gif" class="hid"><a class="mainLinks" href="#Link2" onclick="ball(this.previousSibling); return toggle('Link2', 0);" onmouseover="zxcMseOver(this,1);"  onmouseout="zxcMseOver(this,-1);">General Information</a>
    		<br>
    		<img src="images/green_google_ball3.gif" class="hid"><a class="mainLinks" href="#Link3" onclick="ball(this.previousSibling); return toggle('Link3', 0);" onmouseover="zxcMseOver(this,1);"  onmouseout="zxcMseOver(this,-1);">The Investigator</a>
    		<br>
    		<img src="images/green_google_ball3.gif" class="hid"><a class="mainLinks" href="#Link4" onclick="ball(this.previousSibling); return toggle('Link4', 0);" onmouseover="zxcMseOver(this,1);"  onmouseout="zxcMseOver(this,-1);">What to Expect</a>
    		<br>
    		<img src="images/green_google_ball3.gif" class="hid"><a class="mainLinks" href="#Link5" onclick="ball(this.previousSibling); return toggle('Link5', 0);" onmouseover="zxcMseOver(this,1);"  onmouseout="zxcMseOver(this,-1);">Eligibility</a>
    		<br>
    		<img src="images/green_google_ball3.gif" class="hid"><a class="mainLinks" href="#Link6" onclick="ball(this.previousSibling); return toggle('Link6', 0);" onmouseover="zxcMseOver(this,1);"  onmouseout="zxcMseOver(this,-1);">Advantages and Risks</a>
    		<br>
    		<img src="images/green_google_ball3.gif" class="hid"><a class="mainLinks" href="#Link7" onclick="ball(this.previousSibling); return toggle('Link7', 0);" onmouseover="zxcMseOver(this,1);"  onmouseout="zxcMseOver(this,-1);">Confidentiality</a>
    		<br>
    		<img src="images/green_google_ball3.gif" class="hid"><a class="mainLinks" href="#Link8" onclick="ball(this.previousSibling); return toggle('Link8', 0);" onmouseover="zxcMseOver(this,1);"  onmouseout="zxcMseOver(this,-1);">Reimbursement</a>
    		<br>
    		<img src="images/green_google_ball3.gif" class="hid"><a class="mainLinks" href="#Link9" onclick="ball(this.previousSibling); return toggle('Link9', 0);" onmouseover="zxcMseOver(this,1);"  onmouseout="zxcMseOver(this,-1);">Learn More</a>
    	</div>
    	<div id="mainDisplay">
    		<div id="intro">
    			<div id="mainLogo"><img src="images/happy.gif"></div>
    		</div>
    		<div id="Link2">
    			<p>We are studying what makes young children eager to learn through imitation. It is well understood that imitation is important for young children, both for learning skills and for learning right and wrong. We are also interested in parent-child relationships and in children’s responsiveness more generally.</p>
    			<p>This work will deepen our understanding of children’s eagerness to learn through imitation. It could also potentially inform our understanding of teaching and learning processes, and of child social responsiveness more generally.</p>
    			<p>This study is funded by a grant from the Social Science and Humanities Research Council under the title “Social Determinants of Children's Imitation”</p>
    		</div>
    		<div id="Link3">
    			<img src="images/David_Forman.jpg" id="formanPic">
    			<p>This study is directed by Dr. David R. Forman, an Associate Professor in the department of Psychology at Concordia University and a member of the Center for Research on Human Development. Dr. Forman received his PhD in psychology at the University of Iowa where he studied collaboration in young children and the mother-child relationship.</p>
    			<p>Dr. Forman works with a team of psychology students who study early-childhood development and have a great deal of experience working with young children.</p>
    			<p></p>
    			<div id="sara">
    				Sarah Vannier: Research Manager
    				<br>
    				<br>
    				<img src="images/S_Vannier.jpg">
    			</div>
    			<div id="MP">
    				Marie-Pierre Gosselin: Masters Student
    				<br>
    				<br>
    				<img src="images/MP_Gosselin.jpg">
    			</div>
    			<p></p>
    			<div id="liane">
    				Liane Kandler: Research Assistant
    				<br>
    				<br>
    				<img src="images/L_Kandler.jpg">
    				<br>
    			</div>
    		</div>
    		<div id="Link4">
    			<p>If you decide to participate in our study you will be asked to come with your child to our lab at Concordia University’s Loyola campus for two visits about 1 to 2 weeks apart. Each visit will last approximately 90 minutes.</p>
    			<p>During each visit you will complete several activities with your child. All activities will be filmed. The activities are designed to observe eagerness to learn from parents, the development of child responsiveness to parents’ requests, and routine parent-child interactions. The activities are things parents often do with their children and include:</p>
    		<ul>
    			<li>Showing your child a sequence of actions to imitate</li>
    			<li>Building something together with wooden blocks</li>
    			<li>Showing your child toys which are “off-limits” and enforcing this rule throughout your visit</li>
    			<li>Asking your child to help cleanup after playing with toys</li>
    			<li>Having a snack together</li>
    			<li>Reading a story together</li>
    			<li>Completing a questionnaire about your child’s personality while your child must keep him/herself occupied</li>
    			<li>Completing a questionnaire that asks bout your well-being</li>
    		</ul>		
    		</div>
    		<div id="Link5">
    			You are eligible for our study if:
    			<p></p>
    			<ul>
    				<li>Your child is between 24 and 30 months old</li>
    				<li>You speak to your child primarily in English or in French</li>
    				<li>You are the child’s primary caregiver (you are the parent who spends the most time with your child)</li>
    				<li>Your child has never been diagnosed with a cognitive disability</li>
    			</ul>
    			<p></p>
    			If you are not eligible for this study, but are interested in our research, please feel free to contact us as you may be eligible for future studies.
    		</div>
    		<div id="Link6">
    			<p>With the exception of these small thank you gifts, participation in the study will provide no direct benefit to you or to your child. You should be aware that the researcher's work is designed to answer some very basic questions about early social development. Therefore what researchers are doing should not be perceived as therapy, nor will it benefit you and your child directly. Rather, the greater benefit will be to children at large. When the study is complete the researchers plan to send you a brief summary of their findings.</p>
    			<p>There are no substantial risks associated with this study. Occasionally children find some of the activities frustrating, but not any more than other activities a 2-year old would face in day to day life.</p>
    			<p>You may withdraw from participation at any time, without prejudice to your current or future relations with Concordia University. In addition, we encourage you to end any activity immediately if you think your child may be too tired or too frustrated to continue. </p>
    			<p>
    				<i class="emailLinks">If at any time you have questions about your rights as a research participant, please contact Adela Reid, Research Ethics and Compliance Officer, Concordia University, at (514) 848-7481 or by email at
    					 <script language="JavaScript" type="text/JavaScript"> 
    					<!-- 
    					var name = "areid"; 
    					var domain = "alcor.concordia.ca"; 
    					document.write('<a href="mailto:' + name + '@' + domain + '" onmouseover="window.status=\'Click here to send an e-mail to '+ name + '@' + domain+'\';return true" onmouseout="window.status=\'\'">'); 
    					document.write(name + '@' + domain + '</a>'); 
    					// --> 
    					</script>
    				</i>
    			</p>
    		</div>
    		<div id="Link7">
    			<p>All sessions will be videotaped.  The tapes will be used for research and/or educational purposes, and you and your child will be identified by first name and age only. All documents containing information identifying your child or yourself will remain in a locked file in the office of the coordinators (Consent forms, etc).  The tapes will be retained for seven years from the completion of the study or from publication of the results, whichever occurs later. Your name and your child's name will be withheld from all published reports of this work.</p>
    				<p>
    				<i class="emailLinks">If at any time you have questions about your rights as a research participant, please contact Adela Reid, Research Ethics and Compliance Officer, Concordia University, at (514) 848-7481 or by email at
    					<script language="JavaScript" type="text/JavaScript"> 
    					<!-- 
    					var name = "areid"; 
    					var domain = "alcor.concordia.ca"; 
    					document.write('<a href="mailto:' + name + '@' + domain + '" onmouseover="window.status=\'Click here to send an e-mail to '+ name + '@' + domain+'\';return true" onmouseout="window.status=\'\'">'); 
    					document.write(name + '@' + domain + '</a>'); 
    					// --> 
    					</script>
    				</i>
    			</p>
    		</div>
    		<div id="Link8">
    			<p>As a token of our thanks, after each visit, your child will receive a small gift, and you will receive 20 dollars. Cost of transportation can also be reimbursed.</p>
    		</div>
    		<div id="Link9">
    			<p>If this sounds interesting to you or you would like to learn more please feel free to call Sarah or Marie-Pierre (514) 848-2424, ext. 5286 or e-mail us at 
    				<i class="emailLinks">
    					<script language="JavaScript" type="text/JavaScript"> 
    					<!-- 
    					var name = "collab"; 
    					var domain = "concordia.ca"; 
    					document.write('<a href="mailto:' + name + '@' + domain + '" onmouseover="window.status=\'Click here to send an e-mail to '+ name + '@' + domain+'\';return true" onmouseout="window.status=\'\'">'); 
    					document.write(name + '@' + domain + '</a>'); 
    					// --> 
    					</script>
    				</i>
    			</p>
    		</div>
    	</div>
    </div>
    </body>
    </html>
    Before you criticize someone, you should walk a mile in their shoes. That way, when you criticize them, you're a mile away and you have their shoes :)

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    This is what you get for coding without a full valid doctype. Use a full valid doctype, one with the url and it should look better.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #3
    Senior Coder
    Join Date
    Jul 2003
    Location
    My pimped-out igloo in Canadia
    Posts
    1,966
    Thanks
    36
    Thanked 0 Times in 0 Posts
    lol, oops

    stupid dreamweaver

    while i have you here, do you have a script to dynamically get the height of a div and set the height of another div accordingly?
    Before you criticize someone, you should walk a mile in their shoes. That way, when you criticize them, you're a mile away and you have their shoes :)

  • #4
    Senior Coder
    Join Date
    Jul 2003
    Location
    My pimped-out igloo in Canadia
    Posts
    1,966
    Thanks
    36
    Thanked 0 Times in 0 Posts
    oh, almost forgot. why is #2 happening??

    be back in 2 or 3 hrs (*grrr)
    Before you criticize someone, you should walk a mile in their shoes. That way, when you criticize them, you're a mile away and you have their shoes :)

  • #5
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Add
    Code:
    return false;
    at the end of your toggle function.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #6
    Senior Coder
    Join Date
    Jul 2003
    Location
    My pimped-out igloo in Canadia
    Posts
    1,966
    Thanks
    36
    Thanked 0 Times in 0 Posts
    sweet, thanks.

    as a matter of interest, if i wanted to scroll to a certain height when a link is clicked... is the command "window.scrollTo(x,y)" for both IE and FF?
    Before you criticize someone, you should walk a mile in their shoes. That way, when you criticize them, you're a mile away and you have their shoes :)

  • #7
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Scrolling the browser window or div? Did you try that script? Simply just trying something will save you a post. Yeah its what you would use.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #8
    Senior Coder
    Join Date
    Jul 2003
    Location
    My pimped-out igloo in Canadia
    Posts
    1,966
    Thanks
    36
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by _Aerospace_Eng_ View Post
    Did you try that script?
    what script?

    i was just asking in reference to... say for example I had a fairly long page to load into my div so when openned I wanted to bring my users down to a particular vertical location (say right above my ('links') div.)

    if i knew the exact distance away from the top of the page (say i had margin-top: 200px)... would it be better to create an anchor there, or to simply have onclick="window.scrollTo('200,0')" ?
    Before you criticize someone, you should walk a mile in their shoes. That way, when you criticize them, you're a mile away and you have their shoes :)

  • #9
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    The window.scrollTo script, since you are passing numbers to it you don't use quotes.
    Code:
    window.scrollTo(200,0)
    however yes an anchor tag would be better. Just point the url to the anchor on the page
    Code:
    somesite.html#someanchor
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #10
    Senior Coder
    Join Date
    Jul 2003
    Location
    My pimped-out igloo in Canadia
    Posts
    1,966
    Thanks
    36
    Thanked 0 Times in 0 Posts


    awesome, thanks for clearing that up
    Before you criticize someone, you should walk a mile in their shoes. That way, when you criticize them, you're a mile away and you have their shoes :)


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •