Solved

Asp.Net Datagrid Css Format PagerStyle

Posted on 2004-08-18
9
2,413 Views
Last Modified: 2008-02-01
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
0
Comment
Question by:BeginningWebDesign
  • 4
  • 4
9 Comments
 
LVL 17

Expert Comment

by:mreuring
ID: 11828721
Could you also supply a snippet of html code to work with? It would give us a much better idea of what you're trying to style.

Let me know,

  Martin
0
 

Author Comment

by:BeginningWebDesign
ID: 11829250
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>&nbsp;<span>Next --></span></td>
      </tr>

Caz
0
 
LVL 17

Expert Comment

by:mreuring
ID: 11829431
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
0
 

Author Comment

by:BeginningWebDesign
ID: 11829480
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
0
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
LVL 31

Expert Comment

by:seanpowell
ID: 11829767
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 :-)
0
 

Author Comment

by:BeginningWebDesign
ID: 11830009
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
0
 
LVL 17

Expert Comment

by:mreuring
ID: 11830041
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?
0
 
LVL 17

Accepted Solution

by:
mreuring earned 500 total points
ID: 11830447
This is what I made of your css using a small test-case. I'm not sure if it's what you want, but it does sound like it:
table {
     background-color: #A9B9D1;
                color: #191970;
     border-spacing: 12px;
     font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
}

.QuCssResultsNav a {
     color: #191970;
     padding: 1px;
     text-decoration: none;
}

.QuCssResultsNav a:hover {
     background-color: transparent;
     text-decoration: underline;
}
.QuCssResultsNav td {
     font-size: 80%;
     border: solid 1px white;
                padding: 2px;
     text-align: left;
}

Martin
0
 

Author Comment

by:BeginningWebDesign
ID: 11830752
Thanks Martin

Caz
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
how to create a tile layout 1 36
Kill default webkit margin!  Please! 6 22
stop navigation from wrapping 7 47
Wrapper for APPs 9 25
Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …

930 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

22 Experts available now in Live!

Get 1:1 Help Now