Trouble with CSS in tables with Mozilla

[Norm Gibson]

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

[Jim Moe]

Norm Gibson wrote:

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.
In almost all cases where Mozilla and IE render differently, it is IE
that is at fault, not Mozilla.
Please have a look at http://www.dovenetq.net.au/~gabrielle/
Remove "height: 28px;" from the ".nav a:..." styles. Or remove
"padding:5px 0px 0px 12px;". Mozilla respects both the height and padding
specs, adds them together and expands the cell height to accommodate the
additional space; IE does not. The table cell height and width attributes
are more presentation guidelines rather than hard requirements.

Please validate your html and css before posting.
The CSS for the links are:

.nav A:link {
[...]
font:Arial, Helvetica, sans-serif;
font-size:14px;

1. Incorrect syntax. It should be "font-family: Arial, Helvetica,
sans-serif;".
2. Using a font size in pixels (or points) is a bad plan. The text cannot
be scaled in IE for those with visual challenges. Use % or EMs.
3. Arial is not a very good screen font. If you must use a Microsoft font,
use tahoma (verdana has its own problems). Helvetica is almost universally
available and looks well in both screen and print.

--
jmm dash list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)

[Arne]

Once upon a time *Jim Moe* wrote:

Norm Gibson wrote:

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.
In almost all cases where Mozilla and IE render differently, it is IE
that is at fault, not Mozilla.

Please have a look at http://www.dovenetq.net.au/~gabrielle/

Remove "height: 28px;" from the ".nav a:..." styles. Or remove
"padding:5px 0px 0px 12px;". Mozilla respects both the height and padding
specs, adds them together and expands the cell height to accommodate the
additional space; IE does not. The table cell height and width attributes
are more presentation guidelines rather than hard requirements.

Please validate your html and css before posting.

The CSS for the links are:

.nav A:link {
[...]
font:Arial, Helvetica, sans-serif;
font-size:14px;

1. Incorrect syntax. It should be "font-family: Arial, Helvetica,
sans-serif;".
2. Using a font size in pixels (or points) is a bad plan. The text cannot
be scaled in IE for those with visual challenges. Use % or EMs.

And if any font size is set, use 100% as it's most users "normal"
(default) size.
3. Arial is not a very good screen font. If you must use a Microsoft font,
use tahoma (verdana has its own problems). Helvetica is almost universally
available and looks well in both screen and print.

What's wrong with Arial? It's a very good looking font in my opinion,
most used font on websites and installed on every computer I belive.
Tahoma is very ugly, at least in "normal" or larger sizes. How
universally is Helvetica? I don't have on my Windows computer.

--
/Arne

Top posters will be ignored. Quote the part you
are replying to, no more and no less! And don't
quote signatures, thank you.

[Mr. Wilson]

>

What's wrong with Arial? It's a very good looking font in my opinion,
most used font on websites and installed on every computer I belive.
Tahoma is very ugly, at least in "normal" or larger sizes. How
universally is Helvetica? I don't have on my Windows computer.

Uh oh, NOW you've gone and done it. Let the "Arial sucks" barrage begin.

--
Mr. Wilson

[Adrienne]

Gazing into my crystal ball I observed Arne <in*****@domain.invalid>
writing in news:3i************@individual.net:

What's wrong with Arial? It's a very good looking font in my opinion,
most used font on websites and installed on every computer I belive.
Tahoma is very ugly, at least in "normal" or larger sizes. How
universally is Helvetica? I don't have on my Windows computer.

I usually do arial, helvetica, sans-serif. IIRC Helvetica is Mac's version
of Arial, but there are PC versions of it available. I have it on my
system, it's actually quite nice.

--
Adrienne Boswell
http://www.cavalcade-of-coding.info
Please respond to the group so others can share

[Jim Moe]

Adrienne wrote:

I usually do arial, helvetica, sans-serif. IIRC Helvetica is Mac's version
of Arial, but there are PC versions of it available. I have it on my
system, it's actually quite nice.

Helvetica was designed in the 1920s. Arial is MS's answer to Helvetica
since no Truetype version of Helvetica existed in the early 1990s.
Nevertheless Helvetica is pre-loaded on almost all operating systems:
Windows, linux, macOS, etc.

--
jmm dash list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)

