Hi all buddy, Please let me know about css reset code. Which code should i use for reset? I have some idea. See the below and kindly share your thinks about this. Thanks! * { margin: 0; padding: 0; border: 0; line-height: 1.5px; font-size: 14px; font-family: sans-serif; color: #ffffff; } Code (markup):
In a nutshell, a "CSS Reset" is there to give a good positioning and scaling baseline to all major browsers. It's usually done by nulling margins an paddings of all recurrent HTML elements. That said, you won't include HTML elements that you weren't going to use in the first place (shame on you Meyer). There's absolutely no need to do something like this (and you should understand why): h6,center { margin:0; padding:0 } Code (markup): Your version of reset has a few unforgivable flaws. Namely, in CSS, the asterisk sign means "apply that style to ALL selectors". Resetting margins and paddings of some form html elements makes them very hard to work with. You attribute fixed px font size and line height to all selectors as well, making EM and % (font scaling in general) useless right off the bat. It also means that all the headings will have exactly the same size: is that something you really want? And do you really want all of the text on your page to be white?? This is how I usually do this: html,body,address,blockquote,div, form,fieldset,caption, h1,h2,h3,h4 hr,ul,li,ol,ul, table,tr,td,th,p,img { margin:0; padding:0; } img,fieldset { border:none; } img { max-width:100%; } * { -webkit-text-size-adjust:none; -ms-text-size-adjust:none; } /*horizontal rules are used as semantic separators when headings are inappropriate*/ hr { display:none; } html,body { height:100%; position:relative; body { text-align:center font:normal 80%/140% arial,helvetica,sans-serif; } Code (markup): If you need that explained thoroughly, let me know.
I have a different take on resets; they're redundant make-work. I'm not talking about boilerplate stuff, like setting body's margin to zero because that's what you always want. What is worthless is setting a butt-load of element properties to zero, only to turn around and reset them to a sane value. Set them to what you want the first time. See Global resets considered harmful cheers, gary
To me, a reset is a necessary evil due to what HTML is. The entire point of HTML from the very beginning was to give authors a way to say what their content IS, allowing the user-agent (aka browser) to present it as best as possible within the capabilities of the target device. That's what TBL created HTML FOR -- as such the default appearance of elements is NOT defined by the specification [i/](though it should be in the CSS specification for each MEDIA target, but that never happened because the W3C wouldn't know a specification from the hole in an Adobe DVD)[./i]... as with anything else where the default isn't clearly defined, browser makers all went their own directions on things. While this is a good thing if working with default styles, it's a pain when working with custom styles. The simplest of resets, using the so-called "universal selector" of * is, as others just said, flawed in that it hits EVERY element. There are elemenets performing a reset on can cause more damage than good -- INPUT for example doesn't receive padding the same way in every browser -- with Presto (old Opera) treating them exactly as if they were inline-block, IE treating them 'special' with a fixed px padding separate from padding around them, Gecko (FF) having a fixed em padding around them separate from padding, and don't even get me STARTED about the freakshow that is INPUT in webkit. Setting padding or margins can make styling those elements HARDER. At the other end of the spectrum you have fat bloated train wrecks of idiocy like Eric Meyer's "Reset Reloaded" -- which borders on being a framework unto itself; and given that CSS frameworks by nature defeat the point of using CSS in the first damned place, it doesn't speak well of it. Wasting time setting values you are likely to change again, setting values that are NOT inconsistent cross browser, and setting values that are used on maybe half a percent of the websites out there -- resulting in a multi-k mess... and it's messes like that which give resets a bad name. The reset I use is a nice middle-ground between the two. At a quarter of a K it's not excessively large, it does NOT waste time changing values I don't need changed, and has worked flawlessly for me ever since Dan Schulz gave it to me about eight years ago. /* null margins and padding to give good cross-browser baseline */ html,body,address,blockquote,div, form,fieldset,caption,pre, h1,h2,h3,h4,h5,h6, hr,ul,ol,li,dd,dt, table,tr,td,th,p,img { margin:0; padding:0; } img,fieldset { border:none; } Code (markup): I also typically include the following -- but these are more based on how I build a layout than being part of a reset: hr { display:none; /* HR in my code are for semantic breaks in topic/section, NOT style/presenation, so hide them from screen.css users */ } @[USER=124521]media[/USER] (max-width:480px) { * { -webkit-text-size-adjust:none; -ms-text-size-adjust:none; } } Code (markup): In any case, it's about getting a consistent cross-browser baseline for styling elements... so null margins and paddings on what needs it, and borders where you don't want them by default. I REALLY don't get why some people feel the need to dick around with crap like border-spacing, breaking the body line-height that inherits to everything else, etc...
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; }
@shiv saroya, yeah, that's the steaming pile of bloated crap that gives resets a bad name; read the link in Gary's post for what's wrong with that... You mean Xenforo's garbage username detection, or the need to tell handhelds not to auto-adjust the font-size? I'm going to assume the latter. The simple fact is the majority of websites are NOT designed for display on smaller devices, so the default browser behavior is to compensate for that by overriding design styles. To make those browsers behave when you actually design for that size with responsive layout, you have to tell them not to do it. Which is why that CSS goes hand in hand with including this in the markup: <meta name="viewport" content="width=device-width; initial-scale=1.0" /> Code (markup): So they don't lie about the physical device width (or at least not lie as much, see Apple retina displays) or start out at a different zoom (and therein breaking responsive layouts) than it was designed for. Pain in the ass to remember, but it's easy enough to have in one's code baseline so you don't HAVE to remember the details of it if you are bothering with accessible design. Oh, and before someone asks, I stuff these behind a media query for width as larger width devices don't tend to pull these tricks, and sending those values to desktop versions of Safari disables the ability to zoom at ALL... while mobile safari still can -- which is some serious herpafreakingderp.
And you guessed wrong, lol! In fact, I was talking about that xenforo detection. I saw digitalpoint's reply in your thread, so I thought he fixed it. Oh well...
He said Xenforo has it fixed in the next release... we're just waiting for them to upgrade to the next release (which I don't think is final yet).
Thank you. Please explain the code below. * { -webkit-text-size-adjust:none; -ms-text-size-adjust:none; } Code (markup):