views:

15

answers:

1

I am trying to get a very thin border for my table (table rendered from a GridView). I have set the BorderWidth="0" for the GridView and then through CSS I am creating the border for the rows that I need. Here I don't want any border around the grid header. HTML code for grid renders to table and TRs. So I ahave the following css:

tr.top td { border-top: thin solid black; border-left: thin solid black; border-right: thin solid black; } 
tr.bottom td { border-bottom: thin solid black; } 

This makes the grid look like what I need witn no border in the header. But, the width of the border on other rows is too thick in IE6 but in FF it looks great. Is there a way to make the border extra thin in IE?

Here is the working HTML code:

<html xmlns="http://www.w3.org/1999/xhtml" >
<head><title>
    Untitled Page
</title>

<style type="text/css"> 
    tr.top td { border-top: thin solid black; border-left: thin solid black; border-right: thin solid black; } 
    tr.bottom td { border-bottom: thin solid black; } 
</style
</head>
<body>
    <form name="form1" method="post" action="default.aspx" id="form1">
<div>
    <div>

        &nbsp;&nbsp;<br />
        <div>
    <table cellspacing="0" rules="all" border="0" id="GridView1" style="border-width:0px;border-collapse:collapse;">
        <tr>
            <th align="left" colspan="5" style="font-weight:normal;"><a id="GridView1_ctl08_{0}_HeaderLink1" href="javascript: SelectAll(true)">Select All</a><span> | </span><a id="GridView1_ctl08_{0}_HeaderLink2" href="javascript: SelectAll(false)">Clear All</a></th>
        </tr><tr class="top row">
            <td><input id="GridView1_ctl02_CheckBoxButton" type="checkbox" name="GridView1$ctl02$CheckBoxButton" /></td><td>10-000000-001</td><td>The Iliad and The Odyssey</td><td>12.95</td><td>Mike Loyid</td>
        </tr><tr class="top row">
            <td><input id="GridView1_ctl03_CheckBoxButton" type="checkbox" name="GridView1$ctl03$CheckBoxButton" /></td><td>10-000000-999</td><td>Anthology of World Literature</td><td>24.95</td><td>Jessica Freclih</td>
        </tr><tr class="top row">
            <td><input id="GridView1_ctl04_CheckBoxButton" type="checkbox" name="GridView1$ctl04$CheckBoxButton" /></td><td>11-000000-002</td><td>Computer Dictionary</td><td>24.95</td><td>Roger Butt</td>
        </tr><tr class="top row">
            <td><input id="GridView1_ctl05_CheckBoxButton" type="checkbox" name="GridView1$ctl05$CheckBoxButton" /></td><td>11-000000-003</td><td>Cooking on a Budget</td><td>23.95</td><td>Leena Reebeca</td>
        </tr><tr class="top bottom row">
            <td><input id="GridView1_ctl06_CheckBoxButton" type="checkbox" name="GridView1$ctl06$CheckBoxButton" /></td><td>11-000000-004</td><td>Great Works of Art</td><td>29.95</td><td>Luke Killey</td>
        </tr>
    </table>
</div>
        <input type="submit" name="Button1" value="Button" id="Button1" /></div>
        <span id="Results"></span>
    </form>
</body>
</html>
+1  A: 

Use "1px" instead of "thin".

Diodeus
Diodeus, you know what I tried this before posting this question. actually I replaced "1px" with "this solid" :D Thank to you for pointing me the correct way to do.
Sometimes it just takes fresh eyeballs.
Diodeus