Problems using white-space:nowrap in Internet Explorer

Let's jump right into it with some sample code:

#example1
{
	width:300px;
	border:1px solid #666;
	background-color:#FEE;
}

#example1 a
{
	white-space:nowrap;
	padding:0 10px;
}

<div id="example1">
<a href="#">Link One</a> | <a href="#">Link Two</a> | <a href="#">Another test</a> | <a href="#">Yet another test</a>
</div>

I also put together an example page. The problem is that the left padding on the link disappears when it wraps onto the next line. The funny thing is, I tried this in IE5.5 and it worked. Firefox and Opera 7.5 also seem to have no problem with this. What does it look like in your browser?

Published April 11, 2005 · Updated September 17, 2005
Categorized as HTML and CSS
Short URL: https://snook.ca/s/353

Conversation

17 Comments · RSS feed
Ben Kennedy said on April 13, 2005

Looks good in Safari 1.3 (v312), same as under Firefox (1.0.1 Mac).

-b

calrion said on April 17, 2005

I confirm your bug in IE6.0 SP2 (WinXP).

I also confirm its absence (i.e. correct behaviour) in Firefox for Windows 1.0.1

Sywan said on April 22, 2005

The reason why IE6 displays this differently is because of the way it handles the nowrap property. In the older IE, Firefox, and Opera the browser simply breaks it before the padding attributed to the hyperlink element.

IE6 is just funky. It will separate padding or margin properties from the attributed element, in this case your hyperlink. It breaks it right after the padding property from the last hyperlink. If you hover your cursor over the the space between after the first row you'll see that the 10 pixel padding is there. It's just separated from the link.

Just out of curiousity, why are you trying to specify a no-wrap property inside of a block-level element with a fixed width? ^_^

Jonathan Snook said on April 22, 2005

In this particular case, the design was fixed width. Although, for arguments sake, the "fixed width" could also be the width of the browser window. I wanted to set the no-wrap property so that if people resized their fonts that a link's text would stay on the same line, instead of breaking in the middle.

Sywan said on April 27, 2005

This bug in IE6 is just annoying. I did some searching for a possible solution and came across several good examples of this problem instead.

A link from a post at ALA CSS Discussion showing the same problem: http://www.dannypoo.co.uk/herbawohl/inline.htm

I'm starting to think if it not better to just use a custom IE6 style sheet, using the [if IE] exceptions. The IE style sheet can then exclude white-space:nowrap and just rely on padding to make it work the same in IE6 as nowrap works in compliant browsers.

Tom Shinnick said on September 10, 2005

Check out this article (with example) that says "try using 'inline-block' on div's instead of just 'inline'" - it might be applicable - the example sure looks interestingly like your problem
http://www.quirksmode.org/bugreports/archives/2005/07/Wrapped_inlinenowrap_elements_lose_padding_left_in.html

(... journeys onwards looking for solutions to _my_ problems with IE6...)

Mazen said on November 15, 2005

i had the same problem and the only way to get around it was to use <nobr>text that might wrap</nobr>

Geoff said on May 02, 2006

Thanks Mazen you just saved the day. Nice fix.

Jeff said on October 12, 2006

I'm not sure if I'm having the same problem with the way IE renders links, but any links I have that wrap in the margins will have their background disappear (in my case, an underline).

Example is here

In this case, you can see that the underline disappears on the first line, which is hella strange, and even odder, this behaviour differs from the main page, where it disappears on both lines.

Russ said on October 16, 2006

I'm having some issues with the nowrap tag as well... In IE, my header freaks out when the window is resized smaller than normal. Example is here.

[rant] I hate IE...[/rant]

Jason said on October 18, 2006

IE also doesn't honor the white-space:no-wrap for <td>'s either. I got around this by wrapping the text with a <span style="white-space:nowrap"\> </span>.

Works like a charm in IE and Firefox.

Ken Kuhns said on December 25, 2006

Welcome to the bug-ridden world of Microsoft browsers. The only way to design successfully for Internet Exploder is to have an arsenal of workarounds available. The NOBR solution is a simple one that works every time, absolutely, without having to fudge column widths. (So much for the total CSS approach!)

Rudy said on May 03, 2007

Hmmm, have to link into this myself ... might be the same issue I am seeing on my webite ... external links with a bg image that have padding on them ... example of the homepage below ...

Content Heavy

Jonathan Snook said on May 03, 2007

@Rudy: actually, that's a problem with backgrounds on inline text that extends beyond a single line. For which I know of no cure.

Rudy said on May 04, 2007

@Jonathan Snook: much thx ... will have to google that one when I have time ... thx again!

Cachito said on December 05, 2008

I didn't like the white-space between the links and borders, so I filled it with ampersandnbsp;

Then I added padding to the container (padding:0 10px;) and eliminated "#example1 a" all together.

Cachito said on December 05, 2008

oops, sorry, I missed the part about links staying on the same line and not breaking in the middle.

I re-inserted "#example1 a" with just the nowrap statement and the link moved to a new line intact and with padding on the left.

Sorry, comments are closed for this post. If you have any further questions or comments, feel free to send them to me directly.

Want to learn about scaling CSS for large projects?

I'm available for full and half-day workshops on scalable CSS architecture. I can provide on-site training for your team. Interested?
Get in touch.