Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 169
  • Last Modified:

visual problem of a <table>.

hello. i have this page http://www.oris.ws/tmp/menu/menu.php  if you go there you can see that the two cells (photos-videos) have space between them - this space is unwanted and this is my question- how to i get rid of it?
i noticed two things so far.. if you'll view the code you can see i put on every <td> some stlyes and other things. now, if i cut it and place it on the <tr> insted the space is gone but the style on mouse on-off is gone as well.
alse the more <td's> i add the more space it become.
thanx. ori.
0
orik7
Asked:
orik7
  • 8
  • 7
  • 5
  • +1
1 Solution
 
a2literCommented:
try using this in your <table> definition

<table CELLPADDING="0" CELLSPACING="0" border=0>

0
 
orik7Author Commented:
I'm using cellspacing="0" and cellpadding="2" which is what i like for my design but tryied both set to 0 and it did not helped..
thanx.
0
 
a2literCommented:
ok, try trimming your image files and make sure there is no white space around the edges. I have duplicated this on my server and it works just fine. no space inbetween images. I did have to trim the images though.
0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
orik7Author Commented:
i'm not sure what do you mean by 'images'. if you mean the tags i have only 'enter' beween them.
0
 
GitchoCommented:
Move the id & style to the <tr>, but keep the class on the <td> & it will work ...

