Board Thread:Support Requests - Designing Your Wikia/@comment-4189499-20140711140017

Hello there. I've been working on styling the wiki navigation bar (navbar) for one of the wikis I work on through CSS on my test wiki, and I've managed to get to the point where it's almost perfect and ready to be moved to its intended wiki. However, when I did cross browser checks, although I found some minor, easily fixable problems between Chrome (the browser I originally styled it in), IE, and Safari for mobile (the only way I can test Safari), it completely breaks in Firefox and I can't figure out why.

As you can see in the image on the right, the navbar looks almost identical between Chrome and IE, which is exactly as I want it to look, but in Firefox the entire bottom part of the navbox just disappears! The odd thing is, it still shows up as the page is loading, especially after clearing my cache, but then disappears once the page has finished loading. I can't figure out what's causing it to do that, although a few times while I was still working on the code it happened in Chrome when the height wasn't big enough in some sections and could be fixed by increasing that height. However, if I make the height of the back container any bigger to try and accommodate Firefox, it's going to make the navbar look bad in every other browser as there will be extra background showing through where it shouldn't be. I already have a dodgy extra line one pixel high at the bottom of the navbar in Chrome to make sure the height is right in IE and Safari (but because of the colours that 1px isn't very noticeable. Any more than one pixel, however, would be much more noticeable and would leave the navbar looking much worse.).

The odd thing is, if I copy the CSS used for the navbox into my personal CSS on another wiki (the wiki I'm designing the navbox for), it works perfectly! This just makes things more confusing, as the CSS is the same in both instances, and is being applied to the same object down to the last link, as I made sure to copy across all the MediaWiki information for the navbox before beginning to style it so I would have the right widths. I just can't understand what's going wrong!

Any help with finding out what the problem is would be much appreciated. Even if you could just open up the page in Firefox and see if this problem is also showing on your computer, the information would be very helpful. A link to a page on the wiki can be seen here, and is the page I have been mainly looking at when doing these tests.

Thanks in advanced for any help you give! 