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?
Conversation
Looks good in Safari 1.3 (v312), same as under Firefox (1.0.1 Mac).
-b
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
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? ^_^
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.
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.
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...)
i had the same problem and the only way to get around it was to use <nobr>text that might wrap</nobr>
Thanks Mazen you just saved the day. Nice fix.
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.
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]
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.
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!)
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
@Rudy: actually, that's a problem with backgrounds on inline text that extends beyond a single line. For which I know of no cure.
@Jonathan Snook: much thx ... will have to google that one when I have time ... thx again!
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.
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.