Okay that's probably not the best title, I know why we need browser resets: because browsers have different defaults set.
My question that was too long to put into a title is:
If everyone needs to use a reset stylesheet 90% of the time, why do browsers need to set default styles? We're just going to remove them anyways, right?
Because certain rules make sense by default:
Table cells have display:table-cell;
<b> makes text bold, <i> makes text italic
Paragraphs should have space in between them
Unordered lists should be displayed as bulleted lists
The problem isn't that browsers have defaults, it's that the defaults are all different.
Off the top of my head - to do something reasonable when displaying plain html, not styled sites.
Because not everyone uses a "reset stylesheet". The biggest example off the top of my head is Wikipedia, which displays content in the browser's default font.
The reset stylesheets are in my humble opinion only useful for starters who are ranting on the minor styling differences among browsers and doesn't know the default behaviours/styles from top of head so that they're forced to fill all of those styles in the CSS themselves.
If you want to see more thoughts behind this opinionated answer, check this answer.
It is because it gets you into a known state and therefore will look similar across a variety of browsers.
basically, it's a way to keep results as universal as possible by defeating any browser-based rules and omissions before your CSS is applied. http://www.css-reset.com/
See presentation on this page http://www.maxdesign.com.au/articles/css-reset/
Related
Note: I've tried searching on google, but couldn't find what I was looking for.
Browsers have some default styles they use for rendering form elements, which is different from browser to browser. Is there a way to reset all of the native browser styles for form elements like select, radios, checkbox etc, to make a consistent look across browsers?
I've made a quick example:
form elements http://grab.by/grabs/34db87ee1ad93e031cc72808feb2c8e7.png
As can see the form elements are rendered slightly differently. What I would like, is some styles, that can reset them, to look alike, for IE, Firefox and Webkit.
So how do you do this? A link to a css stylesheet with all the needed styles would be fantastic.
Short answer: you can't.
Long answer: you can, but expect pain.
I've hacked together nice looking Radio buttons, Checkboxes and Selects with 'sleight of hand' javascript + css. Basically, just after an input is loaded I hide it and replace it with labels / divs with events bound to them to make them act like they're the right inputs, and css to make them look that way. The events also update the underlying input so that the correct values are submitted with the rest of the form. If my script barfs or JS is off, the user gets the normal controls.
It wasn't that fun but the result is passable.
I do not look forward to seeing the mess IE makes of it though :)
I had inspiration from:
http://sourceforge.net/projects/selectreplace/?showfeed=code
This is an old question now but adding the CSS rule -webkit-appearance:none may help remove default Webkit styling, e.g. pill shaped buttons on Mobile Safari.
If i I'm not using any transparent png, not using :hover on other thank a:link,
Is it possible to make cross browser layout without having any IE conditional CSS .and keep main css valid?
I want to keep only one css file for whole needs. screen, print, handheld.
What things we should consider?
Sure. The main thing I do to work on this is to test the CSS files incrementally in multiple browsers as I build the site. It's much harder to make a site look correct in multiple browsers once it is completely built out for a single browser.
Element widths are the biggest problem since different browsers calculate the widths differently.
Yes, just use one column.
For more complicated designs, I guess it depends on the design and the exact browser requirements.
How to get consistence rendering of paragraph text in all browsers?
See IE 7 rendering like this
alt text http://easycaptures.com/fs/uploaded/248/0266470505.jpg
and FF like this . which is ok to client
alt text http://easycaptures.com/fs/uploaded/248/8655561297.jpg
How to get same result in both browsers, i mean FF rendering in IE? my client needs "non-executive" in same line in all browsers, Is <br /> only solution of this.
Update : see all code for <p> here http://easycaptures.com/fs/uploaded/248/4505395091.jpg
I'm already using XHTML 1.1 doctype and eric meyer reset CSS
Update: 28 March
Thanks for all replies!
I tested this problem is only not coming on firefox . but coming in all other browser IE6, 7, 8, Safari(windows), Google Chrome.
Is there any possibility css only solution now?
For your specific issue, use the <nobr> tag around your text, or a span with the CSS
whitespace: no-wrap;
This will prevent non-executive from breaking across lines.
However, you should note that getting entirely consistent rendering is quite difficult between browsers and platforms.
Update
You are most likely setting both a fixed width and a padding on the left and right of the element. IE and Firefox will interpret that differently due to box model differences. If you cannot recode your page to use a fixed width and a left/right margin, then you will need to specify a different fixed width in an IE only stylesheet to compensate for the problem.
Education
Web development is about education. Much of that education is educating your client on what to expect and not to expect.
Help by explaining to your client that each browser, and OS combination handle fonts a little differently. One engine may place the letters slightly closer to each other than another.
You could put tons of work into getting this just right, but if your end user has enlarged their fonts at all, all the time and money spent on making sure one hyphenated word stays on the same line will go out the window.
Technical Thought: Both browsers appear to already be rendering the text as closely as they can, I don't think a reset.css is going to help you at all.
Resetting all styles to get rid of the differences in the browser stylesheets might be a good idea. YUI's reset.css can do this for you. then you can start from scratch to format your paragraphs, using percentages for font size , spacing etc. (see YUI CSS cheatsheet).
EDIT: Just saw your comment to cletus' answer. So: what CSS are you using for laying out your text?
This is nothing to do with margins, padding, fonts, resets or any CSS, really. It's about how browsers interpret hyphens. IE obviously decides that it can break the line on a hyphen, whereas Firefox treats it as one word.
Like McPherrinM said, you can use no-break tag: <nobr>non-executive</nobr>. Or you could simply remove the hyphen altogether.
Or you could just explain to your client how all browsers and systems render text differently and there is no way you can prevent this occurring in all situations. What is the problem with the word splitting over two lines anyway?
You might look into the use of a soft hyphen
­
This is a somewhat open-ended question, but I really want to understand this one so I don't care.
I have a two-element "table" (CSS with spans). The left column always has an icon which is 20x20 pixels. The second column has a single line of text associated with the icon.
I have gone through all sorts of ideas I could come up with to make this look exactly the same in IE6-8, Firefox 3.5 and Google Chrome, but all ideas result in the text being one or two pixels off at best.
I'm looking for a fool-proof non-<table> way to make this list look exactly the same in all browsers. I mean every single pixel.
Pixel perfect doesn't exist - you simply don't have that kind of control over the range of browsers out there, and nor is it profitable for you to attempt to make it so. Diminishing returns, thy name is IE6.
Fwiw, it also sounds likely that you would do better here to simply have a list (<ul>) with list-style-type set to none and using background images to display your 20x20 icons.
You are chasing a moving target. With so many broswers and so many versions there will most likely never be a way to make it perfect. Then even if you do get it close to perfect the next release of any of the browsers may break it again.
Here's my question: if it's really a table, why not use <table> ? It's one thing to avoid using tables for purposes of general page layout, but the table tag is still perfectly legitimate for, well, displaying tables.
If that doesn't work for you, consider a <ul> modification or similar. It's unlikely, though, that you'll ever get it truely pixel-perfect in all browsers.
Yes...
Render an image ;)
(Sorry, but if you want it really "pixle perfect", then this is most likely the easiest way)
I agree with Tony and annakata. However, usually the best result comes from something simple like this:
<span><img src="images/icon.gif" style="vertical-align:text-bottom;" />Some text</span>
Which at least looks exactly the same in webkit, ie8 and firefox. (I believe ie7 too, but I didn't test)
I'm sory for this huge edit I didn't read the question properly.
As some have already said it's very hard to achieve pixelperfection on a website as every browser render the pages differently.
With css you can use absolut and relative positioning of basically anything but its far from perfect when it comes to cross browser compatibility.
I am looking for a way to condense relatively small areas of text on a page in an effort to mimic a graphic button that was done with a non-standard font. Ideally, just the letters would get squished or made thinner, leaving the space between words more or less the same. I know there are some CSS attributes that do things like this, but they are more focused on spacing between the letters and not so much on the widths of the letters themselves. These CSS methods are also not very cross-browser friendly. The majority of the user base is using IE6, so that puts a large restriction on CSS-based methods out of the blocks.
So, is there any way to control the character width/spacing that is cross-browser friendly? I know jQuery works across browsers quite well, so could this perhaps be done with jQuery by manipulating the location of the letters and possibly their widths? These are small bits of text, 5 words at a time, or so, so speed is something that can be dealt with later.
EDIT: Ok, so, the CSS letter-spacing property, as well as the word-spacing property will allow me to control the space between letters/words. However, this makes things look squished. If this truly is the only option, then I'll have to make it work, but what I am really looking for is a way to squish the letters themselves, to make the characters thinner.
maybe
letter-spacing:-1px
will help
Short answer: I don't think there is a working cross-browser example that meets your requirements.
The CSS3 specification includes a font-stretch property, but sadly enough, CSS3 is barely (if at all) supported at this time.
Some possible ways that could emulate this behaviour that I can think of:
Use a flash-based approach like sIFR
Use a javascript / canvas based approach like Typeface.js. There's a font-stretch example included on the example page
Use condensed fonts (icky-approach, since this means you are relying on the font being available for the client), like Arial Narrow.
Use a server-side script that generates an image from text parameters
In short, there is no simple and elegant solution to this problem because text and image manipulation is generally something you'd do in a graphics editor.
If this is not possible, I'd definately recommend looking into Typeface and sIFR.
I think this sort of thing should probably be done in a graphics editor and output to a lightweight image (png or similar). I think this is the only simple and reliable way to control the visual output of the text to this extent.
Make sure you repeat the text in the alt attribute on the img tag for accessibility.
This approach has issues with localization - in that you need a version for each locale - but this is still doable.
There are also going to be issues if you wanted to keep this text in-line with some other text - e.g. in the middle of a paragraph. But if that's what is being done, it sounds like "squished up text" may not really be a good UI.
So, you want to squish it without squishing it?
Try adjusting the font-size then. Or some combination of letter-spacing, word-spacing and font-size. (All of which work just fine in IE6).
.nav {font-size: 80%;
letter-spacing: -.05em;
word-spacing: .05em; }
It sounds like a nightmare.
You can fudge the whole thing by putting each word if a floated DIV and fiddling with the width each DIV.
Are you sure you're specifying your doctypes properly? Perhaps your browsers are interpreting your CSS in quirks mode, resulting in the unpredictable behavior.
I don't think jQuery will be of much help to you if letter-spacing isn't working properly. You can't alter the positions of individual letters unless every letter is inside its own element, such as a span, which just seems messy.
EDIT: If you want to shrink the horizontal width of the characters themselves, that would theoretically be done with font-stretch: narrower, for example. But it seems the major browser don't support it properly or at all. Apparently it was in CSS2, but then dropped in CSS2.1 and is now planned for CSS3.
I'd have to question the wisdom of even trying to do this in the first place. Just replace the darn graphic with something readable; or something you can duplicate with your text.
What you want to do is change the text's font. I think your best bet is looking through a bunch of different fonts that come preinstalled for your userbase and trying for the best font+size combo.
You may be able to track down the original font with WhatTheFont
Approaching ten years later, font-stretch is still virtually unsupported. But
transform:scaleX(); will do. Here.