Table pushed down depending on number of rows...? Help please.

[clowes]

I have a php script which gets customers details from a database, and displays them in a table. When there are no customers, the table displays fine: the headers, the borders, no rows, in the right position etc.

When there is customers however, each customer row seems to push the table down about 20px. So I have the title, then if there are 100 customers a massive space, and then the table.

ATM to correct this I have used php


$number=mysql_num_rows($cust);
$wi=$number*18;
$wi="$wi".px;
echo"$wi";
echo"<table style=\"position:relative; bottom:$wi;\" width=80

This works BUT
I) It is not ideal, I'd rather it just worked correctly.
II) It leaves the massive space at the bottom of the table which looks better, but still is not great.

Unfortunately I cannot display the php script... I can only assume that it is to do with the css... I have looked to no avail.

I have attached the css script, and would be seriously appreciative if someone could take a look, and suggest a remedy.

Many Thanks

[jscheuer1]

It may have to do with how the markup is actually being generated. You could be making more tables than you intend, or adding a space creating element multiple times without realizing it. Look at the browser's 'view source' to see how the markup is generated.

If it is just the css, remove all of it as a test. The extra space will disappear. If not, it's the markup.

[clowes]

John,

Thanks for the reply.

I actually thought of doing that after posting, and played around deleting various bits of css and seeing if it worked.

Removing the following line fixed it


p, code, ul {padding-bottom: 1.2em;}

However it is also the stylesheet for my blog. Removing that fixed the customer table, but removes the spacing between paragraphs in blog posts, thus making my posts look all cramped.

If it is of any help, my customer page contains no <p> </p> tags.. thus based on my limited knowledge of css, I assumed that if it must be caused by the code, ul bit...


p{padding-bottom: 1.2em;} makes the blog posts appear correctly, but does NOT fix the customers table..

So essentially what would be the remedy to maintain the blog post appearance, AND fix the customer table?

Thankyou

[jscheuer1]

Wrap the table in a division, give it a unique id:


<div id="customertable">
PHP code that generates the table goes here
</div>

Then in your stylesheet:


#customertable, #customertable * {
padding-bottom: 0!important;
}

[clowes]

John,

Absolutely awesome, works perfectly.
Thankyou soooo much.

Cheers

[clowes]

Yikes, I realised it was too good to be true.

I have a few problems.

Some of my <tr> s look a bit wierd because there is now no padding on them.

For example I have my 'Up/Down' orderby arrows sitting on the border, which looks a bit odd. Essentially I want to maintain the padding under the content in a <td> ....

Secondly, I dont think it is related to this, simply another problem: I have a column containing a checkbox. The checkbox is about 5 px lower than the content of the other columns thus looking wierd. Anyway to fix this?

Finally again unrelated, I have a search system as such:

'I am looking for someone with a name like <text box here> whose age is between <text box here> and <text box here>'

However it appears like

'I am looking for someone with a name like
<text box here> whose age is between
<text box here> and
<text box here>'

It inserts line breaks before each text box which I do not want. Any suggestions?

Thanks

[jscheuer1]

Well, if it is just the p rule messing you up in the table:


#customertable, #customertable p {
padding-bottom: 0!important;
}

I'm not clear on the checkbox but the text inputs appear to be:


display: block;

In fact that could be affecting the checkbox, as it is an input too, so a rule like so could be causing both problems:


input {
display: block;
}

Now if all of these are in the table, we can just:


#customertable input {
display: inline!important;
}

Or, if there are no inputs that require display block, you can just find and remove the rule for that. However, it's probably there for some reason, so if the text inputs are outside the table, you must find some way to select them as different from the others that may need display block.

For instance, they could each be given a class:


<input class="nobr" type="text" . . .


.nobr {
display: inline!important;
}

But looking at your attached stylesheet I see no rule for that, but do see:


#commentform input {

margin-bottom: 3px;}

That could be responsible for the checkbox, the other inputs could just be the result of line breaks due either to <br> tags or because the text must wrap due to the width of the containing element.

There could be other styles in effect that are not in your stylesheet, like inline styles, or from another sheet. If you want more help:

Please post a link to the page on your site that contains the problematic code so we can check it out.

[clowes]

Why oh why is css so complex :(

I appreciate the effort John. I seem to have fixed the checkboxes, and the padding problem.

Unfortunately non of the suggestions worked for fixing the search part.

Although I never thought it possible, if that were to be fixed, everything might be working :) !

Again, I wish I could show you the page, however as it is a product under development Im not able too.. sorry.