Image Link with Border

Thomas Mlynarczyk wrote:

Also sprach Els:


As the borders (on hover) add to the height of the picure,
there's a green line between the bottom of the photo and the
frame. (repetition of the bgm.gif)


Just alter the height of the picture or the bgm.gif, and the
green line will disappear as well.


Ah yes, I am aware of that. The example page I put online was actually just
for trying out this border hover thing. When I realized the "green line
problem" I thought it was not worth doing anything about it at this point,
because the "real" page would use completely different graphics. Meanwhile I
have tested on IE5,6, OP5,6,7, NN4,6,7 and Mozilla 1.1 and all is well (only
OP5,6, and NN4 refuse to show borders). B.T.W. isn't there a shorter way to
write my border definitions (if possible combining those with the same
color, so I need to specify the colors just once)?

Yes, you can write them together, separated by a comma (,):
body,h1,p,span,div {color: red; background: yellow;}
I think you can do that with the link-borders as well:
td a:link,visited img {border: 2px solid green;}
td a:hover,active img {border: 2px solid blue;}
Haven't tried that, though, have a go at it, and see if it
works :-)

--
Els

A mente é egual á uma paraqueda; funciona melhor aberta.

Els <els.aNOSPAM (AT) PLEASEtiscali (DOT) nl.invalid> wrote:

Yes, you can write them together, separated by a comma (,):
body,h1,p,span,div {color: red; background: yellow;}

Quite right, if that's what you really mean.

Be careful with the commas: omitting a comma and using a space instead
does not make the declaration formally incorrect ("invalid") but changes
its meaning completely.

I think you can do that with the link-borders as well:
td a:link,visited img {border: 2px solid green;}
td a:hover,active img {border: 2px solid blue;}

You _think_? And you think that the words visited and active, when not
preceded by a colon, have some magic meaning in CSS?

No, you cannot abbreviate things that way when using contextual selectors.
You need to write e.g.

td :link img, td :visited img {border: 2px solid green;}

to set a border for all those img elements that appear inside an <a href>
element that appears inside a td element. Note that a:link and a:visited
can be written as :link and :visited. In principle you could write this
more compactly:

td a[href] img {border: 2px solid green;}

but this is not supported by widespread browsers like IE 6 (which does not
support attribute selectors like [href] at all).

Haven't tried that, though, have a go at it, and see if it
works :-

What a foolish advice. Especially since it might appear to "work" (i.e.,
do what you mean, even though the specifications clearly imply that a
conforming browser must do something else) on some faulty browsers.
First check what the specifications say. Then start checking how
widespread browser support is, and draw your conclusions.

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

Jukka K. Korpela wrote:

Els <els.aNOSPAM (AT) PLEASEtiscali (DOT) nl.invalid> wrote:

Haven't tried that, though, have a go at it, and see if it
works :-

What a foolish advice. Especially since it might appear to "work" (i.e.,
do what you mean, even though the specifications clearly imply that a
conforming browser must do something else) on some faulty browsers.
First check what the specifications say. Then start checking how
widespread browser support is, and draw your conclusions.

You are absolutely right.
Won't give that advice anymore.

--
Els

A mente é egual á uma paraqueda; funciona melhor aberta.

"Evertjan." <exjxw.hannivoort (AT) interxnl (DOT) net> wrote:

Did you learn to use css fluently just by memorizing the specs, Jukka??

"Evertjan.", if that is your full name as you claim, I have learned
not to rely on my memory in such matters.

This aside, you're really making yourself a fool in telling that people
should just "try" writing something that looks like CSS and "see" whether
it "works". Such nonsense might sell in some circles, but anyone who has
the faintest idea of what CSS is will see the foolishness at least after a
simple explanation.

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

On Thu, Aug 21, Evertjan. inscribed on the eternal scroll:

Experience comes with trying out not from reading specs.

Neither is of any practical use without the other.

--
"If designers haven't done previous work for the web, they can
come to it with certain preconceptions." - Martin Tanton in
uk.n.w.a
(a sample of the British art of understatement! -ed.)

What I'd like to know is if I can somehow combine the two statements below
into a single one. I know I can specify all for border sides at once and I
can specify them one by one as shown below, but can I specify two adjacent
ones together?

border-right:1px solid white;
border-bottom:1px solid white;

Evertjan. wrote:

Els wrote on 21 aug 2003 in comp.infosystems.www.authoring.stylesheets:

You are absolutely right.
Won't give that advice anymore.

No, Els, he is not right.

Pardon? Do you think that some hacks that *seem to work with some piece
of software* should be used in wide? HTML "comments" like <! this >, for
example?

Trying out is the essence of programming.

Yes, as a programmer I'm aware of that. But there's a difference between
trying out different algorithms or methods and trying out different
syntax for the code. If you've ever programmed you've probably noticed
that blindly typing something in a computer program seldom produces
anything usable. This case isn't that different from coming up with your
own syntax and hoping that the user agent ("compiler" if you may)
accepts it and even does what you're trying to do.

Perhaps you should try to compile following C program. "Haven't tried
that, though, have a go at it, and see if it works :-)"

void, main{char** argv,intl argc}
[
output("Hello World"):
]:


--
Mikko

"Thomas Mlynarczyk" <blue_elephant55 (AT) hotmail (DOT) com> wrote:

What I'd like to know is if I can somehow combine the two statements
below into a single one. I know I can specify all for border sides at
once and I can specify them one by one as shown below, but can I
specify two adjacent ones together?

border-right:1px solid white;
border-bottom:1px solid white;

No, you cannot combine them into a single declaration without affecting
other matters. There are many variants of setting border properties,
ranging from the 'border' shorthand to individual properties like
'border-right-width', and, in between, properties like 'border-right'.
But they don't form a very logical set.

You could set e.g.

border: solid white;
border-width: 0 1px 1px 0;

and this might well have the meaning you're after, but in principle it
sets the upper and left border too (to nonexistent), thereby potentially
overriding something you had set previously. And even in this case, you
would need to repeat the value 1px in the declaration, since there's no
way to tell that the right and bottom border be of the same width, except
by explicitly setting each of them to the same value.

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

Evertjan. wrote:

Els wrote on 21 aug 2003 in comp.infosystems.www.authoring.stylesheets:

You are absolutely right.
Won't give that advice anymore.


No, Els, he is not right.

Trying out is the essence of programming.

Inducing that is a good cause in itself.

Hey, I didn't say I was gonna stop my trial and error style
of coding :-) I just said I wasn't gonna give that advice
anymore.

And if I would want to give such advice again, I will
-hopefully I'll remember this by then- add a note that after
something 'works', it has to be validated, _and_ tested on a
whole bunch of different browsers. That's the way I'm doing
it anyway. But I do have a glance at the specs sometimes -
mainly when one of my excercises won't work :-)

It's like Alan J. Flavell said in his 11.10hrs message:
Neither is of any practical use without the other.
(reading specs and trying out)

Laat je niet overdonderen.

Maak je daar maar niet ongerust over, :-D
(tussen haakjes, ik dacht altijd dat degene op wie je
reageerde een vrouw was...)

--
Els

A mente é egual á uma paraqueda; funciona melhor aberta.

Thomas Mlynarczyk wrote:

What I'd like to know is if I can somehow combine the two statements below
into a single one. I know I can specify all for border sides at once and I
can specify them one by one as shown below, but can I specify two adjacent
ones together?

border-right:1px solid white;
border-bottom:1px solid white;

Well, I think it could be:

td a:link img{border-right, border-bottom: 1px solid white;}
or maybe
td a:link img{border-right-bottom: 1px solid white;}

But: I'll have a look in the specs.
I guess it would have to be explained in
http://www.w3.org/TR/REC-CSS1#grouping, but it isn't.

The specs say this:

<quote>
To reduce the size of style sheets, one can group selectors
in comma-separated lists:

H1, H2, H3 { font-family: helvetica }

Similarly, declarations can be grouped:

H1 {
font-weight: bold;
font-size: 12pt;
line-height: 14pt;
font-family: helvetica;
font-variant: normal;
font-style: normal;
}

In addition, some properties have their own grouping syntax:

H1 { font: bold 12pt/14pt helvetica }

which is equivalent to the previous example.
</quote>

So you see, the specs don't say you can, and they don't say
you can't....

It does say however, in http://www.w3.org/TR/REC-CSS1#border
that you _cannot_ do this:
td a:link img {border-color: black white black white}

Now _I_ would try it out, and see if it validates and test
it in all the browsers I have here.
If you want to do that, be my guest.

But OTOH: why go through so much trouble if you have to type
border-top, border-right, border-bottom and border-left only
once per selector?

--
Els

A mente é egual á uma paraqueda; funciona melhor aberta.