Divider Lines In Top Menu

[Sarak]

I have a divider line CSS code for the blocktopmenu. The code works fine and the divider lines are where they need to be but the code seems to affect the entire site rather than just the top horizontal menu.

 

For instance, the divider line image I'm using in the code will appear in the Cart, blockhtml and the featured products and it seems to throw the whole site off balance. Is there a way to use this code and have it not affect the entire site?

 

 

Here is the code that I've placed in blocktopmenu/css/superfish-modified.css:

 

ul a {
background-image: url(../img/divider.png);
background-repeat: no-repeat;
background-position: right;
padding-right: 32px;
padding-left: 32px;
display: inline;
line-height: 10px;
}[/size]
[size=2]

Edited June 12, 2012 by Sarak (see edit history)

[Carolina Custom Designs]

Is there a way to use this code and have it not affect the entire site?

 

 

Here is the code that I've placed in blocktopmenu/css/superfish-modified.css:

 

ul a {
background-image: url(../img/divider.png);
background-repeat: no-repeat;
background-position: right;
padding-right: 32px;
padding-left: 32px;
display: inline;
line-height: 10px;
}[/size]
[size=2]

 

Your CSS is too generic. This is why it is affecting other parts of your site. Just add a class to your HTML/CSS (e.g. .sf-menu) and that should do it.

 

Hope that helps!

 

Marty Shue

[Sarak]

Thanks Marty,

 

After experimenting a little, it works when I set the class as .sf-menu a.

 

Cheers!

[Carolina Custom Designs]

Great! Glad to hear you got it working.

 

Marty Shue