How to get consistence rendering of <p> paragraph text in all 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开发者_StackOverflow中文版 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 &shy