BeginningWebDesign
asked on
Asp.Net Datagrid Css Format PagerStyle
Dear EE community
Does anyone know how to format the pagerstyle of an asp.net datagrid
I'm using the following css codes, but cannot achieve what I require.
.QuCssResultsNav {
background-color: #A9B9D1;
color: #191970;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 80%;
padding: 5px;
text-align: left;
}
.QuCssResultsNav a {
background-color: #A9B9D1;
color: #191970;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
padding: 1px;
text-decoration: none;
}
.QuCssResultsNav a:hover {
background-color: transparent;
color: #191970;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
text-decoration: underline;
}
What I require is for the table cell to have a 1px white line 2px in from the sides of the cell.
I've tried using: border: 1px solid White; or border-color: 1px solid white without any success.
Thank you for your help
Caz
Does anyone know how to format the pagerstyle of an asp.net datagrid
I'm using the following css codes, but cannot achieve what I require.
.QuCssResultsNav {
background-color: #A9B9D1;
color: #191970;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 80%;
padding: 5px;
text-align: left;
}
.QuCssResultsNav a {
background-color: #A9B9D1;
color: #191970;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
padding: 1px;
text-decoration: none;
}
.QuCssResultsNav a:hover {
background-color: transparent;
color: #191970;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
text-decoration: underline;
}
What I require is for the table cell to have a 1px white line 2px in from the sides of the cell.
I've tried using: border: 1px solid White; or border-color: 1px solid white without any success.
Thank you for your help
Caz
ASKER
hello Martin
On an asp.net datagrid the only code I can give is: <PagerStyle CssClass="QuCssResultsNav" />
Which when viewed in a browser displays:
<tr class="QuCssResultsNav">
<td colspan="1"><span><-- Prev.</span> <span>Ne xt --></span></td>
</tr>
Caz
On an asp.net datagrid the only code I can give is: <PagerStyle CssClass="QuCssResultsNav"
Which when viewed in a browser displays:
<tr class="QuCssResultsNav">
<td colspan="1"><span><-- Prev.</span> <span>Ne
</tr>
Caz
I'm not sure if I understand your request entirally, but my guess would be something along these lines:
.QuCssResultsNav td span {
border: 1px solid White; /*create the line*/
margin: 2px; /*create the spacing around the element*/
}
Hope this helps,
Martin
.QuCssResultsNav td span {
border: 1px solid White; /*create the line*/
margin: 2px; /*create the spacing around the element*/
}
Hope this helps,
Martin
ASKER
Hi Martin
Almost there, it displays the white line around the nav links, but what I'm trying to do is display the white line 1px thick and 2px inside the table cell all round.
Caz
Almost there, it displays the white line around the nav links, but what I'm trying to do is display the white line 1px thick and 2px inside the table cell all round.
Caz
A couple of thoughts...
I assume you're referring to this:
.QuCssResultsNav td
{
border: 1px solid #ffffff;
}
which merely adds a border to the table cell. But, you can't inset the border as margin doesn't apply here, so you would need to find an alternate method (cellspacing, etc) to achieve the effect. It's hard to suggest something since we're only seeing a single cell...
also - margin only applies in the left and right directions on a span tag since it's an inline element. The easy option would be to enclose everything in a container div, which has far to much tag soup for me to even recommend :-)
I assume you're referring to this:
.QuCssResultsNav td
{
border: 1px solid #ffffff;
}
which merely adds a border to the table cell. But, you can't inset the border as margin doesn't apply here, so you would need to find an alternate method (cellspacing, etc) to achieve the effect. It's hard to suggest something since we're only seeing a single cell...
also - margin only applies in the left and right directions on a span tag since it's an inline element. The easy option would be to enclose everything in a container div, which has far to much tag soup for me to even recommend :-)
ASKER
Hi Martin
Below is the modified code for the TD cell, Is it possible to change it so that it has a cellspacing of 2 and a cellpadding of 2 then set the border to white. I think that might work.
.QuCssResultsNav td {
background-color: #A9B9D1;
color: #191970;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 80%;
border-collapse: collapse;
border-spacing: 0px;
border: solid 1px white;
padding: 2px;
text-align: left;
}
Caz
Below is the modified code for the TD cell, Is it possible to change it so that it has a cellspacing of 2 and a cellpadding of 2 then set the border to white. I think that might work.
.QuCssResultsNav td {
background-color: #A9B9D1;
color: #191970;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 80%;
border-collapse: collapse;
border-spacing: 0px;
border: solid 1px white;
padding: 2px;
text-align: left;
}
Caz
I didn't notice there were two seperate span elements...
I agree with you Sean, in this case I was merely looking for a solution that would work without disturbing the contents too much. After all, there's nothing wrong with styling a span into a block level element if the presentation requires it to make it look good.
Now I'm wondering, do you have any control over the output of that PagerStyle code?
I agree with you Sean, in this case I was merely looking for a solution that would work without disturbing the contents too much. After all, there's nothing wrong with styling a span into a block level element if the presentation requires it to make it look good.
Now I'm wondering, do you have any control over the output of that PagerStyle code?
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Thanks Martin
Caz
Caz
Let me know,
Martin