My 'display:inline' list seems to wrap for no reason

[richardhenry]

Hello all,

I'm currently in the process of building my new site, http://www.interactiverichard.co.uk/newsite/ (this is the preview).

Unfortunately, the navigation bar seems to wrap at a point for no apparent reason (you can also see the Ajax 'Loading' gets wrapped when you click on a link, although it is set to 'float:right'.

I can't figure this out, even using CSSEdit's Xray function didn't turn up anything that should be obstructing the list and forcing it to wrap at the point that it does.

I was hoping that maybe the community could come up with the answer :-D

Note: I've added the extra 'RSS Feeds' link just to make the wrapping more visible, I know that there's already an RSS link in the footer :-)


If you have any ideas, please do let me know...
thanks to all and best wishes


Rich

[D9r]

'display:inline' list seems to wrap for no reason

Actually, that's exactly what display:inline is supposed to do. Inline elements wrap; block elements don't:
9.2.2 Inline-level elements and inline boxes
9.2.1 Block-level elements and block boxes

You might want to try ul {white-space:nowrap;}

[richardhenry]

Actually, that's exactly what display:inline is supposed to do. Inline elements wrap; block elements don't:
9.2.2 Inline-level elements and inline boxes
9.2.1 Block-level elements and block boxes

You might want to try ul {white-space:nowrap;}

Cheers, but that didn't solve the problem unfortunately. It's not the fact that the text wraps that is the issue, it's the fact that it wraps where it does - a good 200px before it actually hits the edge of the container it's in and I don't know why, tried every fix I can think of from setting a fixed width for the list to various other things.

For the moment I've absolutely positioned the 'loading' li and hope to find a fix sometime in the future.

If anyone can suggest anything, I would be very grateful.


Rich