So I'm using the following CSS to create a button style;
.button {
display: inline-block;
outline: none;
cursor: pointer;
text-align: center;
text-decoration: none;
font: 14px/100% Arial, Helvetica, sans-serif;
font-weight:bold;
text-shadow: 0 1px 1px rgba(0,0,0,.3);
padding: .5em 2em .55em;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
box-shadow: 0 1px 2px rgba(0,0,0,.2);
-webkit-border-radius: .5em;
-moz-border-radius: .5em;
border-radius: .5em;
}
That combined with some other classes to add colour and give hovering and press effects works great.
I've applied this style to various html tags across the site;
<span>
<a href>
<button>
<input type="button">
<input type="submit">
All of them look great and work great in Chrome and (amazingly) IE7-9 (less so in IE7-8 but ok).
But in Firefox the input type tags appear almost twice the size of the a href type ones. Whats causing this?
Here is an example.
using of em might cause this behaviour...
Add a line-height attribute.
something like:
line-height:20px;
should do it.
Firefox uses different line-height for different elements. If you check with firebug, the a has a line-height of 14px, while the inputs have a line-height of 17px.
Well, I used a combination of all three suggestions from Pablo Rincon, ThomasK and beanland.
None of them helped in isolation but together they all seem to work!
Added a CSS reset, not all of them worked but found this one; http://github.com/necolas/normalize.css
Changed the em's to px's.
Set line-height on .button to 17px.
Perfect. Cheers.
Related
<div style="float:right;">
Upgrade now
Buy more credits
</div>
The float:right|left (whether inline, or in my stylesheet) seems to make the links lose both their vertical padding and their bottom border. If I remove it, I have no problem.
Here's the CSS for the links:
.button2 {
color: #fff;
font-size: 18px;
text-shadow: 0 -1px 0 #064687;
border: 0;
border-bottom: 2px #0B5BAC solid;
border-radius: 8px;
background: #1E88F2;
background: -moz-linear-gradient(top, #6BB0F7, #2089F2);
padding: 9px;
cursor: pointer;
box-shadow: 0 2px 2px #999;
text-decoration: none;
width: 270px;
}
Try the old 'hasLayout' fix by adding zoom: 1;
.button2 {
zoom: 1;
}
http://www.satzansatz.de/cssd/onhavinglayout.html
I don't like doing hacks like that but it seems to achieve what you want.
That is because you are trying to assign styles to an inline element in which they typically don't apply. Such as vertical padding, widths, and borders. Try giving it display:inline-block or display:block; float:left;, and in the case of IE7 if you use display:inline-block, look for the display:inline-block fix for IE 7 and you should be all set. jsFiddle: http://fiddle.jshell.net/wUD9q/5/show/light/
FYI - Float has nothing to do with it at all. Removing the float on the outer div doesn't fix it either. jsFiddle for it still broken: http://fiddle.jshell.net/wUD9q/1/show/light/
IE7 is used by less than 1% of the world browsing the internet. Just move on!
SOURCE: http://theie7countdown.com/
I have a textbox of which by I removed the default borders using outline:none; However, when I add a background-image the border is shown and can't be removed!
How do I get rid of this? Here is the box:
<input type = "text" placeholder = "Username" class = "txt_input">
and the css:
background: url('images/user-icon.png') left no-repeat;
margin-bottom: 5px;
box-shadow: 0px 0px 1px 0px rgba(0,0,0,0.5);
font-family: 'ProximaNova-Bold';
outline: none;
width: 200px;
height:30px;
text-align: center;
text-transform: capitalize;
padding:15px;
padding-left:21px;
add a border: 0px none; to your css? The outline handles only the focus border.
Use border:none instead of outline:none. Also, to capitalize text, use text-transform:uppercase. Note: you will remain with a little border, because of the box-shadow you applied. Removing this also will leave you with no border.
Cheers.
I think border: transparent; is better choice.
You have tried this border:0; on your CSS style??
i use 'vscode' and on mine i had to combine (below)
*
border: none;
outline: none;
*
copy that and it should work hopefully
Since you can underline any text in CSS like so:
h4 {
text-decoration: underline;
}
How can you also then edit the 'line' that is drawn, the color you get on the line is easily specified as color: red but how does one edit the height of the line, i.e. the thickness?
Here is one way of achieving this :
HTML :
<h4>This is a heading</h4>
<h4><u>This is another heading</u></h4>
CSS :
u {
text-decoration: none;
border-bottom: 10px solid black;
}
Here is an example: http://jsfiddle.net/AQ9rL/
Recently I had to deal with FF which underlines were too thick and too far from the text in FF, and found a better way to deal with it using a pair of box-shadows:
.custom-underline{
box-shadow: inset 0 0px 0 white, inset 0 -1px 0 black
}
First shadow is put on top of the second one and that's how you can control the second one by varying the 'px' value of both.
Plus: various colors, thickness and underline position
Minus: can not use on non-solid backgrounds
Here I made couple of examples:
http://jsfiddle.net/xsL6rktx/
There is text-decoration-thickness, currently part of CSS Text Decoration Module Level 4. It's at "Editor's Draft" stage - so it's a work in progress and subject to change. As of October 2022, it has about 93% coverage so it's pretty safe to use.
The text-decoration-thickness CSS property sets the thickness, or
width, of the decoration line that is used on text in an element, such
as a line-through, underline, or overline.
a {
text-decoration-thickness: 2px;
}
Codepen: https://codepen.io/mrotaru/pen/yLyLOgr (Firefox only)
There's also text-decoration-color, which is part of CSS Text Decoration Module Level 3. This is more mature (Candidate Recommendation) and is supported in most major browsers (exceptions are Edge and IE). Of course it can't be used to alter the thickness of the line, but can be used to achieve a more "muted" underline (also shown in the codepen).
Very easy ... outside "span" element with small font and underline, and inside "font" element with bigger font size.
<span style="font-size:1em;text-decoration:underline;">
<span style="font-size:1.5em;">
Text with big font size and thin underline
</span>
</span>
Another way to do this is using ":after" (pseudo-element) on the element you want to underline.
h2 {
position:relative;
display:inline-block;
font-weight:700;
font-family:arial,sans-serif;
text-transform:uppercase;
font-size:3em;
}
h2:after {
content:"";
position:absolute;
left:0;
bottom:0;
right:0;
margin:auto;
background:#000;
height:1px;
}
I will do something simple like :
.thickness-underline {
display: inline-block;
text-decoration: none;
border-bottom: 1px solid black;
margin-bottom: -1px;
}
You can use line-height or padding-bottom to set possition between them
You can use display: inline in some case
Demo : http://jsfiddle.net/5580pqe8/
The background-image can also be used to create an underline. This method handles line breaks.
It has to be shifted down via background-position and repeated horizontally. The line width can be adjusted to some degree using background-size (the background is limited to the content box of the element).
.underline
{
--color: green;
font-size: 40px;
background-image: linear-gradient(var(--color) 0%, var(--color) 100%);
background-repeat: repeat-x;
background-position: 0 1.05em;
background-size: 2px 5px;
}
<span class="underline">
Underlined<br/>
Text
</span>
a {
text-decoration: none;
position: relative;
}
a.underline {
text-decoration: underline;
}
a.shadow {
box-shadow: inset 0 -4px 0 white, inset 0 -4.5px 0 blue;
}
<h1>Default: some text alpha gamma<br>the quick brown fox</h1>
<p>Working:</p>
<h1>Using Shadow: some text alpha gamma<br>the quick brown fox<br>even works with<br>multiple lines</h1>
<br>
Final Solution:
http://codepen.io/vikrant-icd/pen/gwNqoM
a.shadow {
box-shadow: inset 0 -4px 0 white, inset 0 -4.5px 0 blue;
}
Thanks to the magic of new css options this is now possible natively:
a {
text-decoration: underline;
text-decoration-thickness: 5px;
text-decoration-skip-ink: auto;
text-underline-offset: 3px;
}
As of yet support is relatively poor. But it'll land in other browsers than ff eventually.
My Solution :
https://codepen.io/SOLESHOE/pen/QqJXYj
{
display: inline-block;
border-bottom: 1px solid;
padding-bottom: 0;
line-height: 70%;
}
You can adjust underline position with line-height value, underline thickness and style with border-bottom.
Beware to disable default underline behavior if you want to underline an href.
Now, as can be seen in the picture below, the property is fully supported in most browsers (according to Mozilla).
So, you can use the following attributes:
.thin {
text-decoration-line: underline;
text-decoration-style: solid;
text-decoration-color: red;
text-decoration-thickness: 1px;
}
.thick {
text-decoration-line: underline;
text-decoration-style: solid;
text-decoration-color: red;
text-decoration-thickness: 5px;
}
.shorthand {
text-decoration: underline solid red 5px;
}
(example code from Mozilla).
I have a little problem with the visited pseudo-class and the text-shadow property in CSS.
Here is my code:
li.episode a{
display: block;
float: left;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
margin: 1px;
padding: 5px;
font-size: 14px;
background-color: #eeeaea;
text-shadow: 0 1px 0 white;
}
li.episode a:visited {
background-color: #23EE44;
text-shadow: none;
color: white;
}
li.episode a:hover {
background-color: #23EE44;
text-shadow: 0 1px 0 #10C72E;
color: white;
}
In fact what I would like to have is the visited link just the same as when hovered.
:Hover works fine on Chrome/Safari but the visited link keeps the first text-shadow property:
text-shadow: 0 1px 0 white;
Instead of the one given below (I tried to use "none" in my code but doesn't seem to work..)
Thanks guys for your help !
There are a very few css properties you can explicitly define for :visited due to security issues.
MDN defines the modifyable properties as (these may vary by browser, but text-shadow is certainly one that shouldn't work on any browser, at least modifying the size of it):
color
background-color
border-color
outline-color
And in addition you won't be able to define opacity or show/hide the links if the base a selector has done one of those things.
I'm looking at the buttons used on twitter's home page, specifically the big orange 'signup' button. I see it is defined like this:
<p id="signup-btn">
<a id="signup_submit" href="/signup">
<span>Sign Up</span>
</a>
</p>
are they just using css to give the orange button appearance (which may just be a jpg), and also using css to specify the roll-over appearance (another jpg), and finally a third state for mouse-click (another jpg) to give the impression of a real clickable button?
If that's how it works, what should I look for to do the same thing? In my case I just want to make a button I guess, like:
<div class='mybutton'>Hello!</div>
.mybutton {
bgcolor: red;
bgcolor-mouseover: yellow;
bgcolor-mousedown: green;
}
yeah something like that would be great,
Thanks
Look at their CSS:
background: #FA2 url(http://s.twimg.com/a/1275412898/images/fronts/bg-btn-signup.png) repeat-x 0px 0px;
border: 1px solid #FA2;
border-bottom-left-radius: 5px 5px;
border-bottom-left-radius: 5px 5px;
border-bottom-right-radius: 5px 5px;
border-bottom-right-radius: 5px 5px;
border-top-left-radius: 5px 5px;
border-top-left-radius: 5px 5px;
border-top-right-radius: 5px 5px;
border-top-right-radius: 5px 5px;
color: #333;
display: block;
font: normal normal bold 18px/normal Arial, sans-serif;
padding: 8px 10px;
text-align: center;
text-decoration: none;
text-shadow: #FE6 0px 1px 0px;
Haven't looked at it specifically, but that is entirely possible with CSS; they probably have a named style using the #signup-btn designation in CSS. To find out, you can use IE or FireFox with FireBug to examine the CSS and see exactly what they do for the button style. I would highly recommend that.
HTH.
I'd use a BUTTON element and CSS sprites. That way, you can style it however you like, and don't have to screw around with click() events in JS. Just use it wherever you'd use a regular button in a form.
EDIT: Coronatus, you should probably read this: Rediscovering the Button Element. They're remarkably easy to make visually consistent across browsers using a little CSS.