I was wondering how to display my CSS content in FireFox. It doesn't seem to be displaying correctly. Here is the code:
div.images:hover {
content:url(http://domain.com/images.png);
}
Why does the content hover not display right on modzilla?
The content property is meant for the :before/:after pseudo elements. Therefore it isn't suppose to work on something like div.images:hover.
Instead, use the background property to add the styling:
div.images:hover {
background-image: url(http://domain.com/images.png);
}
Related
I have a wordpress site and I use css to replace an image of a plugin (polylang's flags).
.lang-item-42 a img {
content:url(/wp-content/uploads/2019/05/en.png);
}
So this is working on Chrome and Safari but not on Firefox and IE. As I found out is because I should use :before selector but im not sure where to put it because if I place it right after the "img" element it not works.
First you should declare ::before with double colon (not :before) since it is considered a pseudo-element and not a pseudo-class.
Consider this element like "something that is inside and at the beginning of the element it is put on".
So if you want to put an image inside the link, you hide the other and type
.lang-item-42 a::before {
content:url(/wp-content/uploads/2019/05/en.png);
}
.lang-item-42 a img {
display: none;
}
I haven't tried this out but it should work.
Consider this html:
<div class="logo-b"></div>
And this CSS:
div.logo-b {
content: url(http://placehold.it/350x150);
height: 150px;
border: 1px solid darkred;
}
I am trying to display an image using CSS. The image is not being displayed. Please see this jsfiddle to see what I mean. What am I missing please?
EDIT: It appears that Chrome renders the fiddle as I provided it above fine, but Firefox (which I use) does not. If I add :before or :after to the class name in my CSS the image displays in Firefox. Could someone shed some light on why this would be please?
EDIT: I am using the wrong construct to place the image on my page. In the context of what I am doing I should use the <img> html tag. The CSS content construct uses :before and/or after to place content, including images, but I understand these are used in specific contexts. I simply want to display a logo.
This property content is used with the :before and :after
pseudo-elements to generate content in a document. -W3C
I think the behavior in Firefox is correct.
Context: making printable invoices to generate in a browser.
It's common in making printable webpages to use an #media print rule to change the way the content looks for a printed page. Ideally, because I'm printing only a small part of the page, I'd like to hide everything and then display the contents of a particular element.
Structure is something like this:
<body>
<div id="topMenu">...lots of elements...</div>
<div id="sideMenu">...lots more...</div>
<div class="tools">...some tools...</div>
<div class="printing">...some elements I want to print...</div>
<div class="tools">...more stuff I don't want to print...</div>
</body>
Stuff I've tried:
Ideally, I'd like to do something like
body * {
display: none;
}
.printing, .printing * { /* Both parts are needed to make it display */
display: block !important;
}
But this won't work because some elements need to be inline and some need to be block. I've played with some different values for display from MDN and can't find one that easily resets the value to its original. display: initial seems to be treated like inline.
The suggestion in CSS: "display: auto;"? seems to only work for JS.
Of course, it is possible to explicity "hide" the stuff I don't want printed rather than display the stuff I do want, but it seems to me that it should be possible to go the other way.
In this question How to only show certain parts with CSS for Print? suggests body *:not(.printable *) {display:none;} but notes (as backed up on the w3 negation page ) that this is not yet supported.
I note that the w3 draft and the display-outside page seem to recommend using an unknown (to webkit) box-suppress property to preserve the display value while not displaying the element.
My questions:
What is the best way to hide everything and target certain elements for display when they don't all share a common display property?
What exactly does box-suppress do?
Since you specifically tagged this CSS3, try using CSS3!
body>:not(.printing) {
display: none;
}
This should work for the example you gave. I hope it works for your real-world application!
To answer your auxiliary question, as of October 2014, box-suppress is a possible future replacement for display:none that will hopefully make it easier to both hide and remove elements from the flow without worrying about changing its display type (as opposed to visibility still keeps it in the flow, and position:absolute which still keeps it visible). I don't think it's currently supported so I'd stay away from it for now. If you want to know more, see http://w3.org/TR/css-display
You cannot use display for this purpose. See Display HTML child element when parent element is display:none
However, you can use visibility, as long as you use absolute positioning for the hidden content:
body, body * {
visibility: hidden;
position: absolute;
}
.printing, .printing * {
visibility: visible;
position: relative;
}
If you don't use any absolute or fixed elements, you can use an alternative way of hiding elements.
Instead of using display: none to hide your elements, try using:
body * {
position:absolute;
top: -999999px;
left: -999999px;
}
To set it back use:
.printing, .printing * {
position: initial;
/* OR */
position: static;
}
Here (link removed) I'm trying to replace the text in an anchor with an image, using the CSS content property. I'm guessing that it's irregular behaviour for Chrome to do what I want it to do, by replacing the text with the image I provide in the CSS code?
Here's the code I use:
<!-- HTML -->
PEGI Rating
<!-- CSS -->
.pegi18 {
content: url("http://example.com/path/path/path/18.png");
width: 50px;
height: 61px;
}
Here's the end result in MSIE 11 and Chrome 32
Why won't the images show in MSIE? I've also done tests on modern.ie.
The reason why this isn't working is because css content is meant for pseduo-elements like :after and :before
I agree with GCYrillus, I too think it is bad practice and may not work in all browsers (as your post suggests). If you want to control the picture based on a class try adding a background picture instead of the content property.
.pegi18 {
background: url("http://daylostar.com/img/gwt/pegi/18.png");
width: 50px;
height: 61px;
}
According to MDN,
The content CSS property is used with the ::before and ::after
pseudo-elements to generate content in an element.
In your case, this doesn't apply, so it really shouldn't work in any browser (Chrome appears to allow it, even though it doesn't meet the specs)
Reference:
https://developer.mozilla.org/en-US/docs/Web/CSS/content
According to the CSS specification:
Applies to: :before and :after pseudo-elements
It looks like Chrome is going against the specification by allowing this property directly on an element instead of a :before or :after pseudo-element. For compatibility with other browsers, I'd recommend trying an alternative method such as using the <img> element or the background-image CSS property.
I'm trying to use the css hover, and I have it working on a div by doing:
#complete-paper:hover{
background:url('/static/images/blue-aarow.jpg') no-repeat;
background-position:192px 35px;
background-color:#17aedf;
color:#ffffff;
}
my question is, is there a way to target another html element, like a totally unrelated div, when I hover over the property with the ID of complete-paper? So when you hover over the div with complete-paper, it'll do the above hover css changes, as well as change another div on the page?
Thanks
Edit: The question I had is if it's possible if the div's are unrelated. But in this case they are related, It's actually a p inside a div when you hover over the div, I want the p to also change
Not unless the other div is nested in #compete-paper where the css would look like:
#complete-paper:hover{
background:url('/static/images/blue-aarow.jpg') no-repeat;
background-position:192px 35px;
background-color:#17aedf;
color:#ffffff;
}
#complete-paper:hover .other-div{
/* different css */
}
Not unless the other div is a descendant or sibling of the hovered element.
Since you said it's a descendant, then do it like this:
#complete-paper:hover #decendant_id {
// stuff
}
While the actual HTML elements in the file must be either nested or contained in a single element to be valid ':hover' targets to each other, the css 'position' attribute can be used to display any element where ever you want. I used position:fixed to place the target of my ':hover' action where I wanted it on the user's screen regardless to its location in the HTML document.
So the element is where the browser wants it in the code, and where the user wants it on the screen.
See detailed post->