space between images in tables

Nobu

[H]F Junkie
Joined
Jun 7, 2007
Messages
9,884
I've been working on my website for a while now and I can't seem to get rid of the space between the images in the tables in the div on the left. I've done it before, but it was before I switched to XHTML 1.1 and I can't quite get it working again. For the "Links" and "Outside Links" I could put them in a list and remove the space above and below, but unless I put a little padding between the images in "Suggested Visits", there is (what appears to be) gradually increasing space between the cells/images.

Any ideas?

edit: screenshot of what I'm seeing.
edit2: Alternate link to HTML.
 
the link you gave goes to a blank page..

when trying to load up the domain by itself it ground to a halt for more than two minutes..
 
The host is slow, that's pretty much all I can say about that. It's free webhosting, so I can't complain. If you could try again, I'll post an alternative link to the source in a minute. ^.^

Oh, the sub-domain(nobu.ourprofile.us) by itself leads to a redirect page... I've got to work on that some also. lol
(reason being, the host doesn't let me use index.xhtml as the main page, so I redirected from a index.html page, but apparently I need to fix it.)
 
Nope.. your website is still showing blank to me

Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD>
<META http-equiv=Content-Type content="text/html; charset=windows-1252"></HEAD>
<BODY></BODY></HTML>

Can't bounce to the other link - work's firewall is killing it as 'peer to peer'.

I did find this though:
Another forum's post on the same issue

they are advocating in your css to add this:
Code:
#img1 img{ 
  border: none; 
}
 
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD>
<META http-equiv=Content-Type content="text/html; charset=windows-1252"></HEAD>
<BODY></BODY></HTML>
What's this from?
Can't bounce to the other link - work's firewall is killing it as 'peer to peer'.
Sorry about that... You're talking about the link in edit2, right?
Code:
#img1 img{border: none; }
'img1' would be used as 'id="img1"' and would apply a border of 'none' to all images within whatever has the id of 'img1', correct?

