when i use
cursor: url(xxx.ico)
it works fine with chrome and FF.
but when i try to use IE9 when i hover the div - the cursor "jumps" 30px up.
why is that?
*( i tried to use 32X32 and 16X16 icons - and it's the same)
The CSS:
.main_div {
cursor:url(/static/IMG/hand.ico),auto;
}
thanks!
Related
I'm utilizing Bootstrap's glyphicon font to render icons within menu links. They have a CSS :hover effect that causes them to change color upon hover. For most of the glyphicons this works perfectly fine, but for some reason, when using the "open folder" icon, the right portion of the icon is not properly colored on hover -- it remains the default, unhovered color.
It's only happening on Safari on Mac (seems to work fine on Chrome). I've attached a screenshot. Any thoughts?
Adjusting letter spacing seems to work.
.glyphicon{
letter-spacing:3px;
}
http://jsfiddle.net/Ru8ME/8/
Edit: as suggested by Alex, increase the letter-spacing CSS attribute:
http://jsfiddle.net/Ru8ME/12/
From the fiddle:
.glyphicon {
font-size: 40px;
color: #0C6;
letter-spacing:6px;
}
.glyphicon:hover {
color: #F00;
}
I can confirm this works on Safari 7.0.2 and Chrome 33 for OS X!
a quick hack you could do is to add a padding.
.glyphicon-folder-open {padding-right: 10px;}
http://jsfiddle.net/5Mjq7/
It looks the way I like in chrome and safari. but it looks very strange in firefox. It appears to be cut off.I wonder if there is better way of archiving the same results as in chrome and safari for this other than use an actual image of square box. Any ideas? Hacks?
http://jsfiddle.net/vf6gh/
.square {
border:1px solid #0C6DBE;
background-color:#4293D9;
padding:5px;
}
<img class="square"></img>
Firefox applies some CSS to broken <img> tags:
img:-moz-broken:before,
input:-moz-broken:before,
img:-moz-user-disabled:before,
input:-moz-user-disabled:before,
img:-moz-loading:before,
input:-moz-loading:before,
applet:-moz-empty-except-children-with-localname(param):-moz-broken:before,
applet:-moz-empty-except-children-with-localname(param):-moz-user-disabled:before {
content: -moz-alt-content !important;
unicode-bidi: -moz-isolate;
}
If you're really planning to use <img> to simply show an square as you want, rethink it. Those tags were not made for this, and Firefox is a proof of this.
For knowledge: user-agent CSS marked with !important cannot be overriden.
i use Allegro fonts for top menu and got problem when i hover on it the color not display full width in Chrome and Safari :(
you can test on this link
http://preview.86solutions.com/fairpart
There is something wrong with your font I guess.
When you add some more padding-right to the element it looks fine.
.menu a {
color: black;
padding-right: 20px;
}
see it yourself:
Add a border to the element and it will cut off on the right side.
Looking okay in both chrome and IE.I don't know what version are you using now, I have checked this demo in chrome 19.0.1084.82 and IE8 and IE9.I have seen your code and everything looks good.
BUT, IE does not support the font-family inherit property.If you still have the problem you should modify your style.css like this :
.menu a:hover,.menu a:active {
font-family: "Allegro"; /* because IE doesn't suprort inherit */
text-decoration:none;
color:#c4c04d;
}
Hope it helps !
I have this css to put an icon after each external link:
a[target="_blank"]:after {
background: url("images/external_icon.png") 0 0 no-repeat;
border: 0 none;
content: "";
padding: 0 14px 0 0;
}
If I would to change to :before instead, the icon will appear in front of the link instead. So far, so good.
But in my right-to-left version of the site, while using direction: rtl;, the icon still appears to the right of the element, instead of being "flipped" to the other side. Changing to a :before will still make the icon appear to the right of the element.
Is this a known FF bug? Is there any other solution?
(Works fine in Chrome)
Ok, so I found a solution. Make it inline-block instead.
display: inline-block;
height: 13px;
width: 13px;
Simple solution, but getting there isn't aslways as easy.
I still feel like the css from the question might be a browser bug?
The Firefox behavior seems to be correct: the rendering of the :after should be the same as the rendering of an empty span with those styles inserted at the end of the a[target="_blank"]. If you try that, you get identical behavior in Chrome and Firefox, and it matches the Firefox behavior for :after.
You may want to file a WebKit bug, though.
I have the following:
<div contenteditable="true">Item 2</div>
In webkit I can easily style this with css. Firefox is ignoring the css, and making the contenteditable div white and resizable.
How can I modify the css for contentEditable in Firefox. I want the background to be transparent and to disable resizing, and the resizing handle bar.
Thanks
You can match the div with this code
div[contenteditable=true] {
background: rgba(0,0,0,0); /* transparent bg */
resize:none; /* disable resizing */
}
div[contenteditable="true"] {
/* your style here */
}
simone's answer was mostly correct except there needs to be quotes around "true" in [contenteditable="true"]
Turns out that if you use position:absolute FF auto adds resizers and a grab handler and sets the background to white. You can't override these seetings, well only resizers. Another -1 for FF.
div[contenteditable] {
background: white;
}
When overriding styles for a contentEditable panel, the css selector I found that firefox was adding a css-selectable "focus-ring" to my root contentEditable node
:-moz-focusring:not(input):not(button):not(select):not(textarea):not(iframe):not(frame):not(body):not(html) { outline: 1px dotted;}
Try variants of:
-moz-focusring or -moz-focusring[contentEditable='true']
You may want the aforementioned styles:
background: rgba(0,0,0,0);
resize:none;
But, you may need to firebug lookup the -moz specific resize parameter to disable.
For cross-browser stylesheet tests, just browse to this test data url:
data:text/html,<div style='position:absolute;left:100;top:50;width:200;height:300;background-color:rgb(50,50,80)'><div contenteditable>Test<br/>Test </div></div> <style contenteditable>head, title, style {display: block;} :-moz-focusring{background: transparent}</style>
A transparent background gif or png should do the trick