CSS and Table border problem

Hi

I have a problem with some css and a table.

I tried to do a layout using only CSS, but it didn't look right, so I re-did with a table.

However, only IE is displaying the borders the way I want. Firefox extends the bottom line into cell (merged) that it shouldn't to the side, and Chrome extends a line down the side...

http://img.photobucket.com/albums/v2...m/ccsprob1.jpg

Now it could be that it is a browser problem rending, if so... sigh. But if its me (more likely) can some one spot it and let me know what I did wrong?


Html code showing the two examples of the types of table...

Code:

---

<table class="MSBoxOuter">

<tr><td colspan="3" class="MSTitle">A title</td></tr>
<tr><td class="botonly">Month</td><td class="botonly">Value</td><td class="botonly">Difference</td></tr>

<tr class="MSTopSpace"><td>Mar-14</td><td>Value</td><td class="itsverybad botonly" rowspan="2">Value<img src="./pics/upr.jpg" width="16" height="16" alt="upr" /></td></tr>
<tr class="MSMidSpace"><td class="toponly">Apr-14</td><td class="topright">Value</td></tr>
<tr class="MSMidSpace"><td class="botonly">YTD Spend</td><td class="botright">Value</td><td rowspan="2" class="MSBotSpace itsgood">Value<img src="./pics/downg.jpg" width="16" height="16" alt="downg" /></td></tr>
<tr class="MSBotSpace"><td>Stuff</td><td>Value</td></tr>
</table>




<table class="MSBoxOuter">

<tr><td colspan="3" class="MSTitle">A Title</td></tr>
<tr><td class="botonly">Month</td><td class="botonly">Value</td><td class="botonly">Difference</td></tr>

<tr class="MSTopSpace"><td>Mar-14</td><td>Value</td><td class="itsgood botonly" rowspan="2">Value<img src="./pics/upg.jpg" width="16" height="16" alt="upg" /></td></tr>
<tr class="MSMidSpace"><td class="topbot" rowspan="2">Apr-14</td><td class="topbotright" rowspan="2">Value</td></tr>
<tr class="MSMidSpace"><td rowspan="2" class="MSBotSpace itsgood">Value<img src="./pics/upg.jpg" width="16" height="16" alt="upg" /></td></tr>
<tr class="MSBotSpace"><td>Target</td><td>Value</td></tr>

</table>

---

All the css.. incase someone can spot something affecting something else...

Code:

---

/* Montly Summary */




.MSDisplay {
        height: 400px;
        overflow: auto;
        border-width: 0px;
        border-style: solid;
        border-color: #0000ff;
        padding: 4px;
}


.MSRow {
        background-color: #f2f2f2;
        border-width: 2px;
        border-style: solid;
        border-color: #000000;
        border-radius: 4px;
        box-shadow: 8px 8px 4px #888888;
        padding: 4px;
        float: left;
        margin: 8px 0 8px 0;
}

.MSBoxOuter {
        width: 309px;
        border-width: 2px;
        border-style: solid;
        border-color: #000000;
        margin: 2px 8px;
        padding: 4px;
        border-radius: 4px;
        float: left;
}

.MSTitle {       
        background-color: #007700;
        color: #ffffff;
        font-size: 1.2em;
        font-weight: bold;
        text-align: center;
        border-width: 0px;
        border-style: solid;
        border-color: #00ffff;       
}

.MSTitleMini {
        background-color: #f2f2f2;
        height: 24px;
        border-width: 1px;
        border-style: solid;
        border-color: #000000;
        overflow: hidden;
}

.MSTitleMini td {
        width: 100px;
}

.MSTopSpace {
        height: 24px;
        background-color: #e2ffe2;
        vertical-align: top;
}

.MSBotSpace {
        height: 24px;
        background-color: #d8e4bc;
}


.MSMidSpace {
        font-weight: bold;
        width: 200px;
        height: 24px;
        background-color: #ebf1de;
        vertical-align: middle;
        border-width: 1px 1px 1px 0px;
}


.itsgood {
        color: #00cc00;
}

.itsbad {
        color: #886e20;
}

.itsverybad {
        color: #cc0000;
}


table {
        width: 309px;
        border: 1px solid #000000;
        border-collapse:collapse;
}

table tr {
        height: 24px;
}


table td {
        padding:0;
        margin:0;
        width: 96px;
        vertical-align: middle;
        border: solid 0px #000000;
}

table td img {
        margin: 0 2px 0 2px;
}

.topbot {
        border-style: solid;
        border-width: 1px 0 1px 0;
        border-color: #000000;
}

.topbotright {
        border-style: solid;
        border-width: 1px 1px 1px 0;
        border-color: #000000;
}

.toponly {
        border-style: solid;
        border-width: 1px 0 0 0;
        border-color: #000000;
}

.topright {
        border-style: solid;
        border-width: 1px 1px 0 0;
        border-color: #000000;
}

.botright {
        border-style: solid;
        border-width: 0px 1px 1px 0;
        border-color: #000000;
}

.botonly {
        border-style: solid;
        border-width: 0px 0px 1px 0px;
        border-color: #000000;
}

---

