Hi All, 'Coming to the end of a big site, not yet live.
I have been asked to create an aphabetical list of many of the items within the site, I created a table with the built-in table designer and as you will see from the code below, I have added the first link. The Academy did not want a list of blue underlined links. Si I ttried using a small button image as the link and left the text untouched. This was a major difficulty for a blind screen reader user, so I made the text into a link. My pages are all linked to CSS pages. I would prefer not to have any decoration on the link text and change the font colour. I have tried several ways of doing this in the CSS page, but to no avail.
I did put the table inside a <<div></div> but nothing worked.
Below is a piece of the mark-up for the table
<div id="content">
<h1>ALPHABETICAL LIST OF SUBJECTS</h1>
<div id="alphabetlinks">
<font size=2 color="#000000" face="Arial">
<div><table width="100%" border=1 cellpadding=2 bordercolor="#340a89" cellspacing=2 bgcolor="#e5e5e5">
<tr valign=top>
<td><font size=2 color="#000000" face="Arial">
<div>A</div>
<div><a href="academiesoverview_4.html">Academia Brasileira de Letras</a> </div>
<div> Academia das Ciências de Lisboa </div>
<div>Académie Française </div>
<div>Academy Board </div>
<div>Accademia della Crusca</div>
<div>Affect (Errors)</div>
<div>Alternative (Errors)</div>
<div> American Dictionaries </div>
<div>American and British differences</div>
<div>American to British glossary</div>
<div>Apostrophe (Punctuation guide)</div>
<div> Apostrophes in street names</div>
<div>Australian English </div>
IS IT GOOD PRACTICE TO ADD SOMECSS DIRECTLY ON THE PAGE?
<font size=2 color="#000000" face="Arial" decoration ="none" hover ="xxxxxxx etc.etc.>
I'll be interested to hear your views.
Tony

You could insert some css as follows
.a10fb {
font-family: Arial, Verdana, Helvetica, sans-serif;;
font-size: 10pt;
text-align: left;
color: #ff00ff;
font-weight:bold;
}

This would set your font to Arial 10pt fuschia bold

Your html code in the table would be eg
<tr>
<td><a href="academiesoverview_4.html">"><span class="a10fb">Academia Brasileira de Letras</a> </span></td>

You could insert some css as follows
.a10fb {
font-family: Arial, Verdana, Helvetica, sans-serif;;
font-size: 10pt;
text-align: left;
color: #ff00ff;
font-weight:bold;
}

This would set your font to Arial 10pt fuschia bold

If you want the entire table row to be Arial 10pt fuschia You can use
<tr class="a10fb">
or
just the table cell
<td class="a10fb">

Tony, if you haven't got the underlining issue solved until this evening, I'll help you. I'm not at home right now, so it'll have to wait a couple of hours.

Thanks Dave,
With nearly 200 items in the table, I was hoping to control everything in the table from the CSS, It is quite a task just to put in all the links.
I can see though, because there is already code generated by the ctf that there will be a conflict if I try to put instructions in a style sheet when there is already markup for font face, colour, size etc in the HTML.
Is a table the best way to approach this sort of thing anyway?
Can I do it on a cell by cell basis? Even then, there are 25 cells (a-w and xyz).

Inger
Lovely to hear from you, I can be around for a while, but there is always another day. This one is foxing me slightly. I have a large list of what are in reality, links, but I really, (in this case), do not want them to look like links, all underlined and blue in colour. As you will see above, I tried to use a small button image, but when testing the page with a blind user, her screenreader was playing-up.
The idea is to change the font colour, get rid of decoration, change on hover and change for visited, but it's a lot to ask.

Hiya Tone,

In order to do what you want to do you need to look in your CSS file and see if the code in there for links had something in place already for underlining. It could be you have a conflict going on between your in page code and a CSS code.

With that said, I think you would find yourself much better off if you did what Dave suggests and "remove" all the formatting code for your links. Although I realize this would be a painful task at best, it would be much more beneficial for you in the end as you won't ever have to do it again. Any time after that where you need to adjust your link look you change the CSS and it's done. Not only that, if you have special links you want different you just copy the same link CSS code, paste it into a new spot in the CSS file, change the name just a little like add a number or color after it to signify what it is, then change the code how you want it and the name on the HTML page tag and you have a new code for your specific links or text.

I do think you would be much better off doing this than trying to do what you're doing. Look at it this way. If you do find out how to do it manually, you're going to have to adjust every single link style tag anyways to accommodate it so why not just do it the more efficient way and be done with it?

TIP

When I'm going to do mass editing of a lot of things that I know "most" are similar but some might not be (in your case your menu) I create a blank page, save it, copy the code from the real page and do a find and replace. You can do a find and replace for you links you can put an entire line of text so you could put the:

<font size=2 color="#000000" face="Arial" decoration ="none" hover ="xxxxxxx etc.etc.>

in the "find" box and in the replace box put:

<a href="academiesoverview_4.html">"><span class="a10fb">

Then do another replace and put:

in the "find" box put:
</font>

In the "replace box put:
</span>


This might not be exact science above since I don't know exactly what your code is, but you get the idea I hope, use a temporary page to do some of your code replacements to get partials here and there that you know might change something you don't want changed in the rest of the code. Just an idea that might help get some of the bulk changed for you easier if you decide to go with the CSS system more.

[quote=Tonethemoan]Thanks Dave,
With nearly 200 items in the table, I was hoping to control everything in the table from the CSS, It is quite a task just to put in all the links.
I can see though, because there is already code generated by the ctf that there will be a conflict if I try to put instructions in a style sheet when there is already markup for font face, colour, size etc in the HTML.
Is a table the best way to approach this sort of thing anyway?
Can I do it on a cell by cell basis? Even then, there are 25 cells (a-w and xyz).

[quote]

Tone
I am not sure how your layout looks but if you want to set the font size colour etc on a cell by cell basis use the html code.

<td class="a10fb"><a href="academiesoverview_4.html">">Academia Brasileira de Letras</a></td>

This would set the cell font to Arial 10pt fuschia.
Have a play around with this.

For a row you could use
<tr class="a10fb">
<td><a href="academiesoverview_4.html">">Academia Brasileira de Letras</a></td>
<td><a href="academiesoverview_x.html">">Academia xxxxxx de Letras</a></td>
etc
</tr>

Hope this helps




Hope this helps

Tony,
If you write this into your css file:



...and strip the and font face and colour tags off the html file, you will then get your links all purple in this case, and the font will be Arial. You can of course change the colour and the font to something else. Note that the menu list that you posted will only show the first one, which is a link, as arial and purple, the other ones will be whatever your system default is until they also become links.

If you have loads of pages that you need to edit this way, use the 'Replace' command under Edit, paste in one phrase that you want to remove into 'Find', and nothing in the Replace field. Then hit 'Replace all'.

Edit:

After re-reading your post, I changed the link colours to four different ones. You can of course play around with the colours until you find some that you like.

Hi Inger
I considered the same option as yours but this would change all Tone's link settings in his website that is linked to the css file.
I am not sure if Tone wants to do that or if he only wants to modify the link settings in the table he specified in his post.
Another option would be to put the css code you suggest in his html page rather than the css file. This would only override the a link definitions for the page with his table.
Assuming I have understood his requirements

If that's the case he can just increase the specificity of the table link styles by adding the alphabetlinks id to the selectors. Then the link style selectors would look like this:

#alphabetlinks a:link {...}

#alphabetlinks a:visited {...}

#alphabetlinks a:hover {...}

#alphabetlinks a:active {...}