• Locked
1 reply [Last post]
Sun, 2010-07-11 02:53
JoshuaSpence
JoshuaSpence's picture
Offline
Regular
Last seen: 12 years 11 weeks ago
Timezone: GMT+10
Joined: 2010-07-08
Posts: 13
Points: 17

Hi,

I am trying to add a border to my Superfish menu. I previously used a SpryMenuBar (Adobe Dreamweaver style menu), as can be soon on www.abstractproductions.com.au

As you can see I had a grey 1px border around each submenu. I am trying to achieve this in Superfish. I have added the "border:" option to .sf-menu ul as follows:

.sf-menu ul {
	position: absolute;
	top: -999em;
	width: 10em; /* left offset of submenus need to match (see below) */
	border: 1px solid #CCC; /* submenu containers have borders on all sides */
}

But in Mozilla, this border appears with rounded edges on the top right and bottom left corner. Also the border exceeds the black background area and so parts of the submenu are now transparent.

In IE, this border exceeds the

  • elements boundaries (ie. when the mouse goes over a link and highlights it, the highlighting doesn't extend to the white border).

    • Any help would be greatly appreciated.

    Top
    Tags:
    Sun, 2010-07-11 08:10
    #1
    JoshuaSpence
    JoshuaSpence's picture
    Offline
    Regular
    Last seen: 12 years 11 weeks ago
    Timezone: GMT+10
    Joined: 2010-07-08
    Posts: 13
    Points: 17

    Solved

    Nevermind. I have solved this issue. The answer was in the Superfish css file, which I changed to read:

    .sf-shadow ul {
	background: url('/img/Superfish/shadow.png') no-repeat bottom right;
	padding: 0 0px 0px 0;
	-moz-border-radius-bottomleft: 0px;
	-moz-border-radius-topright: 0px;
	-webkit-border-top-right-radius: 0px;
	-webkit-border-bottom-left-radius: 0px;
}

    Top
    • Locked