...

View Full Version : navigation menu issue



Angiec
05-23-2012, 04:44 PM
http://staging.phantasea.net/cpi/

Having an issue with the css of the navigation tabs at the above site... the right corner of three of the tabs is the right color, but it's possibly sitting behind another transparent element. I'm about to go crazy because I can't figure out how to correct the code or get it to look correct. Any help is very much appreciated-- this is holding up the launch of the site. :) Thanks!

SB65
05-23-2012, 04:55 PM
It's coming from this background image:


#navigation-menu ul.sf-menu > li > a {
background: url("../images/menu-btn_r.png") no-repeat scroll right top transparent;
border: 0 none;
color: #E8E8E8;
cursor: pointer;
display: block;
padding: 0 20px 0 0;
text-decoration: none;
}

This is appearing on top of the right hand side of the tab which is set on the li element. Remove that and you should be OK.

Firebug (http://getFirebug.com) makes finding this sort of thing a bit easier.

Angiec
05-23-2012, 05:28 PM
Thanks for your prompt reply! :) I've replaced the above code you spoke of with the one below... I can't figure out why it's not showing up and the old one still is. any ideas??


#navigation-menu ul.sf-menu > li > a {
background: url(http://staging.phantasea.net/cpi/wp-content/uploads/2012/05/menu-active-with-arrow-btn_rtur.png) top right no-repeat scroll transparent;
display: block;
padding: 0 20px 0 0;
color: #e8e8e8;
text-decoration: none;
border:0 none;
cursor: pointer;
}

SB65
05-23-2012, 05:32 PM
I think you just need to remove the background image on the a element.

Angiec
05-23-2012, 06:01 PM
Still didn't work... can you look at it now... I tried something else. :) Thanks!

SB65
05-23-2012, 06:43 PM
No, that's made it worse. Find your style.css. At line 1414 you have:


#navigation-menu ul.sf-menu > li > a {
background: url("../images/menu-btn_r.png") no-repeat scroll right top transparent;
border: 0 none;
color: #E8E8E8;
cursor: pointer;
display: block;
padding: 0 20px 0 0;
text-decoration: none;
}

Delete the background style. Then find line 1443:


#navigation-menu ul.sf-menu > li > a.sf-with-ul {
background: url("../images/menu-with-arrow-btn_r.png") no-repeat scroll right top transparent;
padding: 0 26px 0 0;
}

and delete the background on that as well. If you do that it looks like the attachment - which I think is what you want?

You have the right hand of the tab set as the background image on the li element, and the left hand set on the span element contained within the a. You don't need the extra image on the a element.

Angiec
05-23-2012, 11:16 PM
Got it-- thanks for your help!!! :)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum