Member Avatar for ACRDepos

I'm struggling with acquiring the same consistent table size across all three primary browsers as shown below.

- Chrome
- Firefox
- IE

I'm not sure if it's a coding issue or a table issue, but here's the primary CSS:

body{
    background-image: url(../DefaultBackground.png);
    background-repeat:repeat-x;
    background-color: #FFFFFF;
    border: 0;
    margin: 0;
}

#maincontainer{
    width: 980px;
    margin: 0 auto;
}

#topbar{
    height: 54px;
    font-family: Verdana;
    font-size: 12px;
    color: #FFFFFF;
}

#topbar table{
    border-collapse: collapse;
}

#firstdivleft{
    float: left;
    width: 430px;
}

#firstdivright{
    float: right;
    width: 550px;
}

#seconddivleft{
    float: left;
    height: 83px;
    width: 430px;
    position: relative;
}

.floatbottomleft{
    position: absolute;
    bottom: 0;
    left: 0;
}

#seconddivright{
    float: right;
    height: 83px;
    width: 550px;
}

#seconddivright table{
    border-collapse: collapse;
}

.floatbottomright{
    position: absolute;
    bottom: 0;
    right: 0;
}

textarea:focus, input:focus{
    outline: 0;
}

.welcome{
    text-align: right;
    font-family: Verdana;
    font-size: 14px;
    font-style: italic;
    color: #4c5993;
    padding-bottom: 7px;
    margin: 0;
}

.welcome a{
    color: #990000;
    text-decoration: none;
}

.welcome a:hover{
    color: #0066FF;
}

.logout{
    color: #990000;
}

#middiv{
    height: 20px;
    clear: both;
}

#mainblock{
    height: 337px;

    background: #f0f0f0;

    border-color: #999999;
    border-width: 1px;
    border-style: solid;

    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

#mainblockleft{
    width: 328px;
    float: left;
    padding-left: 10px;
}

#mainblockright{
    width: 617px;
    float: right;
    padding-right: 10px;
}

table.lefttable{
    border: 1px solid #CCCCCC;

    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;

    border-collapse: seperate;
    border-spacing: 0;

    margin: 0;
    padding: 0;

    height: 100%;
}

td.lefttabletoptd{
    border-radius: 5px 5px 0 0;
    background-color: #e6e6e7;

    font-family: Verdana;
    font-size: 14px;
    font-weight: 100px;
    color: #4c5993;

    padding: 6px;
}

td.lefttablesecondtoptd{
    background-color: #e6e6e7;

    font-family: Verdana;
    font-size: 12px;
    font-weight: 100px;
    color: #4c5993;
    padding: 0px 0px 6px 6px;
}

td.lefttablefirstmiddlelefttd{
    background-color: #f4f4f4;
    width: 123px;

    font-family: Verdana;
    font-size: 12px;
    color: #4c5993;

    border-right: 1px solid #CCCCCC;

    height: 5px;
}

td.lefttablefirstmiddlerighttd{
    background-color: #f4f4f4;

    font-family: Verdana;
    font-size: 12px;
    color: #4c5993;

    height: 5px;
}

td.lefttablemiddlelefttd{
    background-color: #f4f4f4;

    font-family: Verdana;
    font-size: 12px;
    color: #4c5993;

    padding-left: 6px;

    border-right: 1px solid #CCCCCC;
}

td.lefttablemiddlerighttd{
    background-color: #f4f4f4;

    font-family: Verdana;
    font-size: 12px;
    color: #4c5993;

    padding-left: 6px;
}

td.lefttablebottomlefttd{
    border-radius: 0 0 0px 5px;
    background-color: #f4f4f4;

    font-family: Verdana;
    font-size: 12px;
    color: #4c5993;

    height: 4px;

    border-right: 1px solid #CCCCCC;
}

td.lefttablebottomrighttd{
    border-radius: 0 0 5px 0px;
    background-color: #f4f4f4;

    font-family: Verdana;
    font-size: 12px;
    color: #4c5993;

    height: 4px;
}

td.lefttablefirstmiddlelefttd a, td.lefttablemiddlelefttd a{
    color: #4c5993;
    text-decoration: none;
}

td.lefttablefirstmiddlelefttd a:hover, td.lefttablemiddlelefttd a:hover{
    color: #0066FF;
}
Edited by Dani because: Formatting fixed (IMG bbcode not supported)
  • 2 Contributors
  • 2 Replies
  • 261 Views
  • 26 Minutes Discussion Span
  • Latest Post Latest Post by ACRDepos

Dani AI

Generated

Good call by — a simple reset often removes tiny, browser-specific defaults that make tables look different. ’s confirmation that the reset fixed the problem matches the common pattern: user‑agent styles (cellpadding, border spacing, default line-height and font rendering) plus small CSS typos or invalid values are the usual culprits.

Key checks that frequently solve cross‑browser table drift:

  • Ensure a standards doctype is used (so browsers aren’t in quirks mode).
  • Look for typos or invalid values (for example, a misspelled property or font-weight given with px — those rules get ignored).
  • Avoid extremely small fixed cell heights; use padding instead of tiny heights so text and rounding won’t shift layouts.
  • Use an explicit baseline for tables (collapse spacing, reset cell padding) and consider table-layout: fixed when column widths must be stable.
  • Compare computed styles in each browser’s dev tools and confirm the same zoom/DPI/font settings are used during tests.

Minimal baseline that helps most table inconsistencies:

/* minimal baseline for consistent table sizing */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
table { border-collapse: collapse; border-spacing: 0; table-layout: fixed; }
table, th, td { padding: 0; vertical-align: top; }

When differences remain, a reduced, standalone HTML+CSS test case makes the discrepancy obvious: strip everything to the smallest example, inspect computed values across browsers, and then reintroduce styles one rule at a time.

Recommended Answers

All 2 Replies

Member Avatar for JorgeM

The pictures you link show that the rendering is pretty close across the three browsers.

What comes to mind without looking at your CSS or HTML is that you may not be aware but browsers have built-in styles on certain elements. So what happens is that if you do not override these styles, you'll see that rendering may be different depending on the browser you use. For example, an element may be styled with a different default value for margin or padding depending on the browser.

You may want to look at applying a CSS reset so that you apply a baseline styling across the elements prior to applying your custom styles.

A quick search online will reveal some common resets you can download and use in your projets.

Member Avatar for ACRDepos

That did the trick thanks!

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.