Edge wont ​recognize margin: 0 auto?

    I have my user menu set to a max width of 1280px and it is centered by using margin: 0 auto; which is working fine with Firefox and Chrome but not the new Edge browser, it floats to the left with Edge. How can I center the user menu with Edge?

    Quote from Black Rider

    I can’t reproduce this on my edge. Everything is centered.

    That's odd. Then maybe there is something wrong with the way I added my CSS?


    CSS
    .userPanel {max-width: 1280px; margin: 0 auto; border-radius: 0 0 8px 8px;}

    I can’t see any problem with your CSS and it is not possible that the same browser renders differently on different systems.


    Does the problem also occur if you aren’t logged in?

    Trying clearing all forum cache stored. Not sure if that would make any difference and is there not a chance the browser is still caching things from how it looked before still. Might be worth clearing browser out as well.

    Quote from PJK

    .userPanel {max-width: 1280px; margin: 0 auto; border-radius: 0 0 8px 8px;}

    How comes you use 8px for border radius when the rest of the forum uses 6px. That means they don't match up.


    @wcfContainerBorderRadius: 6px;


    You could have done this instead:


    .userPanel {max-width: 1280px; margin: 0 auto; border-radius: 0 0 @wcfContainerBorderRadius @wcfContainerBorderRadius;}

    Quote from Black Rider

    Are you using the latest version of Edge?

    Turns out that everything is fine in the Edge browser, it's IE 11 that has the issue.


    I didn't even know there was an IE 11 :huh: , why did they release IE 11 and Edge?

    I can't check that on my monitor because I use 1280x1024 res and the forum stretches full screen width for me.


    You can also see in my screen-shot what I meant before when saying to you the rounded corners don't suit a full screen width seen, not if the forum fills the whole screen like on mine due to used a smaller screen res same or lesser than your max-width


    Quote from GTB

    You can also see in my screenshot what I meant before when saying to you the rounded corners don't suit a full screen width seen

    I just need to add some margin for smaller screens.

    You also should consider adding 10px transparent spacing in the logo itself before the image in it. As the logo sits right up flush to left side and needs a bit of transparent spacing added on left side in it. That is what I did with the logos used on my own site for full-width styles added.

    Quote from GTB

    As the logo sits right up flush to left side and needs a bit of transparent spacing added on left side of it

    I imagine that if I can figure out how to add the margin it will take care of that as well. Adding margin to #main doesn't seem to do anything.


    Edit: It's .layoutFluid that needs the margin.

    Quote from PJK

    I imagine that if I can figure out how to add the margin it will take care of that as well.

    Yes it would, so long as nobody at all is seeing the site full-width of their display screen.

    Hmm... you have me thinking now if it's a good idea for me to offer full-width theme option? As it gonna look a bit bad full-width in a monitor using far bigger than 1280 screen res. Not sure offering full-width is ideal the way I'm doing it with no max-width used.


    You use a large monitor, what does my forum look like on your screen picking full-width style, as I know it will fill your whole screen. Will you post a screen-shot of it?

Participate now!

Don’t have an account yet? Register yourself now and be a part of our community!

Register Yourself Login