Okay I am having trouble controlling where the bullets and arrows are showing in Superfish Vertical menus. The attached, from IE8, shows bullets and arrows, on the left navigation menu, outside the menu and on the left. That is the way they are displayed in FF3.5 for both the Nav menu and the "Secondary links" menu on the right side of the screen. In IE8 on the right side "Secondary Menu", they are within the menu area and close to the links. In FF, I would like the left nav menu to display them to the right off, and close to the link, and for the Secondary Menu have them displayed as in IE8.
The only reference to Superfish menus in Mix-and-Match-style.css are for the primary menu set in the header. Fusion Core has a number of style sheets referencing Superfish menus, all of those lines I have copied into my local.css and tried to adjust to no avail. Fusion has Superfish menus built into the theme.
Drupal 6.19
Fusion Theme 6x-1.0
Mix_and_Match theme 6x-1.3 (Fusion sub theme)
Skinr 6x-1.6
| Attachment | Size |
|---|---|
| behavior.jpg | 110.09 KB |
Comments
The joys of cross-browser lists
I don't see an attachment, but un/ordered lists are infamously divergent from IE to, well, everyone else. Give this a read: http://www.alistapart.com/articles/taminglists/
Im not seeing any attachment
Im not seeing any attachment either. If I could see some specifics with your issue though, I'd be glad to help out. Btw, I second the A list apart link above... although they came sometimes be tooo thorough when you want a quick answer :)
http://jacobparrish.com
http://upgradeya.com
oops
I don't know what happened with the attachment. I think it is there now (or rather I attached it again and hope it worked this time).
Superfish and Mix and Match
Yes, you are correct that the formatting does come from Fusion core, and that the only Superfish menu formatting in Mix and Match I added was for the top primary menu navigation. Although I would like to make sure that there isn't any problems/conflicts with my default block list formatting and the Fusion Skinr-based block menu styles. I'll do a little extra testing and see if I can find any problems with that. However, I'm a little unclear from your description what it is you want it to look like? You want all the lists to appear in any browser like the secondary menu in the screenshot you posted?
Perfect world
I will be happy to get the bullets and arrows within the white area of the menu. In a perfect world the bullets and arrows on the left nav menu would be to the right of the text in the menu.
This can be done, and its not
This can be done, and its not too hard. You'll need to use an image for the bullets though.
for the list element:
li {background:url("bullet.png") no-repeat right center;
list-style:none;
list-style-image:none;
padding:0 20px 0 0;
}
Notice in the background that the image will be all the way to the right of the element and centered vertically. Also, notice that there is "list-style" and "list-style-image". I use both for lists when I want to get rid of the bullet because IE doesn't seem to understand only "list-style: none;". Last there is a padding right of 20px which makes room for the bullet image(you might need more or less depending on your bullet.)
hope this helps!
http://jacobparrish.com
http://upgradeya.com
however
If I put the site in Fusion Core theme or the subtheme I built using Fusion Starter, the bullets and arrows do not show up.
bullets
Ok, that is very helpful. Apparently the intended style in Fusion core for the Superfish vertical menus has no bullets. I've set custom bullets in Mix and Match and those are being displayed due to the way the styles are set. I am going to add some code to remove the bullets just from the Fusion/Skinr superfish menus that will be in the next release of the theme. If you wish to remove the bullets until I get that change incorporated, I think adding the following code to local.css should do it:
.block-outer ul.sf-menu li.leaf,.block-outer ul.sf-menu li.expanded,
.block-outer ul.sf-menu li.collapsed {
list-style-image: none;
}
If you do want bullets, then you'll need to manually add them if you do any upgrades of the theme. And I can try to help you get them formatted/spaced as you want, but let me know if you'd prefer to have bullets or not.
Thanks for the code. It
Thanks for the code. It worked. I had found a couple places to adjust the css to force them inside but then they were not lined up correctly, and would have required more tweaking.
As, I presume, fusion classes
As, I presume, fusion classes un/ordered lists differently. Regardless of what drupal or loaded themes and modules do, what essentially matters in determining which class and ID definitions are used are:
how classes are defined
how classes are named
how subsequent classes or IDs of the same name override the "base" style
the order within a stylesheet in which classes are defined and named
the order in which stylesheets are loaded
This is the "cascading" of style sheets that give them their power but also a learning curve
That A List Apart article is great for the specifics of un/ordered list creation that is cross-browser friendly.
Firefox/firebug is also a great tool for seeing css load order, as well as class/ID inheritance.
It may not be the instant answer, but It's time well spent.
I humbly express great
I humbly express great ignorance in all of things css and Drupal, but I am working on it. Part of the frustration is the learning curve. I have been using Firebug and typically use Firefox, but check how changes appear in IE8. I need to install more browsers on this machine to check my work in them as well. I had spent about three days trying to adjust the css to find what was controlling the the bullets and arrows to no avail. The A List Apart article was helpful and allowed some manipulation of the bullets and arrows but to an unsatisfactory result within the theme. I don't mind spending the time and doing the work. In Chinese that would be called gongfu or as it has been bastardized in the west as Kung Fu.
Acceptable solution
So I combined Partypooper's code with ajross's code and images to come up with an acceptable solution. I also changed another bit of code to make the right hand menus to be text aligned left. That put the bullets and arrow within the box of the menu and on the right hand side. Thanks all, I will keep experimenting and learning the tricks of the trade.
.block-outer ul.sf-menu li.leaf {background:url("http://localhost/francis-chandler.com/themes/mix_and_match/images/menu-leaf-bl2.png") no-repeat right center;
list-style:none;
list-style-image:none;
padding:0 0 0 0;
}
.block-outer ul.sf-menu li.expanded{
background:url("http://localhost/francis-chandler.com/themes/mix_and_match/images/menu-expanded-bl2.png") no-repeat right center;
list-style:none;
list-style-image:none;
padding:0 0 0 0;
}
.block-outer ul.sf-menu li.collapsed {
background:url("http://localhost/francis-chandler.com/themes/mix_and_match/images/menu-collapsed-bl2.png") no-repeat right center;
list-style:none;
list-style-image:none;
padding:0 0 0 0;
}
Along these lines
Currently I have the theme set to rebuild the registry on each refresh, and that css files are not compressed in order to see what I am doing. When the css files are compressed, I assume it drops all declarations that do not have values or declarations that have strikethroughs in Firebug. Is that true?
Behold the object beauty of CSS
No, nothing is dropped. However, what you're seeing is the subsequent local overriding of properties, following the load order I described earlier. Knowing this allows you greater definition and style application flexibility, especially when carefully designed at the start or refactored when possible. It's a beautiful thing.
compressing css files
Nothing is dropped, but you will see the css files are merged into a single file (it will be named with a really long string of numbers and letters), so you won't be able to tell which individual stylesheet the code comes from. But you'll still see all the styles, whether they are overridden or not.
You may also not need to bother with the registry rebuilding either, if most of what you are doing is just making changes to existing stylesheets, instead of things like adding new functions to template.php or adding new templates to the theme, etc. I don't usually use that setting since it slows things down a bit, instead I just clear the theme registry when it is needed.
Thanks for the input
The reason I asked is that I had copied, in whole or in part, the Fusion Core and Mix_and_Match stylesheets code when I found which line or lines controlled the areas I was trying to manipulate. I was thinking this might cause some redundancy and bloat in the final compressed stylesheets when the theme was put into production. For example, if I had the selector and declaration repeated from another stylesheet, even if I had not changed the declaration or a declaration was not present, then it would be repeated. I noticed that individually the stylesheet files are not very large. I also do not have a lot of modules installed on this development site, because I was using it to play with themeing. In a production site that would be different, and I don't want to be "shooting myself in the foot" by making a server work harder, to parse through more code than necessary, in order to display a site. Or, as some people think of me, am I thinking about this to much and trying to hard to be a perfectionist?