Like so :  
------------------------------------------------------------------
<html>
<!-- Generated by AceHTML Freeware http://freeware.acehtml.com -->
<!-- Creation date: 18/08/2004 -->
<head>
<title></title>
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="author" content="okedmi@walla.co.il">
<meta name="generator" content="AceHTML 5 Freeware">
<style type="text/css">
<!--
.sub{color:#DBDB17; background:#B17753; border-top:1px solid #CAB397; border-left:1px solid #CAB397;
border-bottom:2px solid #4B300F; border-right:2px solid #4B300F; cursor:hand;}
.title{display:show; color:#DBDB17; background:#6E3D02; border-top:1px solid #CAB397; border-left:1px solid #CAB397;
border-bottom:2px solid #4B300F; border-right:2px solid #4B300F; cursor:default;}
-->
</style>
</head>
<body>
<script name="javascript">
function toggle(sub){
var whichSub=document.all[sub];
if (whichSub.style.display=="none"){
var showhide="show";
}else if(whichSub.style.display=="show"){
var showhide="none";
}
showHideRow(sub, showhide); return false;
}
 if (document.all){
 } else if (document.getElementById){
function showHideRow(el, showhide) {
 var whichRow = document.all[el];
       if(showhide == "show" ) {
          whichRow.style.display = "";
            } else {
          whichRow.style.display = "none";
              }
 
}
}
function onTitle(titleVar){
var title = document.all[titleVar];
title.style.background="#92550B";//title bright brown
title.style.borderTop="2px solid #4B300F"; //dark brown
title.style.borderLeft="2px solid #4B300F"; //dark brown
title.style.borderBottom="1px solid #CAB397";//light brown
title.style.borderRight="1px solid #CAB397";//light brown
}
function offTitle(titleVar){
var title = document.all[titleVar];
title.style.background="#6E3D02";//title dark brown
title.style.borderTop="1px solid #CAB397";//light brown
title.style.borderLeft="1px solid #CAB397";//light brown
title.style.borderBottom="2px solid #4B300F";//dark brown
title.style.borderRight="2px solid #4B300F";//dark brown
}
function onSub(subVar){
var sub = document.all[subVar];
sub.style.background="#DAA88A";//sub light brown
sub.style.borderTop="2px solid #4B300F"; //dark brown
sub.style.borderLeft="2px solid #4B300F"; //dark brown
sub.style.borderBottom="1px solid #CAB397";//light brown
sub.style.borderRight="1px solid #CAB397";//light brown
}
function offSub(subVar){
var sub = document.all[subVar];
sub.style.background="#B17753";//sun dark brown
sub.style.borderTop="1px solid #CAB397";//light brown
sub.style.borderLeft="1px solid #CAB397";//light brown
sub.style.borderBottom="2px solid #4B300F";//dark brown
sub.style.borderRight="2px solid #4B300F";//dark brown
}
</script>
<base href="http://www.oris.ws">
<table width="150" cellpadding="2" cellspacing="0" border="0">
<tr>
      <td class="title" id="title1" onMouseOver="onTitle('title1');" onMouseOut="offTitle('title1');" onClick="toggle('sub1-1'); toggle('sub1-2'); toggle('sub1-3'); toggle('sub1-4'); toggle('sub1-5'); toggle('sub1-6'); ">
      Photos
      </td>
</tr>
<tr id="sub1-1" style="display:none;" >
      <td class="sub" onMouseOver="onSub('sub1-1');" onMouseOut="offSub('sub1-1');"
      onClick="parent.mypage.location.href='/phpwebalbum/index.php';">
      &nbspMain folder
      </td>
</tr>
<tr id="sub1-2" style="display:none;">
      <td class="sub" onMouseOver="onSub('sub1-2');" onMouseOut="offSub('sub1-2');"
      onClick="parent.mypage.location.href='/phpwebalbum/index.php?path=L0Nob3NlbiBwaG90b3Mv&page=1';">
      &nbspChosen photos
      </td>
</tr>
<tr id="sub1-3" style="display:none;">
      <td class="sub" onMouseOver="onSub('sub1-3');" onMouseOut="offSub('sub1-3');"
      onClick="parent.mypage.location.href='/phpwebalbum/index.php?path=L0FxYWJhLw==&page=1';">
      &nbspAqaba
      </td>
</tr>
<tr id="sub1-4" style="display:none;">
      <td class="sub" onMouseOver="onSub('sub1-4');" onMouseOut="offSub('sub1-4');"
      onClick="parent.mypage.location.href='/phpwebalbum/index.php?path=L1ZvbHVudGVlcnMhLw==&page=1';">
      &nbspVolunteers
      </td>
</tr>
<tr id="sub1-5" style="display:none;">
      <td class="sub" onMouseOver="onSub('sub1-5');" onMouseOut="offSub('sub1-5');"
      onClick="parent.mypage.location.href='/phpwebalbum/index.php?path=L0Nob3NlbiBwaG90b3Mv&page=1';">
      &nbspPurim 2004
      </td>
</tr>
<tr id="sub1-6" style="display:none;">
      <td class="sub" onMouseOver="onSub('sub1-6');" onMouseOut="offSub('sub1-6');"
      onClick="parent.mypage.location.href='/phpwebalbum/index.php?path=L1RyaXAtIFRpcmVzX29uX0Jhbmlhcy8=&page=1';">
      &nbspTires on Banias
      </td>
</tr>
<tr>
      <td class="title" id="title2" onMouseOver="onTitle('title2');" onMouseOut="offTitle('title2');" onClick="toggle('sub2'); toggle('sub2-2');">
      Videos
      </td>
</tr>
<tr id="sub2" style="display:none;">
      <td class="sub" onMouseOver="onSub('sub2');" onMouseOut="offSub('sub2');">
      &nbspOld videos
      </td>
</tr>
<tr id="sub2-2" style="display:none;">
      <td class="sub" onMouseOver="onSub('sub2-2');" onMouseOut="offSub('sub2-2');">
      &nbspNew Videos
      </td>
</tr>
</table>
</body>
</html>
0
 
a2literCommented:
here is the url for my example. http://e-duct-tape.com/test.html I just used some button images I had laying around. they have some fade from white to blue at the top of each so it looks like there is a little gap in between, but there isnt.
0
 
a2literCommented:
Sorry, didnt see your last comment about the "what images" I assumed that your buttons were images. That is what I always use. Sorry about that.
0
 
orik7Author Commented:
Gitcho, have done what you have sugegted in http://www.oris.ws/tmp/menu/menu-b.php but as you can see and as i menthioned in my original Q - the space is gone but so is the mouse on-off effect..
take a look.
ori.
0
 
GitchoCommented:
Hi orik7 :

Move the ID="title1" back to the <td> for the Photos & Video main buttons ...

If you cut & paste the code I posted above, you'll see what I mean - The row "Photos" & "Videos" row (<tr>) shouldn't have an ID tag ...
0
 
orik7Author Commented:
Hello Gicho.
no luck here.
changed as you said- the effect works on the title but not on the subs.. http://www.oris.ws/tmp/menu/menu-b.php
ori.
0
 
GitchoCommented:
oh right ... sorry ... gimme a minute to fix & repost ...

0
 
orik7Author Commented:
Thanx Gitcho but it is solved..
http://www.oris.ws/tmp/menu/menu.php   The idae was to have two differnt id's. one for the <td> and one for the <tr>
I'm closing this Q.
Ori.
0
 
GitchoCommented:
Not sure what Lunchy's comment means ...  Who gets points for this then ?
0
 
orik7Author Commented:
if there are no objections i get a refund as no expert has solved it.
ori.
0
 
GitchoCommented:
Yeah ... I would object ... You don't think that help was worth 75 points ??? To be fair, you didn't know the problem was the placement of the ID tag in the <TR> & <TD> until I told you.

I thought the purpose of this forum was to help people arrive at an answer, not do their homework for them.

Your original questions was : "this space is unwanted and this is my question- how to i get rid of it?" .... I got rid of the space for you.   Less than an hour after I said I would post the fix to the rollovers (i was just leaving work), you closed the question, and asked for a refund.

Can you honestly say you figured out the solution to your problem without any help ?  
0
 
a2literCommented:
I would also like to say that I helped out with the table structure and the buttons somewhat. Just my 2 cents worth.
0
 
orik7Author Commented:
I'll start from a2liter- just look at your responds, you were talking on somthing complitly different as you thought i'm using images!!
Gitcho, as i see it i didn't use what you have suggested- if you look at my original Q you'll see i mention that moving the <td>  styles to the tr will fix the look of it but will take away the effect on mouse on/off and this is the solution you gave me all along! but you know what Gitcho you are well come come with a better solution than my. i'll accept it then.
ori.
0
 
GitchoCommented:
You said the question was solved, and that "The idae was to have two differnt id's. one for the <td> and one for the <tr>" ...

Here's the rules on grading :

I answered my question myself. What do I do? (http://www.experts-exchange.com/Web/help.jsp#hi70)

Post a question in the Community Support topic area asking for a refund, and asking the Moderators to close the question. You'll be required to post your solution in your original question. A Moderator will post a notice of your request which will give the participants 96 hours to object to the refund. Note that if it resembles one of the suggested comments, the likelihood is that your request will not be granted, but rather, the points will be awarded to the Expert who makes the suggestion. In your Community Support request, remember to post a link to the original question.


Nobody answered my question. What do I do? (http://www.experts-exchange.com/Web/help.jsp#hi71)

Before you ask the Moderators to help you in this circumstance, take the time to post a message in your question stating your intention to have the question deleted or closed, and make sure you have responded to all of the Experts' comments. Then post a question in the Community Support topic area asking the Moderators to delete your question. Remember to post a link to the original question in your request. If there are no comments in the question, one of the Moderators will delete the question. If there are comments, the Moderator will post notice of your request, and will give the participants 96 hours to object. You may be required to post your reason for asking for the deletion, and objections will be taken into account.



I don't buy that you came up with the answer all by yourself without any input from the experts, especially considering the amount of code posted. There was too much discussion focussing on the id tags in the table rows and columns.

If you can say that you came up with the solution completely on your own, and that none of the experts comments helped in any way, then I won't object to the refund.  If not, you are obligated to assign the points (with a grade of "C" if you like).
0
 
orik7Author Commented:
It doesen't matter how came up the solution. what's importent - it wasn't with neider of the "experts" on this Q.
you did sent alot of code but it was worthless.  you made one change of simple cut and paste of one line that repeted but you post the whole code plus your post DID NOT solved the problem but had the same effect that i tryied to get the attation any replying expert to it so will not make my mistakes and post it in my first original Q.
in short while you were doing my posted mistakes i was progressing!!!
Ori.

0
 
GitchoCommented:
What I hear you saying, is that none of posts helped you towards a solution in any way - and I guess it's not really for me to say that they did.   In that case, you should be refunded.

Thanks for your comments & sorry we couldn't help.
0
 
NetminderCommented:
Closed, 75 points refunded.
Netminder
Site Admin
0

Featured Post

Important Lessons on Recovering from Petya

In their most recent webinar, Skyport Systems explores ways to isolate and protect critical databases to keep the core of your company safe from harm.

  • 8
  • 7
  • 5
  • +1
Tackle projects and never again get stuck behind a technical roadblock.
Join Now