SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member
    Join Date
    Jul 2003
    Location
    St. Louis
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Table Element Width problem

    I'm moving from using the old cellspacing, cellpadding, border in the html to CSS.

    Ok, I have a selector defined as:
    Code:
    td.mborder					{
    	width: 6px;
    	padding: 0px 0px 0px 0px;
    	border-width: 0px;
    	border-spacing: 0px;
    	background-image: url(../images/border.jpg);
    	background-color: #dddddd;
    }
    Yet, the element is 8px wide. I've looked through the DOM inspector for FF to try and find where it gets the 8px width. The box model shows a width of 8, border, padding, margins, all 0. Under the CSS Style Rules, it's getting the right rule and sees the width: 8px element correctly. Yet under the computed style, it shows a width of 8. Where are these extra 2 pixels coming from?

  2. #2
    SitePoint Addict markchivs's Avatar
    Join Date
    Oct 2004
    Location
    Malvern Hills, UK
    Posts
    233
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Do you mean it was defined as 6px and is displaying at 8px?



  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,868
    Mentioned
    159 Post(s)
    Tagged
    4 Thread(s)
    Hi,

    Have you collapsed the borders on the table?

    Code:
    table{  border-collapse:collapse}
    Paul

  4. #4
    SitePoint Member
    Join Date
    Jul 2003
    Location
    St. Louis
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B
    Hi,

    Have you collapsed the borders on the table?

    Code:
    table{  border-collapse:collapse}
    Paul
    Yes, and all my tables are showing up as such. I even took it out one step further to try and diagnose the proglem.
    Code:
    table {
    	border-collapse: collapse;
    	padding: 0 0 0 0;
    	border-width: 0;
    	border-spacing: 0;
    }
    
    #outertable {
    	background: #000000;
    }
    Code:
    <body>
    <table width="100%" align="center" id="outertable">
    But I still get odd 1px borders, or something.

    This table used to be:
    Code:
    <body>
    <table width="100%" align="center" cellspacing="0" cellpadding="0" border="0">
    For instance, at the top of this table is a row with a graphic followed by another row. With the cellspacing... markup they are flush together, but with the CSS there is a tiny gap between them.

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,868
    Mentioned
    159 Post(s)
    Tagged
    4 Thread(s)
    Hi,

    Have you got a link to an example of this problem as the code above produces 6px cells with no spacing between for me.

    Unless I'm misunderstanding the problem of course

    Paul

  6. #6
    SitePoint Enthusiast
    Join Date
    Aug 2004
    Location
    ohio
    Posts
    40
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I see that you collapsed the border for the table but I think you need to collapse the border on the td cells as well.

    so this should work

    Code:
    table {
    	border-collapse: collapse;
    	padding: 0 0 0 0;
    	border-width: 0;
    	border-spacing: 0;
    }
    table td {
    	border-collapse: collapse;
    }
    HTH,

    Michael


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •