I'm sure this is a dumb question, but I can't move this inner (button) inline style to a style sheet:
<label style='white-space:nowrap; line-height:14px; height:14px; vertical-align:bottom; '>
<input type = 'button'
id = 'sButton2'
style = 'cursor:pointer; width:30px; height:13px; float:left; margin-bottom:2px; margin-right:12px' >
The quick brown fox
</label>
I've tried this:
<style type="text/css">
#sButton2 { cursor:pointer; width:30px; height:13px; float:left; margin-bottom:2px; margin-right:12px; }
</style>
...
<label style='white-space:nowrap; line-height:14px; height:14px; vertical-align:bottom; '>
<input type = 'button'
id = 'sButton2' >
The quick brown fox
</label>
and this:
<style type="text/css">
.sButton { cursor:pointer; width:30px; height:13px; float:left; margin-bottom:2px; margin-right:12px; }
</style>
...
<input type = 'button'
id = 'sButton1'
class = 'sButton' >
but neither of these works; no style is applied. Any idea what I'm doing wrong?
Thanks.
EDIT
Sorry folks, it's midnight, I (was!) just off to bed, and I screwed up the cut-and-paste. The syntax of the style sheet is actually correct - I've fixed it above. Other info:
1- the style sheet is in the head section of a single html file. There are already a couple of jQueryUI ones above it, and I copied the syntax from them;
2 - I think that there is another style applied to the buttons, but I was hoping that #sButton2 would override this;
3 - I can't get even the most trivial style from a style sheet to apply
to the buttons. If I just set the button width, for example, nothing happens, although an inline width works;
4 - it's not browser-specific - seen in F/F, Opera, Chrome;
Thanks again.
EDIT2
Just tried appending a !important to the end of the style sheet, with no change in F/F & Chrome:
...margin-right:12px; !important }
<style type="text/css">
#sButton2 { 'cursor:pointer; width:30px; height:13px; float:left; margin-bottom:2px; margin-right:12px' >
</style>
should be
<style type="text/css">
#sButton2 { cursor:pointer; width:30px; height:13px; float:left; margin-bottom:2px; margin-right:12px }
</style>
You need to end the first { with a }, not a >. And the styles are not in quotes, they are simply enclosed in curly braces. You should also look into what is standard for your HTML code. Usually elements are laid out like this:
<input type="button" id="sButton2" />
It is a good idea to follow standards like this.
Change
#sButton { 'cursor:pointer; width:30px; height:13px; float:left; margin-bottom:2px; margin-right:12px' >
to
#sButton { cursor:pointer; width:30px; height:13px; float:left; margin-bottom:2px; margin-right:12px }
That should do it.
(remove the ' at the start and the end, and replace the > by a } )
your inner style ends with > instead of }
furthermore it should be in your head tag
lastly why are you wrapping your style with single quotes?
Stupid question, but are you sure the style sheet is being loaded? I've seen where people have multiple stylesheets and they're loading the wrong one, or they edited the wrong one.
You might also have an overriding style later in your stylesheet. Do you have any input styles? ID should override less specific styles, but there are bugs in some browsers that you might have to work around.
Try using !important
DOH! Yes, as others have said, your problem is the single quotes around your css attributes.
<style type="text/css">
.sButton {
cursor:pointer;
width:30px;
height:13px;
float:left;
margin-bottom:2px;
margin-right:12px
</style>
<input type="button" id="sButton1" class="sButton">
http://jsfiddle.net/charlescarver/aQHyK/
Fixed, with a lot of help from Firebug (what a great bit of software). The input tag is in a jQueryUI dialog, and was inheriting a 'width:95%' from '#dialog input'. The 'width:30px' in my style sheet was being ignored, until I changed it to 'width:30px !important', in all of F/F, Chromium, and Opera. It was ignored in both the div (#sButton2) and class (.sButton) styles.
I don't understand this. What's the point of inheritance if you can't over-ride it without adding arbitrary !important's? Is css inheritance broken? Isn't !important just admitting that it's broken?
I had originally thought that the entire style sheet was being ignored, because the input button expanded to 95%, and made it look like everything else was being ignored as well. However, I eventually realised that part of the style was actually working - 'cursor:pointer' did show a cursor.
Thanks everybody.
# is the correct prefix for IDs (as you actually use in your second code example), but you shouldn't wrap quotes around the css code. Try it like this:
<style type="text/css">
#sButton2 { cursor:pointer; width:30px; height:13px; float:left; margin-bottom:2px; margin-right:12px; }
</style>
Executing a validator on the code (which is always a good idea) would have told you all this as well!
Related
I'm working on a Math website, and it has some exercises on it with solutions on the bottom of the page. I want to make so solutions are hidden when the user scrolls by them, and needs to click on the block for it to show the answer. I want to achieve this using only css and html. Here's what I have made so far:
HTML:
<div class="solution s1">
2+2=4
</div>
CSS:
.solution {
width:80%;
margin:25px auto;
}
.solution a:visited{
color:black;
background-color:white;
user-select:text;
}
.solution a{
background-color:#49FF59;
display:block;
width:100%;
padding:25px;
text-align:center;
color:#49FF59;
text-decoration:none;
user-select: none;
}
This code works great, except for the user-select. I want it so that the user can't copy the solution, before the block is clicked on. But the a:visited won't apply the user-select:text; I have tried to add more classes, but i wasn't able too fix it. Keep in mind most of the CSS is for asterisk.
If I'm correct, the approach you're trying to take is to prevent someone from doing a select all and seeing the solutions on screen due to the text being highlighted.
If that's the case there are better style properties to use for this, particularly visibility or display.
For example you can use visibility: hidden or display: none to hide the solution until a specific condition is met.
I'd also advise against using :visited for something like this, unless you have specific urls for each question that you plan to override (if you use href='#') for everything, then once you click one, they are all 'visited'). You're going to also have struggles with browser caches when using :visited.
As an example, you could alter your container to be the clickable element, and hide your content using visibility, then show the answer on the :active state as opposed to the :visited state. This will show the answer while the mouse button is pressed. Under normal circumstances the text isn't selectable because it's hidden. If you want to keep it shown after a click but not use :visited you'll need a javascript solution.
Worth stating that this solution will not hide answers in the source code, but as you mentioned above that is not a concern for you.
.solution {
width:80%;
margin:25px auto;
background-color:#49FF59;
display:block;
width:100%;
padding:25px;
text-align:center;
}
.solution:active {
color:black;
background-color:white;
user-select:text;
}
.solution:active a {
color:black;
background-color:white;
visibility:visible;
}
.solution a{
text-align:center;
text-decoration:none;
visibility: hidden;
}
<div class="solution s1">
2+2=4
</div>
when i add this code to my css file it does not work ? However when i add this to my jsp file in the Head tag it works ?
Any idea what am i missing ?
<style>
input[type="text"]
{
width:500px;
display:block;
margin-bottom:10px;
background-color:yellow;
}
input[type="button"]
{
width:200px;
margin-left:35px;
display:block;
}
</style>
Remove <style> </style> tags .Not required for external CSS.
No need for the style open and close in external style sheets.
if you are using an external CSS file then you should not use <style> tags. Use style tags only when your using the CSS in the same HTML document
The style tags tell the browser how to treat the contents when included directly within your page and are necessary because of the potential for mixed content types within a single html document.
However when you are defining styles directly within a CSS file you should not include the style tags as the contents are determined by the file type (i.e. an external style sheet).
Your CSS contents should look as follows:
input[type="text"]
{
width:500px;
display:block;
margin-bottom:10px;
background-color:yellow;
}
input[type="button"]
{
width:200px;
margin-left:35px;
display:block;
}
How can I create a button that only shows the text. Similar to an hyperlink but it has to keep the <button> properties.
Assuming you're starting with a button element:
<button class="astext">hello, world</button>
All you have to do is take away all of the default CSS styling:
.astext {
background:none;
border:none;
margin:0;
padding:0;
cursor: pointer;
}
Of course, there's no way to tell that the resulting text is actually a button. I suppose you could throw in a cursor:pointer or some :hover rules.
Maybe you're making an easter egg, maybe you don't want people to know it can be clicked.
Maybe you can check this JSFiddle code to see how it works. The suggested solution works wonder.
Html
<button class = "asText" id = "doSmth"> Hello World </button>
<div id="hiddenText">i'm well hidden</div>
CSS
.asText {
background:none;
border:none;
margin:0;
padding:0;
}
I was having trouble with two types of buttons.
It was a form button and a css button basically. And I was advised that the css button whould use display:inline-block;
This made the whole a href tag actually look like a button.
But this invisible margin seems to be screwing up something. I tried separating them into separate css classes, but oddly, applying a real margin to the css button gives an additional margin as well. What's causing this?
You can easily see it here (low graphics):
www.matkalenderen.no
Basically, code looks like this:
<input type="submit" value="Logg inn" class="button_blue" alt="ready to login">
<a class="button_css_red" href="access.php">Glemt passord</a>
CSS
.button_red, .button_blue, .button_css_red, .button_css_blue {
background-image:url("../img/sprite_buttons.png");
background-repeat:no-repeat;
border: none;
color:#FFFFFF;
display:inline-block;
display:inline-block;
font-size:12px;
height:27px;
width:98px;
}
.button_css_red, .button_css_blue {
margin-top:20px;
}
Just found the answer myself :)
Looks like I was able to fix it by applying a line-height of about 31 pixels.
I find this a pain. I am trying to get CSS to use an image when the < hr /> tag is used.
I am currently using:
hr
{
display:block;
border:none;
height:10px;
background-image:url('img/ruler.gif');
}
However, I always get a border around the image. As you can see, the border:none does nothing.
I know there are alternative ways such as using div. But is it possible through using the hr tag only?
The main users will be using IE6, so need a IE6 compatable solution please.
Thanks
hr {
display:block;
border:0px;
height:10px;
background-image:url('img.gif');
}
Update border:none; to border:0;