I don't know if your problem or not, but something to keep in mind: the HTML standards only dictate what to support, not how. So there is some discrepancy between browsers when it comes to margins, padding & borders. If you set the width of something to (for example) 100px... then add 10px margin... one of two things will happen... 1) 10px is added to the width of the element so that it's internal usable width stays at 100px ... or 2) the internal usable width is reduced to 80px (10 from the left and 10 from the right) ... Then you add in padding... and then a border... does the border add to the width, or take away from it? Bleh... Just something to keep in mind... Like I said I'm not sure it's related to your but when I see tables and padding and margins being used and discrepancies in rendering from one browser to another... that's usually the first place I go.

It sucks.

If I find time to tinker later I may revisit this in detail...

-tg

Thanks, this one is border and display... positioning I think I've got right, but the border just keeps on going when it shouldn't... weirdly only ie has done it right (display wise)... But if you get a chance later on, please let me know if I've managed to mess it up ;)

Try using conditional statements to detect with browser is being used and adjust the css accordingly.

Quote:

---

Originally Posted by Nightwalker83

Try using conditional statements to detect with browser is being used and adjust the css accordingly.

---

No.Mate? Come on, that is a big no no.

Quote:

---

Originally Posted by sapator

No.Mate? Come on, that is a big no no.

---

Why do you say this?

You shouldn't be mixing browser types and CSS specific unless absolutely necessary.
You may only get away with the Ie6 and Ie7 compatibility issues that use such a thing.
This will not only be a hell to maintain with each browser new version but it will also make the app non abstract.Also this will mean that we are using programming code to maintain CSS. It's one of the not to rules of web development.

Quote:

---

Originally Posted by Nightwalker83

Try using conditional statements to detect with browser is being used and adjust the css accordingly.

---

But the problem is that the rendered border is extended in firefox/chrome to the horizontal or vertical when I am not telling it to. The firefox extends into a merged cell, and the chrome extends vertically. All with the same css.

Top pic is from firefox, middle from chrome and bottom from ie.

All I wanted to know was have I messed up the css that badly, or is it a rendering problem. If the latter, then its basically messed up. If the former, I can fix it...

Not a show stopper, but I always have had problems with css not doing quite what I need... ;)

I did try the above in css totally, but it looks naff.

Hi

Could do with a hand on figuring out which bit went wrong... as on the chrome the users are using, it does it properly, seems just the latest version I have here is messing it up.

Any pointers in which bit I've done wrong, or should I just erase the styling and redo it?

That may not be a bad idea... I know sometimes I find that starting from scratch helps.

-tg

Ok...
will Let you know how it goes later on...

Hmmm not well, got the main box bits in but on the rowspanned could put a horizontal line on firefox, either above or below resulted in two lines, one in the middle where it shouldn't be


Ah well...

Code:

---

<html>
<head>
<style>

table {
        width: 309px;
        border: 1px solid #000000;
        border-collapse: collapse;
}

table tr {
        height: 24px;
}


table tr td {
        padding:0;
        margin:0;
        width: 96px;
        text-align: center;
        vertical-align: middle;
        border: solid 0px #000000;
}
       

table tr td.topbot {
        border-style: solid;
        border-width: 1px 0 1px 0;
        border-color: #000000;
}


table tr td.topbotright {
        border-style: solid;
        border-width: 1px 1px 1px 0;
        border-color: #000000;
}


table tr td.toponly {
        border-style: solid;
        border-width: 1px 0 0 0;
        border-color: #000000;
}


table tr td.topright {
        border-style: solid;
        border-width: 1px 1px 0 0;
        border-color: #000000;
}


table tr td.botright {
        border-style: solid;
        border-width: 0px 1px 1px 0;
        border-color: #000000;
}


table tr td.botonly {
        border-style: solid;
        border-width: 0px 0px 1px 0px;
        border-color: #000000;
}

table tr td.MSMidSpace {
        font-weight: bold;
        background-color: #ebf1de;
        vertical-align: middle;
}

table tr td.MSTopSpace {
        background-color: #e2ffe2;
}

table tr td.MSBotSpace {
        background-color: #d8e4bc;
}



</style>
</head>

<body>

<p>
<table>
<tr><td colspan="3">title</td></tr>
<tr><td class="botonly">a</td><td class="botonly">b</td><td class="botonly">c</td></tr>
<tr><td class="MSTopSpace">a</td><td class="MSTopSpace">b</td><td rowspan="2" class="MSTopSpace">c</td></tr>
<tr><td rowspan="2" class="MSMidSpace topbot">a</td><td rowspan="2" class="MSMidSpace topbotright">b</td></tr>
<tr><td rowspan="2" class="MSBotSpace">c</td>
<tr><td class="MSBotSpace">a</td><td class="MSBotSpace">b</td></tr>
</table>
</p>
<p>
<table>
<tr><td colspan="3">title</td></tr>
<tr><td class="botonly">a</td><td class="botonly">b</td><td class="botonly">c</td></tr>
<tr><td class="MSTopSpace">a</td><td class="MSTopSpace">b</td><td rowspan="2" class="MSTopSpace botonly">c</td></tr>
<tr><td rowspan="2" class="MSMidSpace topbot">a</td><td rowspan="2" class="MSMidSpace topbotright">b</td></tr>
<tr><td rowspan="2" class="MSBotSpace">c</td>
<tr><td class="MSBotSpace">a</td><td class="MSBotSpace">b</td></tr>
</table>
</p>
</body>
</html>

---