where is this padding coming from ?

[yung23]

Hi all, I just joined today because this is driving me batty.

I am a novice user and have come across a problem..

I do not know where this default padding or table height is coming from.. and I want it gone so things are much tighter..

I put a red bar where I want the space/height or padding removed, but I do not know what is generating it...


and as you can see, I have set the bottom padding of the table in question to 0px.. but it still gives me space ?

I can edit it to anything bigger and it will take that padding on, but how do I remove the space it seems to have by default ?




http://img295.imageshack.us/img295/8799/problemc.jpg (http://img295.imageshack.us/i/problemc.jpg/)

Uploaded with ImageShack.us (http://imageshack.us)

here is my code..



<table>
<tr>

<td valign="top"><table> <td>
<div style="width: 420px; position: top; font-size: 10px;
z-index: 2;"><img src="holycrapIdidit234_files/Retailbar.png"
width="420" height="71"></div>
<div style="width: 420px; position: relative; top: -23px; left: 4px;
font-size: 14px; z-index:0;">
With our 30 years of experience, ACE is
designed to be <br>
feature-rich
and thoughtful for the sole purpose of assisting you <br>
and your staff.<br />
<br />
Ace Retail POS 3000 is a fully integrated and customizable <br />
Point of Sale solution which gives you absolute control over all aspects <br />
of your business - sales, inventory, customers, vendors, purchasing, receiving, credit card processing and integrated accounting with an <br />
easy to use, professional customer checkout able to be tailor made <br />
using many different features, creating a single solution for all your business needs. </div>
</td></table>
</td>

<td style="padding-bottom: 0px;">
<div><table > <td>
<div style="width: 420px; position: top; font-size: 0px; z-index: 2;"><img src="holycrapIdidit234_files/Mobilebar.png"
width="420" height="71"></div>
<div style="width: 420px; position: relative; top: -23px; left: 4px;
font-size: 14px; z-index:0;">Extend ACE to your business' entire space. ACE Mobile<br />
makes order taking, inventory management and more, simple<br />
and effective.</div>
</td></table></div>
<div><table > <td>
<div style="width: 420px; position: top; font-size: 0px; z-index: 2;"><img src="holycrapIdidit234_files/eComm.png"
width="420" height="71"></div>
<div style="width: 420px; position: relative; top: -23px; left: 4px;
font-size: 14px; z-index:0;">Elevate your business to the world through ACE's e-Commerce<br />
package. If you already have a webstore, integrate with ACE for better management.</div>
</td></table></div>
<div><table><td style="padding-bottom:0px">
<div style="width: 420px; position: top; font-size: 0px; z-index: 2;"><img src="holycrapIdidit234_files/Wholesalebar.png"
width="420" height="71"></div>
<div style="width: 420px; position: relative; top: -23px; left: 4px;
font-size: 14px; z-index:0;">Find out how ACE's specialized and easy-to-use Ordering &amp;<br />
Shipping system can improve your sales volume, in an easy way!</div>
</td></table></div>
</td>


</td>

</tr>
</table>

[yung23]

setting max height to the <td> doesn't seem to help either..

aaarg !


the "div" I use seem to have some sort of hidden "runaround".... ?


when I delete the div where my text is "layered" the td below it instantly snaps right into place.. with no spacing..

so how I get it to snap into place right under the div with text ? with no spacing ?


anyone ?


this is what has caused my issue..

I wanted to use "banner" images which stick out a little as you can see..

but I wanted the text beneath the banners, snugging up against the banner.. so I tried to use this as an example

http://www.echoecho.com/csslayers.htm





eta..

so..... we figured out what is happening..its the damn -23 offset which puts that div into the one above it..
the offset is not filled in by the td or div below it..

so to fix this.. I must ? offset the <td> below the top one.. and so on and so on.. but it will still leave me with a space at the bottom of the most bottom one..

so this approach sucks.


I am now simply going to use two <td>s or <div>s snuggly together as they do normally.. then place the little image of the mobile phone or earth.. on top of those divs and position them to the right...

but do I float them or use the z-index to do so ?

[djr33]

I believe this is because of using tables for layout.
While tables are easier to write than setting up divs, it is very difficult to format them to look exactly the way you want.
I suggest using divs instead of tables.

I think the reason this is happening is because the two cells, one on the right and the other on the left, are trying to be the same size. So the space in the middle appears so that the very tall item on the left lines up with the top and bottom of the items on the right.

If you use two independent columns of divs, this should be easier.

[yung23]

that is one of the issues, but I had assumed if I could get rid of the empty space on the tables on the right, the left one would size itself to fit better..

for the left side I can still add info and an image.. I dont mind that empty space.

the problem seems to be the offsetting of the divs on the right.

using the -23 value to push that div into but over (due to the z-indexing) the other one is where the problem is.

the div offset still "reserves" the space for itself beneath the upper div..

and its the same either way.. I could push the upper div down into the bottom one, but then I am left with useless empty,"reserved" spacing on the top where that div has been pushed from..


I could of course get rid of any issues just by using rasterized text as part of the images.. but that's a no no for web design and SEO.. right ?



I designed my page using tables and table rows for the most part.. I can provide the whole page if needed..

but could I have designed the whole page simply using divs and absolute? positioning.. I haven't tried that before.. but that might be the answer..

this would be so much easier using Apdivs, but even those are a no-no.. so I hear.



eta.. man that was sooo easy using apdivs..


this has got to be too good to be true. what is wrong with using ApDivs and why don't more designers seem to be using them ?
it does the CSS work for you !





<style type="text/css">
#apDiv1 {
position:absolute;
left:57px;
top:143px;
width:362px;
height:71px;
z-index:1;
}
#apDiv2 {
position:absolute;
left:60px;
top:258px;
width:424px;
height:52px;
z-index:2;
}
#apDiv3 {
position:absolute;
left:60px;
top:190px;
width:414px;
height:66px;
z-index:3;
}
#apDiv4 {
position:absolute;
left:60px;
top:190px;
width:414px;
height:61px;
z-index:3;
}
#apDiv5 { position:absolute;
left:57px;
top:143px;
width:362px;
height:71px;
z-index:1;
}
#apDiv6 { position:absolute;
left:57px;
top:143px;
width:362px;
height:71px;
z-index:1;
}
#apDiv7 {
position:absolute;
left:63px;
top:305px;
width:417px;
height:65px;
z-index:4;
}
#apDiv8 {
position:absolute;
left:59px;
top:371px;
width:425px;
height:58px;
z-index:5;
}
#apDiv9 {
position:absolute;
left:62px;
top:418px;
width:417px;
height:69px;
z-index:6;
}
</style>


