Skip to main content

This site requires you to update your browser. Your browsing experience maybe affected by not having the most up to date version.

General Questions

General questions about getting started with SilverStripe that don't fit in any of the categories above.

Moderators: martimiz, Sean, biapar, Willr, Ingo, swaiba, simon_w

HELP! Sidebar menu display issues!

Go to End

12 Posts   2698 Views


3 May 2009 at 5:49am Community Member, 25 Posts

(Using SS 2.3.1, default BlackCandy theme )

My site's sidebar menu displaying very funny in Firefox but is working fine in IE6.

See attachment.
A = Firefox (with default font size in options = 15)
B = Firefox (with default font size in options = 13)
C = IE6 (Text size = medium)

I checked the CSS files in the /themes/blackcandy/css folder in case I modified something -but the only things I modified are the colors in layout.css and typography.css.

Please can someone please detail how to fix this if you have encountered this before?

To see the live site with the problem, please see:

Thanks in advance for any solutions.

Attached Files

3 May 2009 at 3:28pm Community Member, 108 Posts


Okay, hopefully I can help. I had very similar issues that I finally got resolved.

First when you have the rollover images, I set the text-indent:-999em. This moves the actual text off screen

Secondly, take a look at the CSS because what happens is that you may have submenus which extend past the width of the sidebar.

What I did was make sidebar set at 255 px and then made sure each submenu (including any padding/margins and indext did not exceed 255.

I hope this helps.



3 May 2009 at 8:23pm Community Member, 25 Posts

Yes, it is obvious (from the image attached in my original post you can see) that my menu items wrap into two lines. However, it is not a problem in Internet Explorer (again see the image my attachment), but only poses a problem in Firefox. I want to know if other people are also facing this issue (surely there must be someone who has this same issue) and how you resolved it. .... also if the developers could answer to this question that would give me peace of mind. What modification needs to be made to the CSS and where so that it works perfectly in Firefox ? The CSS is very complicated for me - I had a look at the code for formatting the sidebar in Layout.Css - it is too much, that is why I ask for help.


3 May 2009 at 8:32pm (Last edited: 3 May 2009 8:32pm), Community Member, 25 Posts

Once more, I am posting the screen capture from each browser - with the problem clearly evident (see attachment) . I would like a response from the SiliverStripe developer team as to how to resolve this for Firefox. thanks in advance.


3 May 2009 at 10:52pm Community Member, 108 Posts


Good luck.


3 May 2009 at 11:42pm Forum Moderator, 213 Posts

My answer would be to take a less complicated approach altogether. Why have an em within a span within an a within an li element? That just make it tricky. Especially since a, span and em are all inline elements, while the css turns the em into block. If you keep it simple, it is seldom that you run into these problems.

The SS development will mainly answer more highlevel PHP questions than css questions that are not strictly related to Silverstripe.

What I would do is change the html a little and remove some of the css and then beautify it again (after you have removed all the extraneous html and css)




4 May 2009 at 12:03am Community Member, 25 Posts

Where should I make the change? Keep in mind that the end-user will be modifying this site later, adding pages etc.. So, the solution would be to modify the script that generates the sidebar menu. Question is - where is this script?

Carbon Crayon

4 May 2009 at 3:53am Community Member, 598 Posts

This is not a problem with SilverStripe, it is an issue with your CSS/HTML in the template.

SilverStripe does not 'Draw' your menu, it simply fills in the menu template with the titles and page links and then passes a static HTML page to the browser to render.

You need to go into your layout.css and your templates/Includes/ and make the changes in the same way you would if you were making a static HTML site.

Once again I would encourage you to do the tutorials so that you get a better idea of how SS works.

Go to Top