Chrome browser rendering unpredictable mobile layout











up vote
1
down vote

favorite
1












I am having a very hard time debugging this issue, I may as well find out if others have seen anything similar. I am finding that Webkit browsers are rendering extra space in a stacked menu I'm using for the mobile layout on a site I'm developing. The best way to describe this is with the following images:



Chrome browser with inspector



You can see that the is selected and shown with the padding. There is no margin, and yet there is some space between the top of the padding and the bottom border of the sibling. Here is how it is supposed to look in Firefox:



Firefox with Firebug



I am interested to see if the community knows what in the world is going on! As I move through the inspector, I am not able to highlight the offending area, making this very hard to diagnose, as I've said.










share|improve this question
























  • Your images are broken.
    – Ian Atkin
    Dec 6 '12 at 22:00










  • They work for me. What's happening when you click the links?
    – steve
    Dec 6 '12 at 22:10










  • I end up on a page with a broken image icon next to the image title, stats (0 views) and some social links.
    – Ian Atkin
    Dec 6 '12 at 22:11










  • That is strange, they are working for me as I write this, I'm not sure what to tell you. If others who view this post have the same results, I'll host the images myself.
    – steve
    Dec 6 '12 at 22:13















up vote
1
down vote

favorite
1












I am having a very hard time debugging this issue, I may as well find out if others have seen anything similar. I am finding that Webkit browsers are rendering extra space in a stacked menu I'm using for the mobile layout on a site I'm developing. The best way to describe this is with the following images:



Chrome browser with inspector



You can see that the is selected and shown with the padding. There is no margin, and yet there is some space between the top of the padding and the bottom border of the sibling. Here is how it is supposed to look in Firefox:



Firefox with Firebug



I am interested to see if the community knows what in the world is going on! As I move through the inspector, I am not able to highlight the offending area, making this very hard to diagnose, as I've said.










share|improve this question
























  • Your images are broken.
    – Ian Atkin
    Dec 6 '12 at 22:00










  • They work for me. What's happening when you click the links?
    – steve
    Dec 6 '12 at 22:10










  • I end up on a page with a broken image icon next to the image title, stats (0 views) and some social links.
    – Ian Atkin
    Dec 6 '12 at 22:11










  • That is strange, they are working for me as I write this, I'm not sure what to tell you. If others who view this post have the same results, I'll host the images myself.
    – steve
    Dec 6 '12 at 22:13













up vote
1
down vote

favorite
1









up vote
1
down vote

favorite
1






1





I am having a very hard time debugging this issue, I may as well find out if others have seen anything similar. I am finding that Webkit browsers are rendering extra space in a stacked menu I'm using for the mobile layout on a site I'm developing. The best way to describe this is with the following images:



Chrome browser with inspector



You can see that the is selected and shown with the padding. There is no margin, and yet there is some space between the top of the padding and the bottom border of the sibling. Here is how it is supposed to look in Firefox:



Firefox with Firebug



I am interested to see if the community knows what in the world is going on! As I move through the inspector, I am not able to highlight the offending area, making this very hard to diagnose, as I've said.










share|improve this question















I am having a very hard time debugging this issue, I may as well find out if others have seen anything similar. I am finding that Webkit browsers are rendering extra space in a stacked menu I'm using for the mobile layout on a site I'm developing. The best way to describe this is with the following images:



Chrome browser with inspector



You can see that the is selected and shown with the padding. There is no margin, and yet there is some space between the top of the padding and the bottom border of the sibling. Here is how it is supposed to look in Firefox:



Firefox with Firebug



I am interested to see if the community knows what in the world is going on! As I move through the inspector, I am not able to highlight the offending area, making this very hard to diagnose, as I've said.







google-chrome chromium css mobile-ui






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited 2 days ago









fixer1234

17.3k144280




17.3k144280










asked Dec 6 '12 at 20:45









steve

61




61












  • Your images are broken.
    – Ian Atkin
    Dec 6 '12 at 22:00










  • They work for me. What's happening when you click the links?
    – steve
    Dec 6 '12 at 22:10










  • I end up on a page with a broken image icon next to the image title, stats (0 views) and some social links.
    – Ian Atkin
    Dec 6 '12 at 22:11










  • That is strange, they are working for me as I write this, I'm not sure what to tell you. If others who view this post have the same results, I'll host the images myself.
    – steve
    Dec 6 '12 at 22:13


















  • Your images are broken.
    – Ian Atkin
    Dec 6 '12 at 22:00










  • They work for me. What's happening when you click the links?
    – steve
    Dec 6 '12 at 22:10










  • I end up on a page with a broken image icon next to the image title, stats (0 views) and some social links.
    – Ian Atkin
    Dec 6 '12 at 22:11










  • That is strange, they are working for me as I write this, I'm not sure what to tell you. If others who view this post have the same results, I'll host the images myself.
    – steve
    Dec 6 '12 at 22:13
















