html - How do I fix CSS padding issues between Firefox & Chrome? -
been @ hours.
i've been using excellent ui toolkit: http://getuikit.com , far it's been great.
the problem styling results between chrome , firefox set padding , achieve result in chrome: http://i.imgur.com/dmv13xw.png can see text nicely aligned start of input field.
but in firefox this: http://imgur.com/hzryakg
i've started it's frustrating run such intractabilities on!
the html markup 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 bhutan including safety , security, entry requirements, travel warnings , health.</p> </div> </div>
and css i'm applying it:
#results-container { margin-top: 9px; margin-bottom: 6px; padding-left: 40px; padding-right: 160px; }
i've tried inserting tons of snippets around et al nothing seems work. tried seemingly infinite variation of css resets too, ui kit using integrates normalise.css anyway.
it's annoying because seems such trivial amount of html/css.
i'm guessing it's moz/webkit css properties wouldn't know begin rectify issue.
i think bug other padding/margin differences between ff , chrome. can try run site through w3c validator, http://validator.w3.org/
sometimes can catch strange bugs caused mix matched or unclosed elements.
another thing noticing results appear rendering in same spot in both images relative logo. perhaps issue input length or surrounding element?
Comments
Post a Comment