Why does <button> always have its text vertically aligned but not.. Say, an anchor tag that is using the same styles?
Same styles meaning both have same display, padding, line height, text-align and vertical-align. But as soon as I change the tag from <button> to <a>, it breaks, text is no longer vertically-aligned
This is tough to figure out. I even went to check the webkit-core to find answers. I checked what does the <button> element has and copied it out.
http://trac.webkit.org/browser/trunk/Source/WebCore/css/html.css
This guy says <button> is styled differently but how?
Button's text vertical align
Can someone tell me how exactly is a <button> is rendered by a browser?
Were you going for something like this?
HTML
<button>...</button>
<br>
<a>...</a>
CSS
button {
-webkit-appearance: button;
}
a {
padding: 2px 8px;
-webkit-appearance: button;
}
Link to fiddle: Fiddle
Related
I have this JSFiddle and if you try to select the text just part of it is in the correct color, the rest is custom blue.
::selection {background-color: #FF6347; color: #fff;}
::-moz-selection{background-color: #FF6347; color: #fff;}
Any way to fix it?
Tested on Safari 9.1.
Chrome:
Safari:
The thing is, the ::selection element has some problems with supporting chrome and safari.
https://developer.mozilla.org/en-US/docs/Web/CSS/%3a%3aselection
To make it a little bit better viewing in chrome/safari you have to wrap your code between a span or a paragraph like so..
https://jsfiddle.net/akrm7uaL/8/
As you see, the text is wrapped in a div or span so all text is red when selected. unfortunately the browser will not support the spaces between the text, when you place a new div in your code. To solve this you have to place all your text in a span instead of a div and place it between one div like this..
<div><span class="circular"></span></div> <!-- instead of --> <div><div class="circular"></div></div>
https://jsfiddle.net/akrm7uaL/11/
As I look at your code, I suppose you use the id's for javascript or php or something so it will not completely your case if you HAVE TO add the id's to your code..
I have a <button> element which has been centered into the middle of the page with an anchor tag wrapped around it like seen in this JSFiddle.
From the JSFiddle if you hover your mouse on either side of the button the link is active. I could prevent this by wrapping it around a <div> and then apply this to the <div>:
div {
display: block;
margin: 0 auto;
}
However is there a better solution to this as in my case, I have many buttons like this and it would take long to apply? Thanks.
Are you referring to the space within the button, besides the "A Button" text, because I don't see any clickable area outside of the button. If so, I think that's just a function of the button tag. When I hover over the button, it highlights blue but my cursor doesn't change, like it should when I hover over a link.
If you throw the a href tag within the button, you'll get the cursor to change when you hover over the button's text. However, the button will still highlight button when you cursor is over the empty space within the button.
Also, what are you using the links for? Instead of hyperlinking the button, you might want to use the URL attribute within the button tag, if you're trying to use the button to send information somewhere.
The best solution to this was to just wrap the button with a form like so:
<form action="link-to-page-here">
<button>Button</button>
</form>
Using this, I can still center the button using:
button {
display: block;
margin: 0 auto;
}
But avoiding the link being clickable on the row of the button.
You shouldn't put a <button> inside of an <a> tag
just use the <button></button> and use the same style you've written for the button tag, so it should be something like that:
button {
display: block;
margin: 0 auto;
}
If you have to use the wrong markup and keep the button inside the <a> tag
just wrap the a tag inside a div tag and change styles to the following
<div>
<a href="">
<button>A Button</button>
</a>
</div>
and styles:
a{
display: inline-block;
margin: 0 auto;
}
div{
text-align: center;
}
button{
}
We can make HTML elements editable by using the contentEditable="true" attribute:
<div contentEditable="true">
This text can be edited by the user.
</div>
JS Fiddle
How can I make the blue box surrounding the element go away when the user edits the content?
I've tried using the :active and :hover pseudo-classes (along with border: none) to no avail.
This is not border but outline which you see on focus. You can try this:
div[contentEditable] {
outline: none;
}
Demo: http://jsfiddle.net/bxmr6gzg/1/
Using trick from here: Making the clickable area of in-line links bigger without affecting the layout, I set positive padding and negative margin on an anchor element, with the goal of extending the clickable region into some text beyond the element.
It works, but only if opacity is some value below 1! Firefox and Chrome exhibit the same behavior.
Compact demo: http://jsfiddle.net/zGsZK/8/
CSS:
a { margin-right:-250px; padding-right:250px }
.nowork { opacity:1 }
.works { opacity:0.999999 }
HTML:
<body>
<a href=# class=nowork>?</a> this black text is not clickable :(
<p>
<a href=# class=works>!</a> this black text is clickable, as it should be
</body>
Is this how it's supposed to work? Why? Is there a way to make it work when opacity==1?
I'm really not sure why this works, but if you add position:relative; to the nowork class, the clickable area will appear above the text similar to the works class. I believe this has something to do with how browsers render CSS, and since the <p> tag is rendered after the anchor, its native CSS (where cursor:normal; rather than cursor:pointer;) takes priority.
I need to vertically align the Facebook and Twitter share buttons. This is how I render them:
<a name="fb_share" type="button" share_url="http://www.livkontrol.com/blog?id=1"></a>
Tweet
Even though they are almost the same size, one appears much on higher than the other. They also seem to ignore any kind of CSS rule I apply to the link element. Does anyone knows how to override the CSS of these elements and have them vertically aligned side-by-side?
I've had the same issue. Facebook uses an inline tag that sets the text on the bottom, causing it to render below twitter and facebook. My solution is to override it by placing CSS after the actual button call. Works nicely:
<style media="screen" type="text/css">
.fb_iframe_widget span
{
vertical-align: baseline !important;
}
</style>
The call modifies facebook's own CSS style.
the answer provided by Marie doesn't seem to work anymore.
For me this does the trick:
html:
<ul class="social">
<li> put button markup here </li>
<li> and next button </li>
...
</ul>
css:
.social li{
display:inline;
}
.fb-share-button{
position:relative;
top:-7px;
}
it might be neccesary to adjust the value for top, depending on the button style/size, future changes.
ps: I know this is an old question, but google likes it..
The correct answer is here
style="height:20px; vertical-align: top;"
I got it to align by styling the first Facebook span with !important to override its inline style:
.fb-like > span {
vertical-align: baseline !important;
}
Tho I'm not sure if this will work on all browsers.
This worked for me, added to my own css.
.fb_iframe_widget span{vertical-align:inherit !important;}