Results 1 to 13 of 13

Thread: CSS and Table border problem

  1. #1

    Thread Starter
    Don't Panic! Ecniv's Avatar
    Join Date
    Nov 2000
    Location
    Amsterdam...
    Posts
    5,343

    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;
    }

    BOFH Now, BOFH Past, Information on duplicates

    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...

  2. #2
    Smooth Moperator techgnome's Avatar
    Join Date
    May 2002
    Posts
    34,531

    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
    * I don't respond to private (PM) requests for help. It's not conducive to the general learning of others.*
    * I also don't respond to friend requests. Save a few bits and don't bother. I'll just end up rejecting anyways.*
    * How to get EFFECTIVE help: The Hitchhiker's Guide to Getting Help at VBF - Removing eels from your hovercraft *
    * How to Use Parameters * Create Disconnected ADO Recordset Clones * Set your VB6 ActiveX Compatibility * Get rid of those pesky VB Line Numbers * I swear I saved my data, where'd it run off to??? *

  3. #3

    Thread Starter
    Don't Panic! Ecniv's Avatar
    Join Date
    Nov 2000
    Location
    Amsterdam...
    Posts
    5,343

    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

    BOFH Now, BOFH Past, Information on duplicates

    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...

  4. #4
    PowerPoster Nightwalker83's Avatar
    Join Date
    Dec 2001
    Location
    Adelaide, Australia
    Posts
    13,344

    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

  5. #5
    King of sapila
    Join Date
    Oct 2006
    Location
    Greece
    Posts
    6,597

    Re: CSS and Table border problem

    Quote Originally Posted by Nightwalker83 View Post
    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.
    ἄνδρα μοι ἔννεπε, μοῦσα, πολύτροπον, ὃς μάλα πολλὰ
    πλάγχθη, ἐπεὶ Τροίης ἱερὸν πτολίεθρον ἔπερσεν·

  6. #6
    PowerPoster Nightwalker83's Avatar
    Join Date
    Dec 2001
    Location
    Adelaide, Australia
    Posts
    13,344

    Re: CSS and Table border problem

    Quote Originally Posted by sapator View Post
    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

  7. #7
    King of sapila
    Join Date
    Oct 2006
    Location
    Greece
    Posts
    6,597

    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.
    ἄνδρα μοι ἔννεπε, μοῦσα, πολύτροπον, ὃς μάλα πολλὰ
    πλάγχθη, ἐπεὶ Τροίης ἱερὸν πτολίεθρον ἔπερσεν·

  8. #8

    Thread Starter
    Don't Panic! Ecniv's Avatar
    Join Date
    Nov 2000
    Location
    Amsterdam...
    Posts
    5,343

    Re: CSS and Table border problem

    Quote Originally Posted by Nightwalker83 View Post
    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.

    BOFH Now, BOFH Past, Information on duplicates

    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...

  9. #9

    Thread Starter
    Don't Panic! Ecniv's Avatar
    Join Date
    Nov 2000
    Location
    Amsterdam...
    Posts
    5,343

    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?

    BOFH Now, BOFH Past, Information on duplicates

    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...

  10. #10
    Smooth Moperator techgnome's Avatar
    Join Date
    May 2002
    Posts
    34,531

    Re: CSS and Table border problem

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

    -tg
    * I don't respond to private (PM) requests for help. It's not conducive to the general learning of others.*
    * I also don't respond to friend requests. Save a few bits and don't bother. I'll just end up rejecting anyways.*
    * How to get EFFECTIVE help: The Hitchhiker's Guide to Getting Help at VBF - Removing eels from your hovercraft *
    * How to Use Parameters * Create Disconnected ADO Recordset Clones * Set your VB6 ActiveX Compatibility * Get rid of those pesky VB Line Numbers * I swear I saved my data, where'd it run off to??? *

  11. #11

    Thread Starter
    Don't Panic! Ecniv's Avatar
    Join Date
    Nov 2000
    Location
    Amsterdam...
    Posts
    5,343

    Re: CSS and Table border problem

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

    BOFH Now, BOFH Past, Information on duplicates

    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...

  12. #12

    Thread Starter
    Don't Panic! Ecniv's Avatar
    Join Date
    Nov 2000
    Location
    Amsterdam...
    Posts
    5,343

    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...

    BOFH Now, BOFH Past, Information on duplicates

    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...

  13. #13

    Thread Starter
    Don't Panic! Ecniv's Avatar
    Join Date
    Nov 2000
    Location
    Amsterdam...
    Posts
    5,343

    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>

    BOFH Now, BOFH Past, Information on duplicates

    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
  •  



Click Here to Expand Forum to Full Width