Unvisited Link And Table Formatting Issues

[dmorgado.design@gmail.com]

Hi, please be gentle since I'm a bit of a newbie when it comes to website coding.I'm building a portfolio website for myself, however I am having 2 problems:1- In Firefox, my unvisited links aren't displaying correctly, they display as a standard un-formated link (blue, times neew roman, underlined), instead of what I established in the CSS file. It displays correctly on IE... Here's the relevant code:A html section

<td style="height:300px" valign="top" class=link><a href="index.html">> Home</a><br /><br />   <a href="2d.html">> 2D Art</a><br /><br />   <a href="3d.html">> 3D Art</a><br /><br /> <a href="info.html">> About</a><br /> <br />  <a href="team.html">> Blog</a><br />  </td>

And the according CSS section:

a:link {	color:#878787;	font-family: arial;	text-decoration: none;	font-weight: bold;}a:visited {	color:#878787;	font-family: arial;	text-decoration: none;	font-weight: bold;}a:hover {	color:#000000;	font-family: arial;	text-decoration: none;	font-weight: bold;}a:active {	color:#878787;	text-decoration: none;	font-family: arial;	font-weight: bold;}

2- The second problem I am having is that a certain table isn't aligning correctly,but only 1 section of it. The idea is to have a small margin on both sides of the website.In the following code, there's 2 tables, the first one is positioned correctly, but the second one for some reason is not. i've tried changing the style in the CSS, but it only results in everything showing wacjy in IE, and no changes in Firefox

<table style= width="100%" align="center" cellpadding="5" cellspacing="10"><td style=height:"100%" valign="top" class=news><p><img src="header.jpg" width="100%" height="100%"></p><hr /></td></table><table class="tab1" cellpadding="5" cellspacing="10"><td style="height:300px" valign="top" class=link><a href="index.html">> Home</a><br /><br />   <a href="2d.html">> 2D Art</a><br /><br />   <a href="3d.html">> 3D Art</a><br /><br /> <a href="info.html">> About</a><br /> <br />  <a href="team.html">> Blog</a><br />  </td><td style="height:300px" valign="top" class=cont><p><h3>2d Art</h3></p><script type="text/javascript" src="2dsamples.js"></script><br /><a href="2d.html">see more</a><br /></td><td style="height:300px" valign="top" class=cont><p><h3>3d Art</h3></p><script type="text/javascript" src="3dsamples.js"></script><br /><a href="3d.html">see more</a><br /></td><td style="height:300px" valign="top" class=link><br /></td></table>

The relevant CSS

<!-- Table -->table {	align: top;	table-layout: fixed;	width: 100%;	min-height: 200px;}tab {	align: top;	table-layout: fixed;	width: 100%;	min-height: 200px;}tab1 {	align: top;	table-layout: fixed;	width: 80%;	min-height: 200px;}td.link {	padding: 5px;	width: 10%;}td.cont {	padding: 30px;	background-color: #34383b;	width: 45%;	border-width: thin;	border-style: solid;	border-color: #000000;}td.cont1 {	padding: 30px;	background-color: #34383b;	width: 90%;	border-width: thin;	border-style: solid;	border-color: #000000;}

Thanks in advance

[chibineku]

I haven't got time for a full answer, but two things: one, in FF and most good browsers, specificity is the key: your links are in a table, so try selectors like:table tr td a:link {blah: blah;} Also, try to avoid using tables for layouts. It's been said so many times on here there ought to be an anti-tables shortcut where the smileys are. Tables should be used, as all elements should, semantically: that is they are all designed for certain purposes and to display certain things. Tables make navigation difficult for people who browse using screen readers and other iterative, serial methods. You should put content in whatever element makes the most semantic sense and learn to style it. Navigation should be in a list if there's enough to warrant it. Write your HTML without any CSS, just write it in order: header, navigation, then, as quickly as possible, get to the main content. Head the main content with h1 or h2, then subheadings h3, text should be in paragraphs, etc. etc. Then move it where you want it with CSS.If you have tabular data, then by all means use them - they aren't the devil. Just make sure you use the appropriate table elements - headings, legends, etc. There are plenty of elements out there for making the task of understanding your table very simple to those who cannot see it to understand it straight away, but that most people won't even need to see. Accessibility won't detriment your code - it will make it clean.

[dsonesuk]

the css coding you have will target all links, whether in table or not.i can't see a problem with this link css coding when i run it in FireFox, it works as it should.try not to repeat css unnecessarily a {font-family: arial; text-decoration: none; font-weight: bold;}a:link, a:visited, a:active { color:#878787;}a:hover { color:#000000;}will do exactly the same.errors found: classes incorrectly defined for tab and tab1, should be .tab and .tab1.no such thing as 'align: top;' should be 'vertical-align: top;'style=height:"100%" should be style="height:100%"style= width="100%" should be style="width:100%"Your tables don't have table row tags <tr><table style= width="100%" align="center" cellpadding="5" cellspacing="10"><tr><td style=height:"100%" valign="top" class="news"><p><img src="header.jpg" width="100%" height="100%"></p><hr /></td></tr></table><table class="tab1" cellpadding="5" cellspacing="10"><tr><td style="height:300px" valign="top" class="link"><a href="index.html">> Home</a><br /><br /> <a href="2d.html">> 2D Art</a><br /><br /> <a href="3d.html">> 3D Art</a><br /><br /> <a href="info.html">> About</a><br /> <br /> <a href="team.html">> Blog</a><br /> </td><td style="height:300px" valign="top" class="cont"><p><h3>2d Art</h3></p><script type="text/javascript" src="2dsamples.js"></script><br /><a href="2d.html">see more</a><br /></td><td style="height:300px" valign="top" class="cont"><p><h3>3d Art</h3></p><script type="text/javascript" src="3dsamples.js"></script><br /><a href="3d.html">see more</a><br /></td><td style="height:300px" valign="top" class="link"><br /></td></tr></table>

[dmorgado.design@gmail.com]

try not to repeat css unnecessarily a {font-family: arial; text-decoration: none; font-weight: bold;}a:link, a:visited, a:active { color:#878787;}a:hover { color:#000000;}will do exactly the same.

Thanks, that seemed to fix it. And thank you for the error spotting as well!

Also, try to avoid using tables for layouts. It's been said so many times on here there ought to be an anti-tables shortcut where the smileys are. Tables should be used, as all elements should, semantically: that is they are all designed for certain purposes and to display certain things. Tables make navigation difficult for people who browse using screen readers and other iterative, serial methods. You should put content in whatever element makes the most semantic sense and learn to style it. Navigation should be in a list if there's enough to warrant it. Write your HTML without any CSS, just write it in order: header, navigation, then, as quickly as possible, get to the main content. Head the main content with h1 or h2, then subheadings h3, text should be in paragraphs, etc. etc. Then move it where you want it with CSS.If you have tabular data, then by all means use them - they aren't the devil. Just make sure you use the appropriate table elements - headings, legends, etc. There are plenty of elements out there for making the task of understanding your table very simple to those who cannot see it to understand it straight away, but that most people won't even need to see. Accessibility won't detriment your code - it will make it clean.

I'm not sure I understood what you meant here. You are saying that I shouldn't use tables to define the placement of my page elements? But for instance, this website (w3schools) has tables to define its layout, or atleast that's the impression I get from quickly looking at its code (but keep in mind I rly don't understand much if at all when it comes to coding... I'm a simple artist).Thank you both for your help

[thescientist]

yes, CSS is the language to use for the placement of content and styling of elements in todays modern day web designing.

[chibineku]

For most of the time, this site is displaying tabular data - i.e. rows fall under column headings and the columns are tied together by the rows, but using tables for layout is old hat. If you want to set the width of your page, you use CSS to define the style of the body element that contains the page, and if you want a list you style the list. It's not bad to use tables, just they should only be used for data that belongs in a table. The alternative is to go div crazy, which is bad, too. The fewer divs between the first line of HTML and the real content, the better, in general. It's usually easier to style a page when everything is in the correct elements.

[dmorgado.design@gmail.com]

I see... I wasn't aware that I could set the width of the full body as well. In that case probably the only stuff that will need to be in a table is the 2 galleries (they are side by side).Thank you

[chibineku]

Things can be side by side without being in galleries, too! <div id="gallery1"><img etc.><img etc.><img etc.></div></div id="gallery2"><img etc.><img etc.><img etc.></div>#gallery1 {float: left;width: 50%;} Something like that ought to make them sit side by side.

[dmorgado.design@gmail.com]

Oki dokey, thank you