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.
Related
In Firebug, CSS would automatically be converted from longhand into shorthand.
Example:
div {
padding-top: 10px;
padding-bottom: 10px;
padding-left: 0;
padding-right: 0;
}
would then be converted by Firebug into:
div {
padding: 10px 0;
}
However, now when I use Firefox Developer Tools, there is no auto CSS shorthand conversion.
Is it possible to get the new Firefox Developer Tools to automatically convert longhand CSS into shorthand CSS (like how Firebug does)?
No, it's not possible. Firefox Developer Tools displays properties exactly as they are declared in each rule in the stylesheet; in that sense, it doesn't display properties per se, it displays declarations.
If the rule has a padding shorthand declaration, the inspector reflects that shorthand (and allows you to expand that shorthand into its longhands so you can manipulate them individually). If the rule has two of four longhand declarations for padding, the inspector reflects just those two longhands.
This is by design, and prevents the sort of confusion that automatically rewriting longhands into shorthands for the sake of brevity creates (namely, the fact that padding-top: 10px; padding-bottom: 10px is not equivalent to padding: 10px 0).
This is not possible in the Firefox DevTools. It's by design that the DevTools display the property declarations as they were entered. One reason for that is because they indicate which declarations were changed by the user (via a small green line at the left side of the declaration).
Firebug, on the other hand, output what's returned by the CSSRule.cssText API, which outputs a serialization of the CSS rule and turns longhands into shorthands where possible. So, Firebug did the opposite of the Firefox DevTools and always displayed the shortened version of a CSS rule were applicable and there was no way to show them the way they were authored.
So, if you want to get a short version of your CSS rules, you need to call its cssText getter via JavaScript.
I just finished my portfolio site, which is my first attempt with html5 and it looks great in Chrome. But when I tested it in IE and FF, exept IE9, there are some major differences that all occur in the header. I think this is because the header has a fixed position. I did this because of the menu. I created a one pager and if I didn't set the position on fixed, the menu disappeared when you clicked on a menu item.
A second error is that with IE all the images get a blue border, which doesn't appear on Chrome.
And a third error is the font in the header is also different with IE. I used an #font-face font for it.
My HTML and CSs code validates on W3C.
You can find the website at www.nathaliedehertogh.be
Can someone please help me out with this one.
All you need to do is add clear:both to #menu, and border:0 to img.
The blue outline is default in some browsers to show that the images are links.
You need a clear in your header to allow the content to flow as wanted after.
The blue border for IE simply needs a CSS setting:
img {
border: 0;
}
As for the font, some fonts don't read correctly in IE. The error I get is:
#font-face failed OpenType embedding permission check. Permission must be Installable.
You don't have a height defined in your div 'kopregel'.. this is causing an issue since you have elements with heights defined inside it.
NOTE: I see it all broken in FF, stuff is being smooshed to the right.
The problem with your header is you need the clear function in your css.
Here is the new and edited code.
#content, hr {
clear: left;
margin-left: auto;
margin-right: auto;
width: 80%;
}
No issue with fixed positions this is just a common issue, hope this helps let me know!
Another major Difference Chrome vs IE check this out
http://technofizzle.blogspot.in/2013/04/chrome-and-ie-display-image-completely.html
Context
Firefox 14 (and 13); specific CSS styles being ignored under certain conditions
The Problem
Using the following CSS:
*
{
outline:none;
-moz-outline:none;
-moz-user-focus:ignore;
}
JSFiddle
Firefox 14 (and 13) ignore these styles when using Tab to switch between select elements. Clicking these elements after using Tab still displays the outline.
Notes
Specifically styling select instead of * has no effect.
This only occurs with select elements.
The Question
Is this a bug or intended behavior?
Are there any other CSS styles that need to be used to prevent the outline from appearing indefinitely?
This is a known bug which has sparked several Stackoverflow discussions. From what I have read, Mozilla have deemed that CSS is the wrong place to handle this element behaviour, and have opted instead to handle it by other means. At this time the only solution is to either use tabindex="-1" or to set the element to display as something else, and restyle the look and feel of a droplist — but be warned, this opens a can of worms in itself.
If you do opt to do this, I have had success in the past with the following kludge:
select {
appearance: normal;
-webkit-appearance: none;
-moz-appearance: radio-container; /* renders text within select, without arrow chrome */
}
Appearance tells the browser to display the element as something else, but this is inconsistent from vendor to vendor. appearance: normal; is the spec, whilst webkit replaces normal with none. -moz-appearance: radio-container; has been the only way I have found to display the text within the chosen select option, whilst removing the arrow chrome for a fully customised droplist. However, try experimenting with the available options until you find something that works and doesn't add the focus ring you wish to customise. Internet Explorer will require further kludge to bend the select to your needs. Entirely possible, but out of scope for this question and answer.
So far the only way I've found to overcome it is to set the tabindex='-1' (see fiddle) which, of course, takes the element completely out of the tab selection chain. That would not be good for user interface, and my guess is not exactly what you desire (I assume you want to keep tab accessibility but just do your own styling for highlighting).
Another solution is to set outline: none and set a box-shadow. For example:
.my_elements:focus
{
outline: none;
box-shadow: 0 0 3px 0px red;
}
Use
*:-moz-focusring {
outline: 2px solid blue;
}
will give you similiar to chrome
Also, if using mac, you also need to enable this:
How to allow keyboard focus of links in Firefox?
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?
link text
In Safari/Chrome it has extra spacing on the left/top of ol's, blockquotes and other elements.
I can't isolate this, however when I look in the web inspector in Safari, its picking up a margin-left: of 26px on some elements. I have not specified any such rules, so is this a bug in Web inspector?
Can someone enlighten me as to why these exta spacing problems are occurring? Thanks!
That margin-left:26px is the "computed style" of your styling margin-left:2em. Hence why it's under Computed Style section in Safari's Web Inspector.
So if you change your margin-left to some other values the computed-style pixel value will also change too.
Anyway there are indeed extra padding! And it's caused by the user agent stylesheet (-webkit-padding-start:40px). Reset this style by setting padding:0 on your ol and any others elements you want.
A good way to prevent this problem from happening again and develop without worry is to reset your css. A basic reset would be:
* { margin:0; padding:0; }