Table margin-bottom problem

HTML & CSS
1

The problem:
There are two tables within a DIV, one on top of the other. (Yes, the tables contain tabular data.) The bottom table needs to have more space underneath, either margin-bottom or padding-bottom.

For two days now, I’ve been trying to make this work in IE7 & IE8. It works fine in Firefox, by the way, but IE does not seem to accept margin-bottom or padding-bottom for the table at the bottom.

After Google-ing and perusing forums like crazy, I have not found anything that would classify this as an IE-specific problem. So it must be me, right?

Here’s some example HTML code that “my developers” are generating in PHP:

<div id="leftSideBorder">

	<div class="header">Appraisal Checklist</div>


	<div class="content"><a onclick="openChromelessWindow('?mode=mEmployee&amp;job=appraisal_form&amp;chromeless=1','AppraisalForm');" class="viewCurrentAppraisalLink" title="View Current Appraisal">View Current Appraisal</a></div>


	<div class="clear"></div>

	<table id="TUBcAa7vAt" class="tableSelector"><thead id="thead_TUBcAa7vAt"><tr><th class="thAcSubHeader" onclick="tableReSort('TUBcAa7vAt', 0);">Factors<img id="h_FDoNZ" src="./images/toggle_empty.gif" alt="arrow"></th>    <th class="control">Score</th>    <th class="control">Comments</th>  </tr></thead><tbody id="tbody_TUBcAa7vAt"><tr class=" alt_row"><td class="fgNameTd"><a href="?mode=mAppraisal&amp;job=evalFactor&amp;criterion_id=305" title="Safetyhood">Safetyhood</a></td><td class="control"><img src="./images/x_icon_15x15.png" title="Incomplete"></td><td class="control"><img src="./images/x_icon_15x15.png" title="Incomplete"></td></tr><tr class=""><td class="fgNameTd"><a href="?mode=mAppraisal&amp;job=evalFactor&amp;criterion_id=306" title="Friendliness">Friendliness</a></td><td class="control"><img src="./images/x_icon_15x15.png" title="Incomplete"></td><td class="control"><img src="./images/x_icon_15x15.png" title="Incomplete"></td></tr></tbody></table>

	<table id="LhiQy2AMe2" class="tableSelectorLast"><thead id="thead_LhiQy2AMe2">  <tr>    <th class="thAcSubHeader" onclick="tableReSort('LhiQy2AMe2', 0);">Goals<img id="h_73mFl" src="./images/toggle_empty.gif" alt="arrow"></th>    <th class="control">Score</th>    <th class="control">Comments</th>  </tr></thead><tbody id="tbody_LhiQy2AMe2"><tr class=" alt_row"><td class="fgNameTd"><a href="?mode=mAppraisal&amp;job=evalGoal&amp;criterion_id=457" title="Test Goald">Test Goald</a></td><td class="control"><img src="./images/check_icon_15x15.png" title="Complete"></td><td class="control"><img src="./images/x_icon_15x15.png" title="Incomplete"></td></tr></tbody></table>

</div>

And here’s the essential CSS for the two tables (minus the font attributes and borders, which are defined elsewhere):

#leftSideBorder table.tableSelector {
    clear: both;
    table-layout:fixed;
    margin-bottom: 10px;
}

#leftSideBorder table.tableSelectorLast {
    height: auto;
    table-layout:fixed;
    margin-bottom: 50px;
    padding-bottom: 50px;
}

In my despair, I’ve added the clear, table-layout and height attributes.

Has anyone else had similar issues?

The margin-bottom for the first table (class=“tableSelector”) does kick in, just not for the bottom table.

Since “the developers” are generating the HTML code in PHP, I can only touch the CSS for the page elements (otherwise I would have hacked another DIV or P or something below the table).

Anyone?

2

Hi, just from that snippet alone isn’t enough to help us :). Could you possibly post a link here to show the issue?
Since you have less then 5 posts obscure the link :slight_smile:

sitehere . com / page . php

3

Ryan, thanks a ton for your reply.

Unfortunately, all of this is only on an internal test server at the moment. Saving the page “as is” in HTML doesn’t seem to do the trick completely, but here is my best effort:

htt[then]p://bit[then].ly/a29Ihy

(just remove [then] from the obscured URL)

The difference is visible if you look at it with Firefox and then compare it to IE. Thank you.

4

Wow at that page. It takes me literally (on my high speed internet) 2 minutes to load the page on a local copy of it.

You have so much Javascript in there, bloated markup (caused by using obtrusive JS), and CSS files. At the rate I’m refreshing pages it’d be better for me to just look at the CSS and make a guess. So that’s what I’m going to do :).

Your page is dependant upon JS, basing off of how much is in there. Not a great idea but it’s your call :slight_smile:

You seem to be correct in caling the 50px bottom margin, however it isn’t being used because another rule hs higher specificity in the cascade and it’s overridding the 50px rule.

*.tableSelectorLast {
    clear: both;
    margin-bottom: 10px !IMPORTANT;
}

You seem to have many !importants in the document and they should be used sparingly to avoid conflicts like these :slight_smile:

5

Ryan, thank you very much for taking a look.

Although I’m not looking for excuses, I just wanted to point out that I don’t have any say over the PHP code that compiles the XHTML and JavaScript. All I get to do at this point is try and make those pages look somewhat decent…but that’s another story altogether.

Anyway, thank you very much for helping me out with this mess. I greatly appreciate it.

6

Glad I could help :).