I have input and label fields:
<label class="adm" for="UserName">User name</label>
<input class="adm" id="UserName" name="UserName" size="30" type="text" value="" />
and CSS:
body,html { font-family: Verdana,Arial,Helvetica,sans-serif; margin:0; padding:0; color: #111;}
label.adm { font-size:0.9em; margin:0 0 3px 3px; display: block;}
input.adm { font-size:0.9em; margin:0 0 3px 3px; }
When the code opens up in Firefox the fonts are not the same. Firebug shows that both "should" inherit and when I look at computed it shows the label uses Verdana. However the input shows it uses "MS Shell Dlg".
Can anyone explain what's happening and why it doesn't seem to obey the normal CSS rules?
It does not inherit by default but you can set it to inherit with css
input, select, textarea, button{font-family:inherit;}
demo: http://jsfiddle.net/gaby/pEedc/1/
Form items (inputs/textarea/etc) don't inherit font information. You'll need to set the font-family on those items.
Three years later, I'm finding it strange <input> elements of types reset, submit, and button don't inherit font-family in Chrome or Safari. I discovered they would not receive padding either.
But when I mess with certain properties, like background, border, or this strange appearance property, then font-family and padding have effect, but the native look and feel of the button is lost, which is not a problem if you are completely restyling the buttons.
If you want a native looking button, with inherited font-family, use the <button> element instead of <input>.
See Codepen.
I've had the same problem. What worked for me was adding the style directly to the input element in the html. I'm coding in React fyi.
<input style={{fontFamily: "YOUR_FONT_CHOICE_HERE"}} />
This question is 10 years old, and some people coming to this recently may find that adding the right <meta> information at the top of the HTML page will fix similar issues experienced on mobile devices - try:
<meta name="viewport" content="width=device-width, initial-scale=1">
MDN has a good guide to what the viewport meta information does
Related
Is there any reason why CSS declaration won't display in the browser?
Here's a sample of my CSS file:
.adv {
color:#47463D;
}
.earnings {
color:#B4FF00;
}
When I do <font class=adv>hello</font>, it works a treat.
When I do <font class=earnings>hello</font>, the color specified for .earnings doesn't display in the browser.
The page is linked to the correct CSS file.
Chances are somewhere on your page you have a style whose specificity supersedes the .earnings (See this page). CSS is applied by a weight scale, so anything with a higher weight (calculated specificity) takes priority over what you think may be applied.
Best thing to do is use something like Firebug (firefox extension) or Chrome's inspector to see what style really is applied.
Example (And, by the way, CSS order is irrelevant)
<style>
/* what you think is applied */
.foo { color: red; }
/* What is being applied due to specificity */
#bar .foo { color: green; }
</style>
<span class="foo">.foo</span> <!-- color is red -->
<div id="bar">
<span class="foo">#bar .foo</span> <!-- color is actually green -->
</div>
Make sure to surround your parameter values with quotes. You also need to make sure your tags match up
<a class="adv">hello</a>
<font class="earnings">hello</font>
Finally, if you have multiple css parameters in .earnings you need to put a semi-colon after each one.
The last semicolon in a CSS declaration is optional, so that's not your problem.
Most likely you have other styling applied that has a higher precedence. The CSS precedence rules can be a bit weird; the most common stumbling point is that a highly specific declaration takes precedence over subsequent declarations that are less specific
Example from HTMLdog.com:
div p { color: red; }
p { color: blue; }
Using that stylesheet, any p elements within a div will be colored red, not blue.
What I really suggest you do is get a decent developer tools plugin for your browser (e.g. Firebug on Firefox) and look through the style tracing; it will tell you what is being overridden, and by what.
Add a semi-colon after your color line.
.adv {
color:#47463D;
}
.earnings {
color:#B4FF00;
}
Also, you should be using double quotes around your classes in html, along with matching closing tags:
<font class="earnings">hello</font>
Your second font tag is getting parsed as inside your first one, and not showing up.
I'm not sure if you intend to close a font tag with an a tag, but the following code works just fine:
<html>
<head>
<title>CSS Color Example</title>
<style type="text/css">
.adv {color:red;}
.earnings {color:red;}
</style>
</head>
<body>
<div class=adv>hello</div>
<div class=earnings>hello</div>
</body>
</html>
With firebug, use the element inspector (because I do not remember that the semicolons and the quotes was obligatory in the class attribute) and try to see what other selectors are involving whith the class "earnings".
Can you put a jsfiddle example of your problem?
We've got a site wide style sheet that's setting the background on a:link to transparent. This is causing a problem displaying the icons from jqueryui. In the example below the trash can icon associated with the ui-icon-trash CSS class is not being displayed because the a:link background property overrules it.
I could apply the same styles ui-icon-trash uses to the link in question but that will be fragile if the jqueryui theme were ever to be updated in the future. Is there a way I can get the jqueryio icons to display at the same time as having a site wide background:transparent property on a:link?
<html>
<head>
<link rel="stylesheet" type="text/css" href="jquery-ui.css" />
<style>
a:link {
text-decoration: underline;
color: #066E37;
background: transparent;
}
</style>
</head>
<body>
<a class="ui-icon ui-icon-trash" href="#"></a>
</body>
</html>
I don't see a real solution there, but I can offer two hacks:
Put an additional <span> inside the <a> and apply the css to this element.
Don't use <a> but <button> instead. Drawback: this would require additional javascript to make the button work.
If it is sufficient to override only the background color of your links, background-color: transparent instead of background: transparent could do the trick (but I guess you might have thought of that already).
For some odd reason any background styles I set on my (being loaded within a modal if that makes any difference) are not rendering in IE7 or IE8. It all looks completely fine in all other (real) browsers (including IE9). My code is as follows:
<hgroup>
<h6>Request Information Form</h6>
<img src="/images/x-close.png" alt="Close" class="close" />
</hgroup>
I know you aren't supposed to put anything besides <h1>-<h6> within an <hgroup>, but I need this little close img in there, and even when I've tried pulling it out, I ran into the same problem (plus it all "seems" to validate).
The CSS is:
hgroup {
position: relative;
width: 668px;
height: 32px;
margin: 0 0 16px;
padding: 14px 14px 0 14px;
background: #B66115 url(/images/modal_header_bckgrnd.png) repeat-x 0 0;
font: normal 20px/20px 'crimson Text',Georgia,serif;
color: #F6F5EE;
}
Also, I have declared <hgroup> as display:block, and I am using the IE shim. All I keep getting is a white background (which really doesn't work when I have white text in the block!).
Thanks in advance for any and all help.
IE7 and IE8 do not load html5 tag names into the document. Any unrecognized tags are ignored. Try adding a bit of javascript to manually add them (or use something like modernizr.js).
<script>
document.createElement('header');
document.createElement('hgroup');
document.createElement('nav');
document.createElement('section');
document.createElement('article');
document.createElement('aside');
document.createElement('footer');
</script>
being loaded within a modal if that
makes any difference
Does your modal window use an iframe?
If so, you also need to run your HTML5 element shim script inside the iframe.
Use the HTML5 Shiv.
On a slightly unrelated note, you're using <hgroup> incorrectly. It's only supposed to contain one or more hN elements, and nothing more.
Using your code above, you should be using <header> instead.
I have a form of inputbox and i need to write a good selector. I need to assign attributes only to what is inside inputbox. form looks like this:
<label></label>
<input type="text" disabled="disabled" name="xxx" size="100" value="abcd" class="yyy" />
however, i have more elements of this class on my page.
what is the best way to go?
As you've added a class "yyy", you can just go ahead and do the following:
<style type="text/css">
.yyy {
font-size: 14px;
font-family: Arial;
color: #FF0000;
}
</style>
You can of course paste that HTML code above and plant it in your HTML document, but it's best practice to keep HTML and CSS away from each other.
So add this code in your head tag:
<link href="some/style.css" type="text/css" rel="stylesheet" />
And inside of style.css:
.yyy {
font-size: 14px;
font-family: Arial;
color: #FF0000;
}
You could use either input.yyy {}, which will work on all browsers but if you have more than one input element on the page with a class of yyy, it will select all of them.
An alternative is input[name=xxx], using a new CSS3 selector, but this won't work in older browsers, so it depends how important it is that the style works everywhere.
I want my submit buttons + links to look as buttons and the same in all browsers.
Firefox 3.5 plays nice. But IE6,7,8 have all different looks. Can you help me with that (apparently) simple task?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Crossbrowser css submit button, links</title>
<style type="text/css">
button {
background:#FFE900;
color:#000;
padding:3px 5px 3px 5px;
border:1px solid #000;
}
input {
background:#FFE900;
color:#000;
padding:3px 5px 3px 5px;
border:1px solid #000;
}
a {
background:#FFE900;
color:#000;
padding:3px 5px 3px 5px;
border:1px solid #000;
text-decoration:none;
}
</style>
</head>
<body>
Buy now
<input type="submit" value="Buy now" />
<button type="submit">Buy now</button>
</body>
</html>
You can replace the Submit button with an image the same way you do it with a background-image for a link. Simply get rid of the background and border, put the background-url in the input selector, and give it the right width and height.
input{
background-color: white;
border: 0;
background-image: url('blah.png');
}
For the button instead of type="submit" use type="image".
For instance:
<button type="image" src="path_to_your_image.png">Buy now</button>
For link you can use css to set the background of your link:
background-image: url('path_to_your_image.png');
I take it you do understand that you'll never get them to look exactly the same, since even in Firefox 3.5 they don't look exactly the same for me.
And apart from purely the style, they'll always have different behavior. For example, buttons will respond differently to tabbing or clicking (some browsers "depress" the text), buttons won't show the URL they point to in contrast with links, and you can select the text of a link, but not that of a button.
You can fix the most glaring differences on IE6 and 7 quite easily, though.
Add this to the CSS for your buttons (<button> and <input>):
overflow: visible;
You can put it inside a stylesheet for IE6/7 only, though this shouldn't affect any other browser, since visible is actually the default value. But for some reason this fixes the inconsistencies with the padding, compared to that for the link, on IE6 and IE7.
And add the following to the CSS for the link. All browsers need this, to make the link behave more like a block element, just like the buttons:
display: inline-block;
I know this is an old question, but I recently ran into this issue and didn't want to use any images in my layout. The solution I came up with (after making the links blocks, as others suggested) was to explicitly setup the borders, fonts, and background colors. To get the borders to match, set them individually. Originally I was trying to use outset borders, but I had better success using solid borders with specific colors for top, left, bottom, and right. (I chose the colors based on what firefox was using for its outset borders.) Hope this helps someone. Also, adding a border-radius to the links and buttons makes them a bit cleaner.
If you want a uniform appearance, you'll need to use an image submit button.
You could always use a JavaScript framework to replace the element with one that is more stylable or use MSIE's conditional comments for browser-specific styling.
Sad truth is cross-browser pixel perfection seems impossible with pure CSS and buttons.