Comments on: Rounded Corners are cool in SharePoint, apparently

By: Pascal

Pascal — Fri, 28 Aug 2009 10:46:03 +0000

You can also display the down arrow in a bit of white space on the right side of the tab. For this to work you need to get to the table cell that contains the down arrow image.
This should be the second TD in the row. Then set the background image of that table cell to a transparent image (in my case a 1×1 pixel gif):

.ms-topnav tr td:first-child + td
{
background: url(‘/_LAYOUTS/images/akzo/bg_downarrow_transp.gif’) repeat transparent;
}

What you can also do is move the down arrow into the actual tab where you’d like it to be, by changing the image’s position, something like:

.ms-topnav tr td img{
position:relative;
left:-15px;
}

Unfortunately that still leaves you with some white space next to the tab; probably because that TD still reserves the space needed for the image. Haven’t been able to solve that yet – any suggestions are very welcome.

By: Kirk Blenkiron

Kirk Blenkiron — Mon, 20 Jul 2009 05:09:59 +0000

Piotr, that’s a much nicer solution that works nicely. Thanks for sharing.

Some interesting insights to the rounded corner Andy, very interesting post.

By: Andy

Andy — Tue, 09 Jun 2009 12:56:18 +0000

Ooo, that’s a good idea. I must give that a go. Thanks!

By: Piotr Olczak

Piotr Olczak — Tue, 09 Jun 2009 12:37:15 +0000

.ms-topnav tr td img{
visibility:hidden;
width:0px;
}

This will fix the problem with dynamic level menu. You can still use it but you don’t see those added table cells, works fine in ie7.

By: Andy

Andy — Tue, 20 Jan 2009 11:48:31 +0000

Create a site with a top navigation containing a drop down list. Then use something to view the table with – the IE Developers Toolbar is idea. As you dig through the page, you’ll see that the navigation text and the ‘drop arrow’ are in two different table cells.

By: Matt Gudites

Matt Gudites — Tue, 20 Jan 2009 01:03:33 +0000

You mention:

“Why this couldn’t all be one table cell (or even better, not a table cell) mystifies me. To get around this, I turned off the dynamic levels on the top navigation (by editting the asp:menu control on the master page)”

I don’t see this control and I don’t know what to add/subtract?

By: novolocus.com » What’s up with the awful code in Meeting Workspaces?

novolocus.com » What’s up with the awful code in Meeting Workspaces? — Thu, 23 Oct 2008 12:01:38 +0000

[...] lots of nice rounded corners, but you can see that the meeting workspace tabs are currently unstyled. I decided I’d try to [...]

By: novolocus.com » Updating the Navigation Settings in a Publishing Site

novolocus.com » Updating the Navigation Settings in a Publishing Site — Thu, 16 Oct 2008 12:00:57 +0000

[...] of the brand is that the tabs have rounded corners, and these don’t work very well with the dynamic drop down menus. You can turn this off in [...]