So, I have a span with some text in it, it has padding and it has a border.
It displays ok in chrome and safari, but in firefox it has more space between the text and the bottom border than between the text and the top border. Inspecting the element in firefox I figured out that the span in firefox has more height than the text inside it, and the text is top-aligned. Below is a screenshot to explain myself.
But first, this is the code:
span.num{
border:1px solid #00B288;
border-radius: 5px;
padding:5px 15px;
font-size:25px;
color:#fff;
font-weight:100;
letter-spacing: 0.5px;
}
<span class="num">0800-777-8101</span>
Chrome: http://puu.sh/lHWSM/aa4e15a522.png
Firefox: http://puu.sh/lHWUv/aa066712c3.png
As you can see in this last screenshot, firefox is making the span take bigger height than it's content. http://puu.sh/lHX1V/c6f6a12c13.png
How can I fix this?
That is because Chrome and Firefox render fonts differently and also have a different default line-height. Setting a fixed line-height and setting display:inline-block You can force them to render the element with the same rules.
Example:
span.num{
border:1px solid #00B288;
border-radius: 5px;
padding:5px 15px;
font-size:25px;
color:#fff;
font-weight:100;
letter-spacing: 0.5px;
line-height:1.2em;
display:inline-block;
}
Related
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.
I have styled submit button with custom background image. But it shows differently on different browsers.
Almost all browsers shows it correct:
But on 2 it have extra height:
Can anyone point what wrong is with my markup?
CSS:
input[type="submit"]{
background: url(http://dl.dropbox.com/u/17055243/icons.png) -99px 0px no-repeat;
width:30px;
height:30px;
border:none;
float:left;
margin:30px 0 0;
cursor:pointer;
}
HTML:
<form>
<input type="text" class="placeholder" value="Search" />
<input type="submit" value="" />
</form>
Tested:
IE 8.0 good
IE 7.0 good
iPhone good
Chrome 24.0 good
Firefox 18.0.2 good
Safari 5.1 (Mac OS X 10.7.1) good
Opera 12.14 (Windows 7 32-bit) good
Safari 5.1.7 (Windows 7 32-bit) extra height
Opera 11.51 (Mac OS X 10.7.1) extra height
Live demo on jsfiddle.
It looks to me the height of the textbox is different not the submit button. Try setting the height of the textbox.
I see in the second search bar, the text is italic and looks slightly smaller. I think the search bar is adjusting to the text and making itself smaller, which makes the search icon appear larger.
What you probably need to do is add this to your stylesheet where the placeholder is controlled:
{font-style:normal}
Try this.
It will give a fix height to the element.
input[type="text"]{
margin:30px 0 0;
width:226px;
color:#999999;
font-size:12px;
font-style:italic;
border:1px solid #cccccc;
border-right:none;
background-color:#ededed;
float:left;
height:28px;
padding-right: 7px;
padding-left: 7px;
line-height: 28px;
}
Submit buttons & input textfields have different default values for borders, margins, padding, etc. First of all you have to put this to both submit buttons and textfields
margin:0;
padding: 0;
border: none;
outline: none;
I'm trying to make a input look like plain text. The aim is to draw a span, when user clicks the span it hides and displays an input that looks like plain text, but editable by the user.
In Chrome and Firefox I cannot get rid of top and bottom paddings, even if I set padding and margin CSS properties to 0.
My CSS looks like this:
input.myInput {
font-family: "segoe ui";
font-size: 20px;
padding: 0px;
margin: 0px;
outline: none;
border: 0px;
vertical-align: baseline;
}
See that font size is set to 20px. Chrome and Firefox add 4px padding-top and padding-bottom, so that input is 28px tall, not 20px as expected.
You need to reset the line-height of the input element to be 20px as well. By default, some browser add 4px (2 top + 2 bottom) to input element's line-height.
As Diodeus suggested, just add height to your input.
input.myInput {
font-family: "segoe ui";
font-size: 20px;
height: 20px;
padding: 0px;
margin: 0px;
outline: none;
border: 0px;
vertical-align: baseline;
}
line-height will not work
It could be your font. Try setting the CSS height of the input directly or try adjusting line-height.
I haven't tested it on IE quite yet.
I want to style the background image and text box shape as well as borders for my search bar on my site, [dead site].
If you visit it on Firefox or Opera and see the search bar on the left column, that's what I am going for. Now if you visit it on Safari or Chrome, you should see that it is replaced by their default input text field, which makes the text illegible.
How do I style my text-box even on these browsers?
To be clear, on your site you are actually styling a search field and not a text field.
<input type="search"> <!-- This is what you have -->
vs
<input type="text">
To remove the default styling and allow your css properties to work you need to change the -webkit-appearance property. This should do the trick:
#s {
min-width:98%;
background-color:#2a2a2a;
color:#d3d3d3;
border:2px solid #000000;
font-size:.85 em;
height:1.9em;
display:inline !important;
border-radius:5px 5px 5px 5px;
outline:none;
-webkit-appearance: none; /* add this */
}
style.css
body {
background: #999 url(your_image_here.jpg);
}
.search {
width: 295px; /* 300px less the 5px of left padding*/
height: 30px;
line-height: 30px; /* same as height, then you can vertically align the text in the middle*/
vertical-align: middle;
font-size: 24px; /* this gives 3px at the top and bottom */
background-color:#ccc; /* a light grey background in the text box */
color:#333; /* dark grey font colour */
padding-left: 5px; /* spacing (padding) within the left hand side of the text box */
border: 1px solid #000; /* 1px wide black border around the text box */
display:inline !important;
border-radius:5px 5px 5px 5px; /* slightly rounded corners, the order of the values is TOP RIGHT BOTTOM LEFT */
outline:none;
-webkit-appearance: none; /* this removed the default styling */
}
index.html
<input type="text" class="search" value="search"> <!-- I've given the text box a value (search) so that you can test your css edits quickly without having to type in a value every time you refresh the page -->
I think that this answers your question. Get back to me in the comments if I can be of any further assistance.
Here is a link to jsfiddle where you can do a little rapid prototyping of my example.
http://jsfiddle.net/mstnorris/nVDbA/
I have a problem getting the text in an input to show correct in Internet Explorer 8.
Firefox, Safari and Chrome all show the same.
Firefox, Safari and Chrome
Internet Explorer 8
<form action="" method="get">
<input id="q" name="q" type="text">
<input id="s" name="s" type="submit" value="Sök">
</form>
#q {
background:url(../../image_layout/search_field.png) no-repeat;
width:209px;
height:32px;
padding:0 5px 0 5px;
text-align:left;
margin:0;
border:0;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
font-weight:bold;
color:#09305b;
font-weight:bold;
position:absolute;
left: 0px;
top: 19px;
}
#s {
background:url(../../image_layout/serach_buttom.png) no-repeat;
width:56px;
height:34px;
padding:0;
margin:0;
color:#FFFFFF;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
font-weight:bold;
border:0;
position:absolute;
left: 225px;
top: 17px;
}
Try specifying a line-height: 34px or thereabouts.
There is a CSS3 rule: the box-sizing. This rule is supported by IE8.
The IEs(including IE8) have non-standard box model, where padding and border are included into width and height whereas other browsers go with standard and don't include padding and border into width . It is described in detail here.
By setting the box-sizing to content-box you tell the browsers not to include border and padding into width, and if you set box-sizing: border-box, all browsers will include border and padding into width. This or this, the display will be consistent across all modern browsers(not that IE8 is so modern, but it supports this rule too :).
I had to set the line-height and display: inline. No idea why, but it worked for me.
Set a line-height property for search input field #q?
Try setting a line-height targeting IE8 and below, like this:
line-height: 32px\9;
line-height value should be equal to input's height and \9 will target IE8 and below.
The position of input should be position:absolute; in order for line-height:37px; and display:inline; to work.
I had much trouble with that, and finally i resolved it:
for ex. you set
INPUT {
line-height: 44px
}
and...
INPUT:focus {
line-height: 45px
}
this one...f... pixel makes the difference (focus shoud have +1px more than normal) and now you have your cursor in good position at IE8.
Just use
line-height: 34px!important;
height: 34px;
I can't comment yet, Matthew's answer worked for me, but in case people wanted an IE-only wrapper without searching anywhere else:
#media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
line-height: 20px;
}