After browser reset...
apply new font settings to body { font-size: 1em; }
user: If I set font-size using px, then I get consistent results--both Chrome and IE10 will display consistently. But using px for font sizes strikes me as less-than-preferred practice these days.
-The browsers are using different font faces. You can see this by comparing the glyphs. For example, the letter “l” is clearly different. The font size is the same, but the font designs are different. It is up to font designer to decide how big glyphs are relative to the font size.
-I changed the font-family to something else and chrome and IE are exactly the same as each other now. Problem solved.
user: The size of em in pixels is related to the font type & size you're using, the resolution of your screen (depending on OS, browser), and possible further OS and browser settings - eg "Show fonts +10%" may alter the em value.
user: Check to make sure it's implicitly set to 16px and IE is reading that value (Hint: Use developer tools to view the loaded font-size)
-----------------
My own personal design issues to resolve:
Issue:
Menu considerably larger in IE than in Chrome. Resetting the Browsers back to 0 made the menu appear about the same after that.
Issue:
Disappearing submenu on hover caused by gap between mainMenu and subMenu dropdown. Resetting the browser via body seemed to have removed the varying gap differences between mainMenu and subMenu in IE and Chrome. Now it appears the same in both browsers.
Issue:
IE11 is now rendering very large content text, but doesn't affect menu font. This is prob due to some playing around with different RESET codes??? or more specifically, different selectors. Note I have .menu px set but not .body has no settings yet after the browser reset CSS settings applied.
In IE11, I set the page zoom to 100% and the Text Size to Medium and it seemed to fix the problem. Chrome and IE now display same height text, although IE is somewhat longer. This may be due to resetting browser 0 margin and padding ??
ARTICLE RE: RESET TIPS- copied information in quotes
http://sixrevisions.com/css/css-tips/css-tip-1-resetting-your-styles-with-css-reset/
CSS METHODS TO RESET BROWSER:
METHOD 1:
body
{
padding: 0;
/*BODY SETTING 0 REMOVES DEFAULT BROWSER SETTINGS*/
margin: 0;
/*BODY SETTING 0 REMOVES DEFAULT BROWSER SETTINGS*/
border: 0;
/*BODY SETTING 0 REMOVES DEFAULT BROWSER SETTINGS*/
font: 100%/1.618 sans-serif;
/*RESET BODY BROWSER FONT TO USE
GOLDEN RATIO LINE HEIGHT CALCULATION.
Formula: Font size*1.61803399 = line height*/
vertical-align: baseline;
/*BODY SETTING 0 REMOVES DEFAULT BROWSER SETTINGS*/
}
METHOD 2: (INLINE BLOCK FIX)
THESE SELECTORS MY NOT BE THE SOLUTION TO USE, BUT A FAKE
*+html ul.mainMenu li
{display:inline} /* ie7 inline block fix. will be overridden on 1st IB declaration.*/
* html ul.mainMenu li
{display:inline} /* ie6 inline block fix. will be overridden on 1st IB declaration.*/
METHOD 3: *Universal Selector:
Quick Note Repeated: IE doesn’t apply * UNIVERSAL SELECTOR and support it as intended.
"The concept of CSS Reset was first discussed formally way back when dinosaurs still roamed the internet (2004 to be exact) by Andrew Krespanis. He suggests using the universal selector (*) at the beginning of your CSS file to select all elements and give them 0 values for margin and padding."
* {
margin: 0;
padding: 0;
}
Now we don’t have any spacing in between paragraphs, so somewhere below our universal selector reset, we’ll declare the way we want our paragraphs to look like. You can do it a number of ways – you can put margins (or padding) at the beginning or top of your paragraphs, or both. You can use ems as your units or pixels or percentages.
What’s important is that we choose the way the browser will render it. For our example, I chose to add margins (instead of padding) both at the top of the paragraphs and at the bottom – but that’s my choice, you may want to do it differently."
* { margin:0; padding:0; }
p { margin:5px 0 10px 0; }
Avoid using the universal selector reset:
"Avoiding the universal selector reset is the first true conception (that I know of at least, so please correct me if I’m wrong) of resetting your styles, but it has many shortcomings and browser inconsistencies (which is what we’re trying to get rid of in the first place) that make it a poor choice.
I’ve already mentioned that IE doesn’t apply and support it as intended; it doesn’t cover all your bases and you should only use it for simple, short, static, and predictable web pages (if you really have to use it).
This tip especially holds true when you distribute a “one-size-fits-all” solution like a content management system theme which will be used and hacked in unpredictable ways. Using a solid foundation at the get-go – an extensive CSS Reset method – ensures that you’re truly resetting your styles and it’s worth the added bytes in your CSS document."
User Comment:
"CSS resets is a good idea, however, using the universal * selector to reset all margins and paddings is not. Since the * selector applies itself to every element on the page the page load times are affected negatively. The Eric Meyer reset is a better way of approaching the problem."
Whats wrong with universal selector?
"Its fully supported in all major browsers (since ie5) in format what you posted
http://meyerweb.com/eric/articles/webrev/200006a.html. The only problem can be with speed. so if you got any example why is wrong to use it, please post it, cause i don’t know about any disadvantage."
"Answer: One reason I can give you...Performance. Selecting all elements and resetting them all to baseline values is terribly inefficient. For example:
* { margin:0; padding:0; list-style: none; } would try to apply the attribute to all elements, including p, h2, h3, table, td, tr, and so on – elements that don’t have that attribute. Lots of unneeded work. Then re-declaring the style rules for all the elements, is even more work.
Whereas Meyer’s CSS Reset encourages you to avoid these mass setting of attributes. If you already know that your ul and ol will have square bullets,
You replace: ol, ul {list-style: none;}
With: ol, ul {list-style: square;}
This, in turn, avoids situations where browsers render your lists in the way they want to if you forget to set your baseline attribute/value pairs for particular elements, such as lists.
Whether you’re just resetting list-style or margin or whatever attribute, it’s not smart to reset all of them if you already know some of them won’t have, say, 0 margin and padding.
With that said, * has its benefits, including convenience, ease-of-use, and less time for maintenance of CSS. A good developer will evaluate their circumstances and make an informed choice.
body {
line-height: 1;
color: black;
background: white;
}
If you already know that the body style attributes will be (for example):
background-color: #cccccc,
color: #996633
and you want to tile a background image horizontally there’s no sense declaring another CSS selector for the body element later on the document – you should replace that part of your CSS
reset to the following:
body {
line-height: 1;
color: #996633
background:#ccc url(your-tiled-image.gif) repeat-x top left;
}
Don’t be afraid to use your own judgment. Tweak, re-structure, delete, and add things as you see fit and as it pertains to your particular case. Eric Meyer echoes this in his discussion of CSS Reset Reloaded with the following statement:"
That’s much of the point here: that this is not a case of “everyone must use these styles in a certain way without alteration”.
METHOD 4: Eric Meyer's Reset:
"Shortly thereafter – CSS guru Eric Meyer further built on the concept of resetting margins and paddings. He discusses Tanek’s work undoing default HTML styles (which he called undohtml.css) which not only resets margins and padding, but also other attributes like line-heights, font styles, and list styles (some browsers use different bullets for unordered list items)."
Then a wonderful solution called CSS Reset Reloaded CSS Reset, which not only makes this CSS reset method more accurate than the universal selector method by using higher specificity by naming all possible HTML tags (because the universal selector fails to apply the reset to all HTML tags), but also sets default values for troublesome elements like tables (in which the border-collapse attribute isn’t rendered consistently across browsers).
There’s no pre-defined step-by-step method for determining the right way of resetting your styles; the important part is that it works to compliment your own development style and principles."
2 versions: Eric Meyer’s CSS Reset Reloaded (edit: or the more current version, Reset CSS).
User Comments:
-If you are going to use Eric Meyer’s reset, you’ll have better results with the more up to date version: http://meyerweb.com/eric/tools/css/reset/index.html The version linked in the article is an older version.
-Eric Meyer’s reset CSS (compressed for speed) is now hosted on Amazon’s new CloudFront service. Direct link: http://d35lae85h6tg07.cloudfront.net/reset.css
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
METHOD 5:
other choices:
1)http://perishablepress.com/a-killer-collection-of-global-css-reset-styles/
2) or less is more
http://www.ejeliot.com/blog/85
01.body {
02.padding: 0;
03.margin: 0;
04.font: 13px Arial, Helvetica, Garuda, sans-serif;
05.*font-size: small;
06.*font: x-small;
07.}
08.h1, h2, h3, h4, h5, h6, ul, li, em, strong, pre, code {
09.padding: 0;
10.margin: 0;
11.line-height: 1em;
12.font-size: 100%;
13.font-weight: normal;
14.font-style: normal;
15.}
16.table {
17.font-size: inherit;
18.font: 100%;
19.}
20.ul {
21.list-style: none;
22.}
23.img {
24.border: 0;
25.}
26.p {
27.margin: 1em 0;
28.}
-Im using Yahoo! reset, It is very useful and you can save a lot of time. CSS codes are only few but it works well.
-very useful, yahoo! reset is helpful and very useful, but this is a little quicker, also better when working locally without the net
METHOD 7: Blieprint
I am using Blieprint CSS Framework, which comes with a reset stylesheet.
ADDITIONAL INFORMATION:
Seperate CSS Reset stylesheet :
"Avoid redundancy with your CSS Reset and subsequent style declarations. Another reason I don’t like having a separate stylesheet for my CSS Reset is that it can cause redundancies with other style rules after it. It’s good practice not to repeat your styles, and although sometimes it can’t be avoided (because you’re lazy like me), you should make an effort to try. Going back to Eric Meyer’s CSS Reset Reloaded set of rules, he gives default values for line-height, color, and background of the body element."
A different opinion: SET vs RESET
User Comment: "Why reset? Set instead. Simply put, replace your reset style sheet with one that SETs all the basic styles to the defaults you would like to start from instead. You still get a good baseline across browsers by setting all your styles to a standard format. I just don’t see the point of doing something to force me to specifically undo it later. I would much rather start with a style sheet that has a reasonable starting point that overrides the differences between browsers while at the same time making elements appear as I would expect them to everywhere. So how about we see the death of the reset style sheet and the birth of frameworks with set style sheets. I think I will work on creating my own set.css in the near future."
User Agent Style Sheets:
"Fully resetting your styles, meaning giving every possible element a baseline style (even deprecated elements like <b> which User Agent stylesheets account for) does prevent browsers from implementing their default styles, so that’s fair. User Agent Style Sheets: Basics and Samples...http://meiert.com/en/blog/20070922/user-agent-style-sheets/"
No comments:
Post a Comment