Underlined links

[Steve K]

Is there anyway to control the underline on links? I know how to get rid
of them but mine seem to be too close to the bottom of the font. The
line is touching the font. On other sites this is not the case.

The thing I'm worried about is this only happens on a Windows browser.
It looks normal/correct on my mac IE 5.1.

The page is my first dive into CSS, so it might be something I've done
wrong there.

Here is the page under construction:

http://aem.cornell.edu/business_site...rs/c_index.htm

Thanks

Steve

[Jukka K. Korpela]

Steve K <sm***@cornell.edu> wrote:

Is there anyway to control the underline on links?
Luckily most browsers give such a control to users.
I know how to get rid of them
Maybe, maybe not.
but mine seem to be too close to the bottom of the font.
The position of the underline is determined by the browser. There are
plans to add properties to CSS for this in CSS 3, but that's just
drafting and won't turn into anything useful on the WWW for a few
years.
The line is touching the font.
This depends on the font, and on the browser.
http://aem.cornell.edu/business_site...rs/c_index.htm

Sanity check: I try to increase font size using IE's Font Size button.
It fails. Ergo, the page (the CSS) fails. I would suggest that you
start working with this real problem. The FAQ is a good starting place.
Don't forget to use a CSS checker to detect the syntax errors that you
now have.

--
Yucca, http://www.cs.tut.fi/~jkorpela/

[Steve K]

In article <Xn****************************@193.229.0.31>, "Jukka K.
Korpela" <jk******@cs.tut.fi> wrote:
Thanks, I'm real close to just doing the whole site the old way, plain
old html. I'm quite new to CSS and the more I learn about it the more I
realize how much there is to it. Right now I'm in over my head.

Steve K <sm***@cornell.edu> wrote:

Is there anyway to control the underline on links?

Luckily most browsers give such a control to users.

I know how to get rid of them

Maybe, maybe not.

but mine seem to be too close to the bottom of the font.

The position of the underline is determined by the browser. There are
plans to add properties to CSS for this in CSS 3, but that's just
drafting and won't turn into anything useful on the WWW for a few
years.

The line is touching the font.

This depends on the font, and on the browser.

http://aem.cornell.edu/business_site...rs/c_index.htm

Sanity check: I try to increase font size using IE's Font Size button.
It fails. Ergo, the page (the CSS) fails. I would suggest that you
start working with this real problem. The FAQ is a good starting place.
Don't forget to use a CSS checker to detect the syntax errors that you
now have.

[Matt]

On Thu, 23 Oct 2003 12:01:52 -0400, Steve K wrote:

Is there anyway to control the underline on links? I know how to get rid
of them but mine seem to be too close to the bottom of the font. The
line is touching the font. On other sites this is not the case.

The thing I'm worried about is this only happens on a Windows browser.
It looks normal/correct on my mac IE 5.1.

The page is my first dive into CSS, so it might be something I've done
wrong there.

Here is the page under construction:

http://aem.cornell.edu/business_site...rs/c_index.htm

