Adding borders...

[Jon Glazer]

I have an anchor using a class that defines a hover subclass. The issue is
that the anchor itself doesn't have any border and when hovered it adds a
border, the problem is that when it adds the border, the text gets shifted.
Does anyone have any idea how to correct this issue? I would like to create
a transparrent or invisible border (spacer) so that there's room for the
visible border to appear when needed but I cannot seem to get it to work.
Visit http://callandermats.adconn.com/ and hover over left links to see what
I mean. The style sheet for this is:

..menu{
font-size:12px;
text-decoration:none ;
}
..menu:hover{
border-style:groove;
border-width:1;
width=100%;
}

Thanks!

[Steve Pugh]

"Jon Glazer" <jg************ ***@adconn.com> wrote:

I have an anchor using a class that defines a hover subclass. The issue is
that the anchor itself doesn't have any border and when hovered it adds a
border, the problem is that when it adds the border, the text gets shifted.
Does anyone have any idea how to correct this issue? I would like to create
a transparrent or invisible border (spacer) so that there's room for the
visible border to appear when needed but I cannot seem to get it to work.
border-color: transparent; or whatever your background colour is if
you have a solid backgound rather than an image.
Visit http://callandermats.adconn.com/
Lots of syntax errors to fix:
http://validator.w3.org/check?uri=ht...ts.adconn.com/
http://jigsaw.w3.org/css-validator/v...1&profile=css2

Anyway, I see no shifting text in either IE6 or Opera 7.54. In Opera
only the left and right borders show up, not the top and bottom ones,
and the links are all different widths (probably because Opera is
correctly ignoring your bogus width, see below).
and hover over left links to see what
I mean. The style sheet for this is:

.menu{
font-size:12px;
text-decoration:none ;
}
Pixels are a very bad idea for font-size. Percentages, or not setting
a size at all, are much preferable.
.menu:hover{
border-style:groove;
border-width:1;
1 what?
width=100%;
}

Invalid syntax and width doesn't apply to inline elements so pointless

Steve

[Jon Glazer]

Wow the syntax errors are funny. The site is totally valid and I cannot
find one truthfull error in that validator tool.

Oh well. It works.

As for the problem I had, I resolved it by creating a border the same color
as the background.

Thanks,
Jon
"Steve Pugh" <st***@pugh.net > wrote in message
news:pa******** *************** *********@4ax.c om...

"Jon Glazer" <jg************ ***@adconn.com> wrote:

I have an anchor using a class that defines a hover subclass. The issue
is
that the anchor itself doesn't have any border and when hovered it adds a
border, the problem is that when it adds the border, the text gets
shifted.
Does anyone have any idea how to correct this issue? I would like to
create
a transparrent or invisible border (spacer) so that there's room for the
visible border to appear when needed but I cannot seem to get it to work.

border-color: transparent; or whatever your background colour is if
you have a solid backgound rather than an image.

Visit http://callandermats.adconn.com/

Lots of syntax errors to fix:
http://validator.w3.org/check?uri=ht...ts.adconn.com/
http://jigsaw.w3.org/css-validator/v...1&profile=css2

Anyway, I see no shifting text in either IE6 or Opera 7.54. In Opera
only the left and right borders show up, not the top and bottom ones,
and the links are all different widths (probably because Opera is
correctly ignoring your bogus width, see below).

and hover over left links to see what
I mean. The style sheet for this is:

.menu{
font-size:12px;
text-decoration:none ;
}

Pixels are a very bad idea for font-size. Percentages, or not setting
a size at all, are much preferable.

.menu:hover {
border-style:groove;
border-width:1;

1 what?

width=100%;
}

Invalid syntax and width doesn't apply to inline elements so pointless

Steve

[Darin McGrew]

Re: http://validator.w3.org/check?uri=ht...ts.adconn.com/
Jon Glazer <jg************ ***@adconn.com> wrote:

Wow the syntax errors are funny. The site is totally valid and I cannot
find one truthfull error in that validator tool.

Huh?

You mean that http://callandermats.adconn.com/ isn't missing a bunch of
required attributes (TYPE for STYLE and SCRIPT elements, ALT for IMG
elements)?