However, with this:
Code:
 html {margin: 0; padding: 0; }
 body {margin: 0; padding: 0; font-size: 80%; background: #328 url(http://i47.photobucket.com/albums/f179/benjo316/OpenGLScreensaver.png); background-color: navy; color: #333399;}

 h1, h2, h3
  {
   margin: 0;
   padding: 0;
   text-align: center;
   vertical-align: middle;
  }
 h1 {color: maroon; }
 h2 {color: #07873C; }
 h3 {color: #078770; }

 div#container {width: 90%; margin: 0px 4.5%; }
 div#welcome {width: 60%; }
 div#leftbox
  {
   float: left;
   width: 24%;
   padding: 10px 0 0 0;
   margin: 0 0 0 1%;
  }
 #middlebox
  {
   margin: 0 27% 0 27%;
   border-left: 3px solid #000;
   border-right: 3px solid #000;
   padding: 10px 0 0 0;
   width: auto;
  }
 div#rightbox
  {
   float: right;
   width: 24%;
   padding: 10px 0 0 0;
   margin: 0 1% 0 0;
  }
 div.headers
  {
   padding: 1% 0 1% 0;
   border-bottom: 3px double gray;
  }
 div.box
  {
   padding-bottom: 10px;
   border-bottom: 3px double gray;
  }
 .scrolls {overflow: scroll; height: 100%; width: 100%; }

 img {width: 100%; height: 80%; padding: 0; margin: 0; border: none; clip: auto; }
 img.center {margin-left: auto; margin-right: auto; }
 ul.links {list-style-type: none; padding-left: 0; margin-left: 0; }
 img.links, a.links {margin-left: 2%; padding-left: 2%; width: 150px; height: 20px; } 
 img.siteButton {height: 32px; width: 88px; }
 hr {width: 85%; border: 1px; color: navy; background-color: #333399; }
 table {border-spacing: 0 0; }
 table.siteButtons {width: 176px; }
 td {padding: 0; }
 .center {text-align: center; }
 .center table {margin-left: auto; margin-right: auto; margin-top: 1em; margin-bottom: 1em; text-align: left; }
 .clear {clear: both; }
 .zero {padding: 0 0 0 0; margin: 0 0 0 0; border: none;  }
 p.t {padding: 0 1em 0 1em; margin-left: 2em; text-indent: -1em; }

 div#rightbox, #middlebox, div#leftbox
  {
   border: 3px gray double;
   background-image: url(http://i47.photobucket.com/albums/f179/benjo316/Pictures%20for%20My%20Site/tablebg.png);
   text-align:left;
  }
And this:
Code:
<div id="leftbox">
[SNIP]
<div class="center">

 <table class="siteButtons">
  <tr>
   <td class="zero">
    <a href="http://deviantart.com/">
     <img class="zero siteButton" title="deviantART (Art Related Stuff)" alt="deviantART" src="http://i47.photobucket.com/albums/f179/benjo316/deviantART_Button_88x31_by_basstar.jpg" />
    </a>
   </td>
   <td class="zero">

    <a href="http://ubuntu.com/" title="Ubuntu (Free Linux OS)">
     <img class="zero siteButton" alt="Ubuntu" src="/images/Ubuntu-button.png" />
    </a>
   </td>
  </tr>
[SNIP]
</table>
</div>
</div>
It still has the gaps.
(Sorry about the long reply)
edit:Changed; gaps remain. >.<
 
Something's odd about that... I get the whole site from the same link. here's the top of the page source:
Code:
     <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>

<title>Benjamin Blanco's Web Site</title>
[ETC...]
I'll try adding the border=0 in a minute. Was hoping to keep it in css, but if that's what fixes it, I guess it'll do.
I may try the 'display: block' as suggested in the link... although I don't know if that will help.

I do have to check something though... the background on my page isn't loading anymore. Also, I read somewhere that IE doesn't agree with XHTML 1.1, I'll have to check on that again as well.

edit: 'border=0' isn't supported in XHTML 1.1, may have to switch DOCTYPEs to see the result.(Didn't see a change when I used it just now). I'll probably switch to XHTML 1.0 Transitional, since it's more flexible and should support more browsers. I'll try 'display:block' first, then if it doesn't work switch doctypes, and if all else fails just bunch them together with '<br />' and such. ^.^
About the background not loading, seems the photobucket server serving it is down. >.<
 
Something's odd about that... I get the whole site from the same link. here's the top of the page source:
Code:
     <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>

<title>Benjamin Blanco's Web Site</title>
[ETC...]
I'll try adding the border=0 in a minute. Was hoping to keep it in css, but if that's what fixes it, I guess it'll do.
I may try the 'display: block' as suggested in the link... although I don't know if that will help.

I do have to check something though... the background on my page isn't loading anymore. Also, I read somewhere that IE doesn't agree with XHTML 1.1, I'll have to check on that again as well.

edit: 'border=0' isn't supported in XHTML 1.1, may have to switch DOCTYPEs to see the result.(Didn't see a change when I used it just now). I'll probably switch to XHTML 1.0 Transitional, since it's more flexible and should support more browsers. I'll try 'display:block' first, then if it doesn't work switch doctypes, and if all else fails just bunch them together with '<br />' and such. ^.^
About the background not loading, seems the photobucket server serving it is down. >.<

Sorry for a sudden drop in helpful information, but my brain is hitting the wall and fairly fried at work right now... if I think of something more helpful, I'll hopefully post it...
 
No problem. ^.^
'display: block' seems to have done it for the most part. It dropped the extra space between the images. Now all that's left is the huge gaps in the table. :D

edit: Yeah, the missing background was due to a problem with routing between my computer and Photobucket(not at my personal router).
Haven't figured out what's spacing the buttons out yet. It's 9:30PM and I don't want to stay up until 3AM again, so I guess I'll stop for tonight. I'll check back in the morning. ^.^
 
Thanks for all the help. Found some <p></p> tags that were sitting around the images, bumping them apart. Removed them and everything is displaying appropriately, at least on Firefox. I'm unable to test on other browsers, so if anyone would like to, it would help. ^.^
 
Back
Top