#1
  1. The Basketball Star
    Devshed Novice (500 - 999 posts)

    Join Date
    Aug 2001
    Location
    H-Town
    Posts
    550
    Rep Power
    14

    Converting HTML formatting to CSS


    This problem has been bugging me for quite some time now and each time I come across it, I end up just going back to the HTML method because CSS won't display it the way I want to.

    Here's my HTML:
    <table border="3" cellspacing="0" cellpadding="3" bgcolor="#dddddd" bordercolor="#00008b">

    And that displays a gray table with a dark blue border of 3 pixels and the rules (lines inside the table) are also dakr blue and 3 pixels. The cells are padded 3 pixels as well.

    Now I try to convert this to CSS and as I said, it doesn't look exactly right. Here's what I've got:

    table { background-color: #dddddd; border: 3px solid #00008b; padding: 3px }

    With this method I do get the flat dark blue border (not 3D) that I want, but that's about it. The rule lines go away and then there's space between the cells and it just looks bad.

    Can anybody help me out?
  2. #2
  3. Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Apr 2003
    Location
    Italy, EU
    Posts
    517
    Rep Power
    12
    You haven't considered that you need to set also the cells' properties... When you set a border of 3px for the table and don't specify the one of the cells, it is automatically set to 1px. So, if you want to have the same result with CSS, you've to define ALL the borders: 4 (3+1) for the table and 2 (1+1) for the cells and then set to COLLAPSE the border-collapse property to simulate the HTML property CELLSPACING="0"
    Code:
    table {
    	background-color: #dddddd;
    	border: 4px solid #00008b;
    	border-collapse: collapse;
    }
    td {
    	border: 2px solid #00008b;
    	padding: 3px;
    }
    Hope it helps!
    Cheers, Dave

IMN logo majestic logo threadwatch logo seochat tools logo