0

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!

Community
  • 1
  • 1
unnknown
  • 1,715
  • 2
  • 19
  • 37

1 Answers1

1

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; }
ZombieCode
  • 1,646
  • 2
  • 24
  • 46
  • Thanks Ekaterina, I will try it later today – unnknown Sep 18 '12 at 13:43
  • This got me in the right direction. Thank you so much! I used the custom styles instead of the Gridlines like you mentioned in the bottom of your answer, but I had to set an ItemStyle for each of the columns in my GridView because on one of the columns I didn't want a right border. – unnknown Sep 18 '12 at 19:36
  • I am glad you were able to get your view how you wanted. – ZombieCode Sep 18 '12 at 20:06