-
Jul 16th, 2014, 07:16 AM
#1
Thread Starter
Don't Panic!
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...
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;
}
Feeling like a fly on the inside of a closed window (Thunk!)
If I post a lot, it is because I am bored at work! ;D Or stuck...
* Anything I post can be only my opinion. Advice etc is up to you to persue...
-
Jul 16th, 2014, 07:48 AM
#2
Re: CSS and Table border problem
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
-
Jul 16th, 2014, 07:56 AM
#3
Thread Starter
Don't Panic!
Re: CSS and Table border problem
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
Feeling like a fly on the inside of a closed window (Thunk!)
If I post a lot, it is because I am bored at work! ;D Or stuck...
* Anything I post can be only my opinion. Advice etc is up to you to persue...
-
Jul 17th, 2014, 03:35 AM
#4
Re: CSS and Table border problem
Try using conditional statements to detect with browser is being used and adjust the css accordingly.
when you quote a post could you please do it via the "Reply With Quote" button or if it multiple post click the "''+" button then "Reply With Quote" button.
If this thread is finished with please mark it "Resolved" by selecting "Mark thread resolved" from the "Thread tools" drop-down menu.
https://get.cryptobrowser.site/30/4111672
-
Jul 17th, 2014, 03:49 AM
#5
Re: CSS and Table border problem
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.
ἄνδρα μοι ἔννεπε, μοῦσα, πολύτροπον, ὃς μάλα πολλὰ
πλάγχθη, ἐπεὶ Τροίης ἱερὸν πτολίεθρον ἔπερσεν·
-
Jul 17th, 2014, 04:22 AM
#6
Re: CSS and Table border problem
Originally Posted by sapator
No.Mate? Come on, that is a big no no.
Why do you say this?
when you quote a post could you please do it via the "Reply With Quote" button or if it multiple post click the "''+" button then "Reply With Quote" button.
If this thread is finished with please mark it "Resolved" by selecting "Mark thread resolved" from the "Thread tools" drop-down menu.
https://get.cryptobrowser.site/30/4111672
-
Jul 17th, 2014, 04:31 AM
#7
Re: CSS and Table border problem
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.
ἄνδρα μοι ἔννεπε, μοῦσα, πολύτροπον, ὃς μάλα πολλὰ
πλάγχθη, ἐπεὶ Τροίης ἱερὸν πτολίεθρον ἔπερσεν·
-
Jul 17th, 2014, 08:00 PM
#8
Thread Starter
Don't Panic!
Re: CSS and Table border problem
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.
Feeling like a fly on the inside of a closed window (Thunk!)
If I post a lot, it is because I am bored at work! ;D Or stuck...
* Anything I post can be only my opinion. Advice etc is up to you to persue...
-
Aug 5th, 2014, 04:55 AM
#9
Thread Starter
Don't Panic!
Re: CSS and Table border problem
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?
Feeling like a fly on the inside of a closed window (Thunk!)
If I post a lot, it is because I am bored at work! ;D Or stuck...
* Anything I post can be only my opinion. Advice etc is up to you to persue...
-
Aug 5th, 2014, 07:26 AM
#10
Re: CSS and Table border problem
That may not be a bad idea... I know sometimes I find that starting from scratch helps.
-tg
-
Aug 5th, 2014, 04:41 PM
#11
Thread Starter
Don't Panic!
Re: CSS and Table border problem
Ok...
will Let you know how it goes later on...
Feeling like a fly on the inside of a closed window (Thunk!)
If I post a lot, it is because I am bored at work! ;D Or stuck...
* Anything I post can be only my opinion. Advice etc is up to you to persue...
-
Aug 6th, 2014, 03:07 PM
#12
Thread Starter
Don't Panic!
Re: CSS and Table border problem
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...
Feeling like a fly on the inside of a closed window (Thunk!)
If I post a lot, it is because I am bored at work! ;D Or stuck...
* Anything I post can be only my opinion. Advice etc is up to you to persue...
-
Aug 6th, 2014, 04:13 PM
#13
Thread Starter
Don't Panic!
Re: CSS and Table border problem
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>
Feeling like a fly on the inside of a closed window (Thunk!)
If I post a lot, it is because I am bored at work! ;D Or stuck...
* Anything I post can be only my opinion. Advice etc is up to you to persue...
Posting Permissions
- You may not post new threads
- You may not post replies
- You may not post attachments
- You may not edit your posts
-
Forum Rules
|
Click Here to Expand Forum to Full Width
|