3

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: https://i.stack.imgur.com/MYsIi.png As you can see the text is nicely aligned with the start of the input field.

But in Firefox I get this: https://i.stack.imgur.com/MKC4r.jpg

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.

Moishy
  • 3,560
  • 3
  • 23
  • 42
Strings
  • 133
  • 1
  • 2
  • 9
  • probably because the search input field has padding or something, try padding:0 on the search input. It's probably a simple issue, can link me your site so I can debug it or make an example on http://www.jsfiddle.net – Huangism Aug 09 '13 at 19:00
  • 1
    use the respective browsers' dev tools and look at the box model of the elements—see if something has a different computed padding/margin – Eevee Aug 09 '13 at 19:05
  • Adding/removing padding from the search input only affects the search input text. – Strings Aug 09 '13 at 19:07
  • Eevee, Chrome's box model seems to have 320px set for margin left and right. Firefox has it at 0... – Strings Aug 09 '13 at 19:11
  • Explicitly set the margin left and right, and both browsers should behave the same. – MattDiamant Aug 09 '13 at 19:22

4 Answers4

3

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

Chad
  • 492
  • 5
  • 14
  • The UI toolkit he is using comes with resetting css. – MattDiamant Aug 09 '13 at 19:03
  • 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). – Chad Aug 09 '13 at 19:08
3

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?

bhattamer
  • 121
  • 5
1

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%;}
 }
hemant singh
  • 149
  • 3
  • 7
0

font size in % can override the padding settings . Playing with it can help the padding differences

Matoeil
  • 6,851
  • 11
  • 54
  • 77