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
­
Related
I'm using css gradients and padding to simulate buttons around an anchor tag. The problem I am running into is that firefox seems to make the button 3 pixels larger. 1 pixel on top and 2 on bottom. This seems to happen with not only the example i posted but everywhere on the page where i use the padding. I put up and example at http://wemw.net/example.php. In firefox the button top and bottom line up perfectly with the search box, but in chrome as i said its off by 1 pixel on top and 2 on bottom. I am using the w3 transitional(tried strict as well) doctype and a css reset. In the reset all anchor tags are set to padding: 0, so I'm confused as to why this extra padding is being added. Is there a workaround to this or is it just something you have to deal with when working with gecko and webkit browsers?
EDIT: So I logged over to windows and it is appearing the same in both browsers now. I'm assuming it is OS specific problems? Since no where near as many people use linux I'm going to change the padding to make it work, but in the interest of consistency can anyone offer a solution for cross-os cross-browser solutions? I do not own a mac and cannot easily test it there, but if windows/linux can have problems with the same versions of the same browsers is it safe to assume mac could also have issues i am unaware of?
It's not the padding on the anchor tag, it's the size of the text box that is inconsistent. <input> elements always caused such problems for me too, and I always found it extremely tedious to align them together nicely (you haven't yet seen it in IE8, have you?). I think that the easiest cross-browser solution here would be to remove the border from the text box and use a background image instead (or better yet, a background image on the element containing the text box) properly aligned with the button.
So, I have written out a site in HTML and CSS, and all looked fine and dandy in Safari, Chrome, OmniWeb... even Opera. Then I tested in Firefox and Camino (which I believe uses the same rendering engine as Firefox) and was unpleasantly surprised: some of the positioning of my divs was off - noticeably off - by at least 5 pixels. While that might not seem like a whole lot, I use divs to put borders around things that I would otherwise have difficulty with putting borders around (jquery image gallery, for example), so 5 pixels matters quite a bit.
My question is this - what other quirks does Firefox's rendering engine put in, and how can I get around them? Are there special properties I need to add to my CSS in order to make it behave the same for Firefox/Camino?
Thanks in advance for the help!
You should look into using a css reset, this will give you a blank slate and will for the most part normalize how browsers render the box model.
I recommend http://developer.yahoo.com/yui/reset/
I'm experimenting within a Wordpress framework, trying to get blog post titles to appear in a large square block, with line breaks appearing mid-word if necessary to maintain the shape.
Using the word-wrap and (apparently) word-break CSS properties, I got the look I wanted... in Safari/Chrome. Firefox 7 refuses to break the words apart. IE does slightly better than FF, but its line breaks seem way more arbitrary (also, IE isn't really a priority at this point). Mainly I'm trying to figure out why word-wrap and/or word-break wouldn't be working in this instance in FF.
I'm not using tables.
word-break seems to be the active CSS property here. When I removed it and tested the page in Safari/Chrome, the lines stopped breaking mid-word.
I don't think any automatically applied Wordpress classes (hentry, format-standard, etc.) are playing a role, but correct me if I'm wrong. Other than the styling shown in the jsfiddle link, the other CSS is standard Twenty Eleven WP theme.
A live example: (simplified but accurate HTML/CSS): http://jsfiddle.net/3U4Xc/1/
Any input is appreciated.
It doesn't work because Firefox 7 doesn't support word-break.
On a side note which won't solve your problem white-space: -moz-pre-wrap; will not work in Firefox 7 either. It should be white-space: pre-wrap;
Since your div is using text-align:justify, you wont get any further. Also, white-space in your code may be simplified to white-space:pre; However, text-align on one side, versus pre-formatted on the other don't make friends. Not too sure about that word-break thing, HTML5, I suppose. What exactly are you trying to achieve? Something /not/ breaking, or breaking, where you want the split? Mind me, but screen sizes and user settings have always been notorious for screwing any static positioning.
I came across an 'issue' some time ago that I never did get to the bottom of. Hopefully somebody can shine a light on it. What causes certain browsers (Chrome, Opera and Safari) to render a page differently when I change the DOCTYPE from strict to transitional. I know the general cause of this is quirks mode being triggered, but both the XHTML and CSS for both files validate according to the w3c validator.
I can only assume that these browsers use different internal style sheets for the two DOCTYPEs, but have no real idea why they would do so. I was just hoping somebody could confirm why this happens.
The difference that can be seen is the space between the bottom of the 'header image' and the border of the menu bar. In the aforementioned browsers there is no gap between the two when using a transitional DOCTYPE, but there is when using strict (in IE and FF the gap is present on both). I eventually worked out that adding display:block to the img tag stops the gap appearing in all cases (which was my objective).
transitional example,
strict example
It would appear that by default in 'strict' mode an image is displayed as an inline element. Inline elements are given a space at the bottom to account for descender characters such as g or q. Since an image will not have any descender characters this was considered strange behaviour which led to the introduction of 'almost strict' mode. In 'almost strict' mode all img tags are rendered as display: block rather than inline. Further details can be found here.
The final piece of the puzzle is that all modern browsers render pages with a strict DOCTYPE in 'strict' mode and pages with a transitional DOCTYPE in 'almost strict' mode. More details can be found here.
Many thanks to both Moses and Riley, some of the information they provided helped me find the answer.
I don't truly understand this quirk myself. I do think it has to do with white space. In quirks mode, white space is more forgiving. However, in standards, white space can cause issues.
For instance, in your example, you have a nice beautified source that is easily readable. Removing the white space and line breaks between containers and elements will allow you to remove the gap in some browsers (FF I believe). To fix it in IE, you will need to add line-height:0; to the containing element of the image (in this case the containing anchor or link tag).
You should also note, if you care about IE6 at all, that having each of your <li>'s on their own line will add extra lines between each list item when rendered.
There are only a few differences between Strict and Transitional DOCTYPES, none of which really explain this. (note, I only have FF, IE installed so I can't see the error itself).
As far as what caused this to happen, it could be a case of browser's having different stylesheets for the different rendering modes. However, I think it really just comes down to the fact that the browser takes different approaches to how it renders the page for each mode Strict/Trans/Quirks/Frames. While the only documented difference between Strict and Trans is how to handle inline images inside tables, browsers don't have to adhere to W3C specs and can do whatever they really want, and this tends to cause bugs like the one you apparently just found.
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.