Few things:
a:hover {text-decoration:none; color:cc0000;}
should be
a:hover {text-decoration:none; color: #cc0000;}

..floatleft { float: left; margin: 0 10px 5px 0; }
should be
..floatleft { float: left; margin: 0px 10px 5px 0px; }
(if we're being pedantic)

..floatquest { float: left; margin: 2px 9px 2px 2px; align="absmiddle"}
align="absmiddle" isn't CSS.

font size: 7pt; line-height: 14pt;
you'd be much, much better to use
font-size: 100%; line-height: 100% (or not specify line-height at all)

Proportional font sizes scale much better (pt sizes don't scale). I'm sure
there's an FAQ somewhere... someone will tell us where it is. The same
goes for the margins - using ex measurements (1ex = height of an x) means
the page scales properly.

You're missing an ; after uppercase.

I'll leave the HTML as this is the CSS group.

Visually, the page looks a bit crampt. This is because of the line-height
you specified, you're best to leave this out.

'Search' and 'Topics' look a bit out of place, because they're images and
the rest of that menu is text. Consider making them text, too.

<pedantic stuff>
You're inconsistent with the dashes:
top--firms
start-ups -- for careers
possible--even
</ps>

"Want to know..." and "Willian D Perez..." paragraphs have overlapping
text because the line-height it too small. This might be because I don't
have Verdana.

I think the table of companies has a too small font.

Sorry to be pedantic, but that's just me :-)
In brief:
* remove all the line-height bits
* Don't set font sizes with pt. Use em, ex or %.

That will probably make a big improvement.

HTH, HAND :-)

--
Matt
-----= Posted via Newsfeeds.Com, Uncensored Usenet News =-----
http://www.newsfeeds.com - The #1 Newsgroup Service in the World!
-----== Over 100,000 Newsgroups - 19 Different Servers! =-----

[Matt]

On Thu, 23 Oct 2003 13:57:29 -0400, Steve K wrote:

In article <Xn****************************@193.229.0.31>, "Jukka K.
Korpela" <jk******@cs.tut.fi> wrote:
Thanks, I'm real close to just doing the whole site the old way, plain
old html. I'm quite new to CSS and the more I learn about it the more I
realize how much there is to it. Right now I'm in over my head.

If there's more than one page, use this in the <head> of the document:

<link rel="stylesheet" type="text/css" media="all" href="style.css">

And move what's between the <style> and </style> into a text document
called style.css in the same folder as the HTML page (or change the href=
accordingly).

This means you can use the stylesheet for lots of pages, and changing it
once will affect all of them. I would suggest this stylesheet:

a:link {
color: black;
text-decoration: underline;
}
a:visited {
color: #999;
}
a:hover {
text-decoration: none;
color:c00;
}
a:active {
color: #999;
}

..floatleft {
float: left;
margin: 0ex 1.5ex 0.7ex 0ex;
}
..floatright {
float: right;
margin: 0ex 0ex 0.7ex 1.5ex;
}
..floatquest {
float: left;
margin: 0.1ex 1.5ex 0.1ex 0.1ex;
}
..quote {
margin: 0ex 0ex 0ex 12ex;
font-size: 0.9em; /*if it _must_ be smaller*/
color: c00;
margin-top: 0ex;
}
..quoteb {
text-align: right;
margin: 1ex 0ex 0ex 0ex;
font-size: 0.9em;
color: c00;
margin-top: 0ex;
margin-right: 3ex;
font-weight: bold;
}
..quote1 {
margin: 0ex 0ex 0ex 5ex;
font-size: 0.9em;
color: c00;
}
..border {
margin: 2ex 0ex 2ex 0ex;
}
..space {
margin: 3ex 0ex 0ex 0ex;
}

..boldtable, .boldtable td, .boldtable th {
font-size: 0.95em;
color: #000;
}
..boldtable2 {
font-size: 0.95em;
color: #000;
border: 0.1ex solid #f00;
margin: 0.2ex;
}

..td1 {background: #ffe9d4;}

body {
font-family: sans-serif;
font-size: 1em; /*not necessary, I'm just emphasising it*/
}

h1 {
color: #c00;
font size: 1.3em;
font-weight: bold;
}
h2 {
color: #000;
font-size: 1.2em;
font-weight: bold;
margin-top: 2.5ex;
}
h3 {
color: #000;
font size: 1.1em;
margin-top: 2.5ex;
margin-bottom: 1ex;
font-weight: bold;
}
p {
font-size: 1em;
}
p.italic {
/* don't use this, use <em>stuff</em> in the HTML, which is italic by
default for visual browsers and is better markup, e.g. for blind people: it
denotes emphasis, rather than just a paragraph with style.*/
}

and so on...

NOTE: I've just guessed the dimensions, I can't really visualise pixels
because they're a different size on different screens (which is one reason
why you shouldn't use them). Same goes for points.

see <http://213.162.109.93/help/cornell.html>
I'm amazed at how similar it is.

There's a few errors in the HTML though:
<http://validator.w3.org/check?uri=http%3A%2F%2F213.162.109.93%2Fhelp%2Fcor nell.html&charset=%28detect+automatically%29&docty pe=HTML+4.01+Transitional>

Hope that helps (it bloody well should ;-)

--
Matt
-----= Posted via Newsfeeds.Com, Uncensored Usenet News =-----
http://www.newsfeeds.com - The #1 Newsgroup Service in the World!
-----== Over 100,000 Newsgroups - 19 Different Servers! =-----

[Barry Pearson]

Matt wrote:
[snip]

.floatleft { float: left; margin: 0 10px 5px 0; }
should be
.floatleft { float: left; margin: 0px 10px 5px 0px; }
(if we're being pedantic)

[snip]

Why?

--
Barry Pearson
http://www.Barry.Pearson.name/photography/
http://www.BirdsAndAnimals.info/
http://www.ChildSupportAnalysis.co.uk/

[Matt]

On Thu, 23 Oct 2003 21:49:29 +0100, Barry Pearson wrote:

Matt wrote:
[snip]

.floatleft { float: left; margin: 0 10px 5px 0; } should be
.floatleft { float: left; margin: 0px 10px 5px 0px; } (if we're being
pedantic) [snip]

Why?

IIRC all lengths should have a unit.

Quote from <http://www.w3.org/TR/CSS21/syndata.html#length-units> The format of a length value (denoted by <length> in this specification)
is a <number> (with or without a decimal point) immediately followed by a
unit identifier (e.g., px, em, etc.). After a zero length, the unit
identifier is optional.

Well, I'm wrong, it's optional. I was being ultra-pedantic anyway, and I
think it's good practice to specify units where applicable.

Not that it's relevant, really, but 0 Celsius != 0 Fahrenheit != 0 Kelvin.

--
Matt
-----= Posted via Newsfeeds.Com, Uncensored Usenet News =-----
http://www.newsfeeds.com - The #1 Newsgroup Service in the World!
-----== Over 100,000 Newsgroups - 19 Different Servers! =-----

[Alan J. Flavell]

On Fri, 24 Oct 2003, Matt wrote:

After a zero length, the unit identifier is optional.
Well, I'm wrong, it's optional. I was being ultra-pedantic anyway,

I disagree, and I speak as a fully paid-up pedant. ;-)
and I think it's good practice to specify units where applicable.
It's arguable. But I'll ofer you a free tip: when you claim to be
offering a pedantic reply, *do* take advantage of this fine Web thingy
to consult the authoritative documents, before posting.

Offering "good practice" guidance can be useful (though it's arguable
whether it was useful here); but clothing it in false attire of a
"pedantic" reply is not helpful.
Not that it's relevant, really, but 0 Celsius != 0 Fahrenheit != 0 Kelvin.

You're quite right: in this context, it's not relevant.

all the best

[Nikolaos Giannopoulos]

Matt wrote:

On Thu, 23 Oct 2003 21:49:29 +0100, Barry Pearson wrote:

Well, I'm wrong, it's optional. I was being ultra-pedantic anyway, and I
think it's good practice to specify units where applicable.
The key is "where applicable" - any unit on 0 does not make a difference
except that it just adds additional text chars to your CSS.

I don't see any reason to do this.

Not that it's relevant, really, but 0 Celsius != 0 Fahrenheit != 0 Kelvin.

As another poster said its not relevant but lets take your example anyways.

0 Kelvin = -273 Celcius = -459 Fahrenheit
0 Fahreinheit = -18 Celcius = 255 Kelvin
0 Celcius = 32 Fahrenheit = 273 Kelvin

On the other hand in CSS:

0px = 0
0 = 0

So what's your point? How does this in any way help your argument?

--Nikolaos

[Eric Bohlman]

Nikolaos Giannopoulos <ni******@solmar.ca> wrote in
news:4a********************@magma.ca:

Matt wrote:

On Thu, 23 Oct 2003 21:49:29 +0100, Barry Pearson wrote:

Well, I'm wrong, it's optional. I was being ultra-pedantic anyway,
and I think it's good practice to specify units where applicable.

The key is "where applicable" - any unit on 0 does not make a
difference except that it just adds additional text chars to your CSS.

I don't see any reason to do this.

Maintainability. If you later decide to change the value from zero to
something else, you're less likely to inadvertently leave off the unit or
use the wrong unit.

[Nikolaos Giannopoulos]

Eric Bohlman wrote:

Nikolaos Giannopoulos <ni******@solmar.ca> wrote in
news:4a********************@magma.ca:

The key is "where applicable" - any unit on 0 does not make a
difference except that it just adds additional text chars to your CSS.

I don't see any reason to do this.

Maintainability. If you later decide to change the value from zero to
something else, you're less likely to inadvertently leave off the unit or
use the wrong unit.

I disagree - if you change a "0" to something else surely you will see
that you don't have any units "immediately" next to it.

e.g. .blah {margin: 10px 0 0 5px}

You are suggesting that you can do the following without realizing you
have no units - I imagine you can but then you can equally type anything
in place of an integer also.

..blah {margin: 10px 10 0 5px}

That you may quickly change something "without thinking" and not add the
units can happen but that this causes a maintentance issue is a little
too much IMO.

Maintenance is a huge issue in many respects however most often its an
issue when changing something has an impact somewhere else - the impact
here is exactly where you make the change i.e. right under your cursor ;-)

IMO, I could "see" someone arguing consistency (for no reason other than
asthetics) - but not maintainability.

--Nikolaos

[Safalra]

Matt <ma**********@hotmail.com> wrote in message news:<pa****************************@hotmail.com>. ..

p.italic {
/* don't use this, use <em>stuff</em> in the HTML, which is italic by
default for visual browsers and is better markup, e.g. for blind people: it
denotes emphasis, rather than just a paragraph with style.*/
}

More importantly, not all languages denote emphasis through the use of
italics (in Chinese, for example, emphasis is denoted through a dot
under each character being emphasised) - so in a future world where
machine translation has advanced to a reliable state, the use of
logical mark-up is even more important.

It seems strange that you promote logical mark-up in this part of the
stylesheet, and yet don't comment on the use of the 'quote' classes
rather than using <blockquote> in the page.

--- Stephen Morley ---
http://www.safalra.com