How do I fix CSS padding issues between Firefox & Chrome?

Question

Been at this for hours.

I've been using this excellent UI toolkit: http://getuikit.com and so far it's been great.

The problem is styling my results between Chrome and Firefox I set the padding and I achieve this result in Chrome: http://i.imgur.com/dmV13Xw.png As you can see the text is nicely aligned with the start of the input field.

But in Firefox I get this: http://imgur.com/hZRyakg

I've only just started really so it's frustrating to run into such intractabilities early on!

The HTML markup for the result bit is:

<div class="results-sec`enter code here`tion">
<div id="results-container" class="uk-container uk-container-center uk-width-1-2">
    <div class="result">
        <a class="result_title" href="#">Bhutan travel advice</a>
        <div class="result-url">https://www.gov.uk/foreign-travel-advice/bhutan</div>
        <p class="result-summary">Latest travel advice for Bhutan including safety and security, entry requirements, travel warnings and health.</p>
    </div>
</div>

And the CSS I'm applying to it:

    #results-container {
      margin-top: 9px;
      margin-bottom: 6px;
      padding-left: 40px;
      padding-right: 160px;
}

I've tried inserting tons of snippets from around SO et al but nothing seems to work. Tried a seemingly infinite variation of CSS resets too, but the UI kit using integrates normalise.css anyway.

It's annoying because it seems like such a trivial amount of HTML/CSS.

I'm guessing it's something to do with moz/webkit CSS properties but I wouldn't know where to begin to rectify this issue.

Solution 1

I think your bug is something other than padding/margin differences between FF and Chrome. Can you try to run your site through the w3c validator, http://validator.w3.org/

Sometimes that can catch strange bugs caused by mix matched or unclosed elements.

Another thing I am noticing is that the results appear to be rendering in the same spot in both images relative to your logo. Perhaps the issue is with your input length or some surrounding element?

Solution 2

What you need is called a CSS reset. http://meyerweb.com/eric/tools/css/reset/

This isn't going to fix your issues (debugging is all you can do at this point) but in the future you should use a reset before you start and it'll prevent having cross browser issues (for the most part).

Solution 3

if you have no option left with u can use browser specifics

this is for chrome

@media screen and (-webkit-min-device-pixel-ratio:0) {
.example-box {
  width: 76.4%;
 }
}

this is for mozilla

@-moz-document url-prefix() {
 .example-box {
   width: 77.6%;}
 }

Comments

[MattDiamant]

The UI toolkit he is using comes with resetting css.

[Chad]

Ok, sorry didn't realize it had one built in. Seems odd that they'd be interpreting the code so differently. I almost feel like it'd have to be some sort of error in the code that gets processed by google but not by mozilla (I've had this happen before).

[Strings]

There was some weird div left over from before that was causing the width to vary. An odd one.