68 users online (0 members and 68 guests)  


  Results 1 to 7 of 7

Related

  1. Replies: 6
  2. print stylesheet question    Forum: CSS Forum
    Replies: 1
  3. CSS Print stylesheet    Forum: CSS Forum
    Replies: 7
  4. Stylesheet/table problem    Forum: CSS Forum
    Replies: 3
  5. Replies: 2
  1. #1
    blasto333's Avatar
    New User

    Status
    Offline
    Join Date
    Jul 2003
    Posts
    2

    Stylesheet producing ugly tables

    Here is my stylesheet that is included in every part of my program:
    Code:
    <?
    include ("../settings.php");
    ?>
    
    table,td,tr,th
    {
            border-color:  <?  echo $bordercolor ?>;
            border-width: <?  echo $borderwidth ?>px;
            border-style: <?  echo $borderstyle ?>;
            border-collapse: collapse;
            color: <?  echo $textcolor ?>;
    }
    
    
    a:link { color: <?  echo $alink ?>; }
    a:visited { color: <?  echo $vlink ?>; }
    p { color: <?    echo $pcolor ?>; }
    h1, h2, h3, h4, h5, h6, h7 { color: <?    echo $hcolor ?>; }
    The result is ugly looking tables such as the file attached. How can I make it so the border is single around the table and in the cells so it doesn't have a double border.
    Attached Images Attached Images

  2. #2
    QuietDean's Avatar
    Administrator

    Status
    Offline
    Join Date
    Oct 2000
    Location
    Bournemouth, UK
    Posts
    2,662
    hiya, welcome to the forums.

    Firstly, I would separate the css for table , td & tr.

    You can use a 1px border around the table. Then a 1px border around each cell. Then remove cellspacing and cellpadding from the cells/table. This will give an overall 2px effect, but it looks better than the double one.

    You other choice is to manually use style="blah" to set each cells separate borders. prob not an option.

    oops, there is a third choice. Set the table 'background-color' to the color you wish to have the border, then set cellspacing to 1px. Then remove your borders, this will 'fake' a decent border.
    If one of our members helps you, please click the icon to add to their reputation!
    No support via email or private message - use the forums!
    Before you ask, have you Searched?

  3. #3
    blasto333's Avatar
    New User

    Status
    Offline
    Join Date
    Jul 2003
    Posts
    2
    Thanks, I love that third option it really improved the look of my program.

    Thanks,


    Chris

  4. #4
    DyerA's Avatar
    New User

    Status
    Offline
    Join Date
    Aug 2003
    Posts
    2
    Quote Originally Posted by blasto333
    Thanks, I love that third option it really improved the look of my program.

    Thanks,


    Chris
    Great idea. After a few hours I stumbled upon this site and your suggestion fixed the problem I was having in 5 minutes.

    a

  5. #5
    QuietDean's Avatar
    Administrator

    Status
    Offline
    Join Date
    Oct 2000
    Location
    Bournemouth, UK
    Posts
    2,662
    Excellent.

    Its a nice-looking, cross-browser method.
    If one of our members helps you, please click the icon to add to their reputation!
    No support via email or private message - use the forums!
    Before you ask, have you Searched?

  6. #6
    DyerA's Avatar
    New User

    Status
    Offline
    Join Date
    Aug 2003
    Posts
    2

    grid lines don't print with the background mehtod

    I really like the third method above, by using the background, however, when I try to print the report, the "gridlines" do not show.

    Here is the style
    /* main body grid of report */
    table.clsMain {
    width: 100%;
    background-color: Gray;
    font-size: smaller;
    }

    tr.clsMainHeader {
    background-color: Silver;
    text-align: left;
    border-width: medium;
    }

    tr.clsMainData {
    text-align: left;
    }

    Thanks

  7. #7
    QuietDean's Avatar
    Administrator

    Status
    Offline
    Join Date
    Oct 2000
    Location
    Bournemouth, UK
    Posts
    2,662
    Ah yes. That is a client-side choice.

    By default, IE does not print background-colors. if its just you, then goto Tools->Internet Options->Advanced->Print Background Colors

    If its for the general public, then your best bet is to use one of the other two methods mentioned above.
    If one of our members helps you, please click the icon to add to their reputation!
    No support via email or private message - use the forums!
    Before you ask, have you Searched?



Tags for this Thread