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
Reply


12 Posts   2829 Views

Avatar
nostrad

Community Member, 25 Posts

3 May 2009 at 5:49am

(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: http://02ce746.netsolhost.com/jethro/m-banking/

Thanks in advance for any solutions.

Attached Files
Avatar
TerryMiddleton

Community Member, 108 Posts

3 May 2009 at 3:28pm

nostrad,

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.

Terry

Avatar
nostrad

Community Member, 25 Posts

3 May 2009 at 8:23pm

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.

Avatar
nostrad

Community Member, 25 Posts

3 May 2009 at 8:32pm

Edited: 03/05/2009 8:32pm

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.

Avatar
TerryMiddleton

Community Member, 108 Posts

3 May 2009 at 10:52pm

nostrad,

Good luck.

Avatar
Nicolaas

Forum Moderator, 213 Posts

3 May 2009 at 11:42pm

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)

Cheers

Nicolaas

Avatar
nostrad

Community Member, 25 Posts

4 May 2009 at 12:03am

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?

Avatar
Carbon Crayon

Community Member, 598 Posts

4 May 2009 at 3:53am

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/Sidebar.ss 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