Button Border Color doesn't display

[Sheila King]

Hello,

Am at my wits end, after spending quite a bit of time looking at online CSS
docs, reading FAQs, searching this newsgroup and validating my CSS
document.

Was trying to copy, to some extent, the "stylish buttons" tutorial here:
http://www.webreference.com/programming/css_stylish/

and have had mostly success with it, however one stupid thing isn't
working.

The web page exhibiting the problem is viewable here:
http://thinkspot.net/sheila_dev/

The style sheet is here:
http://thinkspot.net/sheila_dev/layo...page/style.css

The style sheet validates 100%. The HTML (which is courtesy of one of the
geeklog themes, for the most part) has some errors, most of which are due
to no ALT tag on images or leftmargin etc... not being valid properties. I
don't think that is what is causing my problem.

THE PROBLEM IS:

I've defined the "search" submit button in the upper right corner of the
page as class 'btn' and here is the style definition for the 'btn' class:
input.btn {
font-family: Arial, Verdana, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
background-color: #dde3ef;
border-top-color:#ffcc00;
border-left-color:#ffcc00;
border-right-color:#039;
border-bottom-color:#039;
background-image: url(interface/menu-s2.gif);
background-repeat: repeat-x;
border:2px solid;
text-indent: 2px;
}

Here is the HTML for the submit/search button:

<input type="submit" class="btn" value="{button_ search}"
onmouseover="ho v(this,'btn btnhov')" onmouseout="hov (this,'btn')">

The submit button, when no mouse hovers over it, should have a bright gold
border on two sides, according to the above code. But it doesn't. (when
hovering the class changes to a different class with a red border)

Everything else is responsive. I can change the border width or the font
size, or the background-repeat properties, etc... and any of these changes
are reflected in the appearance of the submit button. However, I simply
CANNOT get the border color to work for the non-hovered button.

Can anyone explain how to get the border colors to respond when the mouse
is not hovered over the button?

(BTW, these colors are just for testing. Not like I want a red or gold
border on that button.)

--
Sheila King
http://www.thinkspot.net/sheila/
http://www.k12groups.org/

[Michael Rozdoba]

Sheila King wrote:

Hello,

Am at my wits end, after spending quite a bit of time looking at online CSS
docs, reading FAQs, searching this newsgroup and validating my CSS
document.

At a quick glance, I can't see the problem, however someone else here
might be able to; I'm not sufficiently familiar with css to consider
myself knowledgeable.

Failing that, it might be worth you considering the following general
advice, most of which is probably already familiar to you.

Even if the html errors seem irrelevant, fix them. If you intend your
code to be valid & the errors are in code you need to keep, you'll have
to fix them at some point anyway.

It's difficult to be sure the errors aren't related to the problem,
however unlikely it might seem. Also, it'll save you from others
complaining about invalid code & make some people more likely to help
who'd have ignored you otherwise.

Secondly, try to produce a small valid html example which demonstrates
your problem, without additional code found in the real page. This makes
it easier for others to try to find the problem & you might even find
you discover the cause in the process; this applies to debugging of
anything, not just html.

Lastly, personally, I find it easiest to try to help if I can directly
tinker with the code. This is helped by small self contained examples,
with if at all possible, no external css or other files referenced
within the example.

Hope you find the solution :)

--
Michael
m r o z a t u k g a t e w a y d o t n e t

[James Moe]

Sheila King wrote:

I've defined the "search" submit button in the upper right corner of the
page as class 'btn' and here is the style definition for the 'btn' class:

input.btn {
border-top-color:#ffcc00;
border-left-color:#ffcc00;
border-right-color:#039;
border-bottom-color:#039; border:2px solid;
}

Change it to:
input.btn {
border:2px solid;

border-top-color:#ffcc00;
border-left-color:#ffcc00;
border-right-color:#039;
border-bottom-color:#039;
}
(I chopped out extraneous stuff.)
Having "border:2px solid;" after setting the border colors caused the
border color to revert to black.
--
jmm dash list at sohnen-moe dot com
(Remove .TRSPAMTR for email)

[Sheila King]

On 1 Jul 2004 05:51:30 GMT, James Moe <jm************ ***@sohnen-moe.com>
wrote in comp.infosystem s.www.authoring.stylesheets in article
<cc**********@2 16.39.176.184>:

Sheila King wrote: ....<snipped>.. . Change it to:
input.btn {
border:2px solid;

border-top-color:#ffcc00;
border-left-color:#ffcc00;
border-right-color:#039;
border-bottom-color:#039;
}
(I chopped out extraneous stuff.)
Having "border:2px solid;" after setting the border colors caused the
border color to revert to black.

Wow, thanks. That solved it.

I want to thank Michael Rozdoba also for his kind advice. I've been working
this afternoon/evening on writing a regex to go through my files (LOTS of
template files in nested directories) and find all the img tags without an
alt attribute to stick an empty one in. Not exactly my forte, so I had to
struggle with it. And just before turning in for the night, peeked in to
the newsgroup and there's the solution.

Thank you very much for the tip!

--
Sheila King
http://www.thinkspot.net/sheila/
http://www.k12groups.org/

