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 4 of 4
  1. #1
    Regular Coder
    Join Date
    May 2004
    Location
    The First State
    Posts
    233
    Thanks
    9
    Thanked 0 Times in 0 Posts

    Positioning wrapper help

    hey all,

    I'm implementing a cool show/hide div script I found at dhtmlgoodies but am having some issues with IE7 and FF. I've got my wrapper centered with margin: 0 auto; but when I open the div and the contents show, the entire wrapper moves over (due to the auto center deal above.) My question is, is there a way to center the wrapper and not have the entire contents shift?

    Ironically it works fine in IE 6.

    It's easier to view the test page to see what I mean. Just make the window small enough so that when the div opens the scroll bar will appear.

    http://www.atseadesign.com/test/test.html

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title> test</title>
    <style type="text/css">
    html {
    	height: 100%;
    	overflow: auto;
    }
    
    html, body, #wrapper {
    	border: none;
    	text-align: center;	
    	height: 100%;
    	font: normal 13px  Arial, Helvetica, sans-serif; 
    	color: #000;
    	background-color: #D4EEF6; 
    	margin: 0;	
    	width: auto; 
    }
    
    #wrapper {
    	border: 1px solid #000;
    	margin: 0px auto;
    	text-align: left;
    	vertical-align: middle;
    	width: 400px;	
    	background-color: #FFF; 
    }
    
    .initial_topic_off {	/* Styling question */
    	color:#629CBE;
    	font: normal 13px  Arial, Helvetica, sans-serif; 
    	width:430px;
    	margin-bottom:2px;
    	margin-top:2px;
    	padding-left:2px;
    	background:url('../images/arrow.gif') no-repeat 0 50%;
    	height: auto;
    	border: 1px solid black;
    	overflow:hidden;
    	cursor:pointer;
    }
    
    .initial_topic_off p {	/* Styling question */
    	padding-left: 1em;
    }
    
    .initial_topic_on{	/* Parent box of slide down content */
    	width:400px;	
    	visibility:hidden;
    	height:0px;
    	overflow:hidden;
    	position:relative;
    
    }
    
    .initial_topic_on_content{	/* Content that is slided down */
    	padding:1px;
    	font-size:0.9em;	
    	position:relative;
    }
    
    .initial_topic_on img { border: none; margin: 0 0 1em 0;}
    
    </style>
    <script type="text/javascript">
    /************************************************************************************************************
    (C) www.dhtmlgoodies.com, November 2005
    
    This is a script from www.dhtmlgoodies.com. You will find this and a lot of other scripts at our website.	
    
    Terms of use:
    You are free to use this script as long as the copyright message is kept intact. However, you may not
    redistribute, sell or repost it without our permission.
    
    Thank you!
    
    www.dhtmlgoodies.com
    Alf Magne Kalleland
    
    ************************************************************************************************************/
    
    var dhtmlgoodies_slideSpeed = 10;	// Higher value = faster
    var dhtmlgoodies_timer = 10;	// Lower value = faster
    
    var objectIdToSlideDown = false;
    var dhtmlgoodies_activeId = false;
    var dhtmlgoodies_slideInProgress = false;
    function showHideContent(e,inputId)
    {
    	if(dhtmlgoodies_slideInProgress)return;
    	dhtmlgoodies_slideInProgress = true;
    	if(!inputId)inputId = this.id;
    	inputId = inputId + '';
    	var numericId = inputId.replace(/[^0-9]/g,'');
    	var answerDiv = document.getElementById('dhtmlgoodies_a' + numericId);
    
    	objectIdToSlideDown = false;
    	
    	if(!answerDiv.style.display || answerDiv.style.display=='none'){		
    		if(dhtmlgoodies_activeId &&  dhtmlgoodies_activeId!=numericId){			
    			objectIdToSlideDown = numericId;
    			slideContent(dhtmlgoodies_activeId,(dhtmlgoodies_slideSpeed*-1));
    		}else{
    			
    			answerDiv.style.display='block';
    			answerDiv.style.visibility = 'visible';
    			
    			slideContent(numericId,dhtmlgoodies_slideSpeed);
    		}
    	}else{
    		slideContent(numericId,(dhtmlgoodies_slideSpeed*-1));
    		dhtmlgoodies_activeId = false;
    	}	
    }
    
    function slideContent(inputId,direction)
    {
    	
    	var obj =document.getElementById('dhtmlgoodies_a' + inputId);
    	var contentObj = document.getElementById('dhtmlgoodies_ac' + inputId);
    	height = obj.clientHeight;
    	if(height==0)height = obj.offsetHeight;
    	height = height + direction;
    	rerunFunction = true;
    	if(height>contentObj.offsetHeight){
    		height = contentObj.offsetHeight;
    		rerunFunction = false;
    	}
    	if(height<=1){
    		height = 1;
    		rerunFunction = false;
    	}
    
    	obj.style.height = height + 'px';
    	var topPos = height - contentObj.offsetHeight;
    	if(topPos>0)topPos=0;
    	contentObj.style.top = topPos + 'px';
    	if(rerunFunction){
    		setTimeout('slideContent(' + inputId + ',' + direction + ')',dhtmlgoodies_timer);
    	}else{
    		if(height<=1){
    			obj.style.display='none'; 
    			if(objectIdToSlideDown && objectIdToSlideDown!=inputId){
    				document.getElementById('dhtmlgoodies_a' + objectIdToSlideDown).style.display='block';
    				document.getElementById('dhtmlgoodies_a' + objectIdToSlideDown).style.visibility='visible';
    				slideContent(objectIdToSlideDown,dhtmlgoodies_slideSpeed);				
    			}else{
    				dhtmlgoodies_slideInProgress = false;
    			}
    		}else{
    			dhtmlgoodies_activeId = inputId;
    			dhtmlgoodies_slideInProgress = false;
    		}
    	}
    }
    
    
    
    function initShowHideDivs()
    {
    	var divs = document.getElementsByTagName('DIV');
    	var divCounter = 1;
    	for(var no=0;no<divs.length;no++){
    		if(divs[no].className=='initial_topic_off'){
    			divs[no].onclick = showHideContent;
    			divs[no].id = 'dhtmlgoodies_q'+divCounter;
    			var answer = divs[no].nextSibling;
    			while(answer && answer.tagName!='DIV'){
    				answer = answer.nextSibling;
    			}
    			answer.id = 'dhtmlgoodies_a'+divCounter;	
    			contentDiv = answer.getElementsByTagName('DIV')[0];
    			contentDiv.style.top = 0 - contentDiv.offsetHeight + 'px'; 	
    			contentDiv.className='initial_topic_on_content';
    			contentDiv.id = 'dhtmlgoodies_ac' + divCounter;
    			answer.style.display='none';
    			answer.style.height='1px';
    			divCounter++;
    		}		
    	}	
    }
    window.onload = initShowHideDivs;
    </script>
    
    <!--[if IE]>
    <link rel="stylesheet" href="../includes/stylesIE.css" type="text/css" media="screen" />
    <![endif]-->
    
    </head>
    <body>
    <table id="wrapper" border="0" cellpadding="0" cellspacing="0" width="768" align="center">
    	<tr valign="top">
    	<td>
    		<table width="770" border="0" cellpadding="0" cellspacing="0" align="center">
    			<tr valign="top">
    			<td height="174"><img src="../images/topnav0.jpg" alt="" /></td>
    			</tr>
    			<tr valign="top">
    			<td>
    	  		<!-- Start Top Nav -->
    	  		<!--#include virtual="../includes/topnav.html" -->	  		<!-- End Top Nav -->			</td>
    		  </tr>
    			<tr valign="top">
    			<td>
    				<table border="0" cellpadding="5" cellspacing="5">
    					<tr valign="top">
    					<td><img id="headerImg" src="../images/hdr_health.gif" alt="Here's to your health" />
                        <div class="initial_topic_off"><p>Abductors stretches</p></div>
                        <div class="initial_topic_on">
                            <div>
                                <img src="images/abductors1.jpg" alt="Abductors stretches" /><br /><img src="images/abductors2.jpg" alt="Abductors stretches" />
                            </div>
                        </div>
                        <div class="initial_topic_off">Q: What is the difference between the div and span tag ?</div>
                        <div class="initial_topic_on">
                            <div>
                                DIV is a block element while SPAN is an inline element. What's common to them both is that none of them have any default styling.
                            </div>
                        </div>
                        <div class="initial_topic_off">Q: What kind of site is dhtmlgoodies.com ?</div>
                        <div class="initial_topic_on">
                            <div>
                                dhtmlgoodies.com is a private site developed and maintained by Alf Magne Kalleland. Here, you will find a lot of 
                                DHTML scripts you can use freely to enhance your website.
                            </div>
                        </div>			
                        </td>
    					</tr>
    				</table>			
                 </td>
    			</tr>
    			<tr valign="top">
    			<td>&nbsp;</td>
    			</tr>
    		</table>	
    	</td>
    	</tr>	
    	<tr valign="top">
    	<td id="footer">
    	<!-- Start Footer -->
    	<!--#include virtual="../includes/footer.html" -->
    	<!-- End Footer -->	
    	</td>
    	</tr>
    </table>
    </body>
    </html>

  • #2
    Regular Coder
    Join Date
    Sep 2007
    Location
    Raleigh, NC
    Posts
    273
    Thanks
    7
    Thanked 59 Times in 52 Posts
    Hehe I always smack myself when this happens and I don't notice it, but that shift is actually because when you show the content the page needs to add scrollbars to make all the content viewable. The scrollbars push everything over about 10 pixels because that's the space they occupy. :P

  • #3
    Regular Coder
    Join Date
    May 2004
    Location
    The First State
    Posts
    233
    Thanks
    9
    Thanked 0 Times in 0 Posts
    I know. It sucks Ha ha. Seems with all the content I have to add to the page, scrollbars appear anyway so the content will already be shifted.

  • #4
    Regular Coder
    Join Date
    Sep 2007
    Location
    Raleigh, NC
    Posts
    273
    Thanks
    7
    Thanked 59 Times in 52 Posts
    Yeah more often than not it won't be an issue, and if it is that'll be okay too. I think one of the best things designers can do in the move to CSS is let go of pixel-precision. Accessible and well-designed content is more important.


  •  

    Posting Permissions

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