Hi,
I have just written some simple rollover links in a table using CSS classes.
It views perfectly in IE but has added a couple of pixels on the top and
bottom of the row when you view it in Mozilla.
Please have a look at http://www.dovenetq.net.au/~gabrielle/
The CSS for the links are:
..nav A:link {
background-color: #FFFFFF;
display: block;
padding: 5px 0px 0px 12px;
width: 214px;
height: 28px;
font:Arial, Helvetica, sans-serif;
font-size:14px;
font-weight:bold;
color:#88898d;
text-decoration: none;
border-right: 1px solid #88898D;
}
..nav A:active {
background-color: #4d4d4d;
display: block;
padding: 5px 0px 0px 12px;
width: 214px;
height: 28px;
font:Arial, Helvetica, sans-serif;
font-size:14px;
font-weight:bold;
color: #FFFFFF;
border-right: 1px solid #88898D;
text-decoration: none;
}
..nav A:visited {
background-color: #FFFFFF;
display: block;
padding: 5px 0px 0px 12px;
width: 214px;
height: 28px;
font:Arial, Helvetica, sans-serif;
font-size:14px;
font-weight:bold;
color:#88898d;
text-decoration: none;
border-right: 1px solid #88898D;
}
..nav A:hover {
background-color: #4d4d4d;
display: block;
padding: 5px 0px 0px 12px;
width: 214px;
height: 28px;
font:Arial, Helvetica, sans-serif;
font-size:14px;
font-weight:bold;
color: #FFFFFF;
border-right: 1px solid #88898D;
text-decoration: none;
}
If someone could help I would really appreciate it.
Thanks,
Gabrielle
I have just written some simple rollover links in a table using CSS classes.
It views perfectly in IE but has added a couple of pixels on the top and
bottom of the row when you view it in Mozilla.
Please have a look at http://www.dovenetq.net.au/~gabrielle/
The CSS for the links are:
..nav A:link {
background-color: #FFFFFF;
display: block;
padding: 5px 0px 0px 12px;
width: 214px;
height: 28px;
font:Arial, Helvetica, sans-serif;
font-size:14px;
font-weight:bold;
color:#88898d;
text-decoration: none;
border-right: 1px solid #88898D;
}
..nav A:active {
background-color: #4d4d4d;
display: block;
padding: 5px 0px 0px 12px;
width: 214px;
height: 28px;
font:Arial, Helvetica, sans-serif;
font-size:14px;
font-weight:bold;
color: #FFFFFF;
border-right: 1px solid #88898D;
text-decoration: none;
}
..nav A:visited {
background-color: #FFFFFF;
display: block;
padding: 5px 0px 0px 12px;
width: 214px;
height: 28px;
font:Arial, Helvetica, sans-serif;
font-size:14px;
font-weight:bold;
color:#88898d;
text-decoration: none;
border-right: 1px solid #88898D;
}
..nav A:hover {
background-color: #4d4d4d;
display: block;
padding: 5px 0px 0px 12px;
width: 214px;
height: 28px;
font:Arial, Helvetica, sans-serif;
font-size:14px;
font-weight:bold;
color: #FFFFFF;
border-right: 1px solid #88898D;
text-decoration: none;
}
If someone could help I would really appreciate it.
Thanks,
Gabrielle
Comment