Help Please How do I get rid of the breaks in my image

Hello,

I decided to slice up my image and use tables, which I then turned into div/css.

However I have an issue because: on my site page surveysthatpayyou.net/membership.html

Theres a bunch of white spaces which i think might be due to the bottom line? tho i have no idea what this means.

The issue I have is that the two buttons are hyperlinked so I can not just print the image as a whole as it would not be clickable.

Any help would be appreciated on this not even sure what to google on this issue :S

 

well it's so strange when I try it on local it works clean Firefox n Chrome, but not in IE, it get white space below the images

 

Well, seems your divs cause this problem, you have to give each of them a certain hight, so that the whitespace is gone. There are some measurement addons for firefox, so get one, measure it and set the hights accordingly.

 

I have heights not sure if I have it correct tho, used software as im no designer.

Heres the code... and its messy so apologies...

<div id="Table_01" class="ts-1">
<div class="ts-1-col-1">
<div class="ts-1-1">
<img id="comparison_01" alt="" src="images/comparison_01.jpg" width="38" height="799" /></div>
</div>
<div border='0'class="ts-1-col-2">
<div class="ts-1-2">
<img id="comparison_02" alt="" src="images/comparison_02.jpg" width="246" height="132" /></div>
<div class="ts-1-2">
<img id="comparison_07" alt="" src="images/comparison_07.jpg" width="246" height="186" /></div>
<div class="ts-1-2">
<img id="comparison_11" alt="" src="images/comparison_11.jpg" width="246" height="203" /></div>
<div class="ts-1-2">
<img id="comparison_15" alt="" src="images/comparison_15.jpg" width="246" height="116" /></div>
<div class="ts-1-2">
<img id="comparison_19" alt="" src="images/comparison_19.jpg" width="246" height="74" /></div>
<div class="ts-1-2">
<img id="comparison_23" alt="" src="images/comparison_23.jpg" width="246" height="88" /></div>
</div>
<div border='0' class="ts-1-col-3">
<div class="ts-1-8">
<img id="comparison_03" alt="" src="images/comparison_03.jpg" width="220" height="132" /></div>
<div class="ts-1-8">
<img id="comparison_08" alt="" src="images/comparison_08.jpg" width="220" height="186" /></div>
<div class="ts-1-8">
<img id="comparison_12" alt="" src="images/comparison_12.jpg" width="220" height="203" /></div>
<div class="ts-1-8">
<img id="comparison_16" alt="" src="images/comparison_16.jpg" width="220" height="116" /></div>
<div class="ts-1-8">
<a href="basic.php">
<img border="0" id="comparison_20" alt="" src="images/comparison_20.jpg" width="220" height="74" /></a></div>
<div class="ts-1-8">
<img id="comparison_24" alt="" src="images/comparison_24.jpg" width="220" height="88" /></div>
</div>
<div border='0'class="ts-1-col-4">
<div class="ts-1-14">
<img id="comparison_04" alt="" src="images/comparison_04.jpg" width="218" height="132" /></div>
<div class="ts-1-14">
<img id="comparison_09" alt="" src="images/comparison_09.jpg" width="218" height="186" /></div>
<div class="ts-1-14">
<img id="comparison_13" alt="" src="images/comparison_13.jpg" width="218" height="203" /></div>
<div class="ts-1-14">
<img id="comparison_17" alt="" src="images/comparison_17.jpg" width="218" height="116" /></div>
<div class="ts-1-14">
<img id="comparison_21" alt="" src="images/comparison_21.jpg" width="218" height="74" /></div>
<div class="ts-1-14">
<img id="comparison_25" alt="" src="images/comparison_25.jpg" width="218" height="88" /></div>
</div>
<div border='0' class="ts-1-col-5">
<div class="ts-1-20">
<img id="comparison_05" alt="" src="images/comparison_05.jpg" width="242" height="132" /></div>
<div class="ts-1-20">
<img id="comparison_10" alt="" src="images/comparison_10.jpg" width="242" height="186" /></div>
<div class="ts-1-20">
<img id="comparison_14" alt="" src="images/comparison_14.jpg" width="242" height="203" /></div>
<div class="ts-1-20">
<img id="comparison_18" alt="" src="images/comparison_18.jpg" width="242" height="116" /></div>
<div class="ts-1-20">
<a href="platinum.php">
<img border="0" id="comparison_22" alt="" src="images/comparison_22.jpg" width="242" height="74" /></a></div>
<div class="ts-1-20">
<img id="comparison_26" alt="" src="images/comparison_26.jpg" width="242" height="88" /></div>
</div>
<div class="ts-1-col-6">
<div class="ts-1-26">
<img id="comparison_06" alt="" src="images/comparison_06.jpg" width="34" height="799" /></div>
</div>
<div class="gen-1"></div>
</div>


the css:

.ts-1 {
border: none;
text-align: left;
width: 998px;
img

}

.ts-1-col-1 {
float: left;
width: 38px;


}

.ts-1-1 {
border: none;
min-height: 1px;
padding: 0px;
width: 38px;


}

.ts-1-col-2 {
float: left;
width: 246px;


}

.ts-1-2 {
border: none;
min-height: 1px;
padding: 0px;
width: 246px;


}

.ts-1-col-3 {
float: left;
width: 220px;


}

.ts-1-8 {
border: none;
min-height: 1px;
padding: 0px;
width: 220px;


}

.ts-1-col-4 {

float: left;
width: 218px;
}

.ts-1-14 {
border: none;
min-height: 1px;
padding: 0px;
width: 218px;


}

.ts-1-col-5 {
float: left;
width: 242px;


}

.ts-1-20 {
border: none;
min-height: 1px;
padding: 0px;
width: 242px;


}

.ts-1-col-6 {
float: left;
width: 34px;


}

.ts-1-26 {
border: none;
min-height: 1px;
padding: 0px;
width: 34px;


}

.gen-1 {
clear: both;
}

if this helps?

 

Well, it will be a bit tricky to do. I have no idea why you get this, but the divs are to blame. Each and everyone.

So, you can wait till someone nails your problem or follow my advice

Give every div a unique id
give them the same hight as the picture

One question: Why did you slice up your picture? To protect it from copying? I can just hit the print button to make a screen shot and then put it back together with paint.

So, safe yourself some trouble and use the normal, non sliced picture.

 

I did want it as one image but it had longer load time and I didnt know how to hyperlink the buttons for sign up for basic and platinum :S

So i thought if I slice it and then I can hyprlink the button images.

 

It's because images are inline elements and lie upon the baseline inside the line box. Since you put these inside a div, instead of a text line, you must do 'vertical-align:bottom' for those images.

 

Thank you for your help.

In the end I used tables as suggested and then uses border='0' to get rid of the blue outline it creates when i hyperlink in frontpage.

Thank you again see: surveysthatpayyou.net/offer/

 

Glad you solved your problem, however I have to add something. What you did here was really useless, the size of all these images in the table is 2 times bigger than the whole table saved up as one image. If you wanted to slice the image up into several parts, you should have used the image as a whole entity and coded as CSS sprite.