SitePoint Sponsor

User Tag List

Results 1 to 9 of 9

Hybrid View

  1. #1
    SitePoint Enthusiast
    Join Date
    Oct 2006
    Posts
    33
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Border-Width in FF vs. IE

    Is there any way to get a border to not add to the total dimensions of a layout? I'm using <th> and <td> to present some tabular information, and I want some instructional text at the top of the table. The border color of <td> is the same as the background color of <th>, so my wish is to enlarge the border of the top <td> (with a colspan to run across the top of the table) so it merges nicely with the content below.

    My problem is that if I enlarge the border width, the borders stick out relative to the cells below. I've tried mucking with varying values of margin and padding to no avail. It renders fine in IE but sticks out by half the border width on each side in FF and Safari (which is presumably the standard behavior). Can anyone offer some advice to get things lined up?

    I semi-apologize for using tables for layout. Believe me, this is *much* better markup than the previous code I was working with! I've really learned a lot from the books and comments on the site.

    Thanks in advance,

    Jim Stanley

    Styles:
    th {
    border-width: 1px 0px 1px 0px;
    border-spacing: 2px;
    border-style: solid solid solid solid;
    border-color: white white white white;
    border-collapse: collapse;
    background-color: #cce7ff;
    font-size: 11px;
    font-family: verdana, arial;
    }
    td {
    border-width: 1px 1px 1px 1px;
    border-spacing: 5px;
    border-style: solid solid solid solid;
    border-color: #cce7ff #cce7ff #cce7ff #cce7ff;
    border-collapse: collapse;
    vertical-align:middle;
    background-color: #ffffcc;
    font-size: 11px;
    font-family: verdana, arial;
    }

    Markup:
    <table style="width:95%">
    <tr>
    <!-- this sticks out in FF and Safari but not in IE -->
    <td colspan=7 style="height:60px;border-width:15px;padding:15px;">
    Enter the schedule ID's, separated by the '|' character. Click the Find button to display the various statuses of the schedules.
    Charts can only be generated where the status is 'Completing' or higher. Select the check boxes and click on Generate Charts to generate the charts you need.
    </td>
    </tr>
    <tr>
    <th colspan="4" style="height:60px;padding-left:15px;text-align:left;">
    <input id="fSchedules" name="fSchedules" type="text" maxlength="500" size="80" /></th>
    <th colspan="3" style="text-align:center">
    <input type="submit" value="Find" /></th>
    <input id="fAction" name="fAction" type="hidden" value="" />
    </tr>
    <!-- column titles - the data is provided programmatically -->
    <tr>
    <th id='StatusHeader'>Select</th>
    <th>Schedule ID</th>
    <th>Institution</th>
    <th>Schedule Type</th>
    <th>Voice Status</th>
    <th>Email Status</th>
    <th>SMS Status</th>
    </tr>
    </table>

  2. #2
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    In FF The word DISASTER for borders are bigger than the Hollywood Bill Boards of LA

  3. #3
    SitePoint Wizard rguy84's Avatar
    Join Date
    Sep 2005
    Location
    Durham, NC
    Posts
    1,659
    Mentioned
    5 Post(s)
    Tagged
    0 Thread(s)
    Can you give a screen shot? All my borders go in.
    Ryan B | My Blog | Twitter

  4. #4
    SitePoint Enthusiast
    Join Date
    Oct 2006
    Posts
    33
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yup. This is what it looks like. Strangest thing.

    Now, the style sheet with td and th is external - I don't see how that could be the problem, but hey, whatever.....

    Thanks Again

    Jim Stanley
    Attached Images Attached Images

  5. #5
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,122
    Mentioned
    29 Post(s)
    Tagged
    2 Thread(s)
    Hi Jim,

    Is there any way to get a border to not add to the total dimensions of a layout?
    No, work with correct box model. The W3C has spoken and you must obey or perish.

    Use a complete doctype and IE6 > will use the same box model as other browsers - just work from that consistent model - Don't even consider working with quirks mode.

  6. #6
    SitePoint Wizard rguy84's Avatar
    Join Date
    Sep 2005
    Location
    Durham, NC
    Posts
    1,659
    Mentioned
    5 Post(s)
    Tagged
    0 Thread(s)
    We need more of your code.
    Ryan B | My Blog | Twitter

  7. #7
    SitePoint Enthusiast
    Join Date
    Oct 2006
    Posts
    33
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The good news: I found the offending statement.

    The bad news: I'm on the horns of a dilemma.

    The problem seems to be how the *table* handles the border-collapse property as as opposed to the cells. If I don't set the table's border-collapse property, the border sizes correctly, but the ugly borders appear in the other parts of the table. If I set border-collapse to "collapse", which gets me the look I desire, the border on the top cell sticks out. Dang.

    As far as DOCTYPEs go, I've tried HTML 4 strict, loose, and XHTML transitional with no effect.

    Anyone with more advice or am I just hosed and will need to figure out another way of doing this? Complete code follows for those who wish to ponder further.

    Thanks again for the help. I wouldn't know where to look if it weren't for y'all.

    Jim Stanley

    ============
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head>
    <link rel=stylesheet type="text/css" href="../css/Tracker2007.css" />
    <style type="text/css">
    /* comment this out and see what happens */
    table { border-collapse:collapse; }

    th {
    background-color:#CCE7FF;
    border-collapse:collapse;
    border-color:white;
    border-spacing:2px;
    border-style:solid;
    border-width:1px 0px;
    font-family:verdana,arial;
    font-size:11px;
    }

    td {
    background-color:#FFFFCC;
    border:1px solid #CCE7FF;
    border-collapse:collapse;
    border-spacing:5px;
    font-family:verdana,arial;
    font-size:11px;
    vertical-align:middle;
    }
    </style>
    <script language="javascript">
    function genCharts() {
    for (var k=0, elm; elm=document.forms[0][k++]
    {
    if (elm.type == "checkbox")
    if (elm.checked) {
    alert("Found checkbox with id " + elm.id + " and name " + elm.name);
    }
    }
    }

    </script>
    </head>
    <body style="text-align:center">
    <form method="post" action="MissingCharts.asp">
    <table style="width:95%">

    <tr>
    <td colspan=7 style="height:60px;border-width:15px;padding:15px;border-spacing:0px;">
    Enter the schedule ID's, separated by the '|' character. Click the Find button to display the various statuses of the schedules.
    Charts can only be generated where the status is 'Completing' or higher. Select the check boxes and click on Generate Charts to generate the charts you need.
    </td>
    </tr>
    <tr>
    <th colspan="4" style="height:60px;padding-left:15px;text-align:left;">
    <input id="fSchedules" name="fSchedules" type="text" maxlength="500" size="80" /></th>
    <th colspan="3" style="text-align:center">

    <input type="submit" value="Find" /></th>
    <input id="fAction" name="fAction" type="hidden" value="" />
    </tr>
    <tr><th id='StatusHeader' style='height:30px'>Select</th><th>Schedule ID</th><th>Institution</th><th>Schedule Type</th><th>Voice Status</th><th>Email Status</th><th>SMS Status</th></tr><tr><td style='text-align:center;height:25px' id='B8085778'><input type='checkbox' id='128805' classname='glorp' name='8085778'></td><td style='text-align:center'>8085778</td><td>EAGLE UNIFIED SCHOOL DISTRICT</td><td style='text-align:center'>Outreach</td><td style='text-align:center'>Completed</td><td style='text-align:center'></td><td style='text-align:center'></td>

    <tr><td style='text-align:center;height:25px' id='B8085777'><input type='checkbox' id='128805' classname='glorp' name='8085777'></td><td style='text-align:center'>8085777</td><td>EAGLE UNIFIED SCHOOL DISTRICT</td><td style='text-align:center'>Emergency</td><td style='text-align:center'>Completed</td><td style='text-align:center'></td><td style='text-align:center'></td>
    <tr><td style='text-align:center;height:25px' id='B8085776'><input type='checkbox' id='128805' classname='glorp' name='8085776'></td><td style='text-align:center'>8085776</td><td>EAGLE UNIFIED SCHOOL DISTRICT</td><td style='text-align:center'>Emergency</td><td style='text-align:center'>Completing</td><td style='text-align:center'>Emailing</td><td style='text-align:center'></td>
    <tr><td style='text-align:center;height:25px' id='B8085746'><input type='checkbox' id='1' classname='glorp' name='8085746'></td><td style='text-align:center'>8085746</td><td>CONNECT-ED& DEMO"</td><td style='text-align:center'>Outreach</td><td style='text-align:center'>Preparing</td><td style='text-align:center'></td><td style='text-align:center'></td>

    <tr><td style='text-align:center;height:25px' id='B8085763'><input type='checkbox' id='128805' classname='glorp' name='8085763'></td><td style='text-align:center'>8085763</td><td>EAGLE UNIFIED SCHOOL DISTRICT</td><td style='text-align:center'>Outreach</td><td style='text-align:center'>Completed</td><td style='text-align:center'></td><td style='text-align:center'></td>
    <tr><td style='text-align:center;height:25px' id='B8085754'><input type='checkbox' id='128805' classname='glorp' name='8085754'></td><td style='text-align:center'>8085754</td><td>EAGLE UNIFIED SCHOOL DISTRICT</td><td style='text-align:center'>Outreach</td><td style='text-align:center'>Completing</td><td style='text-align:center'>Emailing</td><td style='text-align:center'>Completing</td>
    <tr><td style='text-align:center;height:25px' id='B9999999'></td><td style='text-align:center'>9999999</td><td>Not Found</td><td style='text-align:center'></td><td style='text-align:center'></td><td style='text-align:center'></td><td style='text-align:center'></td>

    <tr>

    <th colspan=7 style='text-align:center;height:40px;'><input type=button value="Generate Charts" onclick="genCharts()" /></th>
    </tr>

    </table>
    </form>
    </body>
    </html>
    ============

  8. #8
    SitePoint Wizard rguy84's Avatar
    Join Date
    Sep 2005
    Location
    Durham, NC
    Posts
    1,659
    Mentioned
    5 Post(s)
    Tagged
    0 Thread(s)
    Jim,
    Can you comment/remove "border-spacing" in TH for me? (I only have IE7 at the minute.)

    border-spacing is valid when the borders are seperate...but doesn't work/valid/needed with collapse borders. FF probably does this to say there is an error here, while IE "helps" you by ignoring/hiding it.
    Ryan B | My Blog | Twitter

  9. #9
    SitePoint Enthusiast
    Join Date
    Oct 2006
    Posts
    33
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Removing the border-spacing had no effect in Firefox. I also tweaked it without the border-collapse setting for the table, also with no effect.

    All, thanks for the suggestions - I learned a lot. But, not having a lot of time to fret over this, I just expanded the table to width=100%, which dealt with the problem nicely.

    Thanks Again,

    Jim Stanley


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
  •