CODEWITHSUNDEEP
cssgoogle-chromecross-browser
user1945782
user1945782

Reputation:

Chrome CSS border issue

I've found some very strange behaviour with Chrome with respect to the following CSS...

CSS:

table.addressBody {
    width: 100%;
    min-width: 100%;
}
table.addressBody tr td {
    padding:    4px;
    width:      40%;
    min-width:  40%;
    max-width:  40%;
    border:     none;
    vertical-align: middle;
}
table.addressBody tr td.left, table.addressBody tr td.right {
    background-color: White;
    border: 2px solid #aaa;
}
table.addressBody tr td.centre {
    width:      20%;
    min-width:  20%;
    max-width:  20%;
    text-align: center;
}

HTML:

<div class="fitWidth centre">
    <strong>Mr Smith</strong><br />
    29/05/2014 11:17:00 - Department, Site
</div>
<table class="addressBody">
    <tr>
        <td class="left">
            <select name="ctl00$phBody$repPatients$ctl01$ddlPickup" id="ctl00_phBody_repPatients_ctl01_ddlPickup"></select>
        </td>
        <td class="centre" style="border: none;">&nbsp;</td>
        <td class="right">
            <select name="ctl00$phBody$repPatients$ctl01$ddlDest" id="ctl00_phBody_repPatients_ctl01_ddlDest"></select>
        </td>
    </tr>
    <tr>
        <td class="leftShadow" colspan="2">
            <img src="../img/other/bottomShadowLt.png" alt="Shadow" />
        </td>
        <td class="rightShadow">
            <img src="../img/other/bottomShadowRt.png" alt="Shadow" />
        </td>
    </tr>
</table>

(Fiddle)

The problem is the centre cell of the table which has a bottom border, despite the fact that I haven't actually specified that there should be one. I've tried the same code in both IE and FF and both produce the desired result (two outer cells with borders and the inner without).

I have also tried coding the CSS in turn for each border on all of the cells, but as soon as I code the #left cell bottom-border the centre cell is also bordered on the bottom. Also, notice in relation to this question there is no border collapse in the code (unless it's part of Fiddle itself).

Can anyone spot anything obvious that I've missed or know of any bug with Chrome that has a workaround?

-- EDIT --

Example of problem

Upvotes: 1

Views: 1810

Answers (2)

user1945782
user1945782

Reputation:

As it turns out, my post is, in fact, a duplicate of this question, and so, if you wish to close it, please feel free.

Upvotes: 0

Conor Wright
Conor Wright

Reputation: 51

But you did specify that it have a bottom border:

table.addressBody tr td.centre {
    width:      20%;
    min-width:  20%;
    max-width:  20%;
    border-bottom: 2px solid #aaa; <---
    text-align: center;
}

Upvotes: 1

Related Questions