hiding cells

[taith]

not sure if this is a css problem... or a js problem... and it is minor...

 

on http://www.divindesigns.ca/test.php

 

when you press the +/- it moves the title and +/- over a little bit... any idea why that is?

[tinker]

can you show the code and relevant css? (I don't do external links, sorry)

[taith]

fair enough... and there was a typo  "http://www.divinedesigns.ca/test.php"

 

<table style="border:1px solid #655872;width:100%;">
<tr class=title>
  <td align=center style="width:30px;" class=title><a href="javascript:hidecell('asdfdasfsdfa','index[emails]');" id="asdfdasfsdfa" class=titlebutton>+</a></td>
  <td style="padding-left:20px;" class=title><a href="javascript:hidecell('asdfdasfsdfa','index[calendar]');" class=title>New Emails</a></td>
</tr>
<tr>
  <td>
   <span style="display:none;width:100%;" id="asdfdasfsdfa-cb">
    <table style="width:100%;">
     <tr>
      <td style="padding-left:30px;white-space:nowrap;"><a href="mail.html?op=view&id=">test</a></td>
     </tr>
    </table>
   </span>
  </td>
</tr>
</table>
<script>
var ie4=false;
if(document.all) ie4=true;

function getObject(id){
if(ie4) return document.all[id];
else return document.getElementById(id);
}

function hidecell(key,cookie){
var ele=getObject(key);
var el=getObject(key+"-cb");
if(el.style.display=='none'){
  setcookie(cookie,"shown");
  ele.innerHTML='-';
  el.style.display='block';
}else{
  setcookie(cookie,"hidden");
  ele.innerHTML='+';
  el.style.display='none';
}
}

function setcookie(name, value, expires, path, domain, secure){
document.cookie= name + "=" + escape(value) + ((expires) ? "; expires=" + expires.toGMTString() : "") + ((path) ? "; path=" + path : "") + ((domain) ? "; domain=" + domain : "") + ((secure) ? "; secure" : "");
}
</script>

<style>
table{ border-collapse:collapse; border-spacing:0; border:0; }
tr{ vertical-align:top; }
td{ font-size:11px; font-family:trebuchet MS; font-weight:500; color:#655872; padding:0;  }

td.title{
height:40px;
background:url(images/titlefade.jpg) repeat-x #a183bd;
color:#ffffee;
font-size:20px;
padding-left:5px;
padding-right:5px;
}

tr.title{
vertical-align:middle;
}

a.title{
color:#ffffee;
}

a.titlebutton{
border:1px solid #655872;
background:#a183bd;
color:#655872;
text-align:center;
width:20px;
display:block;
}

a.titlebutton:hover{
color:#ffffee;
}
</style>

[tinker]

Probably a typo, but in tables, fields in the same columns are all relative. On your hidden menu field you reset the 'padding-left', so I just changed to:

<td style="padding-left:20px;white-space:nowrap;"><a href="mail.html?op=view&id=">test</a></td>

and hey presto...

[tinker]

you probably know it but heres a sub class of link, it gets rid of the decoration, just looks nicer:

.titlebutton:link { color:#b3580e; font-size: 14px; text-decoration: none; font-weight: bold; }
.titlebutton:active { color:#b3580e; font-size: 14px; text-decoration: none; font-weight: bold; }
.titlebutton:visited { color:#b3580e; font-size: 14px; text-decoration: none; font-weight: bold; }
.titlebutton:hover { color:#05b809; font-size: 14px; text-decoration: none; cursor: pointer; font-weight: bold; }

[taith]

well ya... twas just a snippit of code...

[tinker]

was that the source of the problem?

[taith]

nope... its still shifting slightly to the right when expanded...