Help - Search - Members - Calendar
Full Version: help! white spaces between my images on my website
HTMLHelp Forums > Web Authoring > Markup (HTML, XHTML, XML)
cjc5105
Hey guys,

I need help fast! I'm a Peace Corps volunteer and I only get access to the internet very, very seldom. I'm trying to set up a donation page for a project I'm doing, so please try to help me out (yea, im playing the peace corps card haha)

Also, I'm a total noobie at using html and css, so excuse the misused terminology...

I used a template to make a website. From this template, I modified the images to change their color and design using gimp (99% sure I didn't change any of the image sizes).

When I was doing all of this, I was using Aptana studio to preview the website layout as I went along. I finished the look of the homepage and decided to use weebly.com as my host.

In weebly's design function, I pasted the html code from Aptana (only changing the part that says the files are coming from [from my folder on my mac to the managed files on weeblys website]). Now my website shows a ton of white spaces between all the images! It doesnt line up at all. The same code lines up perfectly in aptana studio preview!

I should note that when I viewed the website on an old pc, it loaded fine...but on my mac it doesnt and on the other computers I used, I saw these white spaces.

also, im pretty sure none of the images have white spaces around the edges.

The website is www.noemptyshelves.org

I'll just paste the html and css code here:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<title>%%TITLE%%</title>
<meta name="generator" content=
"HTML Tidy for Linux (vers 6 November 2007), see www.w3.org">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!-- ImageReady Preload Script (index.psd) -->
<!-- End Preload Script -->
<link href="css/styles.css" rel="stylesheet" type="text/css">
</head>
<body>
<center><!-- ImageReady Slices (index.psd) -->
<table id="Table_01" width="776" height="701" border="0"
cellpadding="0" cellspacing="0">
<tr>
<td colspan="2" rowspan="2"><img src="/files/theme/m1.jpg" width="163" height=
"43" alt=""></td>
<td colspan="10"><img src="/files/theme/m4.jpg" width="469" height="17" alt=
""></td>
<td colspan="2" rowspan="11"><img src="/files/theme/m6.jpg" width="143" height=
"464" alt=""></td>
<td><img src="/files/theme/spacer.gif" width="1" height="17" alt=""></td>
</tr>
<tr>
<td colspan="10" rowspan="6"><img src="/files/theme/m5.jpg" width="469" height=
"242" alt=""></td>
<td><img src="/files/theme/spacer.gif" width="1" height="26" alt=""></td>
</tr>
<tr>
<td rowspan="4"><img src="/files/theme/m2.jpg" width="71" height="171" alt=
""></td>
<td><a href="http://www.noemptyshelves.org/"><img name="about" src="/files/theme/about.jpg" width="92"
height="41" border="0" alt="about"></a></td>
<td><img src="/files/theme/spacer.gif" width="1" height="41" alt=""></td>
</tr>
<tr>
<td><a href="#"><img name="friends" src="/files/theme/friends.jpg" width="92"
height="42" border="0" alt="friends"></a></td>
<td><img src="/files/theme/spacer.gif" width="1" height="42" alt=""></td>
</tr>
<tr>
<td><a href="#"><img name="hobby" src="/files/theme/hobby.jpg" width="92"
height="45" border="0" alt="hobby"></a></td>
<td><img src="/files/theme/spacer.gif" width="1" height="45" alt=""></td>
</tr>
<tr>
<td><a href="#"><img name="music" src="/files/theme/music.jpg" width="92"
height="43" border="0" alt="music"></a></td>
<td><img src="/files/theme/spacer.gif" width="1" height="43" alt=""></td>
</tr>
<tr>
<td colspan="2" rowspan="11"><img src="/files/theme/m3.jpg" width="163" height=
"486" alt=""></td>
<td><img src="/files/theme/spacer.gif" width="1" height="45" alt=""></td>
</tr>
<tr>
<td rowspan="8"><img src="/files/theme/m9.jpg" width="62" height="387" alt=
""></td>
<td colspan="8"><img src="/files/theme/ab1.jpg" width="344" height="32" alt=
""></td>
<td rowspan="8"><img src="/files/theme/m10.jpg" width="63" height="387" alt=
""></td>
<td><img src="/files/theme/spacer.gif" width="1" height="32" alt=""></td>
</tr>
<tr>
<td><img src="/files/theme/ab2.jpg" width="32" height="54" alt=""></td>
<td colspan="5" align="left" valign="top"><span class="text1">No
Empty Shelves Wants Your Help!</span> We are collecting new
volunteers in both the United States and in Zambia! More Peace
Corps Volunteers are sending out requests to partners... <a href=
"#" class="a">read more</a></td>
<td colspan="2" align="left" valign="top"><img src="/files/theme/ab3.jpg" width=
"24" height="54" alt=""></td>
<td><img src="/files/theme/spacer.gif" width="1" height="54" alt=""></td>
</tr>
<tr>
<td colspan="8"><img src="/files/theme/fam1.jpg" width="344" height="42" alt=
""></td>
<td><img src="/files/theme/spacer.gif" width="1" height="42" alt=""></td>
</tr>
<tr>
<td colspan="2"><img src="/files/theme/fam2.jpg" width="101" height="77" alt=
""></td>
<td colspan="5" align="left" valign="top" bgcolor="#AA601F" class=
"text2"><span class="text3">Marilyn McPheron</span> Marilyn has
generously offered to pay for the first shipment of books that will
be donated to the Chataika Library <a href="#" class="b">read
more</a></td>
<td><img src="/files/theme/fam3.jpg" width="18" height="77" alt=""></td>
<td><img src="/files/theme/spacer.gif" width="1" height="77" alt=""></td>
</tr>
<tr>
<td colspan="8"><img src="/files/theme/gal1.jpg" width="344" height="39" alt=
""></td>
<td rowspan="2"><a href="#"><img name="contact" src="/files/theme/contact.jpg"
width="85" height="53" border="0" alt="contact'"></a></td>
<td rowspan="2"><img src="/files/theme/m7.jpg" width="58" height="53" alt=
""></td>
<td><img src="/files/theme/spacer.gif" width="1" height="39" alt=""></td>
</tr>
<tr>
<td colspan="3" rowspan="2"><a href="#" onmouseover=
"window.status='view larger'; return true;" onmouseout=
"window.status=''; return true;"><img src="/files/theme/view-larger.jpg" width=
"112" height="82" border="0" alt="view larger"></a></td>
<td rowspan="2"><a href="#" onmouseover=
"window.status='view larger'; return true;" onmouseout=
"window.status=''; return true;"><img src="/files/theme/view-larger-31.jpg"
width="92" height="82" border="0" alt="view larger"></a></td>
<td rowspan="2"><a href="#" onmouseover=
"window.status='view larger'; return true;" onmouseout=
"window.status=''; return true;"><img src="/files/theme/view-larger-32.jpg"
width="97" height="82" border="0" alt="view larger"></a></td>
<td colspan="3" rowspan="2"></td>
<td><img src="/files/theme/spacer.gif" width="1" height="14" alt=""></td>
</tr>
<tr>
<td colspan="2" rowspan="4"><img src="/files/theme/m8.jpg" width="143" height=
"183" alt=""></td>
<td><img src="/files/theme/spacer.gif" width="1" height="68" alt=""></td>
</tr>
<tr>
<td colspan="8"><img src="/files/theme/m11.jpg" width="344" height="61" alt=
""></td>
<td><img src="/files/theme/spacer.gif" width="1" height="61" alt=""></td>
</tr>
<tr>
<td colspan="10"><img src="/files/theme/index_30.jpg" width="469" height="9"
alt=""></td>
<td><img src="/files/theme/spacer.gif" width="1" height="9" alt=""></td>
</tr>
<tr>
<td colspan="10" align="center" valign="middle" background=
"b_links.jpg" class="text4"><a href="#">Home</a> | <a href=
"#">About</a> | <a href="#">Donate</a> | <a href="#">News</a> |
<a href="#">Contact</a> | <a href="#">Partners</a> | <a href="#">In
Their Words</a><br>
<span class="text5">Copyright No Empty Shelves
2011<br></span></td>
<td><img src="images/spacer.gif" width="1" height="45" alt=""></td>
</tr>
<tr>
<td><img src="images/spacer.gif" width="71" height="1" alt=""></td>
<td><img src="images/spacer.gif" width="92" height="1" alt=""></td>
<td><img src="images/spacer.gif" width="62" height="1" alt=""></td>
<td><img src="images/spacer.gif" width="32" height="1" alt=""></td>
<td><img src="images/spacer.gif" width="69" height="1" alt=""></td>
<td><img src="images/spacer.gif" width="11" height="1" alt=""></td>
<td><img src="images/spacer.gif" width="92" height="1" alt=""></td>
<td><img src="images/spacer.gif" width="97" height="1" alt=""></td>
<td><img src="images/spacer.gif" width="19" height="1" alt=""></td>
<td><img src="images/spacer.gif" width="6" height="1" alt=""></td>
<td><img src="images/spacer.gif" width="18" height="1" alt=""></td>
<td><img src="images/spacer.gif" width="63" height="1" alt=""></td>
<td><img src="images/spacer.gif" width="85" height="1" alt=""></td>
<td><img src="images/spacer.gif" width="58" height="1" alt=""></td>
<td></td>
</tr>
</table>
<!-- End ImageReady Slices --></center>
<div style='display:none;'>%%MENU%%</div>
<div style='display:none;'>%%CONTENT%%</div>
<div style='padding: 20px; width:100%; text-align:center;'>%%WEEBLYFOOTER%%</div>
</body>
</html>






body {
margin-bottom: 0px;
font-family: Verdana;
font-size: 10px;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
color: #525252;
}
td, textarea, input, select {
font-family: Tahoma;
font-size: 10px;
color: 878787;
font-weight: normal;
}
.tableDetail {
font-size: 10px;
font-family: Verdana;
color: #49394E;
}
a:link {
color: DE0000;
font-family: tahoma;
font-size: 10px;
font-weight: bold;
text-decoration: none;

}
a:hover {
color: #000000;
font-family: tahoma;
font-size: 10px;
font-weight: bold;
font-style: normal;
line-height: normal;
font-variant: normal;
text-transform: none;
border: thin none #FFFFFF;
text-decoration: underline;
}
a:visited {
color: DE0000;
font-family: tahoma;
font-size: 10px;
font-weight: bold;
font-style: normal;
text-decoration: none;

}

.text1 {
font-family: tahoma;
font-size: 10px;
color: B25222;
font-weight: bold;
}
.text2 {
font-family: tahoma;
font-size: 10px;
font-weight: normal;
color: #FFFFFF;
}
.text3 {
font-family: tahoma;
font-size: 10px;
font-weight: bold;
color: #FFFFFF;
}
.text4 {
font-family: tahoma;
font-size: 10px;
font-weight: normal;
color: DE0000;
}
.text5 {
font-family: tahoma;
font-size: 10px;
font-weight: normal;
color: AA6020;
}
.text6 {
font-family: tahoma;
font-size: 10px;
font-weight: bold;
color: #FFFFFF;
}
.text7 {
font-family: tahoma;
font-size: 10px;
font-weight: normal;
color: #000000;
}
.text8 {

font-family: tahoma;
font-size: 10px;
font-weight: normal;
color: 94AEC5;
}
.text9 {


font-family: tahoma;
font-size: 10px;
font-weight: normal;
color: 4E4E4E;
}
.frame {
border: 1px solid #A6A6A6;
}
.designed_by {
font-family: Arial;
font-size: 8.5px;
font-weight: lighter;
color: #000000;
}
a.a:link {
font-family: tahoma;
font-size: 10px;
font-weight: normal;
color: B25222;
text-decoration: underline;
}
a.a:hover {
font-family: tahoma;
font-size: 10px;
font-weight: normal;
color: #000000;
text-decoration: none;
}
a.a:visited {
font-family: tahoma;
font-size: 10px;
font-weight: normal;
color: B25222;
text-decoration: underline;
}
a.b:link {

font-family: tahoma;
font-size: 10px;
font-weight: normal;
color: #FFFFFF;
text-decoration: underline;
}
a.b:hover {
font-family: tahoma;
font-size: 10px;
font-weight: normal;
color: #FFFFFF;
text-decoration: none;
}
a.b:visited {
font-family: tahoma;
font-size: 10px;
font-weight: normal;
color: #FFFFFF;
text-decoration: underline;
}
a.c:link {
font-family: tahoma;
font-size: 10px;
font-weight: bold;
color: #FFFFFF;
text-decoration: none;
}
a.c:hover {

font-family: tahoma;
font-size: 10px;
font-weight: bold;
color: #000000;
text-decoration: none;
}
a.c:visited {

font-family: tahoma;
font-size: 10px;
font-weight: bold;
color: #FFFFFF;
text-decoration: none;
}
a.d:link {



font-family: tahoma;
font-size: 10px;
font-weight: normal;
color: #FFFFFF;
text-decoration: underline;
}
a.d:hover {


font-family: tahoma;
font-size: 10px;
font-weight: bold;
color: #FFFFFF;
text-decoration: underline;
}
a.d:visited {


font-family: tahoma;
font-size: 10px;
font-weight: normal;
color: #FFFFFF;
text-decoration: underline;
}
a.e:link {

font-family: tahoma;
font-size: 10px;
font-weight: bold;
color: 944F23;
text-decoration: underline;
}
a.e:hover {

font-family: tahoma;
font-size: 10px;
font-weight: bold;
color: #4E4E4E;
text-decoration: underline;
}
a.e:visited {

font-family: tahoma;
font-size: 10px;
font-weight: bold;
color: 944F23;
text-decoration: underline;
}
a.f:link {

font-family: tahoma;
font-size: 10px;
font-weight: normal;
color: 594B13;
text-decoration: underline;
}
a.f:hover {

font-family: tahoma;
font-size: 10px;
font-weight: normal;
color: #4E4E4E;
text-decoration: underline;
}
a.f:visited {

font-family: tahoma;
font-size: 10px;
font-weight: normal;
color: 594B13;
text-decoration: underline;
}
a.g:link {

font-family: tahoma;
font-size: 10px;
font-weight: bold;
color: #000000;
text-decoration: underline;
}
a.g:hover {

font-family: tahoma;
font-size: 10px;
font-weight: bold;
color: #FF6600;
text-decoration: underline;
}
a.g:visited {

font-family: tahoma;
font-size: 10px;
font-weight: bold;
color: #000000;
text-decoration: underline;
}
.inputstyle {
font-family: tahoma;
font-size: 10px;
font-weight: normal;
color: #5F726F;
body {background-image:url('http://farm3.static.flickr.com/2651/5707329336_3f83f02ab3_m.jpg');}
background-color: #E2EDEB;
border: 1px solid #333333;
}
xxkasperxx
try and add
CODE
<img src="your image.png" width="1" height="14" left="0" top="0">


if you do that and change the left and top values, you should beable to place the picture where ever you want.
Frederiek
QUOTE(xxkasperxx @ May 21 2011, 06:38 PM) *

try and add
CODE
<img src="your image.png" width="1" height="14" left="0" top="0">


if you do that and change the left and top values, you should beable to place the picture where ever you want.

There are no top and left attributes for the <img> tag. See http://htmlhelp.com/reference/html40/special/img.html
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2014 Invision Power Services, Inc.