CSS Text Padding Difference Firefox Vs Chrome and Others

difference between Firefox and Chrome padding

If your .button is a button this might be a mozilla inner focus thing... try this?

.button::-moz-focus-inner { border: 0; padding: 0; margin:0; }

Firefox vs Chrome CSS padding and margin difference

I don't know what the exact issue was with the difference between the footer in Chrome and Firefox, but I set the height of the footer to exactly 27px, which is the height of the icons, to fix the problem.

CSS text padding difference Firefox vs Chrome and others

Add display: inline-block; to your .tags li a

This won't affect the well-behaving browsers, but will fix FF

Padding differences between Chrome and Firefox

Increasing your #jsn-page width to 961px makes 31px padding on your links work in chrome.

Edit:
See Dennis' response below. A fixed width for each item will be the most reliable.

.main-menu > li > a { 
width:160px;
text-align:center;
padding: 12px 0px 20px 0px;
}

CSS text field difference between chrome and firefox

It's a line-height problem.

Try:

.form-signin input[type="text"],
.form-signin input[type="password"] {
font-size: 20px;
text-align: center;
height: auto;
margin-bottom: 20px;
padding: 20px 9px 20px;
line-height: 24px;
}

24px or more or less

Firefox vs Chrome padding

I believe the difference you are seeing is a difference which comes from the user agent stylesheet, browsers have their own default stylesheets which they use to render things like input elements. In your case it is probably a difference in the padding applied to the input element. You should specifically set eg: padding: 0px; or padding: 1px; on the input element, and then work out how to get it to look right for an input with the specified fixed padding. This will then override the styles set by the user agent style sheet.

Update

I moved to my Windows PC to have a go at fixing it. One way to fix this using one of the vendor specific prefixes from the answer linked in the comments is to add -moz-padding-end: 6px; to .highlighter to compensate for the differences in padding between browsers.

Here's a jsFiddle which fixes your issue, a footnote tho, I can already tell you that this probably won't fix it on Chrome for OSX, which was also rendering things the Firefox way.

Another way to fix this is by adding -moz-padding-start: 1px; -moz-padding-end: 1px; to input, but doing so somehow changes the bottom padding as well, which makes things look not as pretty in Firefox as with the other fix.

CSS Padding variations between Chrome, Firefox + Safari

Use CSS reset to avoid this kind of problem. CSS Reset is important in removing inconsistent margins, paddings, line-heights, and other attributes that can cause your web pages to look differently across various browsers. Create a different CSS file and name it 'reset.css' and add it at the top of your all other css file's links using

<link rel="stylesheet" href="your_domain/css/reset.css">

Go to this link to get a ready made reset CSS file and more at here all about CSS reseting.



Related Topics



Leave a reply



Submit