I’m trying to display a different logo for a specific page on my website. I’ve added a CSS rule that targets the specific page id and it swaps the logo successfully but only on Chrome and Safari. But on Firefox and IE it doesn’t swap the logo (it just shows the original one)
.page-id-1973 #logo {content: url(http://example.com/wp-content/uploads/2017/04/new-logo.png) ;}
Could you tell me how to make it Firefox and IE compatible, or is there another way of achieving it?
Thanks
content is the wrong css property to use to apply an image to a node. That job belongs to background:
.page-id-1973 #logo {
background: url(http://example.com/wp-content/uploads/2017/04/new-logo.png);
}
You could also use background-image
If the image you are replacing is in the dom as an <img> tag you can do this to hide it and retain the height and width of the original:
.page-id-1973 #logo img { visibility: hidden; }
Related
Goal: static images with animations shown on :hover that do not exceed container width.
Fixed code:
/* wrapper paragraph*/
.rimg {
text-align: center;
overflow: hidden;
}
/* rely on contents for vertical size, show backgrund centered */
.rimg-gif, .rimg-png {
display: block;
position: relative;
background-size: auto 100%;
background-position: center;
background-repeat: no-repeat;
line-height: 0;
}
/* containers need max-width in IE */
.rimg img, .rimg-gif, .rimg-png {
margin: 0;
max-width: 99.99999%; /* Opera Mini ignores anything above this % */
max-width: calc(100% - 0px); /* for proper browsers */
}
/* hide the GIF background unless hovered */
.rimg-gif:not(:hover) {
background-image: none !important;
}
/* hide the static image when hovered */
.rimg-gif:hover img {
opacity: 0;
}
<p class="rimg">
<span class="rimg-png" style="background-image:url(https://i.imgur.com/iwczbln.png)">
<a class="rimg-gif" target="_blank" href="https://i.imgur.com/TLxp2di.gif" style="background-image:url(https://i.imgur.com/TLxp2di.gif)">
<img src="https://i.imgur.com/iwczbln.png">
</a>
</span>
Description
</p>
Final structure:
.rimg is just a container element for center-aligning things.
img is the static image (for semantics, printing, and default display). It is hidden via opacity when hovering, which allows to use the context menu to both get URL of GIF ("link") and static PNG ("image address").
.rimg-gif is the animated background GIF that is displayed when hovering (while hiding the static image). It is not loaded until hover. Doubles as a link to the actual GIF (for mobile users)
.rimg-png has a static background and is there solely so that the reader doesn't see the image briefly flashing before the GIF finishes loading the first frame.
There were a few issues with this:
In IE<=11 (non-Edge) sizing to fit width just outright doesn't work - the elements overflow the container instead.
Adding "max-width: 100%" to nested blocks fixed this (by this explanation).
Opera Mini similarly doesn't resize the images to fit container width, but aforementioned fixes for IE have no effect.
I was not able to find any explanations of this, but turns out that Opera Mini simply ignores max-width values roughly equal to 100% (>99.99999%). So I added that for Opera, and max-width: calc(100% - 0px) for modern browsers.
On StackOverflow's snippet preview, calculated height is slightly higher than that of image, which can be seen by it briefly starting to repeat on the bottom. The issue disappears by giving line-height: 0 to .rgif-alt but I'm not sure if that's a hack or not.
Edit: apparently so? Other options include float'ing the elements and using position: absolute, so I guess line-height is pretty alright for elements
Additional details:
HTML is generated from a markdown[-ish] extension so it does not strictly matter if it looks nasty or not. I would like to avoid having image dimensions / aspect ratio hardcoded into generated HTML if possible, though.
Trying to not have the animated GIF load until requested (mouseover), therefore a two-image trick is not preferable.
The intent to avoid JS is due to fact that pages with such elements can be shown inside an embedded browser with JS disabled completely. As you can imagine, having a popup window (or a default browser' tab) open for each animation is undesirable.
If anything is unclear, do tell.
After a bit of trial and error I managed to resolve the issues by myself, so I added notes on solutions and the final (working) code to the question.
I'm not 100% happy with opening a new tab on Android (ideally should play when single-tapping), but all tested browsers close such popup-tabs when pressing Back so maybe it's not too bad. I added a "play" button, which also doubles as a first touch event absorber for mobile (initially covers the link completely, resized to 0% width after a short delay to allow clicking the link). This works both for modern browsers (which trigger :hover and animation playback on first tap and can open link on second tap) and for Opera Mini (which simply opens a popup tab with the GIF). You can see this in action here, for example.
See the frozen DOM state of the page in this Plunker.
The code should represent a modal with four tabs, of which the third tab content is open. Should look something like the image below (rendered in latest Chrome): three divs side-by-side which contain overflowing content and the divs are scrollable. On the bottom there's a div containing Plotting method text and a button. The same view is visible in Firefox as well.
What I see in latest Safari:
After disabling the style
height: 10px;
from .heatmap-multiple-variable-container
the rendered Safari content is:
notice how the third content div, which is scrolled way down, does not present all of its content (the Select all row) as it does in Chrome. Also the div containing Plotting method is not visible.
In Microsoft Edge, the div containing Plotting method is visible but the same scrolling problem as in Safari exists.
Any ideas on how to modify the Flexbox layout to display the menu in the same manner for all of the three browsers? I'm really stuck, so any pointers you can give me are appreciated.
Ok this was a hard one! Add this to your CSS and it should work. (tested in Safari)
body .multiple-variable-selection-columns-container {
height: calc(100% - 66px);
}
body .modal-menu .tab-content {
height: calc(100% - 57px);
}
body .modal-wide .modal-dialog .modal-content .modal-body {
height: calc(100% - 110px);
}
ng-include {
display: block;
}
You have added height: 100%; to elements who have neighbour elements with there own height. You have definitely to cleanup your markup, but the CSS above should work for the moment.
I have added the body to get a stronger selector to overwrite your code. I also added a default display style for ng-include tag, the browser doesn't know what kind of styles to use, so the tag has no hight and is hard to debug.
I hope I could help you.
I have made a menu that 'popups' on hover when javascript is disabled. However this is working ok, the menu shows a scrollbar when the menu is to large to fit into the viewport (window).
When it popups on hover there are two scrollbars, one of the window and one of the menu. Looks very ugly and can confuse the user.
With javascript enabled I apply a .noscroll class to the body so there only one scrollbar.
.noscroll { overflow:hidden !important; }
Tried to do this with CSS only but can't get it to work, tried several things like:
.nav .panel:hover > body,
.nav .panel:hover > html { overflow:hidden !important; }
.nav .panel:hover #body { overflow:hidden !important; } /* body with id body */
The menu itself is fixed positioned. The reason I do it this way is to be sure the menu covers the whole window because height:100% doesn't want to cover the whole document and it's very ugly. Also, the search bar will be always visible.
How can achieve the effect I want?
Image (click on right mousebutton to view larger image):
This can't be done with current CSS rules. You can only apply rules to children of the specified element, not parents. See https://stackoverflow.com/a/1014958/1034613 for specifics. For now, you will have to stick to Javascript for that.
I have a container div with more divs inside for a slideshow effect. "The container" div is over body's the background image.
CSS for the body:
body { background: #333 url(images/bg.jpg) repeat-x top; }
Problem is in IE7 the container div has a background color #333. Firefox shows up properly as clear.
Here is the CSS for the container div:
.cntdiv {
width:100%;
display:block;
margin:0 auto;
margin-top:15px;
overflow:hidden;
}
Any idea why it's picking up the body color and not the image? Again, it works right in Firefox.
IE7 does indeed support URLs for backgrounds. You are correct in saying that it does not support Data URLs, but this is not a Data URL. A Data URL is CSS looks similar to:
url(data:image/gif;base64,R0lGODlhEAAOALMAAOazToeHh0tLS/7LZv/0jvb29t/f3//Ub/ge8WSLf/rhf/3kdbW1mxsbP//mf///yH5BAAAAAAALAAAAAAQAA4AAARe8L1Ekyky67QZ1hLnjM5UUde0ECwLJoExKcppV0aCcGCmTIHEIUEqjgaORCMxIC6e0CcguWw6aFjsVMkkIr7g77ZKPJjPZqIyd7sJAgVGoEGv2xsBxqNgYPj/gAwXEQA7) .
Note the use of the keyword "data:". The key here is that the data IS the String... not a file.
There are some little catches, however. First, the URL must be in quotes, as in:
body { background: #333 url("images/bg.jpg") repeat-x top; }
IE does, however, interpret the background short syntax differently, so I have found that expanding the syntax helps immensely with IE pre 8 bugs.
body { background-color: #333; background-image:url("images/bg.jpg");
background:repeat-x; background-position:top;
}
Finally, your container div must be explicitly defined with a background color:
.cntdiv {
width:100%;
display:block;
margin:0 auto;
margin-top:15px;
overflow:hidden;
/* This is the line that will do it */
background:transparent;
/* OR EVEN */
background-color:transparent;
}
This code is tested and runs correctly in IE7 and has the same behavior in the others as well. Judicious use of "transparent" is awesome.
It also must be understood that the issue you are facing is not a bug, but a user agent CSS style. This is according to the W3C standards unlike the other div bugs that IE has (such as poor :hover support). Because you didn't define a background for your div, the User Agent (IE7) is allowed to do whatever it likes. This is true of all HTML Elements and all browsers. It is why buttons look a certain way unless you change it with the CSS. Explicit definition of every aspect is the best way to overcome little snafus such as these.
Hope this helps,
FuzzicalLogic
The reason it doesn't work in IE7 is because you are using a data URL, and IE7 does not support them. Evidenced by:
http://www.caniuse.com/#search=Data%20url
For IE7 you'll have to use conditional comments and adjust the way you reference the background image. Here's a quick and simple intro to conditional comments if you don't know about them yet:
http://css-tricks.com/132-how-to-create-an-ie-only-stylesheet/
Ok, I found the problem. I was using the jquery.cycle plugin to rotate the divs into view. Somehow IE7 didn't like it. I tried a different jquery plugin and it works perfectly.
Thanks for your suggestions.
*I'm re-posting this question because I only got one response before, and it didn't work. Hopefully someone new will see this and know what to do! *
I'm using IP Net Renderer to view my newly installed forum (http://www.datesphere.com/forum/) in IE7. If you care to take a look, you can see the forum is overflowing its containing element (it's wider than the 960px container I have for my entire site).
I've tried adding overflow:hidden to the .wrapper class as well as width:100% to .tborder per advice received on StackOverflow, but it didn't work.
The forum renders correctly in IE8+, FF, Chrome and Safari, but not IE 7. Does anyone know how I can fix this?
If you use IE9/8 and run the Developer toolbar you will notice that the global.css that is being generated is different for IE7 from IE8. Take a look at what is generating that Style Sheet for you and see if you can modify it to make the MIN-WIDTH:930px; or MIN-WIDTH:100%;
Or a second option add somewhere after the glboal.css style sheet a inline-style or on page css or link another style sheet .wrapper { MIN-WIDTH:930px !important; } or .wrapper { MIN-WIDTH:100% !important; } so that it overrides whats generated in the global.css file.
IE7:
.wrapper {
MIN-WIDTH: 970px; MARGIN: auto; WIDTH: 85%; MAX-WIDTH: 1500px
}
IE8:
.wrapper {
MARGIN: auto
}
Change your min-width value for your wrapper class. You can set an static width or set it to 100%.
Remove #wrapper div
And set IE7 specific .tborder {display:inline-table}