Your images are broken.
– Ian Atkin
Dec 6 '12 at 22:00




Your images are broken.
– Ian Atkin
Dec 6 '12 at 22:00












They work for me. What's happening when you click the links?
– steve
Dec 6 '12 at 22:10




They work for me. What's happening when you click the links?
– steve
Dec 6 '12 at 22:10












I end up on a page with a broken image icon next to the image title, stats (0 views) and some social links.
– Ian Atkin
Dec 6 '12 at 22:11




I end up on a page with a broken image icon next to the image title, stats (0 views) and some social links.
– Ian Atkin
Dec 6 '12 at 22:11












That is strange, they are working for me as I write this, I'm not sure what to tell you. If others who view this post have the same results, I'll host the images myself.
– steve
Dec 6 '12 at 22:13




That is strange, they are working for me as I write this, I'm not sure what to tell you. If others who view this post have the same results, I'll host the images myself.
– steve
Dec 6 '12 at 22:13










1 Answer
1






active

oldest

votes

















up vote
0
down vote













Can you show your css as well. I guess you have included some top and bottom margin/padding. FF is merging and chrome is not.






share|improve this answer





















    Your Answer








    StackExchange.ready(function() {
    var channelOptions = {
    tags: "".split(" "),
    id: "3"
    };
    initTagRenderer("".split(" "), "".split(" "), channelOptions);

    StackExchange.using("externalEditor", function() {
    // Have to fire editor after snippets, if snippets enabled
    if (StackExchange.settings.snippets.snippetsEnabled) {
    StackExchange.using("snippets", function() {
    createEditor();
    });
    }
    else {
    createEditor();
    }
    });

    function createEditor() {
    StackExchange.prepareEditor({
    heartbeatType: 'answer',
    convertImagesToLinks: true,
    noModals: true,
    showLowRepImageUploadWarning: true,
    reputationToPostImages: 10,
    bindNavPrevention: true,
    postfix: "",
    imageUploader: {
    brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
    contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
    allowUrls: true
    },
    onDemand: true,
    discardSelector: ".discard-answer"
    ,immediatelyShowMarkdownHelp:true
    });


    }
    });














     

    draft saved


    draft discarded


















    StackExchange.ready(
    function () {
    StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fsuperuser.com%2fquestions%2f515924%2fchrome-browser-rendering-unpredictable-mobile-layout%23new-answer', 'question_page');
    }
    );

    Post as a guest















    Required, but never shown

























    1 Answer
    1






    active

    oldest

    votes








    1 Answer
    1






    active

    oldest

    votes









    active

    oldest

    votes






    active

    oldest

    votes








    up vote
    0
    down vote













    Can you show your css as well. I guess you have included some top and bottom margin/padding. FF is merging and chrome is not.






    share|improve this answer

























      up vote
      0
      down vote













      Can you show your css as well. I guess you have included some top and bottom margin/padding. FF is merging and chrome is not.






      share|improve this answer























        up vote
        0
        down vote










        up vote
        0
        down vote









        Can you show your css as well. I guess you have included some top and bottom margin/padding. FF is merging and chrome is not.






        share|improve this answer












        Can you show your css as well. I guess you have included some top and bottom margin/padding. FF is merging and chrome is not.







        share|improve this answer












        share|improve this answer



        share|improve this answer










        answered Feb 10 '13 at 4:36









        jaga3421

        11




        11






























             

            draft saved


            draft discarded



















































             


            draft saved


            draft discarded














            StackExchange.ready(
            function () {
            StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fsuperuser.com%2fquestions%2f515924%2fchrome-browser-rendering-unpredictable-mobile-layout%23new-answer', 'question_page');
            }
            );

            Post as a guest















            Required, but never shown





















































            Required, but never shown














            Required, but never shown












            Required, but never shown







            Required, but never shown

































            Required, but never shown














            Required, but never shown












            Required, but never shown







            Required, but never shown







            Popular posts from this blog

            flock() on closed filehandle LOCK_FILE at /usr/bin/apt-mirror

            Mangá

             ⁒  ․,‪⁊‑⁙ ⁖, ⁇‒※‌, †,⁖‗‌⁝    ‾‸⁘,‖⁔⁣,⁂‾
”‑,‥–,‬ ,⁀‹⁋‴⁑ ‒ ,‴⁋”‼ ⁨,‷⁔„ ‰′,‐‚ ‥‡‎“‷⁃⁨⁅⁣,⁔
⁇‘⁔⁡⁏⁌⁡‿‶‏⁨ ⁣⁕⁖⁨⁩⁥‽⁀  ‴‬⁜‟ ⁃‣‧⁕‮ …‍⁨‴ ⁩,⁚⁖‫ ,‵ ⁀,‮⁝‣‣ ⁑  ⁂– ․, ‾‽ ‏⁁“⁗‸ ‾… ‹‡⁌⁎‸‘ ‡⁏⁌‪ ‵⁛ ‎⁨ ―⁦⁤⁄⁕