I have a dropdown list in my application whereby in order to center it I must add padding-top 10px while on Mozilla Firefox but on google chrome it does not need the padding. How can I target the select list to set this browser specific. I was hoping I could have done something like the following:
select {
-moz-padding-top: 10px;
-webkit-padding-top: 0px;
}
Any ideas of how I could get round this? Fiddle of problem shown below, if you check this in Chrome and then Firefox, I want it so that text is always in middle
http://jsfiddle.net/uHDa6/
Note: the first part of this answer is now obsolete, as this feature has been removed from Firefox. For the real answer, read on from "However".
The answer to your question is: yes, it's possible to put Mozilla-specific CSS in a stylesheet. (Not in an inline style attribute.)
In this case, you would write
#-moz-document url-prefix() {
select {padding-top:10px;}
}
which is simply the Mozilla-prefixed version of the #document rule, that is not recognised by other browsers.
However, the actual solution to the problem of the mismatched text position is to not set the height, but only the padding of the select. No hacks.
style="font-size: 14px; padding: 11px 0 11px 5px;"
That has the desired effect in all browsers. See new fiddle.
Throughout my website, I have many <table>s in which there is a specific column we want to have squeezed to it's minimum possible space (without having it's text wrapped). Other sibling cells share the rest of the space automatically.
I'm using the following trick and it works in all browsers except IE7-. (At this time I actually only care about IE7)
table {width:100%;}
table td.min-col {white-space:nowrap; width:1px; }
jsFiddle link: http://jsfiddle.net/vm8gc/23/
If you try this in IE7 you will notice it acts differently (not expected behavious). -- see screen capture below.
Can anyone think of a fix for IE7 to achieve this?
Attachments:
All other browsers:
IE7:
CSS 2 Version
For some reason Internet Explorer seems to ignore white-space on TDs. Best way around the problem is to use a span inside the TD.
<td><span style="white-space: nowrap;">This should not wrap</span></td>
As usual IE doing it's own thing ;)
For info on white-space support, see here:
http://www.quirksmode.org/css/whitespace.html
PRE Version
An alternative which would have better support with older browsers would be to do the following:
<td><pre>This will not wrap</pre></td>
And then have your pre element set-up to either be styled in the same way as your normal text or enable it to inherit style from it's parents (inheriting probably has less support that just specifiying the style):
td pre { font-family: inherit; font-size: inherit; color: inherit; ... }
check this page out: http://jsbin.com/itufix with IE (page automatically enables IE7 mode).
Here you'll find examples how inline elements (input and span) are rendered as with display block. All elements margins and padding is set to 0.
If you use Developer tools for IE (IE8-9) you could have noticed that input shows offset: 1.
Can anyone explain what is actually happening and how to fix this?
NOTES
Adding float to input fix this, but this is not an option. I need to get this done without float.
Input/span and its div parents property hasLayout value is true!
Any info related to this bug is welcome.
UPDATE:
Here are more examples of how styles are used: http://jsbin.com/itufix/13. Each field can have description under it, plus the whole div.form-item may float (in case I need more than one field in line)
If you can't float the input (why?) then you could do this:
*+html input {
margin-top: -1px;
margin-bottom: -1px;
}
http://jsbin.com/itufix/5
That's using a CSS hack so the workaround is only applied in IE7.
Looking at your CSS, I see the following:
div.form-item{
padding: 0 1px;
}
Changing this to padding:0; seems to remove all padding on the form fields to my eyes. See:
http://jsbin.com/ojeros/2/
Or am I missing something?
This hadn't hit me until now (and this is not only in webkit browsers). On all texts in like p tags, h1 tags etc... there's an extra space over and below the text.
In chrome I found this:
user agent stylesheet
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
This makes the alignment wrong in some places. And yes I'm using a reset stylesheet and no padding or margin are added. Pretty much a basic setup. Why is this and how do I solve it?
You can also directly modify those attributes like so:
-webkit-margin-before:0em;
-webkit-margin-after:0em;
Works for me in Chrome/Safari. Hope that helps!
These -webkit-margin(s) are overwritten by margin: 0; padding: 0;. Do not worry about them.
Extra space? Maybe you've set line-height:?
I had the same issue. Displaying correctly in Firefox but not Chrome.
I had a closer look at http://meyerweb.com/eric/tools/css/reset/ and found that I hadn't declared a general line-height for the body tag in my stylesheet. Set it to 1.2 and that recreated the correct layout in both browsers.
Just remove the whitespace between tags e.g.
<p id="one"></p>
<p id="two"></p>
becomes:
<p id="one"></p><p id="two"></p>
I had a same problem. Extra space between menu links. None of the above solutions worked. What worked for me, was negative margin.
Just do something like this:
margin: 0 -2px;
NEW EDIT:
This has nothing to do with -webkit-margins. Most likely your problem occurs with inline elements. This happens because you have spaces or line breaks between your inline elements. To fix this, you have many options:
remove all spaces and line-breaks between inline elements
skip element closing tag - for example </li> (HTML5 does not care)
negative margin (as stated above - problems with IE6/7 - who cares, upgrade ;)
set font-size: 0; to problematic inline element container (has issues with android and if font-sizing with ems)
give up inline and use float (this way you loose text-align:center)
Explained more specifically and examples by CHRIS COYIER
I was having this same problem with my <h3> tag. I tried setting margin:0;, but it didn't work.
I found that I was habitually commenting out lines in my css by using //. I never noticed it because it hadn't caused any problems before. But when I used // in the line before declaring <h3>, it caused the browser to skip the declaration completely. When I traded out // for /**/ I was able to adjust the margin.
Moral of this story: Always use proper commenting syntax!
For me, the picture was:
* {margin:0;padding:0;}
Firefox (FF) and Google Chrome both put 0.67em margins regardless.
FF showed its default margin, but crossed out, but applied it anyway.
GC showed its default margin (-webkit-margin-before...) uncrossed.
I applied
* {margin:0;padding:0; -webkit-margin-before: 0; -webkit-margin-after: 0;}
but to no avail, although GC now showed its default margin crossed.
I found out, that I can apply either
line-height: 0;
or
font-size: 0;
to achieve the desired effect.
This makes sense, if one assumes, that the margin is of the .67em - type.
If anybody could give an explanation, why browsers make our lives miserable by applying a line-height dependent, non-removable margin, i would be really grateful.
For me in Chrome it was some 40px padding-start that was causing this. I did the following that worked:
ul {
-webkit-padding-start: 0em;
}
-webkit-margin-before: 0em;
-webkit-padding-start: 0;
-webkit-margin-after: 0em;
This solved it for me when I was having this exact problem.
In your css file add the following.
* {
-webkit-margin-before: 0em !important;
-webkit-margin-after: 0em !important;
}
'*' selects all css elements and overrides the webkit-margin.
Modern properties
The following properties should be used instead.
margin-block-start: 0;
margin-block-end: 0;
It's very rare to need to use these at all, but the following can be useful to avoid extra space after the last paragraph in a series.
p:last-child
{
margin-block-end: 0;
}
I also found that even in Chrome you can trigger the 'ghost margin' by setting margin to inherit in some cases.
https://developer.mozilla.org/en-US/docs/Web/CSS/margin-block-start
I had the same problem. Suddenly one out of my three table cells containing data its header was moved down a little bit. My problem was simply solved by adding this:
table td
{
vertical-align: top;
}
Seems like some other element in a 'higher' style sheet was telling my data to center itself in the cell, instead of just staying on top.
I guess its just stupid, and wasnt really a problem... but the next person to read this topic might have the same stupid error as i did :)
Take care!
If user agent stylesheet is kicking in, it is because the tag property was not properly defined in your css stylesheet.
Chances are that a typo, forgotten bracket or semicolon is breaking up your stylesheet BEFORE reaching the tag property settings your page later refers to or "needs".
Run your CSS thru error checking, like CSS LINT and fix whichever errors are eventually detected.
Imagine I'm having a DIV. I want to display it in a row with other divs, so I'm giving it display: inline-block along with other style definitions in a CSS sheet.
Now Internet Explorer wants to have display: inline; for the behavior I want.
How do I give Internet Explorer a seperate styling command to overwrite the definition for good browsers, so only IE will have display: inline;. Due to technical limitations I cannot use <![If IE] -->-stuff in HTML, I need to stay within the CSS file.
You can use selectors like so:
\9 – IE8 and below, * – IE7 and below, _ – IE6
So in your case:
*display: inline;
You can simply add this to the rest of the css:
div{
display: inline-block;
// some;
// other;
// css;
*display: inline;
}
Read my blog post on this.
Update
IE version 5 till 8. (They are all
affected) – Cobra_Fast 1 min ago
So in this case, you'd use
div{display\9:inline;}
A horrible way to do it is: http://www.webdevout.net/css-hacks
Even though you cannot change the HTML I'd read up on http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/
IE actually has quite good support for inline-block - if the element is originally an inline element. So try using a span instead of the div.
To make inline-block work on block-level elements in IE7, I frequently add this to my answers:
Overlapping inline div
One list, simple float left, different cell sizes
How do I center a list as shown here?
multi-line tabs
Remove margin between rows of overflowing inline elements
How can I wrap content around a UL CSS Menu so content is seamless?
I sure hope what I'm suggesting everywhere actually works :D
See: http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/
selector {
display: inline-block;
*display: inline;
zoom: 1;
}