...

View Full Version : Positioning wrapper help



finstah1
09-26-2007, 05:23 PM
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. :eek:

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



<!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>

vtjustinb
09-26-2007, 05:33 PM
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

finstah1
09-26-2007, 05:47 PM
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.

vtjustinb
09-26-2007, 05:49 PM
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. :thumbsup:



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum