473,890 Members | 1,760 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

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

Jul 20 '05 #1
14 14508
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
Jul 20 '05 #2
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)
Jul 20 '05 #3
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/

Jul 20 '05 #4
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.

Jul 20 '05 #5
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?"
Jul 20 '05 #6
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/
Jul 20 '05 #7
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.

Jul 20 '05 #8
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/
Jul 20 '05 #9
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.
Jul 20 '05 #10

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

10
2013
by: Peter Pfannenschmid | last post by:
Hi folks, it's me again... since I have learned many things with the help of you, I have put together an example which is compliant to XHTML 1.0 strict and to CSS 2, but isn't shown at all in IE6 SP1. Please take a look at: http://www.omeganet.de/test/test.html This file uses http://www.omeganet.de/test/styles.css as style sheet.
0
1499
by: Richard | last post by:
Hello. In VB .NET I have a class derived from ListView like this: Public Class ListViewSorted Inherits System.Windows.Forms.ListView 'code to make this ListViewSorted class sortable... End Class (this class belongs in a project of type component class)
1
3773
by: chaitatp | last post by:
Hi friends, I've got a problem about inserting Flash in iframe in Firefox. The codes are: ---- test.html ---- <html> <head> <script type="text/javascript"> function doBodyOnLoad()
2
2054
by: chaitatp | last post by:
Hi guys, I have posted a similar question before but this post has some different. The similar link is: http://groups-beta.google.com/group/comp.lang.javascript/browse_thread/thread/a4e7317eee02579f/13714e97d19ff2a7#13714e97d19ff2a7 When I put <embed> in an <iframe> using javascript, I can't see the embedded object in Firefox. But if I put other tags say, <b>hello</b> or <img src="..."/>, it works well. I am wondering if it is...
1
1378
by: SWu | last post by:
Hi all, The treeview that displays on the left side of the report viewer doesn't display properly on my production server (it displays properly on my development machine). I see the X's (crosses) where I should be seeing the +/- symbols of the treeview -- which would apparently mean that the image can't be found on the server. Can anyone please tell me if they've had this problem and what they did to solve it? Regards,
1
1520
by: Joe | last post by:
I created a user control that I need to use in a web page but the control doesn't display. I added it to my page using: <object id="testcontrol" classid="http:TestControl.dll#TestControl.UserControl1"> all I get is a page with a box that looks like an image that didn't load. This control requires another .dll which I don't know how to make IE download it so I registered it using gacutil.
31
7273
by: jcrouse | last post by:
Is there a quick and easy way to change the color of a label controls border from the default black to white? Thank you, John
3
1739
by: Samuel R. Neff | last post by:
I just started having a problem with the Add Reference dialog not displaying in VS.NET 2003. Whenever I click Add Reference the dialog doesn't display. I've tried several different projects and solutions and rebooted the computer. No error message, just no dialog. Add Web Reference brings up a dialog, just Add Reference doesn't. If I add references manually by editing the project file in notepad
2
1922
by: jimmygyuma | last post by:
Windows XP Media Center - Python 2.5 - wxPython 2.8 Code ... bmp = wx.Image("images\\new24.bmp", wx.BITMAP_TYPE_BMP).ConvertToBitmap() print str(bmp.GetWidth()) self.fileNewItem = fileMenu.Append(-1, "New ...", "Create new image") self.fileNewItem.SetBitmap(bmp) bmp = self.fileNewItem.GetBitmap() print str(bmp.GetWidth()) self.Bind(wx.EVT_MENU, self.OnFileNew, self.fileNewItem)
0
9975
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...
0
10799
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...
0
10446
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
0
9614
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...
1
8004
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
0
6032
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
1
4655
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
2
4255
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
3
3263
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.