hello am having different h1 sizes on different browsers, how can i fix this please
h1 text on chrome h1 text on chrome
h1 text on firefox
h1 text on firefox
You will need to use CSS to set the font-size so all browsers will use that value instead of their own defaults.
h1 {
font-size: 2rem;
}
There may be other properties that you need to reset to get consistent, cross-browser results.
Many sites will employ a third party reset CSS like normalize.css or write their own defaults.
h1 tag is just pure html, so it is just semantic. HTML, as semantic, doesn't apply any styling. Browsers will always try to render "h" tags in a way that you can understand which ones are the most relevant, comparing it to the others. H1 will be bigger than h2 in every browser, but that doesn't mean they will appear exactly with the same sizes.
You need to apply your CSS to achieve the behaviour you want. Just keep in mind that html is only semantic, not styles :) usually we can insert a normalize or reset CSS code to our stylesheets, so that it resets browsers called user agent stylesheets. try to use a font-size property with the correct value on it. Good work!
Related
This odd thing is happening. I am not sure if it is bad practice, but I figured it would give me consistent sizes between the strings in the html. I have a title in <h1> and subsections of information in <h2> and anything more as <h3>. My understanding is that <h1> is the largest and h6 is the smallest. I tested this on firefox and chrome. There is only one css and only h1 effects that code. I even took the css code out and the underline. Anyway, I did some test strings:
Mind you, I have some css that is supposed to make the h1 tags underline.
h1 {
text-decoration: underline;
}
<h1>test</h1>
<h2>test</h2>
<h3>test</h3>
<h4>test</h4>
<h5>test</h5>
<h6>test</h6>
It is smaller because 1.17em < 1.5em
As you could see, the h1 applied style is 1.17em, applied by a stylesheet (I think in your case is chrome's defaults). and the h2 has 1.5em.
Fixes:
You need to define the size at your own stylesheet http://www.w3schools.com/css/css_howto.asp
Note:
h1, h2, h3 are used more than just to give sizes. They are heading tags, denoting importance of some words/phrases on the html content.
You can read more about the H tags here http://www.w3schools.com/tags/tag_hn.asp
I would think that your css has been over-ridden by another set of rules (perhaps local browser rules).
I would suggest that you first test in another browser to see i fit changes,
and then if that does not help, use something like Chrome's Developer Tools or Firebug to see where the H1 definition is coming from.
I am developing a simple page with a form.
When I put a input text in the page, the characters that appear inside the input element have the browser default values, in chrome using the developers tools I can see that the font defaults to "webkit-small-control". But one of the fields that will appear in the page will be just a span field with data like this
<td>
<span id="readOnlyField">data</span>
</td>
When I render the page the data inside the span field is not equal to the data inside the input text field. My question is, how can I know the fonts and colors that the browser is applying to the input text field ? I can not use the value "webkit-small-control" because will not work in another browser.
I have only noticed this in Safari on a Mac. In order to make everything display the content as expected you need to override Safaris user agent stylesheet:
font: -webkit-small-control;
can be overridden using this in your reset.css:
button, input, textarea, select, isindex, datagrid {
font: inherit;
}
I cannot seem to find this in any reset.css but it done the trick for me.
In general, you can't know those values, because the defaults vary across browsers. Also, a user can set things like the default font family and style and hyperlink colors.
It is a good practice to use a "CSS reset" stylesheet to override browser defaults with your own "base" styles. There are lots of CSS reset examples on the web, for example the HTML5 Doctor's one or Eric Meyer's one. While your question is only about font style, resetting also other styles prevents many headaches in the long run.
There is no way to know for sure what default font-size the browser will choose.
You should instead reset the CSS (with Normalize for example) and further style your pages, for example:
span.some-class {
font-size: 12px;
color: #333;
}
And then your HTML:
<span class="some-class" id="readOnlyField">data</span>
that is the reason you should reset all the styles at first or use some established css framework like blueprint and avoid reinventing the wheel.
You should probably be overriding any style that you want in your css to aovid browser defaults
The default color for all major browsers for fonts is #000 but you can set it to whatever you want. The font you can set to whatever you want as long as it's on the system viewing it. Those defaults can be found by Googling.
There’s no known way you could find out, on your page, which font the browser uses by default. Neither can you specify in CSS that the browser render a span element using whatever font it uses by default for an input element.
But you can make text in span and input elements look the same (with the usual CSS Caveats, of course) by explicitly setting their font-family and font-size, e.g.
input, span { font: 100% Arial, sans-serif; }
In theory, you might need to set other properties too (there is no law against a browser displaying input element contents in blinking purple underlined by default), but this should take care of things in practice. Note that font size setting is needed, because browsers generally use reduced font size (about 90%) for input boxes.
If you are willing to use javascript, you can use getComputedStyle to find this data (check out Mozilla Developer Network).
For old IE browsers, you would need to use the currentStyle property (check out Quirksmode).
To copy ALL styles from one element to another, you could do something like this (I have simplified this to support modern browsers only):
var spanElement = document.querySelector('#mySpanElement');
var inputElement = document.querySelector('#myInputElement');
var styles = getComputedStyle(inputElement);
for (var name in styles) {
spanElement.style[name] = styles[name];
}
You will probably find you want to filter them, or only take a few ones you really want.
It is a behavior of WebKit.
See https://bugs.webkit.org/show_bug.cgi?id=50092
For a solution see: http://sijobling.com/tips/css-fix-for-html5-search-in-webkit/
I want to know all the common practices in CSS, those things that you automatically put without really thinking on the Final website deisgn
Example:
body {margin:0;padding:0;}
ul {list-style:none;}
img {vertical-align:middle;border:0;}
a {text-decoration:none;}
a:hover {text-decoration:underline;}
table {border-collapse:collapse;}
td {vertical-align:top;}
Does anyone know where I can find a complete list of this kind of things?
The best thing to usually start with is a CSS reset. The one I usually use is http://meyerweb.com/eric/tools/css/reset/
The goal of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on. The general reasoning behind this was discussed in a May 2007 post, if you're interested. Reset styles quite often appear in CSS frameworks, and the original "meyerweb reset" found its way into Blueprint, among others.
The reset styles given here are intentionally very generic. There isn't any default color or background set for the body element, for example. I don't particularly recommend that you just use this in its unaltered state in your own projects. It should be tweaked, edited, extended, and otherwise tuned to match your specific reset baseline. Fill in your preferred colors for the page, links, and so on.
In other words, this is a starting point, not a self-contained black box of no-touchiness.
Adding onto #Speed...
This is my favorite CSS reset to start most websites with: Eric Meyer Reset CSS.
Everyone suggests CSS resets, but they seem redundant to me.
I'd suggest Normalize.css, as it attempts to normalize CSS across browsers without getting rid of useful properties attached by default to elements like h1, h2, h3, ul, etc.
Yahoo have a nice selection: http://yuilibrary.com/yui/css/
Yahoo Reset
The foundational CSS Reset removes the inconsistent styling of HTML elements provided by browsers. This creates a dependably flat foundation to built upon. With CSS Reset loaded, write explicit CSS your project needs.
CSS Base can complement CSS Reset by applying a style foundation for common HTML elements that is consistent for our browser baseline.
Yahoo base
CSS Base is an optional CSS file that complements YUI's core CSS foundation (CSS Reset and CSS Fonts). CSS Base applies a style foundation for HTML elements that is consistent for baseline browsers.
CSS Base may also be useful as a template for your own base file, or a snippets library for styling HTML elements.
I'm looking for advice... for a solution to my problem.
I'm coding a new wp theme for my blog.
The problem I've encountered is this, I've links to post on homepage and on the category page (links that lead to post). On homepage this links have h3 tag, cause of fluidity (h1 tittle of the website, h2 tittle of category, h3 post tittle). Now on category page I've different flow (h1 category name, h2 post tittle). The problem is that design wise, they must look identical... so my challenge is to make h2 on category page look same as h3 on homepage.
Turns out it's not so easy. First of all I had to use smaller font. Which is weird to me, I had to set h2 0.8em and h3 1em. Is this correct way of dealing with this issue? And than, even though I had margin 0 on both headings, some weird spacing came into being...
So this is final result, that makes h2 look as h3 (had to use smaller font, and line height on h2, and also margin-bottom more 3px more).
My question is, if this is ok way of achieving this result? or there is something wrong with my general reset file??
Including image for clearer view of the things:
http://imageshack.us/photo/my-images/33/unled1hg.jpg/
And you can see two pages live:
http://artvard.com/category.html
http://artvard.com/main.html
The problem you're having is because ems are inherited from the parent element. Think of them like percentages if it helps.
Therefore, if you set the h2 to 1em, then you have a content area like <div id="content"> which you style at 0.8em, everything within the #content div will be displayed at 0.8em. If you had a h2 element inside the #content, it would be sized at 1em, which you previously defined as 0.8em, i.e. it will appear smaller.
Since most modern browsers allow the user to increase the size of a page, the argument for using ems over px is weaker. So I would recommend either switching to px or looking carefully at your inheritance.
If you specify font size in em, then it will be based on the font size of the parent element, so if the tags have different parents, the same setting can result in different actual sizes.
If there is a style specifically set for h3, you could just repeat it for h2, or adjust it according to the inherited values.
If the style for h3 is based on the browser default, then you can't make h2 look the same. You can make a style for h2 that looks the same as the default for h3 in one browser, but in another browser the default for h3 will look different.
Best solution is to use a CSS Reset on both H2 and H3 and start styling them from there. Else there will always be properties like line height font-size etc, that may differ on each browser.
When I wrote this answer in 2011, I proposed a full reset, but currently, there is this great and commonly used Normalize.css, which resets the styling to sensible defaults, so you have a good base to start with.
We have a richfaces table (rich-table style class) and we would like to have some space on top of the table. We tried using margin-top on the above style class with values in px and in %age. But the resultant behavior was different in both the browsers. FF produces more space compared to Chrome. How do we get around this issue and be browser agnostic?
You may want to consider using a reset stylesheet.
A reset stylesheet will reduce browser inconsistencies like default line heights, margins and font sizes of headings.
You may also want to check the following articles for further reading on the topic:
CSS Tip #1: Resetting Your Styles with CSS Reset
Mayerweb: Reset Reasoning
Stack Overflow: Is it ok to use a css reset stylesheet?
Stack Overflow: Best css reset