[Adrienne]

Gazing into my crystal ball I observed Jim Moe
<jm***************@sohnen-moe.com> writing in
news:gd********************@giganews.com:

Adrienne wrote:

I usually do arial, helvetica, sans-serif. IIRC Helvetica is Mac's
version of Arial, but there are PC versions of it available. I have
it on my system, it's actually quite nice.

Helvetica was designed in the 1920s. Arial is MS's answer to
Helvetica
since no Truetype version of Helvetica existed in the early 1990s.
Nevertheless Helvetica is pre-loaded on almost all operating systems:
Windows, linux, macOS, etc.

Thanks for posting. You learn something new everyday.

--
Adrienne Boswell
http://www.cavalcade-of-coding.info
Please respond to the group so others can share

[C A Upsdell]

Adrienne wrote:

Gazing into my crystal ball I observed Jim Moe
<jm***************@sohnen-moe.com> writing in
news:gd********************@giganews.com:

Adrienne wrote:

I usually do arial, helvetica, sans-serif. IIRC Helvetica is Mac's
version of Arial, but there are PC versions of it available. I have
it on my system, it's actually quite nice.

Helvetica was designed in the 1920s. Arial is MS's answer to
Helvetica
since no Truetype version of Helvetica existed in the early 1990s.
Nevertheless Helvetica is pre-loaded on almost all operating systems:
Windows, linux, macOS, etc.

Thanks for posting. You learn something new everyday.

And some of what you learn is wrong. Helvetica is NOT pre-loaded on
most Windows systems.

[Adrienne]

Gazing into my crystal ball I observed C A Upsdell <""cupsdellXXX\"@-@-
@XXXupsdell.com"> writing in news:ac********************@rogers.com:

Adrienne wrote:

Gazing into my crystal ball I observed Jim Moe
<jm***************@sohnen-moe.com> writing in
news:gd********************@giganews.com:

Adrienne wrote:

I usually do arial, helvetica, sans-serif. IIRC Helvetica is Mac's
version of Arial, but there are PC versions of it available. I have
it on my system, it's actually quite nice.
Helvetica was designed in the 1920s. Arial is MS's answer to
Helvetica
since no Truetype version of Helvetica existed in the early 1990s.
Nevertheless Helvetica is pre-loaded on almost all operating systems:
Windows, linux, macOS, etc.

Thanks for posting. You learn something new everyday.

And some of what you learn is wrong. Helvetica is NOT pre-loaded on
most Windows systems.

Actually, I don't think it's preloaded on ANY windows system.

--
Adrienne Boswell
http://www.cavalcade-of-coding.info
Please respond to the group so others can share

[C A Upsdell]

Adrienne wrote:

Gazing into my crystal ball I observed C A Upsdell <""cupsdellXXX\"@-@-
@XXXupsdell.com"> writing in news:ac********************@rogers.com:

Adrienne wrote:

Gazing into my crystal ball I observed Jim Moe
<jm***************@sohnen-moe.com> writing in
news:gd********************@giganews.com:

Adrienne wrote:
>I usually do arial, helvetica, sans-serif. IIRC Helvetica is Mac's
>version of Arial, but there are PC versions of it available. I have
>it on my system, it's actually quite nice.
>

Helvetica was designed in the 1920s. Arial is MS's answer to
Helvetica
since no Truetype version of Helvetica existed in the early 1990s.
Nevertheless Helvetica is pre-loaded on almost all operating systems:
Windows, linux, macOS, etc.

Thanks for posting. You learn something new everyday.

And some of what you learn is wrong. Helvetica is NOT pre-loaded on
most Windows systems.

Actually, I don't think it's preloaded on ANY windows system.

Might be, if ATM were preloaded.