Issues with CSS positioning are not being resolved in Chrome

I set up a Wordpress website and I'm trying to display two vertical banners outside of the main container. My CSS code seems to work fine on Firefox and IE, but on Chrome only the left banner is showing up. Any suggestions on what might be causing this issue?

@media only screen and (min-width: 1100px){
    div.side-image-left {
        position: absolute;
        z-index: 98;
        left: -840px;
        top: -24px;
    }

    div.side-image-right {
        position: absolute;
        z-index: 99;
        left: 342px;
        top: -24px;
    }
}
csswordpressgoogle-chromeposition

Answer №1

Instead of using absolute positioning for the image, you might want to consider floating it instead. This way, the banners should remain visible while scrolling down.

.side-left-image{
float:left; }

.side-right-image{
float: right; }

Keep in mind that z-index may not be effective in this case!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Hovering over the main navigation will reveal the sub navigation bar underneath

I am trying to implement a sub navigation bar using bootstrap that resembles the design in the image provided below. Specifically, I would like the 'Advertising' tab on the main navigation bar to reveal two sub pages titled 'How It Works&apo ...

htmlcsstwitter-bootstrapnavigationnav

Image superimposed with vertical dimension

I have a photo with specific dimensions and I want to create a div box with a button inside the image, similar to what is shown in this example: Example Image Here is my current code attempt: .wrapper { width: auto; text-align: center; } .wrapper: ...

htmlcss

CSS: The hiding should only apply to specific sections of my menu

I'm having trouble hiding a portion of my menu. Whenever I use the display:none property, the entire menu disappears. I have assigned IDs to different elements to distinguish them, so I'm not sure why this is happening. Here's the code snipp ...

htmlcss

When two divs are activated, the third div goes into invisible mode

I attempted this code, but it doesn't appear to be functioning correctly. if(div1)&& (div2)==display:none { div3=display:none; } else { div3=display:block; } ...

javascriptcss

Is there a way to modify the height and width of a div layer?

How can I adjust the height and width of the layer on the card? Also, I want only the close button to be clickable and everything else to be unclickable. Can anyone help me find a solution? <link rel="stylesheet" href="https://stackpath.bootstrapcdn. ...

htmljquerycsstwitter-bootstrap

Get rid of the "clear field" X button for IE11 on Windows 8

After trying out the suggestions provided in Remove IE10's "clear field" X button on certain inputs? .someinput::-ms-clear { display: none; } I successfully removed the X button on IE 11 running on Windows 7, but unfortunately it didn&a ...

cssinternet-explorerwindows-8

Styling with Chemistry: CSS for Chemical Formulas

Is there a way to write multiple formulas in CSS, or is there an alternative method I should consider? I want to integrate these formulas on my quiz website for students to use. I came across some intriguing examples that could be useful: However, I am s ...

phpcssformulaequations

Converting HTML to PDF: Transform your web content into

I have a couple of tasks that need to be completed: Firstly, I need to create a functionality where clicking a button will convert an HTML5 page into a .PDF file. Secondly, I am looking to generate another page with a table (Grid) containing data. The gr ...

javascriptcsshtmlpdf

How to use CSS to conceal asp:BoundField elements

Can someone help me figure out how to hide my asp:BoundField using CSS without losing access to the values? I've tried setting visible=false, but that prevents me from accessing the values. Then I attempted to hide it with CSS, but that doesn't w ...

cssasp.net

Guide on aligning input and labels side by side in Bootstrap forms using CSS only

I've exhausted all the solutions provided here, including referencing this Bootstrap horizontal-form link. However, nothing seems to be effective. I am open to trying any method at this point, even if it involves just modifying the CSS. My main object ...

htmlcssbootstrap-4

Issues with IE8 compatibility on the website

I'm in the process of developing a website and I'm facing some issues specifically with IE8 or later versions. For reference, here is a temporary link to the site: . 1 The problems I am encountering are as follows: The login/register form disp ...

jqueryhtmlcssinternet-explorertransparency

What is the best way to center a button element horizontally within a div element?

I am looking for a way to center a button horizontally without adding CSS directly to the div element (for example, using <div style="text-align: center;">). My goal is to apply CSS code specifically to the button element. <div> <butto ...

htmlcsscentertext-alignmenttext-align

Detecting and handling JavaScript errors using Selenium WebDriver in Internet Explorer and Google Chrome

Is there a way to detect and handle JavaScript errors in Chrome and IE drivers using WebDriver? ...

internet-explorergoogle-chromewebdriverselenium-webdriver

VS Code warning about unused CSS selectors in SvelteKit

Is there a way to get rid of the Unused CSS selector warning in VS Code? I keep getting this warning in all files where I use <style lang="scss">. While I'm aware that I don't use the .btn class in some components, I still want it ...

cssvisual-studio-codesasssveltesveltekit

Changing color based on AngularJS condition using CSS

My HTML code looks like this: <div> <i class="glyphicon glyphicon-envelope" style="margin-top: -50px; cursor:pointer; color: #1F45FC" ng-click="createComment(set_id)"> </i> Route <center> ...

javascripthtmlcssangularjs

When arranging elements using the @media feature in CSS grid, a phantom element seems to mysteriously appear

Apologies for the extensive uploads, I'm not sure how else to proceed. I'm attempting to rearrange my grid layout at a specific width so that the paragraphs repeat with the images. However, I'm encountering a random space between 1 and 2 whe ...

htmlcssfrontendcss-grid

Troubleshooting a Label Overlapping Problem in Materialize CSS

I've been working on a Materialize project and encountering an issue with pre-filled values in text boxes. Here is a snapshot of the problem: https://i.stack.imgur.com/u13jT.png <div class="input-field col s12 m6"> <input class="" id="us ...

htmlcssmaterialize

Firefox is having trouble fetching #header from style.css, but other web browsers seem to be working fine

Visit my website at http://dayforfailure.com My website appears fine on Chrome and Safari, but on Firefox the header and other elements are not displaying correctly. It seems like there may be a cross-browser compatibility issue. I am new to dealing with ...

csscross-browser

"Applying CSS styles to HTML elements through PHP code

Hey there, I need help with some CSS styling for my PHP code. The code below is used to display a name: while ($db_field = mysql_fetch_assoc($result)) { print $db_field['ship_name'] . "<BR>"; I really want to jazz it up with some ...

phpcss

How to manage the three states (InProgress, Success, Error) of a dropdown dynamically in AngularJS with ng-show/hide?

Currently, I have implemented a bootstrap dropdown that loads a list of countries by making an external API call. My goal is to display three different states of behavior (progress, success, error) in the dropdown using ng-show/hide. However, I am unsure h ...

javascriptjquerycssangularjstwitter-bootstrap