Problem with Span Class - CSS forum at WebmasterWorld - WebmasterWorld

Forum Moderators: not2easy

Message Too Old, No Replies

Problem with Span Class

rectangle

9:08 pm on Sep 30, 2008 (gmt 0)

10+ Year Member

Having trouble with altering the appearance of links on my page, they keep reading from a single style. Not sure what i'm doing wrong!

.style1 {
font-family: Arial, Helvetica, sans-serif;
font-size: small;
}
a:link {
color: #333333;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #333333;
}
a:hover {
text-decoration: none;
color: #666666;
}
a:active {
text-decoration: none;
}
a:link {
color: #000000;
text-decoration: none;
}
a:hover {
text-decoration: none;
color: #000000;
background-color: #999999;
}
a:visited {
text-decoration: none;
}
a:active {
text-decoration: none;
color: #000000;
}

.otherone
{
font-family: Arial, Helvetica, sans-serif;
font-size: small}
a:link {
color: #000000;
text-decoration: none;
}
a:hover {
text-decoration: none;
color: #000000;
background-color: #FF00FF;
}
a:visited {
text-decoration: none;
color: #000000;
}
a:active {
text-decoration: none;
color: #000000;
}

-->
</style>
</head>

<body>
<div id="apDiv1">
<table width="204" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="51"><span class="style1"><a href="navwork.html" class="style1">work</a> /</span></td>
</tr>
</table>
<table width="176" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="12"> </td>
<td width="161"><span class="style1">video /</span></td>
</tr>
</table>
<table width="174" border="0" cellspacing="5" cellpadding="0">
<tr>
<td width="24"> </td>
<td width="135"><span class="otherone"><a href="video3.html" class="otherone">lucozade and milk</a></span></td>
</tr>
<tr>
<td> </td>
<td><span class="otherone"><a href="video2.html" class="otherone">owen</a></span></td>
</tr>
<tr>
<td> </td>
<td><span class="otherone"><a href="video1.html" class="otherone">rosanna</a></span></td>
</tr>

swa66

9:23 pm on Sep 30, 2008 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

Welcome to webmasterworld.

Think you got your selectors way off:

<a href="#" class="otherone"> ... </a>

is e.g selected with
.otherone {...}
.otherone:hover {...}

or

a.otherone {...}
a.otherone:hover {...}

Next the content: if you don't need different rending of link and visited etc: just style the one without a pseudo class.
Even those with a pseudoclass only need what you want to change, there's no need to repeat what stays the same.

e.g.:
the second half of your css could become:


.otherone {
  font-family: Arial, Helvetica, sans;
  font-size: small
  color: #000000;
  text-decoration: none;
}
.otherone:hover {
  background-color: #FF00FF;
}

<td><span class="style1"><a href="#" class="style1">text</a></span></td>

feels like overkill, you can rip out the span; leaving you with:

<td><a href="#" class="style1">text</a></td>

It also feels like CSS could replace your table easily.

rectangle

9:54 pm on Sep 30, 2008 (gmt 0)

10+ Year Member

thank you ever so much for swift response :-)

how could css change my tables?

i'm working in dreamweaver and working with the little i know, so i usually mix things together.. any good tutorials on doing the equivalent with CSS?

alt131

10:41 pm on Sep 30, 2008 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

Hi rectangle,

The source of your links problem is the "cascade" and ordering of the anchor pseudo class.

There is an excellent short tutorial at css crash course [webmasterworld.com] (select text properties and then scroll that page to the section on pseudo classes)

The cascade means the browser will (usually) obediently apply the last rules it receives - those later in the style sheet. The ordering issue means that your classes should be in this order to avoid non- standard results:

a:link
a:visited
a:hover
a:active

Many think "love, hate" to remember the sequence.

so in your css where you have, this:

a:link {
color: #333333;
text-decoration: none;
}
a:link {
color: #000000;
text-decoration: none;
}
a:link {
color: #000000;
text-decoration: none;
}

The ua is being told to color the link #333, then #000, then #000 again - which reults in #000. You can easily see specifying the same text-decoration 3 times is "redundant", and, applying that reasononing to the rest of your sheet, why the hover background is pink, rather than the grays declared earlier.

As you had three "sets" of rules, not sure which you wanted, but on your css and htmnl, here is an example of how your css could be reduced:

#apDiv1 table {
font-family: Arial, Helvetica, sans-serif;
font-size: small;
}
a { /*used because a:link never behaves properly for me :(*/
text-decoration:none;
color:#000;
}
a:visited {
color: #333333;
}
a:hover {
color: #666666;
background-color: #999999;
}
a.otherone:hover {
background-color: #FF00FF;
}

Notice the use of

a.otherone:hover

to apply the pink background to some of the anchors on hover.

I removed the classed span to help me test. Like swa66 I think that unless its there for some other reason, it's "redundant" (serves no purpose), so remove it.

how could css change my tables?
.. any good tutorials on doing the equivalent with CSS?

css can't replace your tables because it styles elements, but tables can be replaced by other more semantically correct elements that can be styled to look as you wish. For example, this looks ike a list, which suggests using a list <ul> rather than a table.

The above tutorial will give you an idea of what can be done with css, check the forum library for specifics, check out w3schools. and the "new to web development" forum for questions.