按钮边框颜色不显示 [英] Button Border Color doesn't display
问题描述
你好，
我花了很多时间在线查看CSS
docs，阅读常见问题解答，搜索这个新闻组并验证我的CSS
文件。
试图在某种程度上复制时尚按钮。教程：
http://www.webreference.com/programming/ css_stylish /
并且大部分时间都取得了成功，但是一件愚蠢的事情并不是
工作。
显示问题的网页可在此处查看：
http：/ /thinkspot.net/sheila_dev/
样式表在这里：
http://thinkspot.net/sheila_dev/layo...page/style.css
样式表验证100％。 HTML（大部分由
geeklog主题之一提供）有一些错误，其中大部分是由于图像上没有ALT标记而导致的b $ b leftmargin等...不是有效的属性。我不知道这是导致我问题的原因。
问题是：
我已经定义了搜索在
页面的右上角提交按钮作为类''btn''，这里是''btn''类的样式定义：
输入。 btn {
font-family：Arial，Verdana，Helvetica，sans-serif;
font-size：12px;
font-weight：粗体;
背景颜色：＃dde3ef;
border-top-color：＃ffcc00;
border-left-color：＃ffcc00 ;
border-right-color：＃039;
border-bottom-color：＃039;
background-image：url（界面/menu-s2.gif）;
background-repeat：repeat-x;
border：2px solid;
text-indent：2px ;
}
以下是提交/搜索按钮的HTML：
< input type = [提交"类= QUOT; BTN" value =" {button_search}"
onmouseover =" hov（this，''btn btnhov''）" onmouseout =" hov（this，''btn''）">
提交按钮，当没有鼠标悬停在它上面时，应该有一个亮金色
根据上面的代码，双方的边界为
。但它不是。 （当
徘徊在班级改变到另一个带红色边框的班级时）
其他所有内容都是响应式的。我可以更改边框宽度或字体
大小，或者背景重复属性等等......以及任何这些更改
都反映在外观上提交按钮。但是，我只是
无法使边框颜色适用于非悬停按钮。
任何人都可以解释如何让边框颜色响应时鼠标
不会悬停在按钮上？
（顺便说一句，这些颜色仅供测试。不像我想要红色或金色
该按钮的边框。）
-
Sheila King
http://www.thinkspot.net/sheila/
http://www.k12groups.org/
Sheila King写道：
你好，
我花了很多时间在网上查看我的智慧结束了
docs，阅读常见问题解答，搜索这个新闻组并验证我的CSS
文件。
快速浏览一下，我看不出问题，不过这里的其他人
也许能够;我不太熟悉css考虑
我自己知识渊博。
如果不这样做，可能值得你考虑下面的一般
建议，其中大部分可能已经为您所熟悉。
即使html错误看起来无关紧要，也要修复它们。如果您打算将
代码设为有效且&你需要保留代码中的错误，无论如何你都要用b $ b来修复它们。
这很难成为确定错误与问题没有关系，但是b $ b不太可能。此外，它会让你免于其他人
抱怨无效代码&让一些人更有可能提供帮助
否则会忽略你。
其次，试着制作一个小的有效html示例来演示
你的问题，没有在真实页面中找到额外的代码。这使得其他人更容易尝试找到问题&你甚至可以找到
你在这个过程中找到原因;这适用于调试
任何东西，而不仅仅是html。
最后，就个人而言，如果我能直接
修补代码。这可以通过小的自包含示例来帮助，
如果可能的话，没有外部css或其他文件引用
在示例中。
希望您找到解决方案:)
-
Michael
mrozatukgatewaydotne t
Sheila King写道：
我已经定义了搜索在
页面的右上角提交按钮作为类''btn''，这里是''btn''类的样式定义：
input.btn {
border-top-color：＃ffcc00;
border-left-color：＃ffcc00;
border-right-color：＃039;
border-bottom-color：＃039;
border：2px solid;
}
更改为：
input.btn {
border：2px solid;
border-top-color：＃ffcc00;
border-left-color：＃ffcc00;
border-right-color：＃039;
border-bottom-color：＃039;
}
（我切掉了多余的东西。）
有border：2px solid;设置边框颜色后，
边框颜色恢复为黑色。
-
jmm在sohnen-moe dot com的破折号列表
（删除.TRSPAMTR电子邮件）
2004年7月1日05:51:30 GMT，James Moe< jm ***** ********* *@sohnen-moe.com>
在comp.infosystems中写道。 www.authoring.stylesheets
< cc ********** @ 216.39.176.184>：
Sheila King写道：
....< snipped> ...将其更改为：
input.btn {
border：2px solid;
border-top-color：＃ffcc00;
border-left-color：＃ffcc00;
border-right-color：＃039;
border-bottom-color ：＃039;
}
（我切掉了多余的东西。）
有border：2px solid;设置边框颜色后，
边框颜色恢复为黑色。
哇，谢谢。这解决了它。
我也要感谢Michael Rozdoba的善意建议。我今天下午/晚上一直在写一个正则表达式来浏览我的文件（在嵌套目录中有很多
模板文件）并找到所有的img标签没有
alt属性来粘贴一个空的。不完全是我的强项，所以我不得不与b
斗争。就在上班之前，偷看了新闻组的b
和解决方案。
非常感谢您的提示！
-
Sheila King
http://www.thinkspot.net/sheila/
http://www.k12groups.org/
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 <jm***************@sohnen-moe.com>
wrote in comp.infosystems.www.authoring.stylesheets in article
<cc**********@216.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/
这篇关于按钮边框颜色不显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
