SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Enthusiast
    Join Date
    Aug 2006
    Posts
    37
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Table margin-bottom problem

    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:

    Code HTML4Strict:
    <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):

    Code CSS:
    #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. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    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

    sitehere . com / page . php
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  3. #3
    SitePoint Enthusiast
    Join Date
    Aug 2006
    Posts
    37
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #4
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    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

    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.
    Code:
    *.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
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  5. #5
    SitePoint Enthusiast
    Join Date
    Aug 2006
    Posts
    37
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #6
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Glad I could help .
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •