By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
443,836 Members | 2,059 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 443,836 IT Pros & Developers. It's quick & easy.

Image Link with Border

P: n/a
Hi,

I'm looking for a way to put a 1px solid border around the image in this
link:
<a href="some.html"><img src="some.gif"></a>
Well, that, by itself, is simple. However, I would like to have a different
border color for a mouse hover effect over the image. With Mozilla, I can
simply specify img:hover {...}, but IE allows hover only for <a>. So now I'm
looking for a way to set the border for my <a> element rather than the
<img>, but here I encounter some problems. It seems, I must specify a
width:0px, to make IE show the border (tested IE5). But I wasn't able to
make the <a>-border appear in Mozilla.

The following works with IE5, but not Mozilla (not even when I remove the
width:0px).

<a href="some.html" class="imageborder"><img src="some.jpg" border="0"></a>

..imageborder
{
width:0px;
cursor:hand;
border:1px solid black;
}

..imageborder:hover
{
border:1px solid red;
}

What can I do to make this compatible with "all" browsers?

(P.S.: NN4 doesn't like borders around images, but when I put the border in
the <a> element instead, is there a way to have NN4 display it properly -
even though NN4 will not support the hover effect?)

Greetings,
Thomas
Jul 20 '05 #1
Share this Question
Share on Google+
33 Replies


P: n/a
Els
Thomas Mlynarczyk wrote:
Hi,

I'm looking for a way to put a 1px solid border around the image in this
link:
<a href="some.html"><img src="some.gif"></a>
Well, that, by itself, is simple. However, I would like to have a different
border color for a mouse hover effect over the image. With Mozilla, I can
simply specify img:hover {...}, but IE allows hover only for <a>. So now I'm
looking for a way to set the border for my <a> element rather than the
<img>, but here I encounter some problems. It seems, I must specify a
width:0px, to make IE show the border (tested IE5). But I wasn't able to
make the <a>-border appear in Mozilla.

The following works with IE5, but not Mozilla (not even when I remove the
width:0px).

<a href="some.html" class="imageborder"><img src="some.jpg" border="0"></a>

.imageborder
{
width:0px;
cursor:hand;
border:1px solid black;
}

.imageborder:hover
{
border:1px solid red;
}

What can I do to make this compatible with "all" browsers?

(P.S.: NN4 doesn't like borders around images, but when I put the border in
the <a> element instead, is there a way to have NN4 display it properly -
even though NN4 will not support the hover effect?)


Sorry, can't test for NN4, but i make my image links with
borders like this, which works in IE, NS 7, Opera, Mozilla's
Firebird..

a:link img{text-decoration: none;
border-color: red;
border-width: 2px;
}

a:visited img{text-decoration: none;
border-color: yellow;
border-width: 2px;
}

a:hover img{text-decoration: none;
border-color: green;
border-width: 2px;
}

hth

--
Els

A mente egual uma paraqueda; funciona melhor aberta.

Jul 20 '05 #2

P: n/a
Also sprach Els:
Sorry, can't test for NN4, but i make my image links with
borders like this, which works in IE, NS 7, Opera, Mozilla's
Firebird..

a:link img{text-decoration: none;
border-color: red;
border-width: 2px;
}

a:visited img{text-decoration: none;
border-color: yellow;
border-width: 2px;
}

a:hover img{text-decoration: none;
border-color: green;
border-width: 2px;
}


Unfortunately, the green "hover" effect does not show on IE5 - I just
checked it. That's why I was looking for a way to put the border in the <a>
element instead of the <img> as your code does. Still, the combination
"a:hover img" is interesting.

Jul 20 '05 #3

P: n/a
Els
Thomas Mlynarczyk wrote:
Also sprach Els:

Sorry, can't test for NN4, but i make my image links with
borders like this, which works in IE, NS 7, Opera, Mozilla's
Firebird..

a:link img{text-decoration: none;
border-color: red;
border-width: 2px;
}

a:visited img{text-decoration: none;
border-color: yellow;
border-width: 2px;
}

a:hover img{text-decoration: none;
border-color: green;
border-width: 2px;
}

Unfortunately, the green "hover" effect does not show on IE5 - I just
checked it. That's why I was looking for a way to put the border in the <a>
element instead of the <img> as your code does. Still, the combination
"a:hover img" is interesting.


This I don't get. Have a look at
http://www.mediatech.nl/~rachel/Fram...chel/live.html
in IE 5. If you hover over the pics, you don't see a
purpleish border??
It is the start (only testing a few pages yet) of a new
version of a site which I actually made using IE 5!
If it works, check out the stylesheet...
I used "td a:hover img", because I wanted the border only on
the pics inside the table, not the images outside it...

--
Els

A mente egual uma paraqueda; funciona melhor aberta.

Jul 20 '05 #4

P: n/a
Els
Els wrote:
Els wrote:
Thomas Mlynarczyk wrote:
Also sprach Els:
Sorry, can't test for NN4, but i make my image links with
borders like this, which works in IE, NS 7, Opera, Mozilla's
Firebird..

a:link img{text-decoration: none;
border-color: red;
border-width: 2px;
}

a:visited img{text-decoration: none;
border-color: yellow;
border-width: 2px;
}

a:hover img{text-decoration: none;
border-color: green;
border-width: 2px;
}


Unfortunately, the green "hover" effect does not show on IE5 - I just
checked it. That's why I was looking for a way to put the border in
the <a>
element instead of the <img> as your code does. Still, the combination
"a:hover img" is interesting.


This I don't get. Have a look at
http://www.mediatech.nl/~rachel/Fram...chel/live.html in IE 5. If
you hover over the pics, you don't see a purpleish border??
It is the start (only testing a few pages yet) of a new version of a
site which I actually made using IE 5!
If it works, check out the stylesheet...
I used "td a:hover img", because I wanted the border only on the pics
inside the table, not the images outside it...

Sorry, got it, I thought it would work the way I wrote earlier, but it
doesn't. (not even in IE 6.0 :-))
The way it works is like this:

a:link {text-decoration: none;
color: red;
}

a:visited {text-decoration: none;
color: green;
}

a:hover {text-decoration: none;
color: yellow;
}

a:link img{border-color: white;
border-width: 2px;
}

a:visited img{border-color: orange;
border-width: 2px;
}

a:hover img{border-color: blue;
border-width: 2px;
}

For some reason, the regular links have to be mentioned as well.
Tested it this time :-)


Why don't I just test everything before I send a message!
Figured out, that if you leave out the regular links (just
in case you don't have any text-links), but still only put
a:hover {color:green;}, it does work too. - any color will
be good :-) and text-decoration:none is just something I
used, there is no need for that either.

--
Els

A mente egual uma paraqueda; funciona melhor aberta.

Jul 20 '05 #5

P: n/a
Thanks a lot, Els!

