I'm having an odd issue. I have a simple web page, and for some reason the <h1 /> tag is having a margin-top and margin-bottom of over 18px. There is nothing in my *.css file that specifies this. Firefox Firebug shows me the style that is applied, but there is no margin anywhere.
In the picture, the div that the header text is in (or supposed to be in) has the limits. But the header text is pushed down because of the margin.
What could be causing this?? Is there anywhere in firefox/firebug that can show me EXACTLY where that style came from? It says that the header tag inherited from the body style, but that is only this:
body
{
font-size: .85em;
font-family: "Trebuchet MS", Verdana, Helvetica, Sans-Serif;
color: #232323;
background-color: #fff;
}
Any ideas? Thanks in advance.
Headers often have a margin by default. Have a look at using a reset/normalization stylesheet.
Reset or normalization stylesheets reset your styles to a standard baseline across all browsers. The difference between reset and normalization is that resets clear margins, padding, etc. where normalization stylesheets apply sensible defaults.
These links should be of use:
https://stackoverflow.com/questions/167531/is-it-ok-to-use-a-css-reset-stylesheet
Reset Reloaded
normalize.css
That's the default styling for <h1>s. It's similar the fact that <h1>s have larger text size than paragraphs. It's just the default. It can also be overwritten.
Most of the browsers add some default margin and padding.
Try resetting the margin, like so
body{
font-size: .85em;
font-family: "Trebuchet MS", Verdana, Helvetica, Sans-Serif;
color: #232323;
background-color: #fff;
margin:0; /* ADD THIS */
}
You can also reset it on the h1
All browsers have a default CSS that is applied to all pages.
Use something like Yahoo's Reset CSS to cancel out any styles applied.
Related
When loading a Google font (Open sans) like this:
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,400italic,700' rel='stylesheet' type='text/css'>
and using it in the CSS like this:
font-family: 'Open Sans',sans-serif !important;
On different pages but the same header, css etc the page loads:
page 1: font-family: 'Open Sans',sans-serif !important;
page 2: font-family: 'Open Sans',sans-serif !important;
On both pages the Google-font and css get loaded.
Anybody a idea what may cause this?
Try to make your CSS rule more specific. I see you're using the !important tag, so you're probably overwriting existing rules from a framework or elsewhere.
For example, if you're trying to give a font to all headers, you probably have other divs surrounding them. Let's say that div's called content:
body .content .h1, body .content .h2 {
font-family: 'Open Sans',sans-serif !important;
}
The best thing to do would be the see why your styles aren't being set in inspect element. Right click with Chrome > Inspect over your headers, and see what's styling them. You should try and not use !important rules anywhere unless completely necessary.
I have a <textarea> inside the <body>. I have applied the following CSS rules:
body {
font-family: sans-serif;
font-size: 16px;
}
textarea {
font-family: monospace;
/* font-family: "Courier New", monospace; */
}
Here's what it looks like in Firefox 31.0:
You can see the result in this JSFiddle. By inspecting the <textarea> with Firebug we can see it does not inherit the <body>'s font-size, but sets it instead to 13px. (0.8em?)
However, if I uncomment the second font-family declaration, strange things happen.
Now the <textarea> seems to inherit <body>'s font-size, even though I didn't change it manually.
Finally, in both cases, Firebug shows that the font-size: 16px of <body> is overridden, even though I didn't find any browser stylesheets there that override it.
This does not seem to occur in Internet Explorer 11 or Chrome 34.
The problem is easily fixed by setting font-size: 0.8em to all <textarea>s, but the cause bothers me a bit.
What may be the cause of this? A bug in Firefox, possibly?
Please go to this page in Chrome and look at the section Aktualności and text:
Tupacsum Ipsum She nearly gave her life....
Then look at this same URL on Firefox and Opera. Next try to explain to me why this rule: font: 12px normal 'Lato', 'Times New Roman'; is not working on this both (FF, Opera) as well as on Chrome.
Did I make a mistake somewhere? Or did I use something that works only on Chrome?
Chrome:
Firefox:
The browser is just confused by the generic font attribute's values. You need to specify more values so it understands where to apply what.
This works fine:
body #main.home > .bottom .right .top article {
font: normal 12px/normal 'Lato', 'Times New Roman';
}
The solution from #ferne97, though is likely a better practice to not use as specific of a selector, only works because the font-family is explicitly set instead of using the same generic font attribute. If you use the simplified selector with the original font attribute values the problem still remains.
Why don't you change it from body #main.home > .bottom .right .top article to .desc p
.desc p {
font-size: 12px;
font-family: 'Lato', 'Times New Roman';
line-height: normal;
}
Be careful when nesting rules when using LESS, you should never really nest more than 3 levels deep. Think of how you would write the actual selector first, then just nest what is needed.
I built an HTML navigation strip using ul and li tags.
<div id="navLimitedLength">
<ul id="navmenulist">
<li class="menu"><a>Add</a></li>
<li class="menu"><a>Update</a></li>
<li class="menu"><a>View</a></li>
<li class="menu"><a>Delete</a></li>
</ul>
</div>
Intially I set it to have Arial font using CSS as follows:
li.menu a
{
text-decoration:none;
font-family:Arial;
font-size:18px;
}
Then I tried to change the font to Segoe UI as follows:
li.menu a
{
text-decoration:none;
font-family: 'Segoe UI';
font-size:18px;
}
However this also changes the look of menus making them to overlap down
As far as I understand, changing font should not change other styling. This may be since I am trying it in IE8.
But what is the standard way to ensure that things remain in place and behave in desired way.
The difference is caused by different default line heights for different fonts. By CSS specifications, the initial value of line-height is normal, and by the spec, browsers are expected to “to set the used value to a ‘reasonable’ value based on the font of the element”. If you inspect the situation in Firebug, you can see that for 18px Arial, the used value is 22px, but for Segoe UI it is 25px.
In this case, adding e.g. line-height: 1.2 into the style sheet would help.
Different fonts have different standards. So I would suggest you to decrease the line height. It will solve your problem.
Adjust the line-height using firebug in firefox to get the exact line -height
li.menu a
{
text-decoration:none;
font-family: 'Segoe UI';
font-size:18px;
line-height:10px; //this value is for sample purpose
}
I have a client who wants bigger text in an <input> box. I would prefer to not have to make custom graphic button for this as it's on a really resource-constrained embedded system.
The input tag can be styled just like any other element in HTML, including padding, borders, text font face/size, etc.
input{
font: sans-serif italic 20pt bold;
border: 2px black solid;
}
Or what ever you would like.
Simply specify the font-size you want for the element:
input {
font-family: tahoma, verdana, sans-serif;
font-size: 1.1em;
}
I have used a relative size (em), so the ratio will keep if a user has a larger font size defined in the browser.
not only should you increase the font-size, you may also have to increase the height and line-height properties if the input element doesn't scale with the text (depending on how your styles were set). Also, be sure to check across all browsers, as forms can be very finicky.
Yep, it is possible and also simple to do!
HTML:
<input type="text" class="example_input" name="example_input" />
And the CSS:
.example_input{
font: Arial, Helvetica, sans-serif 20px bold;
border: 1px black solid; //optional
}
Hope it helped!
EDIT: Example on jsFiddle