Button text position differs whether it in firefox/chrome or opera/ie.
I have a button and text in it. In opera it goes little bit lower than in firefox.
HTML:
<button>
some
</button>
CSS:
button {
width:145px;
height:36px;
border: 0;
color:#fff;
}
How can I prevent this "jumping" of text button?
Also a bonus question: may be someone knows how to prevent this different visions of font-weight in browsers?(see the images)
P.S. I googled it - hadn't found the answer
EDIT: FIDDLE
EDIT_2: Browsers are updated to the last versions. (May be excluding the IE, but the issue is in opera too). OS: Windows 8.1 Industry Pro
You haven't defined the font-size and font-weight, so the different browser is taking button font as it's own. Setting these explicitly solves the problem:
button {
width:145px;
height:36px;
border: 0;
color:#fff;
font: 16px normal Arial;/*change as per your requirement*/
}
Update:
I came to the across solution for the key problem with button tag. The default style for button is display: inline-block;.
And the different browsers do have different vertical-aligning (top, middle, ...), thus fixing vertical-align to the button will fix the issue.
So, far for the button css, add this line of code:
vertical-align: middle;
In Explorer Windows and Opera there turns out to be a difference
between font-weight: 600 and font-weight: bold...
http://www.quirksmode.org/css/tests/iewin_fontweight.html
Use font-weight: 700;.
button {
position: relative;
width:145px;
height:36px;
line-height: 36px;
border: 0;
color:#fff;
font-size:16px;
font-weight:700;
border-radius: 10px;
font-family:"Myriad Pro", "Verdana", sans-serif, serif;
background: -moz-linear-gradient(top, #00a885 49%, #009979 54%);
background: -o-linear-gradient(top, #00a885 49%, #009979 54%);
background: -webkit-linear-gradient(top, #00a885 49%, #009979 54%);
background: -ms-linear-gradient(top, #00a885 49%, #009979 54%);
margin:0;
margin-top:14px;
box-shadow: 1px 1px 4px rgba(0,0,0,0.64);
text-shadow: 1px 1px 5px rgba(0,0,0,0.74);
padding: 0;
}
<button>some</button>
So I found the problem.
I used font-family "Myriad Pro" which was installed with Photoshop. Every browser seems like renders different this font, so after font-family change the problem has gone.
Quite tricky to find but easy solution...
Related
HTML CODE
<div class="pageHeader">
<span class="coolStyleUnderline">Change Password</span>
</div>
CSS CODE
.pageHeader {
text-align: center;
color: #750000;
font-family: "MedievalSharp";
font-weight: bold;
font-size: 60px;
}
.coolStyleUnderline {
background: -webkit-linear-gradient(black, #750000);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
border-image: linear-gradient(to right, black, #750000);
border-image: -webkit-linear-gradient(right, #750000, black);
border-image-slice: 1;
display: inline-block;
line-height: .9;
border-bottom: 6px solid #750000;
}
Things I have tried
Setting the padding to 0
Setting appearance (including webkit, etc.) to "none"
Setting the line-height to 1
Setting the border to none BEFORE the border-bottom attribute
Devices With Issue
iPad Pro 12.9in (Safari and Chrome)
iPhone X (Safari and Chrome)
iPhone 6s (Safari and Chrome)
I have attached two photos. The first one is what the border is supposed to look like (taken on Windows Chrome) and the second one is what I am getting on my apple devices. Any help is much appreciated. Thank you!
No Issue Photo
Issue Photo
I figured it out boys. All I had to do was specify the border image width. This was done by adding the following to .coolStyleUnderline :
border-image-width: 0px 0px 6px 0px;
Thank you to everyone that tried! Have a great day!
I'm trying to create a 2 coloured background to use it as the background for my text container. To get two different colours I've used a gradient. Let me show you what it looks like now.
If you look closely, you can see the line in the middle looks kind of, I don't know what to call it, lets just say it doesn't look smooth.
Here's my css:
.btn {
background:#8a8a8a;
background: linear-gradient(to right bottom, #000000 50%, #8a8a8a 50%);
display:inline-block;
padding:0.75em 2.0em;
font-size:18px;
text-align:center;
margin:0.25em 0;
color:#ffffff;
font-weight:normal;
font-family:sans-serif;
}
Giving a small gap between the two color stops points (like 49.5% and 50.5%) did the trick.
You can try this style here: https://jsfiddle.net/dnn02d64/4/
.btn {
background:#8a8a8a;
background: linear-gradient(to right bottom, #000000 49.99%, #8a8a8a 50.99%);
display:inline-block;
padding:0.75em 2.0em;
font-size:18px;
text-align:center;
margin:0.25em 0;
color:#ffffff;
font-weight:normal;
font-family:sans-serif;
}
Hello I am needing some help with my website. As you can tell from the image I have provided I need the text to be centered in the middle of the rectangular box. How do I go about doing this?
My css is,
.extendcontainer {
background: rgba(255,255,255,0.1); // Transparent White Background
background: #fff; // Left as a fallback for older browsers
color: #FFFFFF;
}
set the height of the box and the line-height of the box to be the same.
Example:
.extendcontainer {
background: rgba(255,255,255,0.1); // transparent white
background: #fff; // Left as a fallback for older browsers
color: #FFFFFF;
height:30px;
line-height:30px;
}
Doesn't work for multiple lines though
add this rule
padding-top:40%;
Like this
.extendcontainer {
background: rgba(255,255,255,0.1); // transparent white
background: #fff; // Left as a fallback for older browsers
color: #FFFFFF;
padding-top:40%;
}
You can play with % to adjust it.
You can using vertical-align: middle;
.extendcontainer {
background: rgba(255,255,255,0.1); // transparent white
background: #fff; // Left as a fallback for older browsers
color: #FFFFFF;
vertical-align: middle;
}
Using line height is probably the easiest, if the text will always be on one line.
Looks like your container is 38 pixels high. To exactly center your text, try adding this:
.extendcontainer {
line-height:38px;
height:38px;
}
using padding-top may show the content centered for the screen that you are viewing currently. If the same page is seen from larger sized monitors, it may not. It is highly appreciated to use
vertical-align: middle;
so that, it is centered in all size monitors.
I created a few circles using CSS that I use as text inputs on my HTML index page.
Problem is that when the font inside is relatively large compare to the CSS circle, the circle turns into an oval.
It only happens on IOS. I have tested the page on Safari and Chrome and it's perfectly fine. Don't have android devices to test.
I have tried using meta flags and webkit properties but no go.
Any hints?
input[type=text5]{
position: absolute;
left: 270px;
top: 340px;
display:block;
width:50px;
height:50px;
line-height:50px;
border: 2px solid #f5f5f5;
border-radius: 50%;
margin:0 auto;
color:#f5f5f5;
text-align:center;
text-decoration:none;
background: #464646;
box-shadow: 0 0 3px gray;
font-family:Verdana;
font-size:16px;
font-weight:bold;
-webkit-box-sizing:content-box;
-moz-box-sizing:content-box;
box-sizing:content-box;
}
Large Font:
Small Font
well guys, I figured out after playing a bit with CSS properties. For some reason iOS was adding padding to the text. Interesting that none of the desktop browsers added padding. In any case adding: padding: 0px; solved it.
One More Way...
If you apply CSS3 Property box-sizing:border-box; on element being oval in iOS, the problem will be solved.
This is a button that has been originally implemented and styled in Silverlight.
How to implement this button in HTML/CSS? Note the different gradients in the border and the button background and also the rounder corners in the border. The border width should be adjustable but uniform size around the button.
The red colour in the example picture is page background, not part of the button.
Button screenshot http://i52.tinypic.com/2vsetlw.png
UPDATE: Forgot to mention, I would prefer a solution without images, ie. pure-css. Css3 is fine, I don't need to support IE6-8 for example.
I know it's not the most helpful thing to spoon-feed sometimes, but I had needed a break from work.
Demo: http://jsfiddle.net/wesley_murch/SzHQZ/
Looks nice in FF4 and Chrome, IE falls back to decent looking (though you could fix it with PIE).
Here's the CSS I used, I got the gradient code from some random online generator so it might not be optimal. There's too much contrast as well compared to your image, so just fine tune it.
<button>
<span>
Sign in
</span>
</button>
button {
border:0;
padding:3px;
background:#735544;
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.18, #271D1B),
color-stop(0.59, #735544)
);
background-image: -moz-linear-gradient(
center bottom,
#271D1B 18%,
#735544 59%
);
border-radius:8px;
-moz-border-radius:8px;
-webkit-border-radius:8px;
}
--- Needed this break to get markdown to behave...
button span {
display:block;
color:#fff;
font:900 18px arial;
text-transform:uppercase;
padding:.35em 1.3em;
background:#382B25;
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.18, #382B25),
color-stop(0.59, #C2A489)
);
background-image: -moz-linear-gradient(
center bottom,
#382B25 18%,
#C2A489 59%
);
border-radius:4px;
-moz-border-radius:4px;
-webkit-border-radius:4px;
}
Looks like the boring version of http://www.zurb.com/article/266/super-awesome-buttons-with-css3-and-rgba :)
you can take the example from there and just change the colors, probably want to replace
border-bottom: 1px solid #222;
with something like
border: 3px solid brown;
The example above uses an alpha-blended png for the gradient, but you can also go for css3 gradients, see http://css-tricks.com/examples/CSS3Gradient/ for a good cross-browser example.
Just save the image as a background
<input type="submit" class="btnSqueareInput" name="commit" value="SIGN IN"/>
btnSqueareInput {
background:transparent url(../images/sqaure.png) no-repeat;
border:medium none;
color:#FFFFFF;
cursor:pointer;
display:block;
font-family:Arial,Helvetica,sans-serif;
font-size:12px;
font-weight:bold;
height:32px;
margin:0;
padding:0;
text-align:center;
text-decoration:none;
vertical-align:top;
width:79px;
}
where square.png is rge image of the button w/o 'SIGN IN'