After having read your fist post (with the example site) I went there and
did about half an hour of work to figure out why it worked there but not on
my site - after having found out, I read your other posts :-) It's weird
that one must put an a:hover{whatever} to make IE do the hover effect. Now
it works on IE5, NN6, Mozilla 1.1 and OP7 (as tested by myself, I'll test
some other browsers later), NN4 and OP6 show no borders at all (For NN4 it's
normal since I hid them from it, don't know why OP6 doesn't show them, but
anyway it's okay, I can live with that).

Thanks again and greetings,

Thomas
Jul 20 '05 #6

P: n/a
"Els" <el*********@PLEASEtiscali.nl.invalid> schrieb im Newsbeitrag
news:bh**********@reader1.tiscali.nl...
Thomas Mlynarczyk wrote:

(Now I want to find out why it doesn't work in my Operas! ;-))


Els...

I am sorry I can't tell you about Opera, but you should absolutely avoid the
<div style="..."> syntax which totally messes up the page in Netscape 4 (on
both my Mac and PC). Use <div id="..."> instead and specify the style in the
stylesheet.

--
Markus
Jul 20 '05 #7

P: n/a
Also sprach Els:
Can anyone give me a link to an explanation of what exactly
is 'seen' and 'not seen' by Netscape 4?


Do you mean something like this:
http://www.richinstyle.com/bugs/netscape4.html


Jul 20 '05 #8

P: n/a
Els
Els wrote:
Markus Ernst wrote:
"Els" <el*********@PLEASEtiscali.nl.invalid> schrieb im Newsbeitrag
news:bh**********@reader1.tiscali.nl...
Thomas Mlynarczyk wrote:

(Now I want to find out why it doesn't work in my Operas! ;-))

And about Opera, I think I have figured it out, I'll report here after
I've tested my idea :-)


Found it. Something logical, but IE isn't that logical
apparently :-)
To display the border on hover, Opera needs to know what
style it is, so I put border: 2px solid instead of
border-width: 2px. That made Opera do what I want.

But: then IE displays the wrong colour border.
So I changed
td a:hover img{border-color: rgb(171,7,247);
border-width: 2px solid;}
to
td a:hover img{border: 2px solid rgb(171,7,247);}

(also on 'td a:link img' and 'td a:visited img')

and now it works in Opera as well as IE...
(IE is strange!!)

Thanks for putting your code here, Thomas, it made it easy
for me to find what was wrong.

But now there's something strange going on in NS 7.1, but
that happens to your
http://www.mlynarczyk-webdesign.de/borderhover.html
as well...

It appears to have something to do with underlining, as soon
as I find out exactly, I'll be back here ;-)
--
Els

A mente egual uma paraqueda; funciona melhor aberta.

Jul 20 '05 #9

P: n/a
Els
Els wrote:
Els wrote:
Markus Ernst wrote:
"Els" <el*********@PLEASEtiscali.nl.invalid> schrieb im Newsbeitrag
news:bh**********@reader1.tiscali.nl...

Thomas Mlynarczyk wrote:

(Now I want to find out why it doesn't work in my Operas! ;-))

And about Opera, I think I have figured it out, I'll report here after
I've tested my idea :-)

Found it. Something logical, but IE isn't that logical apparently :-)
To display the border on hover, Opera needs to know what style it is, so
I put border: 2px solid instead of border-width: 2px. That made Opera do
what I want.

But: then IE displays the wrong colour border.
So I changed
td a:hover img{border-color: rgb(171,7,247);
border-width: 2px solid;}
to
td a:hover img{border: 2px solid rgb(171,7,247);}

(also on 'td a:link img' and 'td a:visited img')

and now it works in Opera as well as IE...
(IE is strange!!)

Thanks for putting your code here, Thomas, it made it easy for me to
find what was wrong.

But now there's something strange going on in NS 7.1, but that happens
to your http://www.mlynarczyk-webdesign.de/borderhover.html
as well...

It appears to have something to do with underlining, as soon as I find
out exactly, I'll be back here ;-)


Right. the 'strange' thing in NS 7.1 was there in the other
browsers too (not with your page), but less 'jumpy', so I
didn't notice it.
I fixed it now, by adding 'text-decoration: none' to all the
img link,visited,hover styles. Works fine now in "any" browser.

But now your example page.
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)
In Netscape, the borders don't show before you hover, so it
jumps when you do.

The funny thing is, that if you take out now the
'a:hover{text-decoration:none;}' which we thought it needed,
the pages works just fine.

-- was I wrong yesterday, or am I wrong now??? -- :-)

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

--
Els

A mente egual uma paraqueda; funciona melhor aberta.

Jul 20 '05 #10

P: n/a
Els
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.

Jul 20 '05 #11

P: n/a
Els <el*********@PLEASEtiscali.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/
Jul 20 '05 #12

P: n/a
Els
Jukka K. Korpela wrote:
Els <el*********@PLEASEtiscali.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.

Jul 20 '05 #13

P: n/a
"Evertjan." <ex**************@interxnl.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/
Jul 20 '05 #14

P: n/a
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;

Jul 20 '05 #15

P: n/a
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.)
Jul 20 '05 #16

P: n/a
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

Jul 20 '05 #17

P: n/a
"Thomas Mlynarczyk" <bl*************@hotmail.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/
Jul 20 '05 #18

P: n/a
Els
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.

Jul 20 '05 #19

P: n/a
Els
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.

Jul 20 '05 #20

P: n/a
Els
Thomas Mlynarczyk
Els:
Haven't tried that, though, have a go at it, and see if it
works :-)


Next time?
<http://gallery.theopalgroup.com/selectoracle/>

FWIW :-)

John OO
--

<http://webcel.nl/>
<http://www.webcel.nl/bayshop/shop/bayshop.html>

"Time is what prevents everything from happening at once"
- John Archibald Wheeler -
Jul 20 '05 #21

P: n/a
Els
John W. wrote:
Els

Thomas Mlynarczyk