<div id="apDiv1"><img src="holycrapIdidit234_files/Mobilebar.png" width="420" height="71" /></div>
<div id="apDiv7">Elevate your business to the world through ACE's e-Commerce<br />
package. If you already have a webstore, integrate with ACE for better management.</div>
<div id="apDiv3">Extend ACE to your business' entire space. ACE Mobile<br />
makes order taking, inventory management and more, simple<br />
and effective.</div>
<div id="apDiv2"><img src="holycrapIdidit234_files/eComm.png" alt="" width="420" height="71" /></div>
<div id="apDiv8"><img src="holycrapIdidit234_files/Wholesalebar.png" width="420" height="71" /></div>

<div id="apDiv9">Find out how ACE's specialized and easy-to-use Ordering <br />
and Shipping system can improve your sales volume, in an easy way!</div>



= http://img801.imageshack.us/img801/2049/toogoodtobetrue.gif (http://img801.imageshack.us/i/toogoodtobetrue.gif/)



okay, now that I've tried to put my apdivs into my already existing layout with tables... they aren't staying where I want.. maybe I can rebuild them in the page instead of pasting them into it and get better results..

[yung23]

best solution yet...

use the image as a background in a table.


now I can put many tables up against each other :)


<table width="420" height="80" style="background-image:url(holycrapIdidit234_files/Mobilebar.png);background-repeat:no-repeat;">
<td><br />
<br />
Extend ACE to your business' entire space. <br />
ACE Mobile makes order taking, inventory management and more, simple and effective.</td>
</table>