[BenOne©]

Sheila King wrote:

I want to thank Michael Rozdoba also for his kind advice. I've been working
this afternoon/evening on writing a regex to go through my files (LOTS of
template files in nested directories) and find all the img tags without an
alt attribute to stick an empty one in. Not exactly my forte, so I had to
struggle with it. And just before turning in for the night, peeked in to
the newsgroup and there's the solution.

Thank you very much for the tip!

I would hope the html validator still tells you there are errors if you put in
an empty alt attribute for the img tags. Afterall, it's the same as having no
alt attribute because people with images turned off still won't know what the
image is of.

--
Ben Thomas
Opinions, conclusions, and other information in this message that do not
relate to the official business of my firm shall be understood as neither
given nor endorsed by it.

[Darin McGrew]

BenOne© <no**@m.thanks. mate> wrote:

I would hope the html validator still tells you there are errors if you
put in an empty alt attribute for the img tags. Afterall, it's the same
as having no alt attribute because people with images turned off still
won't know what the image is of.

Not at all.

Using alt="" tells the browser that the appropriate text alternative is
nothing. This is especially appropriate for purely decorative images, but
can be appropriate in other situations, too.

Leaving out the ALT attribute tells the browser only that the author didn't
specify a text alternative. The W3C recommends various techniques that
browsers can use to generate repair text in such situations:
http://www.w3.org/TR/UAAG10-TECHS/gu...ch-missing-alt

See also http://www.htmlhelp.com/feature/art3.htm
--
Darin McGrew, mc****@stanford alumni.org, http://www.rahul.net/mcgrew/
Web Design Group, da***@htmlhelp. com, http://www.HTMLHelp.com/

"What is the use of running when you are not on the right road?"

[Brian]

BenOne© wrote:

I would hope the html validator still tells you there are errors if
you put in an empty alt attribute for the img tags.
How would it? A validator only fixes sytax errors. The dtd requires an
ALT attribute for the IMG element. It cannot know what an appropriate
value for that attribute is.
it's the same as having no alt attribute because people with images
turned off still won't know what the image is of.

Sometimes, the best alternative text for an image is an empty string.

--
Brian (remove ".invalid" to email me)
http://www.tsmchughs.com/

[BenOne©]

Darin McGrew wrote:

BenOne© <no**@m.thanks. mate> wrote:

I would hope the html validator still tells you there are errors if you
put in an empty alt attribute for the img tags. Afterall, it's the same
as having no alt attribute because people with images turned off still
won't know what the image is of.

Not at all.

Using alt="" tells the browser that the appropriate text alternative is
nothing. This is especially appropriate for purely decorative images, but
can be appropriate in other situations, too.

Leaving out the ALT attribute tells the browser only that the author didn't
specify a text alternative. The W3C recommends various techniques that
browsers can use to generate repair text in such situations:
http://www.w3.org/TR/UAAG10-TECHS/gu...ch-missing-alt

See also http://www.htmlhelp.com/feature/art3.htm

But if you use a text only browser, or have images turned off, you've no way to
know that an image is purely for decoration. Isn't that the purpose of the alt
tag - to provide text only browser users with a textual description of the page?

--
Ben Thomas
Opinions, conclusions, and other information in this message that do not
relate to the official business of my firm shall be understood as neither
given nor endorsed by it.

[Brian]

BenOne© wrote:

if you use a text only browser, or have images turned off, you've
no way to know that an image is purely for decoration.
If you use a text only browser, or have images turned off in a
graphics capable browser, than images for decoration do not apply.
Isn't that the purpose of the alt tag - to provide text only
browser users with a textual description of the page?

No. It is to provide a textual alternative to the image.

--
Brian (remove ".invalid" to email me)
http://www.tsmchughs.com/

[Neal]

On Fri, 02 Jul 2004 01:30:04 GMT, BenOne© <no**@m.thanks. mate> wrote:

But if you use a text only browser, or have images turned off, you've no
way to know that an image is purely for decoration. Isn't that the
purpose of the alt tag - to provide text only browser users with a
textual description of the page?

alt tag? What's the alt tag?

The alt attribute is meant to serve as a replacement for whatever
communicative information the image is meant to deliver. If the image
communicates nothing that can be put into words, why have an alt text?

If I have an image which communicates some text, the alt value should be
that text. If it's an image which presents a pie chart, the alt value
might be a sentence explaining the data presented by the graph. Like <img
src="pie.jpg" height="100" width="100" alt="Fifteen percent of donations
go to salaries, twenty percent to business expenses, and sixty five
percent go right to the needy children.">.

Now, let's say all that is already stated in the text. Do we need to
repeat it? No, the image is simply a version of the content which appeals
to the non-verbal visual domain. It is meaningless to those who cannot see
it, as any explanation will duplicate what they can already read/hear. To
the sighted, it's not really duplication, just multiple forms of the same
content - but to the sightless it is useless.

Or would you prefer <img ... alt="This is a pie graph showing all that
stuff you just read in the previous paragraph."> ?? I mean, what alt text
would really make sense here?

And this isn't even a decorative image! It's pure content! So a decorative
image has even LESS need for descriptive alt text.