Els:


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

Next time?
<http://gallery.theopalgroup.com/selectoracle/>

FWIW :-)


FWIW? IWAM!! (;-D)

Thomas, if you read this: border-right, border-bottom gives
a syntax error, but border-right-bottom doesn't.

Thanks John! Added it to my favorites :-)

--
Els

A mente egual uma paraqueda; funciona melhor aberta.

Jul 20 '05 #22

P: n/a
"Evertjan."
Els
You are absolutely right.
Won't give that advice anymore.


No, Els, he is not right.

Trying out is the essence of programming.

HTML or CSS have nothing to do with programming.
Laat je niet overdonderen.


You used the try-out method on this site?
<http://www.xs4all.nl/~ehannivo/>

John OO
--

<http://webcel.nl/>
<http://www.webcel.nl/bayshop/shop/bayshop.html>

"Time is what prevents everything from happening at once"
- John Archibald Wheeler -
Jul 20 '05 #23

P: n/a
Els wrote:
Thomas Mlynarczyk wrote:
What I'd like to know is if I can somehow combine the two statements below
into a single one.

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.


Hmmm, didn't you just promise Jukka you wouldn't give advice like this
again? These suggestions of yours don't help anyone, they only show
your own ignorance.

--
To email a reply, remove (dash)ns(dash). Mail sent to the ns
address is automatically deleted and will not be read.

Jul 20 '05 #24

P: n/a
Els
Lauri Raittila wrote:
In article <bi**********@reader1.tiscali.nl>, Els wrote:
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:

[snip]

But isn't.

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:

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


Which mean that you can't.


I didn't know that.
It would take 100000 times more space to
explicitly state everything that is not possible.
Sounds logical :-)
If grouping section states that selectors are groupable, it does also mean that other things are not, since there is no syntax for other grouping.
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}
http://www.w3.org/TR/REC-CSS1#border-color
| 'border-color' can have from one to four values, and the values are set
| on the different sides as for 'border-width' above.

Says that you can.


Okay, so I was wrong again :-(

It's just that I read the following in
http://www.w3.org/TR/REC-CSS1#border
<quote>
Unlike the shorthand 'margin' and 'padding' properties, the
'border' property cannot set different values on the four
borders. To do so, one or more of the other border
properties must be used.
</quote>
Maybe you should learn some reading comprehension.


I guess so. Could you be so kind to explain the a.m. quote
to me? (And I'm not asking this in a 'well, what is this
then?!'-manner, I seriously don't understand what it boils
down to)

--
Els

A mente egual uma paraqueda; funciona melhor aberta.

Jul 20 '05 #25

P: n/a
In article <bi**********@reader1.tiscali.nl>, Els wrote:
Lauri Raittila wrote:
It's just that I read the following in
http://www.w3.org/TR/REC-CSS1#border
<quote>
Unlike the shorthand 'margin' and 'padding' properties, the
'border' property cannot set different values on the four
borders. To do so, one or more of the other border
properties must be used.
</quote>
Maybe you should learn some reading comprehension.
I guess so. Could you be so kind to explain the a.m. quote
to me?


That quote explains that 'border' shorthand is different from 'margin'
and 'padding'. It doesn't say anything about 'border-color', exept it
suggests that in order to have diffenrent borders in different sides, you
need to use other border properties. Logically, next thing you need to do
is to find out what are those other border properties.
(And I'm not asking this in a 'well, what is this
then?!'-manner, I seriously don't understand what it boils
down to)


If you don't understand part of something, it usually helps when you read
it as whole. It doesn't take more than maybe 8 hours to read whole CSS1
spec with dictionary, assuming you know everyday english. (I did that few
years ago myself.)

--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Saapi lhett meili, jos aihe ei liity ryhmn, tai on yksityinen
tjsp., mutta l lhet samaa viesti meilitse ja ryhmn.

Jul 20 '05 #26

P: n/a
Els
Lauri Raittila wrote:
In article <bi**********@reader1.tiscali.nl>, Els wrote:
Lauri Raittila wrote:

It's just that I read the following in
http://www.w3.org/TR/REC-CSS1#border
<quote>
Unlike the shorthand 'margin' and 'padding' properties, the
'border' property cannot set different values on the four
borders. To do so, one or more of the other border
properties must be used.
</quote>
Maybe you should learn some reading comprehension.


I guess so. Could you be so kind to explain the a.m. quote
to me?


That quote explains that 'border' shorthand is different from 'margin'
and 'padding'. It doesn't say anything about 'border-color', exept it
suggests that in order to have diffenrent borders in different sides, you
need to use other border properties. Logically, next thing you need to do
is to find out what are those other border properties.
(And I'm not asking this in a 'well, what is this
then?!'-manner, I seriously don't understand what it boils
down to)


If you don't understand part of something, it usually helps when you read
it as whole. It doesn't take more than maybe 8 hours to read whole CSS1
spec with dictionary, assuming you know everyday english. (I did that few
years ago myself.)


In the specs, the a.m. quote is followed by an example. And
I do understand the example, but I can't see the connection
between the quote and the example.

I can read the whole CSS1 in less than 8 hours, and I won't
need a dictionary :-) It's just that I (understanding the
meaning of every single word, as well as of every complete
sentence in that quote) don't get what it is saying. And I
thought you might give me an example of what it is exactly
that it says you cannot do (something that you _can_ do with
margin and padding)...