That it doesn't use attributes that are not defined in the DTD that it
claims to use (HEIGHT in TABLE and TR elements, BACKGROUND in TD elements)?

That there aren't extraneous <html> and <head> tags in the middle of the
document?

That there aren't missing quotes around attribute values that require
quotes, causing a cascade of problems when the SGML parser tries to parse
the attribute values as markup?
--
Darin McGrew, da***@TheRallye Club.org, http://www.TheRallyeClub.org/
A gimmick car rallye is not a race, but a fun puzzle testing your
ability to follow instructions. Upcoming gimmick car rallye in
Silicon Valley: TRC's 24th Anniversary (Saturday, February 5)

[Steve Pugh]

"Jon Glazer" <jg************ ***@adconn.com> wrote:

Upside down posting fixed.

"Steve Pugh" <st***@pugh.net > wrote :

"Jon Glazer" <jg************ ***@adconn.com> wrote:

I have an anchor using a class that defines a hover subclass. The issue
is that the anchor itself doesn't have any border and when hovered it adds a
border, the problem is that when it adds the border, the text gets
shifted.
Does anyone have any idea how to correct this issue? I would like to
create a transparrent or invisible border (spacer) so that there's room for the
visible border to appear when needed but I cannot seem to get it to work.
border-color: transparent; or whatever your background colour is if
you have a solid backgound rather than an image.

Visit http://callandermats.adconn.com/

Lots of syntax errors to fix:
http://validator.w3.org/check?uri=ht...ts.adconn.com/
http://jigsaw.w3.org/css-validator/v...1&profile=css2

Wow the syntax errors are funny.

Yeah, there's a certain gallows humour in examining a really badlt
coded web site.
The site is totally valid
It obviously isn't. If it was valid the validator wouldn't have failed
it.
and I cannot find one truthfull error in that validator tool.
Why not? They're all errors and they're all accurately reported.
Oh well. It works.
How many browsers did you test it in? 1? 2? 3? 10? 100?

I've already given you examples of how your poor coding means that the
page doesn't display as you want in Opera and I now see that Firefox
agrees with Opera.

Did you test with images turned off? (obviously not, unless you think
that black text on a black background counts as working) With
stylesheets turned off? With a user stylesheet? With a larger than
normal font size? With a smaller than normal font size? On a speech
browser? With JavaScript turned off? On a Mac? On Unix? Have you tried
printing the page?
As for the problem I had, I resolved it by creating a border the same color
as the background.

Before or after I suggested doing just that? Just curious as to
whether I totally wasted my time.

Steve

[Jon Glazer]

Right. None of those issues are outstanding problems given that they do not
cause errors on any browser (and I tested 8 different ones).

Alt tags are definitely not a requirement.

"Darin McGrew" <mc****@stanfor dalumni.org> wrote in message
news:cs******** **@blue.rahul.n et...

Re: http://validator.w3.org/check?uri=ht...ts.adconn.com/
Jon Glazer <jg************ ***@adconn.com> wrote:

Wow the syntax errors are funny. The site is totally valid and I cannot
find one truthfull error in that validator tool.

Huh?

You mean that http://callandermats.adconn.com/ isn't missing a bunch of
required attributes (TYPE for STYLE and SCRIPT elements, ALT for IMG
elements)?

That it doesn't use attributes that are not defined in the DTD that it
claims to use (HEIGHT in TABLE and TR elements, BACKGROUND in TD
elements)?

That there aren't extraneous <html> and <head> tags in the middle of the
document?

That there aren't missing quotes around attribute values that require
quotes, causing a cascade of problems when the SGML parser tries to parse
the attribute values as markup?
--
Darin McGrew, da***@TheRallye Club.org, http://www.TheRallyeClub.org/
A gimmick car rallye is not a race, but a fun puzzle testing your
ability to follow instructions. Upcoming gimmick car rallye in
Silicon Valley: TRC's 24th Anniversary (Saturday, February 5)

[Jon Glazer]

"Steve Pugh" <st***@pugh.net > wrote in message
news:ln******** *************** *********@4ax.c om...

"Jon Glazer" <jg************ ***@adconn.com> wrote:

Upside down posting fixed.

