Hi,
I know that its possible to set the cusor to hand when hovering an object like this:
CSS :
cursor: hand;
cursor: pointer;
This should be done automaticly with a link element that looks like this :
<a onclick="" class="btn1">
<span>Sök</span>
</a>
But In my case its not?
With firebug I can see that the followin CSS is applyed
<a> element
a.btn1 {
background: url("Images/Menus/bg_button_a.gif") no-repeat scroll right top transparent;
color: #444444;
display: block;
float: left;
font: 12px arial,sans-serif;
height: 24px;
margin-right: 6px;
padding-right: 18px;
text-decoration: none;
}
* {
margin: 0;
padding: 0;
}
body {
font-family: Arial,Verdana,serif;
font-size: 0.81em;
}
And
SPAN element
a.btn1 span {
background: url("Images/Menus/bg_button_span.gif") no-repeat scroll 0 0 transparent;
display: block;
line-height: 14px;
padding: 5px 0 5px 18px;
}
Controls.css (rad 80)
* {
margin: 0;
}
a.btn1 {
color: #444444;
font: 12px arial,sans-serif;
text-decoration: none;
}
body {
font-family: Arial,Verdana,serif;
font-size: 0.81em;
}
How can I track down this problem?
BestRegards
The hand appears only if the ANCHOR has a href attribute set.
Live demo: http://jsfiddle.net/KAEbR/
It's likely because your doesn't have a "href" value, you could change it to
<a href="#" onclick="" class="btn1"/>
You can also add the following css to force the hand to always appear for links:
a{ cursor: pointer;}
Without the href attribute the a tag does not declare a hyperlink. If it possesses a name or id attribute, it may declare the destination of a hyperlink instead. (http://www.w3.org/TR/html4/struct/links.html#anchors-with-id)
If the element you want to declare has no semantic resemblance to a hyperlink and you are relying on CSS to make it appear like one, why bother? You might just as well use any old span.
What you should not do is write a { cursor:pointer; } into your CSS, causing any a elements to display a hand on hover, even those that are not hyperlinks. Instead you should add a href attribute like has been suggested. As a value you could enter # if there is no non-JavaScript functionality to fall back on. Otherwise you should enter the URI of the resource you want to link to.
See also Wikipedia: http://en.wikipedia.org/wiki/HTML_element#Anchor
That's not a link. Links have href attributes. That's just an anchor that runs JavaScript when clicked.
Related
Check out this code sample of a button and an anchor: http://jsbin.com/ecitex/2/edit
I'm trying to make them identical in all browsers. But differences remain, and different differences in every browser (tried Chrome, Safari, Firefox, IE8).
Which CSS normalizations am I missing?
Update:
Per suggested:
I added line-height: 50px (although my user agent's (Chrome's) default line-height for button elements is normal, and still it vertically centers text – how?!)
I added cursor: pointer to normalize mouse cursors.
http://jsbin.com/ecitex/11/edit
So, now check out the result in Firefox: notice the padding on the button?
Then check out the result in IE8: whoa, notice how the two are completely and utterly different?!
Update 2:
It seems that IE's problems are known and non-resolvable: http://www.quirksmode.org/css/tests/mozie_button2.html
I haven't found anything on Firefox's padding though. (The quirksmode article mentions an issue with Mozilla, but that's a different issue.)
Update 3:
Awesome, we fixed the Firefox issue: http://jsbin.com/ecitex/15/edit
Okay, so far every single answer has been providing part of the solution so there's not really one single best answer. I'll grant the best answer to the person that either:
Explains why we have to specify a line-height: 50px to vertically center text in an a, while a button has vertically centered text with a mere line-height: normal.
Provides a solution for the IE issue.
You can remove that extra padding in Firefox by using:
button::-moz-focus-inner {
border: 0;
padding: 0;
}
Here's a good explanation from Eric Meyer about line height which hopefully explains why you need to explicitly set it as 50px: http://meyerweb.com/eric/thoughts/2008/05/06/line-height-abnormal/.
Here's some new CSS that fixes the font size issue in IE:
button, a {
display: inline-block;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
margin: 10px 0;
padding: 0px;
height: 50px;
border-width: 0;
background-color: Red;
color: White;
font-family: sans-serif;
font-weight: normal;
font-size: inherit;
text-decoration: none;
line-height: 50px;
cursor: pointer;
font-size: 100%;
}
button {
#width:0px;
overflow: visible;
}
button::-moz-focus-inner {
border: 0;
padding: 0;
}
You need to use line-height property to bring your anchor tag text vertically centered
Demo
CSS
button, a {
display: inline-block;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
margin: 10px 0;
padding: 0;
height: 50px;
border-width: 0;
background-color: Red;
color: White;
font-family: sans-serif;
font-weight: normal;
font-size: inherit;
text-decoration: none;
line-height: 50px; <-------- Here
}
add the attribute cursor:pointer; in order to add a pointer when the mouse is hover (the input not always have it)
and at last use line-height:46px; for the vertical align
the full code is here -> http://jsbin.com/ecitex/10/edit
I have the following CSS and HTML: http://jsfiddle.net/47w0h73r/6/
.one {
padding: 20px;
background: #f00;
}
.two {
padding: 20px;
background: #00f;
}
a,
button {
font-family: Arial, Helvetica;
font-size: 16px;
padding: 10px;
background: #fff;
color: #000;
display: inline;
border: 0;
text-decoration: none;
}
<div class="one"></div>
<div class="two">
Link
<button>Button</button>
</div>
As you will notice, the button doesn't appear as inline. Why is this? How can I make this button inline, just like its sibling a?
Issue
By changing the button to an a you will notice that the display: inline makes the padding of the parent element to ignore the padding of both child elements, making them really display inline. The problem, is that the button tag doesn't really appear inline, which makes the parent element's padding push both elements down. How can I fix this?
Trying to set a button to display:inline seems to cause some confusion. The inability to get display:inline behaviour is often attributed to it being a replaced element, but that is incorrect. <button> is not a replaced element.
In fact, the HTML5 specification, Section 10.5.2 The button element makes this requirement:
When the button binding applies to a button element, the element is
expected to render as an 'inline-block' box rendered as a button whose
contents are the contents of the element.
The language is a little unusual, but the button binding does apply, and the effect is that the binding takes precedence over the specified value of the display property. The effect is that the button is always rendered as display:inline-block, no matter what its specified value is. There is nothing you can do about it.
Add line-height:17px; to a, button and that should make them the same:
.one {
padding: 20px;
background: #f00;
}
.two {
padding: 20px;
background: #00f;
}
a,
button {
font-family: Arial, Helvetica;
font-size: 16px;
padding: 10px;
background: #fff;
color: #000;
display: inline;
border: 0;
text-decoration: none;
line-height: 17px;
}
<div class="one"></div>
<div class="two">
Link
<button>Button</button>
</div>
I have a button class working like this :
<p class="button">Rejoindre</p>
The CSS is :
p.button
{
background-color: #e74c3c;
line-height: 30px;
width: 200px;
text-align: center;
}
.button a
{
font-family: Montserrat, sans-serif;
color: white;
font-size: 0.9em;
text-transform: uppercase;
}
.button a:hover
{
text-decoration: none;
}
How can I make the entire button (represented by the paragraph tag) a link instead of just the text ?
You can put the link tag on the outside to make anything inside it be contained in the link:
<p class="button">Rejoindre</p>
However, you probably want to use something other than a p tag for your button, maybe a button element instead?
More info on HTML buttons.
Add display: block to the .button a ruleset.
http://jsfiddle.net/ExplosionPIlls/UvrKx/
You can add display:block; to you anchor tag.
display: block means that the element is displayed as a block, as
paragraphs and headers have always been. A block has some whitespace
above and below it and tolerates no HTML elements next to it, except
when ordered otherwise (by adding a float declaration to another
element, for instance).
Fiddle: http://jsfiddle.net/akx3p/
CSS:
p.button
{
background-color: #e74c3c;
line-height: 30px;
width: 200px;
text-align: center;
}
.button a
{
font-family: Montserrat, sans-serif;
color: white;
font-size: 0.9em;
text-transform: uppercase;
display: block;
}
.button a:hover
{
text-decoration: none;}
<p> are block elements, meaning that they naturally are at 100% width. If you just added display: block; to the anchor tag, you can make it behave the same way. Here's a fiddle
. That way allows you to get rid of the p tag all together.
Check out this code sample of a button and an anchor: http://jsbin.com/ecitex/2/edit
I'm trying to make them identical in all browsers. But differences remain, and different differences in every browser (tried Chrome, Safari, Firefox, IE8).
Which CSS normalizations am I missing?
Update:
Per suggested:
I added line-height: 50px (although my user agent's (Chrome's) default line-height for button elements is normal, and still it vertically centers text – how?!)
I added cursor: pointer to normalize mouse cursors.
http://jsbin.com/ecitex/11/edit
So, now check out the result in Firefox: notice the padding on the button?
Then check out the result in IE8: whoa, notice how the two are completely and utterly different?!
Update 2:
It seems that IE's problems are known and non-resolvable: http://www.quirksmode.org/css/tests/mozie_button2.html
I haven't found anything on Firefox's padding though. (The quirksmode article mentions an issue with Mozilla, but that's a different issue.)
Update 3:
Awesome, we fixed the Firefox issue: http://jsbin.com/ecitex/15/edit
Okay, so far every single answer has been providing part of the solution so there's not really one single best answer. I'll grant the best answer to the person that either:
Explains why we have to specify a line-height: 50px to vertically center text in an a, while a button has vertically centered text with a mere line-height: normal.
Provides a solution for the IE issue.
You can remove that extra padding in Firefox by using:
button::-moz-focus-inner {
border: 0;
padding: 0;
}
Here's a good explanation from Eric Meyer about line height which hopefully explains why you need to explicitly set it as 50px: http://meyerweb.com/eric/thoughts/2008/05/06/line-height-abnormal/.
Here's some new CSS that fixes the font size issue in IE:
button, a {
display: inline-block;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
margin: 10px 0;
padding: 0px;
height: 50px;
border-width: 0;
background-color: Red;
color: White;
font-family: sans-serif;
font-weight: normal;
font-size: inherit;
text-decoration: none;
line-height: 50px;
cursor: pointer;
font-size: 100%;
}
button {
#width:0px;
overflow: visible;
}
button::-moz-focus-inner {
border: 0;
padding: 0;
}
You need to use line-height property to bring your anchor tag text vertically centered
Demo
CSS
button, a {
display: inline-block;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
margin: 10px 0;
padding: 0;
height: 50px;
border-width: 0;
background-color: Red;
color: White;
font-family: sans-serif;
font-weight: normal;
font-size: inherit;
text-decoration: none;
line-height: 50px; <-------- Here
}
add the attribute cursor:pointer; in order to add a pointer when the mouse is hover (the input not always have it)
and at last use line-height:46px; for the vertical align
the full code is here -> http://jsbin.com/ecitex/10/edit
I have a page at http://www.problemio.com/problems/problem.php,
and you see on the bottom-right I have a teal image. It is really a link and in that link I can't seem to get the text color to appear white.
Here is my CSS:
.button
{
display: block;
background: #4E9CAF;
padding: 10px;
text-align: center;
border-radius: 5px;
color: white;
text-color: white;
font-weight: bold;
text-decoration: none;
}
a:button.visited
{
display: block;
background: #4E9CAF;
padding: 10px;
text-align: center;
border-radius: 5px;
color: white;
text-color: white;
font-weight: bold;
text-decoration: none;
}
and here is how I make the link with HTML:
<a class="button" id="follow_problem" href="#" title="...">Follow Problem</a>
Any idea what is going wrong and why the color of the link isn't white?
It appears that you're trying to override the styling of the a:link class Try:
Option 1:
Here is the class you're trying to override:
a:link {
color: #3686A7;
text-decoration: none;
}
You need to add !important to the end of your style declaration:
.button {
color: white !important;
}
Option 2:
You could further define the a:link class rules:
a:link.button {
color: white;
}
That's because a:link (line 95) is more specific than .button (line 109).
You can fix it by changing the rule to
.button,
a:link.button {
/* rules */
}
Tips:
While using !important will work, it is a silly workaround that will eventually get you in trouble, and it is actually a misuse - http://www.w3.org/TR/CSS2/cascade.html#important-rules
Use Firebug for Firefox, or Chrome's inspect element, to check the css affecting a given element.
In your .button class, use this: color: white !important;. The problem happens because the a style declaration is applied after the .button declaration, in effect cancelling the color you have set in favor of the link 's color property. Using !important ensures the color rule is applied over any other.
That's because you have another class in common_elements.css that has higher priority than .button
a:link
{
color: #3686A7;
text-decoration: none;
}
Try making your .button more prioritized by !important