Solved

visual problem of a <table>.

Posted on 2004-08-19
22
159 Views
Last Modified: 2008-01-09
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
Comment
Question by:orik7
  • 8
  • 7
  • 5
  • +1
22 Comments
 
LVL 1

Expert Comment

by:a2liter
ID: 11843782
try using this in your <table> definition

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

0
 

Author Comment

by:orik7
ID: 11844210
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
 
LVL 1

Expert Comment

by:a2liter
ID: 11844294
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
 

Author Comment

by:orik7
ID: 11844502
i'm not sure what do you mean by 'images'. if you mean the tags i have only 'enter' beween them.
0
 
LVL 5

Expert Comment

by:Gitcho
ID: 11844529
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
 
LVL 1

Expert Comment

by:a2liter
ID: 11844534
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
 
LVL 1

Expert Comment

by:a2liter
ID: 11844557
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
 

Author Comment

by:orik7
ID: 11844795
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
 
LVL 5

Expert Comment

by:Gitcho
ID: 11845147
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
 

Author Comment

by:orik7
ID: 11845670
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
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 
LVL 5

Expert Comment

by:Gitcho
ID: 11846074
oh right ... sorry ... gimme a minute to fix & repost ...

0
 

Author Comment

by:orik7
ID: 11846493
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
 
LVL 5

Expert Comment

by:Gitcho
ID: 11846993
Not sure what Lunchy's comment means ...  Who gets points for this then ?
0
 

Author Comment

by:orik7
ID: 11850379
if there are no objections i get a refund as no expert has solved it.
ori.
0
 
LVL 5

Expert Comment

by:Gitcho
ID: 11852052
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
 
LVL 1

Expert Comment

by:a2liter
ID: 11854720
I would also like to say that I helped out with the table structure and the buttons somewhat. Just my 2 cents worth.
0
 

Author Comment

by:orik7
ID: 11860602
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
 
LVL 5

Expert Comment

by:Gitcho
ID: 11866086
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
 

Author Comment

by:orik7
ID: 11866493
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
 
LVL 5

Expert Comment

by:Gitcho
ID: 11874107
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
 
LVL 5

Accepted Solution

by:
Netminder earned 0 total points
ID: 11875841
Closed, 75 points refunded.
Netminder
Site Admin
0

Featured Post

Enabling OSINT in Activity Based Intelligence

Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

Join & Write a Comment

Using SQL Scripts we can save all the SQL queries as files that we use very frequently on our database later point of time. This is one of the feature present under SQL Workshop in Oracle Application Express.
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
Any person in technology especially those working for big companies should at least know about the basics of web accessibility. Believe it or not there are even laws in place that require businesses to provide such means for the disabled and aging p…
The viewer will get a basic understanding of what section 508 compliance can entail, learn about skip navigation links, alt text, transcripts, and font size controls.

744 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now