Hi Everyone,<br />
<br />
I have written a page that presents a table inside a div tag. The table contained within the div tag is being used with some javascript to make a pop-up menu. Everything is working sweat, menu pops-up, etc, however I am not 100% satisfied with how the menu looks. I have white space between pictures that I am using in the table. Basically the table is made up of a seven rows, each containing one data cell. A picture is contained within each data cell. I cannot get rid of about 2mm of white space between the pictures! I have tried setting the table to use no border, 0 cellpadding and 0 cellspacing, all to no avail. Is there anything else that you could suggest I do in order to eliminate this really annoying white space? Thanks in advance for your help.<br />
<br />
Regards<br />
<br />
Davo<!--content-->Have you "img { display:block; }"ed?<!--content-->I'm having the same problem<br />
<br />
Can anyone help figure out why I cant get my images to sit flush against each other?<br />
<br />
<br />
<html><br />
<title>menu 3</title><br />
<br />
<script type="text/javascript"><br />
function change(id){<br />
ID = document.getElementById(id);<br />
<br />
if(ID.style.display == "")<br />
ID.style.display = "none";<br />
else<br />
ID.style.display = "";<br />
}<br />
</script><br />
<br />
<br />
<body><br />
<table style="margin:0px; padding:0px;"><br />
<tr><br />
<td title="Show/Hide" style="cursor: hand" onMouseOver="style.backgroundColor='#cecece';" onMouseOut="style.backgroundColor='#F3F3F3'" class="tbl"><a onclick="change(1)" href=http://www.webdeveloper.com/forum/archive/index.php/"#"><img src="support_button.jpg" border=0 width="" height="" alt="" style="display:block;" /></a></td><br />
</tr><br />
<br />
<!-- Sub menu 1 --><br />
<tr style="display: none" id="1"><br />
<td class="tbl" style="background-color: #FFFFFF"><br />
Sub 1<br />
</td><br />
</tr><br />
<br />
<tr><br />
<td title="Show/Hide" style="cursor: hand" onMouseOver="style.backgroundColor='#cecece';" onMouseOut="style.backgroundColor='#F3F3F3'" class="tbl"><a onclick="change(2)" href=http://www.webdeveloper.com/forum/archive/index.php/"#"><img src="support_button.jpg" border=0 width="" height="" alt="" style="display:block;" /></a></td><br />
</tr><br />
<br />
<!-- Sub menu 2 --><br />
<tr style="display: none" id="2"><br />
<td class="tbl" style="background-color: #FFFFFF"><br />
Sub 2<br />
</td><br />
</tr><br />
<tr><br />
<td title="Show/Hide" style="cursor: hand" onMouseOver="style.backgroundColor='#cecece';" onMouseOut="style.backgroundColor='#F3F3F3'" class="tbl"><a onclick="change(3)" href=http://www.webdeveloper.com/forum/archive/index.php/"#"><img src="support_button.jpg" border=0 width="" height="" alt="" style="display:block;" /></a></td><br />
</tr><br />
<!-- Sub menu 3 --><br />
<tr style="display: none" id="3"><br />
<td class="tbl"style="background-color: #FFFFFF"><br />
Sub 3<br />
</td><br />
</tr><br />
</table><br />
</body><br />
<br />
</html><!--content-->A guess since you did not supply code....<br />
<br />
1. <table cellspacing=0 cellpadding=0 border=0><br />
2. ....<br />
<td><img ........></td><br />
Make sure the </td> is on the same line as your image tag.<!--content-->oh awesome, thats just what I needed, thanks<br />
<br />
*feels stupid for not thinking of cellpadding and spacing*<!--content-->
<br />
I have written a page that presents a table inside a div tag. The table contained within the div tag is being used with some javascript to make a pop-up menu. Everything is working sweat, menu pops-up, etc, however I am not 100% satisfied with how the menu looks. I have white space between pictures that I am using in the table. Basically the table is made up of a seven rows, each containing one data cell. A picture is contained within each data cell. I cannot get rid of about 2mm of white space between the pictures! I have tried setting the table to use no border, 0 cellpadding and 0 cellspacing, all to no avail. Is there anything else that you could suggest I do in order to eliminate this really annoying white space? Thanks in advance for your help.<br />
<br />
Regards<br />
<br />
Davo<!--content-->Have you "img { display:block; }"ed?<!--content-->I'm having the same problem<br />
<br />
Can anyone help figure out why I cant get my images to sit flush against each other?<br />
<br />
<br />
<html><br />
<title>menu 3</title><br />
<br />
<script type="text/javascript"><br />
function change(id){<br />
ID = document.getElementById(id);<br />
<br />
if(ID.style.display == "")<br />
ID.style.display = "none";<br />
else<br />
ID.style.display = "";<br />
}<br />
</script><br />
<br />
<br />
<body><br />
<table style="margin:0px; padding:0px;"><br />
<tr><br />
<td title="Show/Hide" style="cursor: hand" onMouseOver="style.backgroundColor='#cecece';" onMouseOut="style.backgroundColor='#F3F3F3'" class="tbl"><a onclick="change(1)" href=http://www.webdeveloper.com/forum/archive/index.php/"#"><img src="support_button.jpg" border=0 width="" height="" alt="" style="display:block;" /></a></td><br />
</tr><br />
<br />
<!-- Sub menu 1 --><br />
<tr style="display: none" id="1"><br />
<td class="tbl" style="background-color: #FFFFFF"><br />
Sub 1<br />
</td><br />
</tr><br />
<br />
<tr><br />
<td title="Show/Hide" style="cursor: hand" onMouseOver="style.backgroundColor='#cecece';" onMouseOut="style.backgroundColor='#F3F3F3'" class="tbl"><a onclick="change(2)" href=http://www.webdeveloper.com/forum/archive/index.php/"#"><img src="support_button.jpg" border=0 width="" height="" alt="" style="display:block;" /></a></td><br />
</tr><br />
<br />
<!-- Sub menu 2 --><br />
<tr style="display: none" id="2"><br />
<td class="tbl" style="background-color: #FFFFFF"><br />
Sub 2<br />
</td><br />
</tr><br />
<tr><br />
<td title="Show/Hide" style="cursor: hand" onMouseOver="style.backgroundColor='#cecece';" onMouseOut="style.backgroundColor='#F3F3F3'" class="tbl"><a onclick="change(3)" href=http://www.webdeveloper.com/forum/archive/index.php/"#"><img src="support_button.jpg" border=0 width="" height="" alt="" style="display:block;" /></a></td><br />
</tr><br />
<!-- Sub menu 3 --><br />
<tr style="display: none" id="3"><br />
<td class="tbl"style="background-color: #FFFFFF"><br />
Sub 3<br />
</td><br />
</tr><br />
</table><br />
</body><br />
<br />
</html><!--content-->A guess since you did not supply code....<br />
<br />
1. <table cellspacing=0 cellpadding=0 border=0><br />
2. ....<br />
<td><img ........></td><br />
Make sure the </td> is on the same line as your image tag.<!--content-->oh awesome, thats just what I needed, thanks<br />
<br />
*feels stupid for not thinking of cellpadding and spacing*<!--content-->