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.
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.
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)
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?