http://jsfiddle.net/PFBqq/
On Windows XP, it's working fine in Firefox 3.6 and Safari 4, but it doesn't seem to be working in the latest version (13) of Chrome. Unless I'm mistaken, I remember it used to work?
Anyone have a hack/fix for this?
The select and option elements are hardly stylable and have a lot of issues in different browsers.
So, if you really want the indentation the only way to do it without writing custom select is adding s to the start of the lines like this.
However, there are downsides of this hack: with the spaces at the start of options you couldn't jump to the desired options from the keyboard.
It will work if you specify line-height
select{
height:34px; //optional
line-height: 34px;
text-indent: 20px;
}
Please look at this fiddle
Hope it solves your issue
Related
I have a button
<button class="close"></button>
With this css
button.close {
font-size: 14px;
}
button.close::-ms-clear {
display: none;
}
But i cant make the ms clear work. What is wrong?
from the developer.mozilla.org
Non-standard
This feature is non-standard and is not on a standards
track. Do not use it on production sites facing the Web: it will not
work for every user. There may also be large incompatibilities between
implementations and the behavior may change in the future.
-ms-clear can only be applied on an input with type text. It is non-standard and only works in IE 10, 11 and Edge.
This pseudo-element is used to modify a little button which is visible by default to clear input boxes. You can see it working here, if you have an edge browser. Just click into the textbox and write something and a little cross will appear on the right side of the input box.
In Safari, Chrome, and Opera a <select> box with a size of 20px looks like this:
But in Firefox, however, it looks like this:
Does anyone know why this is happening or how to fix it? Thanks!
EDIT: Here's a Fiddle so you can test it yourself.
EDIT2: This appears the be a Mac OS X problem, as someone with Windows did not see it.
I would suggest using em it will give you more standard across all browsers. 20px = 1.25em
Here are other options to chose from
You can turn off the default styling for select boxes in webkit and Firefox with these lines:
select {
-webkit-appearance: none;
-moz-appearance: none;
}
However, it's a finicky and non-standard solution. The font-size will change, but you'll lose all the other stuff, too, including the arrows.
Select boxes are notoriously difficult to style. There are some great third-party libraries like Selectize, Chosen, or select2, which actually replace the select element with a style-able DOM tree and use events to manipulate the select behind the scenes. You may find these easier to use.
I was wondering if someone can confirm that Chrome doesn't support transitioning the letter-spacing property. I wasn't able to find any documentation on this, but it doesn't seem to be working: http://jsfiddle.net/gjJwz/
That example works as expected for me in Firefox, but in Chrome 28.0.1500.95, the change is abrupt (no transition). I'm testing on Windows 7.
Just increase your `letter-spacing and you'll see it
a:hover {
letter-spacing: 50px;
}
http://jsfiddle.net/gjJwz/1/
Um, it works fine for me, I'm using the same version of chrome. Keep in mind that you can't gradually get to 1px of letter spacing, it would have to be a bigger value to ease in.
Chrome was recently updated and now some of my sites with a style of word spacing is wrapping to the second line with the last word. You can view it at the link below, with the header (H1) tag. Is this a bug or is there a work around? This is on Windows 7 64 bit.
http://exposurebasketballtournaments.com/3008/3rd-4th-boys-basketball-tournament
I am using chrome canary(V.26 on Windows 7) and I see this effect as well. I used chrome inspector to see if it was in the css code and it seem that this code
in element
<div class="event-details">
body.event .event-header .event-details {
float: left;
}
is causing this effect, correct me if I'm wrong :)
EDIT
If this is your site you can prevent it by adding this to the code min-width: 540px;
or just removing float:left
This question on SO might be similar to your problem.
It appears to me that the width of the element is less than the width of the text so it is wrapped. Try increasing the size of the element.
This is a bug that have been reported, please refer to Issue #170226 for more information. It has not been fixed as of Chromium Version 27.0.1413.0 (182441).
Before it is fixed, I suggest applying Chrome specific CSS to set word-spacing: 0; to elements that suffered from the problem. To do so, checkout CSS Browser Selector.
Where am i doing wrong?
This is the normal print preview:
But I want to see this picture (without dragging margin arrows)
This is the css codes and preview:
Yes. It is possible to alter your margins in a page printout. The rule would look like:
#page {
margin: 0;
}
This will not work in Firefox as of now. If you check their developer reference on the #page CSS support, you can see what browsers do support #page.
The best you can do is set #page margins. Keep in mind, however, that you can and most likely will be overruled if you set margins to 0.
Thanks ! works well on chrome
#page {
margin: 0;
}
I don't think it is actually possible to do this, because you'd be overruling the defaults on the user's computer. As far as I know, a web application doesn't have the access rights to alter something like printer settings without some kind of ActiveX script in IE.
I had a similar problem a while back, and ended up having to generate a PDF on the fly using TCPDF. In the end that worked out better, because you have greater control over the layout.
I'm prevented from upgrading a computer from Windows XP to something more recent, so basically I'm stuck with IE8.
I found that on IE8, page margins will always be a minimum of 6.01mm left and right, and 5mm top and bottom. No matter what I do, even using #top-left right and centre rules inside the #page rule, it will still default to the values above.
It may be easier to create the stylesheet to take into consideration this limitation on the print size.
It may also help to put the IE hack \9 in front of the CSS class property value, duplicating the property may also help in some cases, (but won't affect the margins of the page), such as:
.aDiv {
margin: 10mm;
margin: 15mm\9; //this \9 hack will set that value only on IE8.
}
I know there are other hacks similar to this, such as \0 but I admit don't fully understand them. \9 works for me in IE8 in some situations.