I have an inputfield that should exactly look like the normal body-text.
It does not have anything special specified. In my css reset I have this …
input, textarea, button, select {
margin: 0;
font-size: 100%;
line-height: normal;
vertical-align: baseline;
}
The text inside the input field is bigger than the one above … see my example screenshot. The lower line is an inputfield, the upper line normal text.
This occurs in all browsers. If I would change the font-size for inputs to 97% it would be about right. However I simply don't get why text-inputs resize the font-size?
any thoughts on that?
You need to set font-size on the input too as it won't inherit it from the body directly.
This is because newer browsers will use it's own base stylesheet to format the inputs.
http://jsfiddle.net/mjPE9/ (default font in firefox will be serif, but inputs will always get a sans-serif font if not specified differently)
If you use Firebug you can see all this User agent styles the browser sets if you check Show user agent styles in the Style tab dropdown. The file used is forms.css - you can easily find it on your system and check what it's happening behind the scenes if you do a search.
Guess this might help you. http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_input_size
Related
I want to reduce the text size of the top left slider from the linked page.It is set to H2 on default and I can't figure a way to change it. The text size is too big for it and it looks stupid. I tried with the CSS below, but it only reduces the text size, unfortunately the spacing between the lines and words stays like in H2, which doesnt look appropriate either. Please help!
.fusion-flexslider.flexslider-posts .slide-excerpt h2 a {
color: #fff;
font-size: 20px !important;
line-height: 0.5 !important;
}
It's because the <a> derives font-related styling from the <h2>
Try this selector .fusion-flexslider.flexslider-posts .slide-excerpt h2, it works for me https://prnt.sc/v52pmy
If you set the a element style to include display: inline-block the element will then use the CSS styling you are giving it (though I guess you probably want to set line-height back to normal rather than try 0.5). I have tested this on your site using browser dev tools.
The reason is (to me) a quite complex one - why it doesn't work as you might expect on inline blocks. An explanation is given at https://stackoverflow.com/questions/22816123/why-cant-you-set-line-height-on-an-anchor-element-with-a-background
On our WordPress blog, it seems the style is inherited from the foundation.css file.
In particular, the font-size of headings, that we would like to change.
For instance, on this page, when we inspect element, it seems that the font-size of h2 is defined in foundation.css, on line 2813.
So, we changed the size of h2 in the foundation.css file, on this very particular line, but we still get the same result.
It seems like something it overriding our changes.
What is the right way to change headings font-size?
If you change the size and it doesn't work into your css,
You can Add the !important; parameters at the end of the line. Ex.:
h2 { font-size: 30px !important; }
please, read this if you want to know how to use it. Don't abuse of !important if not necessary!!
Best regards,
Be sure to flush the cache when you refresh the page to see your changes to foundation.css. It's possible that your browser is caching the previous version of foundation.css and your changes are being ignored while it renders (but external users may be seeing them).
Try shift-cmd-R in Chrome, or have the JS console open, and a pulldown menu will appear on the refresh button (in Chrome).
I must have went through every page of google but haven't found the solution yet. I have a custom font that I'm using through css font-face. The font adds extra padding on the bottom depending on the browser and OS that I am using. The picture below shows an example with mac being on the left and windows on the right. It looks correct on the right (in windows) and i want it to be the same on mac.
#font-face
{
font-family: universLight;
src: url('http://www.viggi.com/fonts/UniversLTStd-Light.otf');
font-weight: normal;
font-style: normal;
}
#button{
font-family: universLight;
border: 1px solid black;
background: #ccc;
}
The code is located at http://jsfiddle.net/ZDh5h/
Here is what I already know won't work from my research.
line-height adds padding to the top and bottom so the extra padding on the bottom remains.
using different extensions such as .otf or .ttf also doesn't work. Just produces the same results
changing the font-size also doesn't really do anything
I use this font a lot through out the site and don't really want to add different CSS sheets for mac vs windows. If anyone knows anyway to fix this without having javascript add extra padding I will be very grateful.
Thank you.
See http://www.w3.org/TR/CSS2/visudet.html#propdef-line-height
normal
Tells user agents to set the used value to a "reasonable" value
based on the font of the element. The value has the same meaning as
. We recommend a used value for 'normal' between 1.0 to 1.2.
The computed value is 'normal'.
I think the behaviour you observe comes from different "reasonable" values across browser as normal is the default line-height value.
So specify your value (say line-height: 1.5em;) to get rid of the differences.
In IE10, a focused textbox containing a value will have a little x added to the right of them. This x allows a user to click on the textbox in order to clear its value.
Other questions have touched on removing this feature from the user's view, but I wanted to maintain the feature in addition to adding my own icon to the right of the textbox, such as a search icon. Unfortunately, those icons end up colliding, so I needed to determine a way to move the icon and my searches never turned up any results.
The question that I kept trying to answer: what other properties can be used with the IE10+ ::-ms-clear pseudo-element?
UPDATE: As the other answerer pointed out, the MS documentation has been updated as June 19, 2013 to include all of the properties available to ::-ms-clear. It's unclear if this applies to IE10 rather than the currently forthcoming IE11, so I will leave the rest of the answer below.
For completeness, they have also updated the documentation for ::-ms-reveal, which appears to be the exact same as ::-ms-clear.
The answer below at least applies to IE10.
I cannot find an exhaustive list, which lead me to experimentation:
::-ms-clear {
margin: *; /* except margin-left */
background: *;
color: *;
display: none|block;
visibility: *;
}
Unfortunately, I was not able to trick IE's developer mode (F12) into showing me the ::-ms-clear properties in the style tree, so I had to try things by hand and reload the page in order to experiment. I even tried cheating by adding onblur=this.focus(), but that did not work.
CSS properties that did something, and seemed useful:
margin: The margin gave me a way to shift it from the right side of the textbox. I shifted it by the size of my icons, plus 1-3 pixels to give a buffer. Only margin-left does not seem to work.
background: The background of just the x. Applying any background settings puts your desired content behind it; it does not replace the x!
color: Controls the color of the x.
display: As the question that got me here notes, none will hide the x.
visibility: Seems to work as one would expect similar to display.
You can combine the color and background to replace the x with a different background image so long as it fits within the given size of the x, which appears to be around 20px, but that is just me eyeballing it.
::-ms-clear {
color: transparent;
background: no-repeat url("../path/to/image") center;
}
CSS properties that did something, but did not seem useful:
padding: It affects the x, but never as I actually expected its effect (everything seemed to hide the icon, or at least shift it out of view).
position: Identical behavior as padding. Admittedly, I am much more of a programmer than a designer, so this may be my own shortcoming.
CSS properties that I guessed might do something, but that did nothing at all:
text-align
float
Adding other CSS pseudo-elements does not affect ::-ms-clear. Specifically, I tried ::after and ::before on it with content: "y", and neither one got a result.
Obviously it depends on the size of the companion icon that you intend to apply to the textbox, but I use 14-16px icons and I found that margin-right: 17px gave the x a clear gap, which shifts the x to the left of my right-aligned icon. Interestingly, margin-left seems to have no effect, but you can use a negative value for margin-right.
The actual CSS that I ended up using, which prevented my icon from being covered by the x.
[class^="tbc-icon-"]::-ms-clear, [class*=" tbc-icon-"]::-ms-clear {
margin-right: 17px;
}
My icons all share the same base name, tbc-icon-, which means that the ::-ms-clear pseudo-element is automatically applied to all of them whenever they are applied. In all other cases, the pseudo-element behaves in its default manner.
Of interest, ::-ms-reveal seems to behave the same way, and if you were going to apply icons to password fields (far less likely I expect), then you can follow the above example:
[class^="tbc-icon-"]::-ms-clear, [class*=" tbc-icon-"]::-ms-clear,
[class^="tbc-icon-"]::-ms-reveal, [class*=" tbc-icon-"]::-ms-reveal {
margin-right: 17px;
}
One list is available on MS site, at least.
http://msdn.microsoft.com/en-us/library/windows/apps/hh465740.aspx
(But maybe I misunderstood the question.)
I have a created a few forms and I can't fgure out why in certain browsers and operating systems, my input buttons appear differently.
Check out the input button here: http://www.41q.org/admin
It's should appear as a square, but instead I get a round corder default button. Can;t figure this out. My CSS is not working.
Should I change the TYPE?
Erik
Try using normalize.css (http://necolas.github.com/normalize.css/) or reset.css (http://meyerweb.com/eric/tools/css/reset/). Then optimize for each browser.
This is probably an IE problem.
I like to define the body font family or font styles with the input, option, textarea, etc tags, like this:
body, input, select, option, textarea {
color: #fff;
font-family: arial;
}