CODEWITHSUNDEEP
asp.netcssinternet-explorergridviewborder
unnknown
unnknown

Reputation: 1775

How can I get IE to correctly display the border of my GridView Pager button row?

I have a GridView with pager buttons like this:

<PagerSettings Mode="NextPreviousFirstLast" FirstPageText="<<" PreviousPageText="<" NextPageText=">" LastPageText=" >>" Position="Bottom" />

With pager style set like this:

<PagerStyle CssClass="gridPager" HorizontalAlign="Right" />

Please take a look at my styles:

   .gridPager
   {
       border-collapse: collapse;
       border-width: 1px;
       border-color: Green;
       border-style: solid;   
       font-size: 7pt;
    }

    .gridPager td
    {
        padding-left: 5px;   
    }

The Green Border on my row of Pager buttons is not displaying in Internet Explorer

I suspect it is because IE doesn't recognize border styles on the tr element.

The reason I suspect this is that when I pressed F12 and looked at the IE developer view, I see that the table generated by the GridView created this for the row containing the pager buttons:

 <tr class="gridPager" align="right">
    <td colspan="3"><table border="0">
    <tr>
    <td><a href="...pager button links"  </td>
   </tr>
</table></td>
  </tr>

Notice the style on the tr...

And I found this: https://stackoverflow.com/a/583600/614263

I tried to follow the instructions in that post, but no luck. It does work however, when I make the border-width 2px or greater. That's no good though, I need the thin 1px border so that it matches the rest of the grid.

All i'm trying to do is surround my pager buttons with a border of the same color that is present on the rest of the rows in the grid.

Please help! How can I achieve this? This is killing my time! Thanks!

Upvotes: 0

Views: 2106

Answers (1)

ZombieCode
ZombieCode

Reputation: 1661

Try a different approach. Instead of styling the .gridPager ('tr') tag put your styles on the table instead

.gridPager table { ...styles here...}

You might have to work with eliminating the padding/margin in the first 'td' before the table, but that should be easily done. 

.gridPager td { padding: 0; margin: 0; } /* this will affect all td tags */
.gridPager table td { padding-left: 5px; } /* add the padding back to the table td tags */

For me...I normally style the entire table with a border around the edges except the bottom border. Then I add in the individual rows lines via the 'td' tag. I put the table to GridLines="none".

/* this line give the table a border on the three sides - the main grid view table */
.gridTable { border: solid 1px #000; border-width: 1px 1px 0 1px }

/* then I put in the row styles */
.gridTable td { border-bottom: solid 1px #000; }

/* Then I fix the pager styles up with no border on the 'td' tag */
.gridTable table td { border: 0; }

Upvotes: 1

Related Questions