"Steve Pugh" <st***@pugh.net > wrote :

"Jon Glazer" <jg************ ***@adconn.com> wrote:

I have an anchor using a class that defines a hover subclass. The issue
is that the anchor itself doesn't have any border and when hovered it
adds a
border, the problem is that when it adds the border, the text gets
shifted.
Does anyone have any idea how to correct this issue? I would like to
create a transparrent or invisible border (spacer) so that there's room
for the
visible border to appear when needed but I cannot seem to get it to
work.

border-color: transparent; or whatever your background colour is if
you have a solid backgound rather than an image.

Visit http://callandermats.adconn.com/

Lots of syntax errors to fix:
http://validator.w3.org/check?uri=ht...ts.adconn.com/
http://jigsaw.w3.org/css-validator/v...1&profile=css2

Wow the syntax errors are funny.

Yeah, there's a certain gallows humour in examining a really badlt
coded web site.

The site is totally valid

It obviously isn't. If it was valid the validator wouldn't have failed
it.

and I cannot find one truthfull error in that validator tool.

Why not? They're all errors and they're all accurately reported.

Oh well. It works.

How many browsers did you test it in? 1? 2? 3? 10? 100?

I've already given you examples of how your poor coding means that the
page doesn't display as you want in Opera and I now see that Firefox
agrees with Opera.

Did you test with images turned off? (obviously not, unless you think
that black text on a black background counts as working) With
stylesheets turned off? With a user stylesheet? With a larger than
normal font size? With a smaller than normal font size? On a speech
browser? With JavaScript turned off? On a Mac? On Unix? Have you tried
printing the page?

As for the problem I had, I resolved it by creating a border the same
color
as the background.

Before or after I suggested doing just that? Just curious as to
whether I totally wasted my time.

Steve

OOps sorry steve, forgot to mention that, as I was posting the problem a
possible solution occured to me. You just responded too fast for me to say
I got it fixed. Thanks for the help though!

[Jon Glazer]

Oh, and one other simple example, there are not extranious <HEAD> tags in
the document. What it is evidently picking up is some javascript that
controls a separate window. One reason I don't trust these things.

Jon
"Darin McGrew" <mc****@stanfor dalumni.org> wrote in message
news:cs******** **@blue.rahul.n et...

Re: http://validator.w3.org/check?uri=ht...ts.adconn.com/
Jon Glazer <jg************ ***@adconn.com> wrote:

Wow the syntax errors are funny. The site is totally valid and I cannot
find one truthfull error in that validator tool.

Huh?

You mean that http://callandermats.adconn.com/ isn't missing a bunch of
required attributes (TYPE for STYLE and SCRIPT elements, ALT for IMG
elements)?

That it doesn't use attributes that are not defined in the DTD that it
claims to use (HEIGHT in TABLE and TR elements, BACKGROUND in TD
elements)?

That there aren't extraneous <html> and <head> tags in the middle of the
document?

That there aren't missing quotes around attribute values that require
quotes, causing a cascade of problems when the SGML parser tries to parse
the attribute values as markup?
--
Darin McGrew, da***@TheRallye Club.org, http://www.TheRallyeClub.org/
A gimmick car rallye is not a race, but a fun puzzle testing your
ability to follow instructions. Upcoming gimmick car rallye in
Silicon Valley: TRC's 24th Anniversary (Saturday, February 5)

[Steve Pugh]

"Jon Glazer" <jg************ ***@adconn.com> wrote:

Alt tags are definitely not a requirement.

Of course they're not, but only because they don't exist.
alt attributes on the other hand are mandatory.

Or is this a private page that no one on the actual WWW wil ever look
at?

Steve

[Steve Pugh]

"Jon Glazer" <jg************ ***@adconn.com> wrote:

Oh, and one other simple example, there are not extranious <HEAD> tags in
the document. What it is evidently picking up is some javascript that
controls a separate window. One reason I don't trust these things.

Liar.
The page http://callandermats.adconn.com/
has

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<!--EzCat Styles-->
<style>
.... bunch of CSS
</style>
<script src="homefade.j s"></script>
<html>
<head>

So it does have the <html> and <head> in the middle of the page.

How hard would it be to move them to where they belong?

Steve