FANDOM


  • 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.

    Navbar CSS problems

    Comparison of what it looks like in Chrome, IE, and Firefox. (Click image to enlarge.)

    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!

      Loading editor
    • *Bump*

        Loading editor
    • I've tried increasing both the height and width of the outer containers, but no success, so that mustn't be the problem. Any other ideas of things to try?

        Loading editor
    • Firefox user here. The navbar looks the same as your IE and Chrome screenshots from where I'm standing.

      I'd suggest checking your own personal CSS on that wiki as well as here, something may be interfering with it if it's still happening (possibly a line of code with -moz- in it).

        Loading editor
    • The thing is, the problem is also happening when I'm logged out and therefore shouldn't have any personal CSS there to interfere. But thanks for the feedback! Any chance you could tell me what version of Firefox you're using so I can see if it's the same as mine? It could be a difference between versions. I'm using 30.0, after having updated just a few days ago.

        Loading editor
    • I'm using 30.0 as well, so I'm not too sure what's going on there.

      From what I can tell, it looks like something's happening with the subnav-2-item class (the individual bits which say "Wiki Activity", "Random Page" etc). Removing the next line up (i.e. "subnav-2", the entire bottom bar) causes the black line between the top and bottom navbars to disappear, so I'm not sure that's where the problem is.


      Edit: I'm comparing between Chrome and Firefox now, and I'm noticing a subtle change in the size of the text. Check the exact way your paragraphs display on your Test 2 page, it should be most obvious there. That subtle difference may be what's causing Firefox's version to break if the text in the bar is being squished off the page (though it still doesn't explain why I can see it properly on my own browser).

        Loading editor
    • Hmm, well, I don't have anything defined for subnav-2-item. The style for that bottom bit is all through subnav-2 and subnav-2a. However, I did try what happened when I put a height with subnav-2-item, but it broke it in both Chrome and Firefox whether the height was bigger than, smaller than, or the same as the rest of that line, so I doubt that's it.

        Loading editor
    • Hang on a minute. The navbar has suddenly started working in Firefox for no known reason. I was just testing something else which meant I kept refreshing the page, and then suddenly I stopped and saw that the bottom of the navbox was staying where it should be. I have no idea why, as the other thing I was testing was on a completely different part of the page. So, unless something goes wrong again, I think the problem is solved. Don't ask how; I have no idea.

        Loading editor
    • A FANDOM user
        Loading editor
Give Kudos to this message
You've given this message Kudos!
See who gave Kudos to this message