I set 2 <input>'s heights as 2em using CSS, but the heights are rendered differently in Google Chrome. Here's a Fiddle that shows this: http://jsfiddle.net/hA4eD/1/
In my computer, using Chrome's Dev tools, the text input has a height of exactly 32 pixels while the button input has a height of 28.79999... pixels. How do I make them equal without manually adjusting the number of pixels?
please add webkit appearance property as none value...
Fiddle :http://jsfiddle.net/nikhilvkd/hA4eD/3/
input{
height:2em;
width:5em;
display:inline-block;
-webkit-appearance: none;/*new property*/
}
The problem is that the inputs have inherent borders that you're not taking into account. You can change them to have the same borders via CSS but this ends up making the controls look far uglier (Or leaves you specifically styling each input's borders & adjusting your heights accordingly, meaning you'll end up managing all the different styles).
One option is to use the -webkit-appearance css rule to disable this as others have suggested. Alternatively you can set box-sizing: border-box; to tell the CSS that the height you've specified should be the entire height of the input, borders included.
Related
I have this problem that took me the hole day thinking, and I can't figure out what's the matter:
I have a SELECT element, with options of different sizes,
Obviously it takes the size of the longest option by default.
But when I choose one option or another the select box changes it's size,
I don't know what would cause this behaviour since it's happening only in Firefox, and in all the SELECT elements of my app.
Is there any CSS property that would make this happen?
Have you guys any idea? Thanks in advance
You need to give your select a set width within your stylesheet. Without this, it will behave as you describe.
select{
width:200px;
}
Alternatively, if you want to allow it to keep resizing, but only up to a certain size, you can use max-width instead.
select{
max-width:200px;
}
It sounds like the lack of a CSS width is causing the box to size itself automatically. Try adding a CSS width or min-width.
I found what was the problem,
Actually as it's an oldish app, I found some reset css applying this rule:
* {
padding: 0;
}
Seems like only firefox doesn't like this, and so applying this to an element, makes this side effect.
I resolved it giving my tags a padding style to override the reset style.
I am using the Google font 'Lato' and I am having problems with having title and text align properly to the left... The font (when large) appears to have a kern space on the first letter and wont align left without space!?
So here also a fiddle:
<h1>Hello</h1> <p>Hello, this is sentance</p>
FIDDLE
Also, adding a negative value on the margin-left (magin-left:-10px) just seems like a terrible workaround... and this would not work overall for different font-sizes, unless individually adjusted as needed... surly there must be a better solution?
Can anyone help?
Okay, everyone who says it's due to automatic padding or margins due to the line being a header is wrong. See this fiddle as evidence:
http://jsfiddle.net/w25j9L7o/26/
The leading space is not being rendered by the browser or the CSS or anything else at the DOM/Browser level. It is the font. The H glyph has some built-in padding around it, and the larger the font size, the more noticeable that padding will be.
Even if you use negative margins to compensate:
The character itself is shifting over, which includes the empty space, so that empty space will be sliding over as well, affecting layout. The visible character isn't sliding into the empty space, the entire character (visible and invisible) is shifting to the left if you use CSS to fix it.
You would need to adjust that offset based on the font-size or figure out the underlying percentage so that the offset grows with any font-size set.
Or you can just use a different font that doesn't have this characteristic.
PX units are not such a good choice in this case. I recommend using EM unit if you working with font attributes like line-height etc. Because it's automatically calculated for each of font-size. It should look like this:
#yourDiv::first-letter {
margin-left: -0.12em;
}
Try using first letter
h1:first-letter {
margin-left: -10px
}
http://jsfiddle.net/w25j9L7o/1/
You can get kern.js from kernjs.com and edit your front kerning, like they said on their website "click and drag to adjust your kerning, line-height, letter placement, When you're done, copy the generated CSS and use it in your own stylesheet"
The white space is there because it is a header.
You can align it to the left by doing:
margin-left: -10px;
Most Web browsers have different default settings for the base margins and padding. This means that if you don't set a margin and padding on your body and html tags, you could get inconsistent results on the page depending upon which browser you're using to view the page.
The best way to solve this is to set all the margins and paddings on the html and body tags to 0:
Add this CSS:
html,body {
font-family:Lato;
margin:0px;
padding:0px;
}
p{margin-left: 11px;}
DEMO
This problem was driving me crazy so here is an elegant solution that uses ::first-letter selector. For example I was able to fix my spacing issue by adding:
#yourDiv::first-letter {margin-left:-5px;}
Hope this works for others that were in my situation. Here is a link for more information: http://www.w3schools.com/cssref/sel_firstletter.asp
You can use Gill Sans font. It is very similar to Lato. Problem is in Lato font itself not in Css.
Here is your link for GillSans
Setting width/height in CSS only corresponds to the content area. Is there a way to set the offset width/height (i.e. dimensions including padding/margin/borders) of an element in CSS?
EDIT: Example ->
I have a number of divs tagged with css class "smallBox"
.smallBox{
width: 100px;
height: 100px;
}
Now I want to set the padding individually on each box, while having the overall outer dimensions stay the same.
Strictly speaking, sort of. You can change the box model used with the proposed box-sizing CSS3 property, such that the width specifies the total width of the object. Details can be found here (http://www.quirksmode.org/css/box.html).
However, browser compatibility is iffy (the article only mentions IE8+ and Firefox), so you will likely need to use JavaScript of some kind to achieve this.
I realize there are lots of rounded buttons questions, but my needs are fairly specific, and this hasn't been answered elsewhere.
Here's my requirements:
Works with absolutely positioned buttons
Client side only techniques ( can't change HTML on server side )
Works on input type=button and input type=submit (button element not needed)
Fixed height, liquid width
Supports IE7 or better
The absolute positioning + client side only makes most rounded corner techniques unusable in my opinion.
Images or no images does not matter (either way is fine). JavaScript is allowed.
EDIT: Changed question to reflect actual problem: the one HTML element I thought I needed wasn't really the requirement.
It's not possible for IE. That's why you can't find it anywhere else. The only thing you could do is use a static background image, but that will stretch for different widths.
I ended up using multiple backgrounds for the buttons.
CSS3 multiple backgrounds for browsers that could handle that, and in IE I used the DXTransform filter to add a second image (see here). The actual technique used was a pretty standard sliding door style setup, with some changes to account for the fact that you couldn't position the second image in IE other than at the top left.
For FF 3.5 and lower I used border-radius, since multiple backgrounds only came in 3.6.
Hover/active images worked fine, and it's all in CSS, which was a bonus.
Since javascript is allowed (based on one of your comments), I don't see how it would be a big performance hit to:
wrap the input elements with div
take the positioning properties of the input and copy them to the div wrapper
remove the positioning off the input using an inline position: static
add other elements or styles to get your rounded corners. Being fixed height, then for everything other than IE7, some css like this should work (assumes fixed height of 20px, rounded end images that are 10px wide by 20px high):
Css:
div.inputWrap:before,
div.inputWrap:after {content: ' '; display: inline-block; height: 20px; width: 10px; background: url(/yourRoundedLeftEndImg.png) top left no-repeat;}
div.inputWrap:after {background: url(yourRoundedRightEndImg.png);}
Assuming your javascript gives you this html:
<div class="inputWrap"><input /></div>
You will need to style the input to get rid of borders, and such (I also found that my test in Firefox required me to set vertical-align: top, but not sure if that is necessary. For IE6-7, you would actually have to add extra div's before and after the input since they do not recognize the :before and :after pseudo-classes.
Basically the problem I have is that in Safari/Chrome it is changing the width of my columns even though I have specified a) a width on the table, b) table-layout:fixed, and c) specific widths on my first row that when added with the padding and border values add up to the width of the table specified. In IE7 and Firefox 3 the table is rendered the same. But in Safari/Chrome it decides to make the second column bigger by taking space from the other columns.
Any ideas? I have a very simple sample page that you can look at, as well as an image showing how the table is rendered in all three browsers for comparison.
In buggy webkits, table-layout: fixed also gives your table cells box-sizing: border-box. One alternative to browser detection is explicitly set box-sizing: border-box to get consistent behavior across browsers, then adjust your widths and heights accordingly (widths and heights must be increased to include padding and borders).
#my-table td {
box-sizing: border-box;
}
I was able to get around this problem by removing the padding from the <th> with the fixed width. You can then safely add padding to the <td>
After looking around, I think that this is caused by the following webkit bugs: 13339 and 18565. Basically a problem with how it uses the border and padding values in calculating the final width of the columns.
I ended up doing some browser-sniffing and setting some different css values based on that for webkit browsers so that the final rendering was the same as FF and IE.
Have you tried loading some Reset CSS?
http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/
I made a Kendo grid have table:fixed-width. All the columns disappeared but only in Safari. Upon inspection, the td elements all have a computed style width of -3px. If I remove table:fixed-width, it's fine. If I specify custom pixel widths (but not percentages), it's fine. If I disable every style applied from every css source I can find (in the console style tab), the problem is not fixed it and nothing there sets width -3px.
So I have to either set all the column pixel widths or else not use table:fixed-width.