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.
Related
Opera seems to add some weird vertical spaces between certain document elements when using contenteditable together with twitter bootstrap.
JSFiddle examples:
Contenteditable not enabled vs Contenteditable enabled - note that in the first example, the rows have no vertical spacing between them, but in the second, they do.
Tested in Opera 11.61 on Linux and 11.62 on Windows. In any other browser I tested, the rows had no vertical spacing between them in either of the fiddles.
I tried removing bootstrap and adding the css it applies manually, but that did not trigger the margin. However, when inspecting the DOM, I found some weird <::before> and <::after> tags that I suspect to be related (screenshot).
What does the bootstrap css do to make this happen, and what is the best approach to avoid it?
Nixing these selectors removes the spacing:
.row:before,.row:after{display:table;content:"";}
.row:after{clear:both;}
No idea what it controls, or why you need it. Looks to be some sort of clearfix type thing, but I don't know. http://jsfiddle.net/wUuSn/2/
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 trying to display text with line breaks in a div using the css white-space property with a value of pre-line. This works as expected for Chrome, Firefox, and IE 8, but not in IE 7.
For example,
<div style="white-space:pre-line">
CSS has a pretty useful property called white-space that I’m guessing goes unnoticed among CSS beginners.
You can probably live without this property for quite some time, but once you learn how to use it, it will come in very handy and you’ll find yourself going back to it over and over again.
</div>
will display in Chrome, Firefox, and IE 8 like this:
CSS has a pretty useful property called white-space that I’m guessing goes unnoticed among CSS beginners.
You can probably live without this property for quite some time, but once you learn how to use it, it will come in very handy and you’ll find yourself going back to it over and over again.
but in IE 7 it displays like this:
CSS has a pretty useful property called white-space that I’m guessing goes unnoticed among CSS beginners. You can probably live without this property for quite some time, but once you learn how to use it, it will come in very handy and you’ll find yourself going back to it over and over again.
You can see it here: http://jsfiddle.net/VSQnP/10/.
I've tried values of pre, but then the text doesn't wrap and long lines run off the right side of the div, and pre-wrap, but that has the same problem in IE 7.
IE7 doesn't support the white space handling property pre-line. See this page for a compatibility table.
You can use these declarations instead
white-space: pre;
word-wrap: break-word;
It's not an alternative to pre-line, as it's breaking words not lines but at least the content does not exceed the boundaries of its container.
http://betawww.helpcurenow.org/media/press/
You'll see I have used spans within an anchor, with the span.hover-description set to display:none; by default, and on a:hover that span is set to display block and absolutely positioned to create a tool-tip effect when hovering over the name and email of the "For Immediate Release" contact names.
Everything looks as desired in Firefox, but Chrome reveals my unknown blunder somewhere.
Any help on what's the problem that is causing Chrome to not display like Firefox?
Incidentally, Explorer shows the tool tip as expected, although I'm getting a funky bottom margin issue below the names, and Safari has the same issue as Chrome (must be a webkit rendering setting that I need to accommodate for).
OK, I figured it out. Since I'm using a pretty complex nesting structure to accomplish the CSS tool-tips, I overlooked the fact that I had actually nested a p tag within a p, and of course that is a no-no.
Firefox is really friendly to a lot of validation errors, but Chrome and Safari seem to be much more strict.
In the end I changed the p's to span elements and all is well across browsers.
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
­