I am working on a pure HTML/CSS layout. I have a dive with an ID, I have the following css code:
#headerTitleLeft:hover
{
background: lime;
}
This works with OPERA browser but not with IE9. IS there some directive to use or an alternative way?
Try using background-color instead of the shorthand background and/or the hexadecimal representation of lime.
Related
I want to have all my svgs to have the same plain color. So I use
svg *{
fill: #ccc;
}
But I want to get default fills on :hover. How can I disable the fills and get defaults back?
You can do this using :not() and effectively style "not hovered".
svg *:not(:hover){
fill: #ccc;
}
The above might work, here's a quick CodePen that you can play with: http://codepen.io/anon/pen/rrqyAx
You can learn more on the Mozilla Dveloper Network entry for :not()
Alternatively (I was curious) you could use fill:inherit - which is just as valid. In this case, the color used will be inherited from the fill value of the parent svg, which can be set in css also.
svg *:hover{
fill : inherit;
}
I've added an svg styled in this manner to the CodePen.
I know about:
#-moz-document url-prefix()
But how about the inverse? Specifically, I'm having an issue with some mobile devices adding a border radius to text input elements which I don't want. If I set border-radius: 0 Firefox renders it like this:
Which just looks terrible. I'd just like to be able to apply a rule to everything but not Firefox since it seems to be very picky about messing with form element styles.
Is this what you're looking for perhaps? I use this reset for webkit browsers that add that border-radius, this does not affect FF:
input[type="text"] {
-webkit-border-radius: 0; }
I have a paragraph on my page:
<p class='errorMessage'></p>
It has css property
.errorMessage
{
color: red;
}
That works fine in chrome and safari but text is still black in IE and Firefox. How can I solve this problem?
Try to use
.errorMessage{
color:red !important;
}
If this works, another css style overrides your rule. Otherwise there must be something wrong with the document (i.e. incorrect style tags,...).
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 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