see demo: http://jsbin.com/evesey/41/edit
Each letter is in a span element, and the whole sentence is overlapping an input field, to show the difference. this is only caused in Firefox and only when the spans are set to inline-block. They must be inline-block. I tried to play with the letter-spacing but it isn't a good solution when the text changes to something else.
Is there a way for this to be fixed? I'm afraid this might just be an unsolvable bug in Firefox rendering inline-blocks...
Ok, after DEEP investigation, I have learned that Firefox applied Kernnig on the input field, but not on the separate letters in the spans while Chrome does not apply any kerning at all, thus, rendering a perfect text match. I see this is a Chrome bug then, not kerning by default is not so wise IMHO.
I've managed to remove the forced kerning in a "hacky" way, by adding a zero-width-space character \u200b after every character that is printed into the input field.
Update:
seems the kerning is still happening with the above trick, only less "kerned". this is not good.
Related
I'm using CSS transforms, falling back to the following Matrix transform for IE7 and IE8.
filter:progid:DXImageTransform.Microsoft.Matrix(M11=0.0, M12=0.33, M21=-0.33, M22=0.0,sizingMethod='auto expand')
This works fine in all versions of IE. But if I remove the space after each comma, as happens when I minify my CSS, I see a bunch of weird glitches under IE7. It looks as though the browser is completely ignoring the definitions for various other classes in other parts of the CSS file.
This only affects IE7, and happens whether it's native IE7 or IE9 using the IE7 standards mode.
I can work around this by tweaking my CSS minifier to leave the spaces alone for this rule, but I'd like to understand what is happening. I assume it's a bug in IE7; am I the first to encounter it?
I am not sure if you are the first to encounter it. We encountered this problem just today. You certainly seem to be the first to report it. Scott McGhee reported it a month later. I have not found any other references to this obscure problem.
Your assumption that it is a bug in IE7 is correct; this is unexpected behavior. If you load this fiddle in IE7 or IE7 browser mode, you'll see three orange squares with three X's in it. The first square is 25x25px, the second 50x50px (scaled down from 100x100px and slightly blurred) and the third 100x100px. This is correct behavior. However, if you remove the whitespace character as indicated in the fiddle, you'll see the second and third element are not styled anymore.
My theory is that having a space within a string parameter without leading spaces in the entire parameterslist causes this bug. I have added another method, a blur, to test this conjecture:
progid:DXImageTransform.Microsoft.Blur(pixelradius=3, enabled='hello world');
If you remove the first space it reproduces the bug, behind the 3. If you also remove the second space, behind hello, it works again. My theory stands unfalsified.
I have not tried this in IE6.
I'm having a problem with multiple text-shadows and negative letter-spacing in Webkit where the last few pixels of the shadow on the last letter are cut off.
Well, only certain letters.
Look at this demo in Chrome or Safari (it works as expected in Firefox and Opera as far as I can tell.)
I know I could use -webkit-text-stroke in addition, but that leads to this problem:
Any ideas? Thanks.
Yes, I'd say it's a drawing bug. It appears webkit lets the box around the letter crop the shadow when you start using negative letter spacing.
I found it easier to see the problem by increasing the size and doing display: inline to get a collapsed box around the letter.
http://jsfiddle.net/tMeuB/3/
Firefox
As of version 7.0.1
Notice how the shadow stays as the negative letter spacing increases from left to right.
Safari
As of version 5.1.1 (7534.51.22)
Same test. See how the shadow gets cropped as letter spacing increases. In frame 3 you can almost see how the algorithm calculates it. I'd guess the amount of clipping = glyph width - glyph box width.
I found a solution, sort of.
Here is another demo.
If you drop a in after the cropped letter, it fixes it. But that's not ideal.
I tried using a similar technique with an :after pseudo element, but it doesn't work.
Fortunately enough for me, the text I'm trying to apply this style to is a pseudo element, so it was easy to throw a \00A0 in the content:''.
Ran into this quirk today.
http://jsfiddle.net/UJAjD/3/
You'll notice that in Firefox 7 and Opera, the gray box has the word "Next" in it. The CSS includes a text-indent property that should move that text outside of its container. Viewing this page in IE or Chrome shows it the way it should. At least the way that you would think it should show.
Is this a known bug? Is there a workaround?
Per spec, text-indent affects the text in the first line box of the block.
The problem is that the spec doesn't really make it clear whether the first line box in this case contains the block or the text, and different UAs interpret the spec differently...
http://jsfiddle.net/CtaBe/
I've tested this in FF, Chrome and IE. Only FF shows the intended behavior (or at least what I think is the intended behavior). Chrome and IE show the same behavior: when you first focus on the input, the cursor doesn't indent. After you type somehing, delete it, and re-focus, it indents properly.
How can I fix this? Because I want to display an image at that indented space.
Quick disclaimer: this message outlines a solid example of why a person would choose to use text-indent on an input field rather than padding. It does not answer "how to fix IE handle text-indent on input fields"
The thing about padding-left is that it alters the width of your input field, which can be undesirable.
Imagine a scenario where you wish to show a background-image icon for the following states of your inputs' data:
required field
invalid input
missed required field
password strength
In such a scenario, we'd need to nudge the text away from the left border to display the icon (which is a much simpler feat than going for the right side, but that's a whole other discussion. If we use padding, the width of the input field changes. That's not ideal, since the various "states" can change.
For instance, maybe a field is only required based on the value of another field. When that field "becomes" required the field "grows" according whatever padding we apply to move the text away from the icon, via relevant class. That's far from elegant, especially when other fields are floated next to it.
Furthermore, in the case of textareas, we wouldn't want to pad the entire side - the first line would suffice.
That's exactly where using text-indent comes into play. And it works great - except in Internet explorer. Which is what has led me here, as I search for other ideas or solutions. I have a few ideas in mind but hopefully there's something simpler that I haven't thought of.
In Chrome, this is a known issue. Please star it :)
'text-indent' applies to block-level elements, table cells and inline blocks. I hope you are using it on a not block-level element.
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
­