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
How to Make a Series of <P> Elements Display Horizontally
Multiple Attributes in Ng-Style
Angular 2 - Jquery | Adding Styles (Top/Left) with a Mouse Position
Chrome Print Preview Doesn't Load @Media Only Print Font-Face
CSS Div Center Multi-Line Text Vertically and Horizontally with a Background Image
How to Write One CSS Rule for Several Prefixed Selectors
Vertical Align Multiple Image with Different Height
Javafx Style All Nodes of The Same Type, E.G., Vbox
Cross-Browser CSS for Left Align and Right Align on The Same Line
Set Width of "Dialog" Widget to a Percentage of The Page in Vaadin 14
CSS: Styling When Element Has Two Classes
Why Does Visual Studio 2013 Recognize CSS3 Display: Flexbox, But Not Flex