Button Border Color doesn't display

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="hov(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/

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

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)

On 1 Jul 2004 05:51:30 GMT, James Moe <jmm-list.TRSPAMTR (AT) sohnen-moe (DOT) com>
wrote in comp.infosystems.www.authoring.stylesheets in article
<cc08p2$20n$0 (AT) 216 (DOT) 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© <nosp@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, mcgrew (AT) stanfordalumni (DOT) org, http://www.rahul.net/mcgrew/
Web Design Group, darin (AT) htmlhelp (DOT) com, http://www.HTMLHelp.com/

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

On Fri, 02 Jul 2004 01:30:04 GMT, BenOne© <nosp@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.

On Fri, 02 Jul 2004 01:30:04 GMT, BenOne© <nosp@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?

*Alternative*, not *description*.

You should include as a value of the alt attribute some text which can
replace the image in the event that the image cannot be displayed for
some reason.

A logo's obvious alternative text is the text shown in the logo:

<img src="logo.png" alt="My Amazing Web Site">

but if you have images providing little curvy corners to boxes shown
on the page, these are of little use to a text-only browser, so an
explicitly blank alternative text is most appropriate. The user of the
text-only browser doesn't need to know or care that these images were
referenced in the document.

-Claire

On Thu, 01 Jul 2004 22:55:08 -0400, Brian
<usenet3 (AT) julietremblay (DOT) com.invalid> wrote:

Neal wrote:

BenOne© wrote:

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?

You have probably already seen this, but in case you haven't:

http://www.flightlab.com/~joe/sgml/faq-not.txt

See part 5.

That is hilarious. I actually did see that before