Not because I think your english is better than mine (it
might be, I don't know that :-)), but because you have a
better understanding of CSS than I have.(which I think I do
know :-))

--
Els

A mente egual uma paraqueda; funciona melhor aberta.

Jul 20 '05 #27

P: n/a
Els wrote:
Lauri Raittila wrote:
In article <bi**********@reader1.tiscali.nl>, Els wrote:
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}


http://www.w3.org/TR/REC-CSS1#border-color
| 'border-color' can have from one to four values, and the values are set
| on the different sides as for 'border-width' above.

Says that you can.


Okay, so I was wrong again :-(

It's just that I read the following in
http://www.w3.org/TR/REC-CSS1#border
<quote>
Unlike the shorthand 'margin' and 'padding' properties, the
'border' property cannot set different values on the four
borders. To do so, one or more of the other border
properties must be used.
</quote>
Maybe you should learn some reading comprehension.


I guess so. Could you be so kind to explain the a.m. quote
to me? (And I'm not asking this in a 'well, what is this
then?!'-manner, I seriously don't understand what it boils
down to)


The quote hints that margin and padding can have values such as

margin: 2em;
padding: 0.5em 0.25em;
margin: 1em 2em 3em 4em;
padding: auto 0.15em;

However, as shorthand 'border' affects more than simply -left, -right,
-top, -bottom properties (borders have color, width and style) one
simply cannot use shorthand 'margin' property to assign different styles
on four borders.

One would need to say stuff like
border: solid black 1px dashed green thick dotted thin red none;
and that's something the spec writers tried to avoid.

Seriosly, spend some time reading the spec. As an easier(?) alternative
you could try browsing through the CSS1 test suite[1]. In addition to
learning how those properties should behave, it gives you some hints
where your user agent doesn't get it right. In any case, the problem
shouldn't be the lack of reading comprehension - English isn't my or
Lauri's first or even second language[2].

[1] http://www.w3.org/Style/CSS/Test/CSS1/current/
[2] Swedish might be the second official language where we live, but it
doesn't say we can speak it... My Swedish is pretty bad anyway. I don't
know about Lauri's.

--
Mikko

Jul 20 '05 #28

P: n/a
Els
Mikko Rantalainen wrote:
Els wrote:
Lauri Raittila wrote:
In article <bi**********@reader1.tiscali.nl>, Els wrote:

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}
http://www.w3.org/TR/REC-CSS1#border-color
| 'border-color' can have from one to four values, and the values are
set | on the different sides as for 'border-width' above.

Says that you can.

