I'm experiencing an issue with the image background not displaying in IE8. You can view the page here, and the arrows on the accordion are not visible.
Here is the CSS:
.closed h2.accordion_h3 {
background: url(mysource_files/down.png) no-repeat right 10px bottom 10px;
min-height:24px;
}
.open h2.accordion_h3 {
background: url(mysource_files/up.png) no-repeat right 10px bottom 10px;
min-height:24px;
}
Any thoughts on why this might be occurring?
Appreciate any help!
Make sure to update your code like so:
url(http://www.bdo.co.uk/__data/assets/image/0006/176613/down.png?v=0.1.2) 99% 10px no-repeat
It appears that you are implementing the background-position-x and background-position-y properties, which are compatible up to IE9. If you wish to use them in IE8, you will need to utilize the -ms-background-position-x and -ms-background-position-y extensions in your CSS.
Here is a helpful resource:
I hope this information proves useful!
Discover a SCSS mixin for creating flexbox/grid layouts HERE. Take a look at the complete mixin code below: @mixin grid-col( $col: null, $grid-columns: 12, $col-offset: null, $gutter: null, $condensed: false, ...
I have several lists with a flex layout. Each column contains 3 list items, and the flex-basis is set to one-third. Within each li element, there is a div for a background image and another div to display text, which should be positioned below the image. ...
Currently, I am developing a straightforward form that includes CSS-based help boxes. These help boxes are designed to appear when the user hovers over the corresponding row. After leaving my project untouched for a few days, I encountered some bugs upon ...
I need a text field with the cursor starting a few pixels (let's say 4) from the left-hand side. I am aware that this can be achieved by adjusting the size of the text field using padding, but I am curious if there is a way to resize the text box with ...
I am facing an issue even though I have applied styling as per my requirements: Warning: Failed prop type validation- Invalid prop classes with type function passed to WithStyles(App), expected type object. This warning is originating from Wi ...
I am trying to prevent the column height from being equal to the row height in Bootstrap. Here is my code snippet: <div class="row justify-content-center text-center"> <div class="col-sm-3"></div> <div class="col-sm-9"></d ...
Working on a pizza site and encountering an issue - trying to add the logo of the place to the navbar (which also links to the main page) but it's not displaying. Using Twitter Bootstrap for this project. Here is the code snippet: /*#557c3e green*/ ...
CSS at-rules have been part of CSS since the days of CSS2. As CSS evolves with new specifications like @supports, it's interesting to see how different browsers handle unsupported rules. Do major browsers simply ignore unrecognized rules, or do they f ...
Our app currently relies on multiple JS library dependencies that have already been minified. We are considering consolidating them into a single file to streamline the downloading process for the browser. After exploring options like Google Closure Compi ...
I'm having trouble aligning my two elements in a simple horizontal menu to the middle left. I want them to have a margin of 5px on the left and right sides. Here is a screenshot and CSS style: https://i.stack.imgur.com/vzO5D.png .body_clr { wid ...
Is there a way to switch between languages on a website to replace text on multiple pages with a simple button click? What is the most efficient method for achieving this? This code snippet only changes text in the first div. Is there a way to implement a ...
I'm currently working on an app and I'm attempting to align 3 form elements in a ratio of 25/25/50, but it's proving to be quite challenging. At the end of this message, you'll find a picture showing the current layout. Additionally, I& ...
I have been working on creating a div tag to overlay an embed tag and added some javascript to prevent users from right-clicking to download the pdf inside the embed tag (even though it may seem unnecessary, it was requested by my customer). Here is the ma ...
Looking for help with aligning elements in this code snippet: <TextField id="outlined-basic" label="22Keyword" defaultValue={"test123"} variant="outlined" /> <IconButton aria-label="delete&q ...
Is it possible to modify the behavior of the dropdown in Material UI Select? I would like to customize the appearance of <ul> so that it does not resemble a pop-up. My goal is for the selected item to be contained within the <li> element, simi ...
I have a dilemma involving two DIV elements positioned absolutely on the sides of an HTML page, much like this EXAMPLE: <div class="left"> </div> <div class="right"> </div> These are styled using the following CSS: .left{ pos ...
I have developed a custom filtering component in Angular 2, which I have integrated into the table header. My goal is to show the filter when the mouse hovers over a specific span, and hide it when the mouse moves away. <th> <span class="headCol ...
I am looking to set a default image to the img tag in case the user has not selected a profile picture for their account. Here is the current output: http://jsfiddle.net/LvsYc/2973/ Check out the default image here: This is the script being used: funct ...
I am curious about defining CSS element dimensions before they are rendered without using offset and jQuery. Is it possible to echo PHP into the width/height or position values? For example: <?php $width = 290px; $altwidth = 290; ?> <style> ...
I am currently utilizing Bootstrap 5 and experimenting with setting up a nested flex layout that occupies the entire window. One of the flex items should be filled by a "stretchy" canvas element, ensuring there are no scrollbars present. However, when I a ...