Forum Moderators: not2easy
so i'm having this problem first of all - for some reason Opera doesn't apply the values listed in css. For example width or background-color. It doesn't show the page correctly until I set the width in the <table> tag...
the second problem - how can i hover visited links? i have my links changing colors on mouse over with a:hover in css, but as the links are visited they are marked as a:visited and the a:hover properties don't apply to it anymore. how can i fix that?
the page is available at <snip>
here's the source, maybe point out my mistakes:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
#menuOption:link { text-decoration: none; color: white; font-weight: bold; font-family: tahoma; font-size: 12};
#menuOption:hover { text-decoration: none; color: #d2f9a3; font-weight: bold; font-family: tahoma; font-size: 12};
#menuOption:visited { text-decoration: none; color: white; font-weight: bold; font-family: tahoma; font-size: 12};
#menuOptionSide:link { text-decoration: none; color: black; font-weight: ; font-family: tahoma; font-size: 12};
#menuOptionSide:hover { text-decoration: underline; color: green; font-weight: ; font-family: tahoma; font-size: 12};
#menuOptionSide:visited { text-decoration: none; color: black; font-weight: ; font-family: tahoma; font-size: 12};
#main { background-color: #f7fcf1; border-style: outset; border-width: 1px; border-color: black; border-collapse: collapse; width: 900px };
#sideMenu { background-color: #ecfcd9; border-style: outset; border-width: 1px; border-color: black; border-collapse: collapse; width: 190px; height: 100%};
</style>
</head>
<body topmargin=0 leftmargin=10>
<div align=center>
<table id="main">
<tr height=100>
<td background="logo.jpg"></td>
</tr>
<tr height=35>
<td background="top.jpg">
<a id="menuOption" href="index.php" onMouseOver="color: #d2f9a3; text-decoration: underline;">Главная</a>
<a id="menuOption" href="index1.php">Магазин</a>
<a id="menuOption" href="index2.php">Контакты</a>
</td>
</tr>
<tr height=600 valign=top>
<td>
<table id="sideMenu"><tr valign=top><td>
<b>Меню</b>
<hr align=center width="95%">
<a id="menuOptionSide" href="index.php">Главная</a><br>
<a id="menuOptionSide" href="index1.php">Магазин</a><br>
<a id="menuOptionSide" href="index2.php">Контакты</a><br>
<br>
<br>
<b>Корзина</b>
<hr align=center width="95%">
пусто
</td></tr></table>
</td>
</tr>
<tr height=20>
<td background="top.jpg">
</td>
</tr>
</table>
</div>
</body>
[edited by: swa66 at 12:01 pm (utc) on Sep. 23, 2009]
[edit reason] No URLs, please see ToS and Forum Charter [/edit]
[jigsaw.w3.org...]
A font family really should be a list of fonts, not all visitors will have all fonts installed, and it should terminate with a generic font e.g. "sans-serif"
To style links there are a number of ways to approach it: you can style the link without any state pseudo class applied to it.
e.g.:
#menuOption {
text-decoration: none;
color: white;
font: bold 12px tahoma, arial, helvetica, sans-serif;
}
Now for any state you want something different, you can change just that property, no need to repeat it all.
#menuOption:hover {
color: #d2f9a3;
}
If you want to know why your code was failing to honor your :hover, you need to look into specificity.
The pseudo classes like :link, :visited, :hover, :active, :target etc all count in calculating specificity like a class.
So rules with selectors like #menuOption:link #menuOption:hover #menuOption:visited
all have the same specificity (0,1,1,0) which means that for conflicting properties the last one set will win out.
(so in your case :visited being after :hover means that :visited can win over :hover for those that are in both states.)
You could also specify multiple pseudo classes (one hardly sees it in use since IE6 doesn't support it, but it's supported by all other browsers and IE7.js can fix IE6) and have things like #menuOption:visited:hover {} which has a specificity of (0,1,2,0) and would win out over the others regardless of source code order.
There is a "rule" many use to use the "LoVe-HAte" order: Link, Visited, Hover Active, this works but it often leads to not styling the element itself and repeating the settings 4 times resulting to overly bloated code. And with CSS3 adding more pseudo classes, one needs to understand the reason anyway as those mnemonics won't work anymore in all cases.
I saw table tags and stopped trying to understand what the html was doing to be honest. But valid code both for CSS and HTML are almost a prerequisite to make things work properly.
