This is Interesting: Free Magazines for Graphics designers and webmasters  


Home > Archive > Stylesheets > March 2007 > applying style to table





You are viewing an archived Text-only version of the thread. To view this thread in it's original format and/or if you want to reply to this thread please [click here]

Author applying style to table
ashkaan57@hotmail.com

2007-03-08, 6:17 pm

Hi,
I am working on an asp.net application that has a grid. When rendered,
grids are translated into tables. I am having some problems applying
styles to the this table. When I do a "View Source", this is what I
see:

<table cellspacing="0" cellpadding="3" border="0"
id="ctl00_MainContent_SystemsGV" style="font-family:Arial;font-size:
9pt;width:100%;border-collapse:collapse;">
<tr class="gvHeader">
<th scope="col" style="width:75px;"><a href="...></th>
</tr>
I am using the following for the "gvHeader" and "th":
..gvHeader
{
background: url(images/gv.jpg);
font-size:9pt;
}

..gvHeader th
{
text-align:left;
padding-left:10px;
color:#FFF;
}
I am not sure how to set up style for a, a:link, a:visited, ... which
are within the "th". I tried .gvHeader th:a.link, but it doesn't work
so I must be wrong. I tried .gvHeade a, a.link, a.visited, ... and it
didn't work either.

Also, a similar problem: I need to apply style to 'a', 'a.link',...
for the gvPager and this is how the pager gets rendered (part of the
above table):

<tr class="gvPager">
<td colspan="5">
<table border="0">
<tr>
<td><span style="font-family:Arial;">1</span></td>
<td><a href="..."></td> <------ need to apply style to this
"a"
</tr>
</table>
</td>
</tr>

..gvPager
{
background: url(images/gv.jpg);
font-size:9pt;
font-weight:bold;
text-align:center;
}

..gvPager td
{
color:#000;
}

Sid

2007-03-08, 6:17 pm

On 8 Mar 2007 08:06:07 -0800, ashkaan57@hotmail.com wrote:

: I am not sure how to set up style for a, a:link, a:visited, ... which
: are within the "th".


Why don't you set these in the top css. Why is "within the 'th' "?

If the characteristics are different for the a: occurences within the
table only, then qualify the a: like :

A.blue:visited {color: #003399;}
A.blue:link {color: #003399;}
A.blue:hover {color: red;}
A.blue:active {color: #003399;}

A.white:visited {color: #ffffff;}
A.white:link {color: #ffffff;}
A.white:hover {color: red;}
A.white:active {color: #ffffff;}

and then -

<a href="blah1.html" class="blue">Blue Link</a>
<a href="blah2.html" class="white">White Link</a>

Sid


ashkaan57@hotmail.com

2007-03-08, 6:17 pm

On Mar 8, 11:26 am, Sid <e...@nospam.com> wrote:
> On 8 Mar 2007 08:06:07 -0800, ashkaa...@hotmail.com wrote:
>
> : I am not sure how to set up style for a, a:link, a:visited, ... which
> : are within the "th".
>
> Why don't you set these in the top css. Why is "within the 'th' "?
>
> If the characteristics are different for the a: occurences within the
> table only, then qualify the a: like :
>
> A.blue:visited {color: #003399;}
> A.blue:link {color: #003399;}
> A.blue:hover {color: red;}
> A.blue:active {color: #003399;}
>
> A.white:visited {color: #ffffff;}
> A.white:link {color: #ffffff;}
> A.white:hover {color: red;}
> A.white:active {color: #ffffff;}
>
> and then -
>
> <a href="blah1.html" class="blue">Blue Link</a>
> <a href="blah2.html" class="white">White Link</a>
>
> Sid


Thanks for the reply Sid.
The code I included was the result of the View Source. I do not have
access to the table structure.
I declare the header of the grid to use the gvHeader style. Then, if
there is a link within the header, I want it to be white, no-
decoration, etc.
However, when the grid is rendered, it becomes a table, and the texts
of the header become part of the <th>. So, I need all the links that
happen to be within the
<tr class="gvHeader><th><a href="..."></th></tr> to have that specific
style.

Rik

2007-03-08, 6:17 pm

<ashkaan57@hotmail.com> wrote:
> <table cellspacing=3D"0" cellpadding=3D"3" border=3D"0"
> id=3D"ctl00_MainContent_SystemsGV" style=3D"font-family:Arial;font-siz=

e:
> 9pt;width:100%;border-collapse:collapse;">
> <tr class=3D"gvHeader">
> <th scope=3D"col" style=3D"width:75px;"><a href=3D"...></th>
> </tr>


> I am not sure how to set up style for a, a:link, a:visited, ... which
> are within the "th". I tried .gvHeader th:a.link, but it doesn't work
> so I must be wrong. I tried .gvHeade a, a.link, a.visited, ... and it
> didn't work either.


..gvHeader th a, .gvHeader th a:visited{/* your style */}

Don's listen to the advise to add random classes (and certainly not =

classes like 'blue' or 'white', which almost defeat the purpose of using=
=

CSS. Classnames should be more related to content then to styling.). In =
=

seperating style from content it's preferable if you can use contextuel =
=

rules like this.

-- =

Rik Wasmus
Posted on Usenet, not any forum you might see this in.
Ask Smart Questions: http://tinyurl.com/anel
ashkaan57@hotmail.com

2007-03-08, 6:17 pm

On Mar 8, 12:07 pm, Rik <luiheidsgoe...@hotmail.com> wrote:
> <ashkaa...@hotmail.com> wrote:
>
> .gvHeader th a, .gvHeader th a:visited{/* your style */}
>
> Don's listen to the advise to add random classes (and certainly not
> classes like 'blue' or 'white', which almost defeat the purpose of using
> CSS. Classnames should be more related to content then to styling.). In
> seperating style from content it's preferable if you can use contextuel
> rules like this.
>
> --
> Rik Wasmus
> Posted on Usenet, not any forum you might see this in.
> Ask Smart Questions:http://tinyurl.com/anel


Thank you Rick,
it worked!

Sponsored Links


Copyright 2003 - 2008 forum4designers.com  Software forum  Computer Hardware reviews