Okay, so I was wrong again :-(

It's just that I read the following in
http://www.w3.org/TR/REC-CSS1#border
<quote>
Unlike the shorthand 'margin' and 'padding' properties, the 'border'
property cannot set different values on the four borders. To do so,
one or more of the other border properties must be used.
</quote>
Maybe you should learn some reading comprehension.

I guess so. Could you be so kind to explain the a.m. quote to me? (And
I'm not asking this in a 'well, what is this then?!'-manner, I
seriously don't understand what it boils down to)

The quote hints that margin and padding can have values such as

margin: 2em;
padding: 0.5em 0.25em;
margin: 1em 2em 3em 4em;
padding: auto 0.15em;

However, as shorthand 'border' affects more than simply -left, -right,
-top, -bottom properties (borders have color, width and style) one
simply cannot use shorthand 'margin' property to assign different styles
on four borders.

One would need to say stuff like
border: solid black 1px dashed green thick dotted thin red none;
and that's something the spec writers tried to avoid.


Okay, now I get it. Thank you for clarifying that. - I did
have to read it three times though, but that might have to
do with me having 'square eyes' right now :-)
Seriosly, spend some time reading the spec.
I will, I have only discovered where to find them about a
week or so ago :-)
As an easier(?) alternative
you could try browsing through the CSS1 test suite[1]. In addition to
learning how those properties should behave, it gives you some hints
where your user agent doesn't get it right. In any case, the problem
shouldn't be the lack of reading comprehension - English isn't my or
Lauri's first or even second language[2].

[1] http://www.w3.org/Style/CSS/Test/CSS1/current/
Thanks, I'll bookmark that page
[2] Swedish might be the second official language where we live, but it
doesn't say we can speak it... My Swedish is pretty bad anyway. I don't
know about Lauri's.


I guess the Swedish too, speak better English than Finnish :-)

--
Els

A mente egual uma paraqueda; funciona melhor aberta.

Jul 20 '05 #29

P: n/a
Els
kchayka wrote:
Els wrote:
Thomas Mlynarczyk wrote:

What I'd like to know is if I can somehow combine the two statements below
into a single one.

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.

Hmmm, didn't you just promise Jukka you wouldn't give advice like this
again?


Did I tell Thomas to just 'see if it works'? No, I said that
I had to check the specs to see if my ideas were right, and
that I couldn't find a conclusive answer.
(the fact that I misinterpreted the specs, has been dealt
with in further messages in the thread, with Lauri and Mikko)
These suggestions of yours don't help anyone, they only show
your own ignorance.


Thank you :-)

--
Els

A mente egual uma paraqueda; funciona melhor aberta.

Jul 20 '05 #30

P: n/a
In article <bi**********@reader1.tiscali.nl>, Els wrote:
In the specs, the a.m. quote is followed by an example. And
I do understand the example, but I can't see the connection
between the quote and the example.
Should there be one?
I can read the whole CSS1 in less than 8 hours, and I won't
need a dictionary :-)
Me neither, anymore...
It's just that I (understanding the
meaning of every single word, as well as of every complete
sentence in that quote) don't get what it is saying.


Sorry, I can't really explain it much easier than what it is in the spec.
I never thought it was hard to understand. I have never been good at
telling things simply (at any language).

Try find some CSS tutorial if you can't understand spec. google groups
for "brucie" and "css" and "tutorial" should find list.
--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Saapi lhett meili, jos aihe ei liity ryhmn, tai on yksityinen
tjsp., mutta l lhet samaa viesti meilitse ja ryhmn.

Jul 20 '05 #31

P: n/a
In post <MP************************@news.cis.dfn.de>
Lauri Raittila said...
Try find some CSS tutorial if you can't understand spec. google groups
for "brucie" and "css" and "tutorial" should find list.


i been using X-No-Archive: yes so google would only have my old links.
these were last checked on 25th may.

css tutorials and other fun 'n giggly css stuff:
http://www.css.nu/
http://www.mako4css.com/
http://www.richinstyle.com/
http://www.blazonry.com/css/
http://www.w3schools.com/css/
http://www.websitetips.com/css/
http://www.htmlhelp.com/reference/css/
http://www.pageresource.com/dhtml/indexcss.htm
http://www.climbtothestars.org/coding/cssbasic/
http://www.htmlcenter.com/tutorials/index.cfm/css/
http://www.freewebmastertips.com/php...nt.php3?aid=48
http://www.canit.se/~griffon/web/wri...ylesheets.html
http://www.utoronto.ca/ian/books/xht...pt/css-4a.html
http://idm.internet.com/articles/200...utorial1a.html
http://www.greytower.net/en/archive/.../tsutsumi.html
http://www.westciv.com.au/style_mast.../css_tutorial/
http://webmonkey.com/authoring/style...tutorial1.html

