Skip Navigation | Groups

This site uses cookies- for more information see the Cookie Policy | Continue

 

Wrapping Frontpage text navigation bars

Why navigation bars wrap in Internet Explorer, but do not wrap in other browsers


Consider this navigation bar:

• About • Privacy • Site Map • Contact • Cookie Policy •

The code (open the page in a browser and View Source to see the code) for this bar is:

&bull;&nbsp;<nobr><A HREF="../../../mainpage/about.aspx" TARGET="" STYLE="{text-decoration: none;}">About</A></nobr>&nbsp;&bull;&nbsp;<nobr><A HREF="../../../mainpage/sitemap.aspx" TARGET="" STYLE="{text-decoration: none;}">Site&nbsp;Map</A></nobr>&nbsp;&bull;&nbsp;<nobr><A HREF="../../../feedback/Default.aspx" TARGET="" STYLE="{text-decoration: none;}">Contact</A></nobr>&nbsp;&bull;&nbsp;<nobr><A HREF="../../../mainpage/privacy.aspx" TARGET="" STYLE="{text-decoration: none;}">Privacy</A></nobr>&nbsp;&bull;

If the space for the navigation bar is confined, Internet Explorer 6 and 7 will allow it to wrap onto two or more lines, other browsers will not allow wrapping.

Look at this version in different browsers:

• About • Privacy • Site Map • Contact • Cookie Policy •

Here the width of the navigation bar is constrained by a fixed width >div< to 150px. This is OK in IE6, but other browsers...

In IE6 the link bar displays word-wrapped as:
• About •
 Site Map • 
 Contact • Privacy •

In IE8 (and other standards compliant browsers) the display is cut off (the <div> is set to hide any overflowing text):

• About • Site Map • 

The "dodgy" bit is the &bull; (bullet character) - Internet Explorer 6 and 7 will incorrectly treat this as white space and allow lines to wrap at the bullets, whereas other browsers will treat the bullets as characters (the same as letters and numbers) and will not allow wrapping.

The navigation bar cannot wrap anywhere else since this is prevented by the  <nobr>...</nobr> tags.

The only text FrontPage navigation bar that will wrap in all browsers is the one using brackets without a theme - in Link bar properties style tab, choose "Use pages theme" (if there is no theme being used for the page) or choose this style from the text representations:

About ] Privacy ] Site Map ] Contact ] Cookie Policy ]

This places a normal space between adjacent links, enabling the navigation bar to wrap in all browsers.