layout examples:
http://www.glish.com/css/
http://www.csszengarden.com/
http://www.wannabegirl.org/css/
http://tantek.com/CSS/Examples/
http://www.saila.com/usage/layouts/
http://www.bluerobot.com/web/layouts/
http://www.benmeadowcroft.com/webdev/
http://www.xs4all.nl/~apple77/columns/
http://www.meyerweb.com/eric/css/edge/
http://www.htmler.org/tutorials/3/1.html
http://css.nu/articles/floating-boxes.html
http://webhost.bridgew.edu/etribou/layouts/
http://www.roguelibrarian.com/lj/index.html
http://css-discuss.incutio.com/?page=CssLayouts
http://ecoculture.com/styleguide/r/rollovers.html
http://thenoodleincident.com/tutoria...son/index.html
http://www.webreference.com/authorin...yout/advanced/

rounded corners:
http://www.albin.net/CSS/roundedCorners/
http://www.webweaver.org/dan/css/corners/
http://www.guyfisher.com/builder/workshop/css/corners/

slants: http://www.infimum.dk/HTML/slantinfo.html
centering: http://stone.thecoreworlds.net/www/centre/
lists: http://www.alistapart.com/stories/taminglists/
pure css menus: http://www.meyerweb.com/eric/css/edge/menus/demo.html

master compatibility charts:
http://centricle.com/ref/css/filters/
http://www.xs4all.nl/~ppk/css2tests/intro.html
http://macedition.com/cb/resources/a...sssupport.html
old:
http://www.immix.net/html/CSSGuide.htm
http://devedge.netscape.com/library/...3/css-support/

hiding CSS from crappy browsers:
http://www.ericmeyeroncss.com/bonus/trick-hide.html
http://www.w3development.de/css/hide_css_from_browsers/

css checkers:
http://jigsaw.w3.org/css-validator/
http://www.htmlhelp.com/tools/csscheck/

cascading style sheets, level 1 specification
http://www.w3.org/TR/REC-CSS1.html
cascading style sheets, level 2 specification
http://www.w3.org/tr/rec-css2/cover.html
cascading style sheets, level 2 revision 1 working draft
http://www.w3.org/TR/2002/WD-CSS21-20020802/

--
brucie a. blackford. 24/August/2003 10:29:40 pm kilo.
http://loser.brucies.com/
Jul 20 '05 #32

P: n/a
Els
Lauri Raittila wrote:
In article <bi**********@reader1.tiscali.nl>, Els wrote:
In the specs, the a.m. quote is followed by an example. And
I do understand the example, but I can't see the connection
between the quote and the example.
Should there be one?


I don't know :-) Probably not, but I was expecting an
example to clarify the text, so I took the first example as
a clarification, but apparently, it wasn't. ('desillusion is
only the result of wrong expectations' :-D )
I can read the whole CSS1 in less than 8 hours, and I won't
need a dictionary :-)


Me neither, anymore...


:-)
It's just that I (understanding the
meaning of every single word, as well as of every complete
sentence in that quote) don't get what it is saying.


Sorry, I can't really explain it much easier than what it is in the spec.
I never thought it was hard to understand. I have never been good at
telling things simply (at any language).


Doesn't matter. You're good at understanding the specs,
someone else will be better in explaining them (Mikko in
this case) :-). And it also was my own fault, I think, even
Mikko's explanation I had to read 3 times before I got it.
It must have been late, that day ... :-)
Try find some CSS tutorial if you can't understand spec. google groups
for "brucie" and "css" and "tutorial" should find list.


No need, Brucie already posted after you :-)

Thanks anyway, I think I'll learn a whole lot more in this
group still. :-)
--
Els

A mente egual uma paraqueda; funciona melhor aberta.

Jul 20 '05 #33

P: n/a
Els
brucie wrote:
In post <MP************************@news.cis.dfn.de>
Lauri Raittila said...

Try find some CSS tutorial if you can't understand spec. google groups
for "brucie" and "css" and "tutorial" should find list.

i been using X-No-Archive: yes so google would only have my old links.
these were last checked on 25th may.

css tutorials and other fun 'n giggly css stuff:


// snip: a 3 mile long list of links //

Thanks! - any advice on which one to start with? ;-)

--
Els

A mente egual uma paraqueda; funciona melhor aberta.

Jul 20 '05 #34

This discussion thread is closed

Replies have been disabled for this discussion.