Issues with Display on IE 11 and Edge

Currently, I am in the process of working on a website that was initially created from a template by someone else. Since I am not a professional web designer, some elements on the site are not my own creation. Everything seems to be running smoothly on Firefox and Chrome, with minimal issues on Edge, however, Internet Explorer 11 is displaying the content incorrectly.

Firefox:

https://i.sstatic.net/XViMn.png

Edge:

https://i.sstatic.net/4N6fe.png

Internet Explorer 11:

https://i.sstatic.net/7zIL1.png

The challenge lies in solving why the background color is not showing correctly on certain segments when viewed in Internet Explorer. Additionally, there is an issue with text alignment next to images, and the header and footer do not render as they should in IE 11.

A snippet of HTML code related to the text positioning near the image:

<aside> 
<h3> Fliteway Technologies</h3>
<p>Your Single Source for Soil and Groundwater Remediation Equipment</p>
<h3><a href="Fliteway Tour.pdf">Take a Tour!</a></h3>
</aside>

Here is the CSS involved:

aside {
float: right;
width: 225px;
height: auto;
background-color: #E3E3E3 !important;
background-color: rgba(227, 227, 227, 1);
background:#E3E3E3;
margin-top: 0;
clear: left;
padding-top: 10px;
padding-bottom: 10px;
position: relative;
overflow: hidden;
margin-left: auto;
margin-right: 0;
margin-bottom: auto;
display: block;
visibility: inherit;

I have attempted various online suggestions to fix these issues resulting in some clutter within the CSS. Any guidance on how to resolve this problem would be greatly appreciated.

Image HTML:

<sidepicture>
<div class="sidepicture"><img src="_images/Bld with Addition.jpg" alt="Shop" width="564" height="270"></div>
</sidepicture>

Image CSS:

.sidepicture {
display:inherit;
}
htmlcssinternet-explorerformattingdisplay

Answer №1

If you are using newer browsers, I suggest utilizing flex

.wrapper {
  display: flex;
}
aside {
  width: 225px;
  background:#E3E3E3;
}  

sidepicture {
}
<div class="wrapper">
  <sidepicture>
    <div class="sidepicture">
      <img src="_images/Bld with Addition.jpg" alt="Shop" width="564" height="270"></div>
  </sidepicture>
  <aside> 
    <h3> Fliteway Technologies</h3>
    <p>Your Single Source for Soil and Groundwater Remediation Equipment</p>
    <h3><a href="Fliteway Tour.pdf">Take a Tour!</a></h3>
  </aside>
</div>

If you are dealing with older browsers, consider using display: table

Note: When targeting older browsers, keep in mind that they may not support custom tags like <sidepicture>

.wrapper {
  display: table;
  width: 100%;
}
aside {
  display: table-cell;
  width: 225px;
  background:#E3E3E3;
  vertical-align: top;
}  

sidepicture {
  display: table-cell;
  vertical-align: top;
}
<div class="wrapper">
  <sidepicture>
    <div class="sidepicture">
      <img src="_images/Bld with Addition.jpg" alt="Shop" width="564" height="270"></div>
  </sidepicture>
  <aside> 
    <h3> Fliteway Technologies</h3>
    <p>Your Single Source for Soil and Groundwater Remediation Equipment</p>
    <h3><a href="Fliteway Tour.pdf">Take a Tour!</a></h3>
  </aside>
</div>

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

Click the mouse to create a unique path from the list items within the <ul> <li> using jQuery

My current listing contains various files and folders: <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fon ...

javascripthtmljquery

Swapping IMG depending on breakpoint in Material-UI

I understand how to adjust styling with breakpoints for various properties like height, width, and font size. However, I am struggling to find examples of switching images based on screen sizes. My goal is to replace an image with a different one dependin ...

cssreactjsmaterial-uiresponsive-images

What is the best way to implement a scrollbar in a specific div rather than the entire window?

Hey everyone! So, I have this window in electronJS with a div where I'm dynamically adding elements using Javascript and the function --> document.createElement('section'). Here's the loop in Javascript to add these elements: for ( ...

javascripthtmlcss

Is it possible to transfer items from one list within a component to another list inside a different component with Vue draggable?

I am having trouble implementing Vue Draggable to move items between lists within a component setup. The issue I'm facing is that the items can be moved within a list, but not from one list to another. The structure involves a Board component that ho ...

htmlvue.jsdraggablevuedraggablevue.draggable

Using ExpressJS and Jade to submit a form using the POST method and redirecting to a specified path

I am exploring node, express and jade for the first time and working on a small application that requires users to enter their name and password in a form. The app then redirects them to a path based on their username. Here is the code snippet to achieve ...

javascripthtmlweb-applicationsnode.jsexpress

What is the best way to show a dropdown menu on the right side of the

I developed a demo that functions properly on both desktop and mobile devices. However, I am facing an issue where the dropdown menu is not displayed when switching to the mobile version. Here is my code snippet: http://codepen.io/anon/pen/OyNLqa ...

jqueryangularjshtmlcssionic-framework

What is the method for inserting a line break following an input element using CSS?

I am utilizing a service that provides me with dynamic HTML containing labels and inputs as shown below: input:after { content: "\a"; white-space: pre; } <label for="username">Username</label> <input type="text" id="username" nam ...

htmlcsspseudo-element

Ways to expand the height of a child element within a flex container that has been

I am facing an issue with stretching the children of a column flexbox container. While I can stretch one of the flexbox child elements, I am unable to stretch its nested children. Below is an example where .flex-child-2-child and .flex-child-2-child-child ...

htmlcssflexbox

What is the best way to add a textfield within an image?

Does anyone have a code snippet that can generate a "search box" like the one on www.dx.com? I was shocked to find that searching for "textfield inside image" only yielded results for "image inside textfield". ...

htmlcss

Creating an engaging Uikit modal in Joomla to captivate your audience

I need help optimizing my modal setup. Currently, I have a modal that displays articles using an iframe, but there is some lag when switching between articles. Here is the JavaScript function I am using: function switchTitleMod1(title,id) { document.g ...

javascriptjqueryhtmlcssuikit

Tips on aligning smaller text within a larger CSS structure

Is it possible to align smaller text with larger CSS? Below is the code snippet: <div class="header"> <div class="navbar"> <img src="img/logo.png" alt="" style=""> <font color="white">LOGO</font> ...

htmlcss

Using various class names with the :first-child selector

I need help styling the first item of a HTML structure I have: <div class="home-view"> <div class="view-header">Header</div> <div class="view-content">Content</div> </div> In this structure, I want to style t ...

csslesscss-selectors

Utilizing Python to manipulate the 'select' tag in HTML

Currently, I am attempting to retrieve events from an HTML page located at In my efforts to choose different areas using python script, I encountered a challenge with the following snippet of HTML code: <select data-ng-options="key as value.name for ( ...

pythonhtmlseleniumweb-scrapingmechanize

What is the best way to place an image above a step progress bar?

I need assistance with adding an image or icon above each step in the progress bar. I attempted to insert an image tag, but it ended up next to 'step 1', which is not the desired outcome. .progressbar { counter-reset: step; } .progressbar li ...

htmlcssbootstrap-4

Encountering challenges with web scraping certain data that is not being captured after a line break tag using Python's

I've been attempting to scrape a public web directory in order to retrieve contact information for companies. While my code is functioning properly, it seems to be having trouble extracting information that comes after the br tag. For example, it fai ...

pythonhtmlpandasweb-scrapingbeautifulsoup

Google Chrome Back Button not saving radio button selections

We have noticed an issue with Google Chrome wherein the back button does not retain radio box selections when submitting a form that contains all radio boxes. This seems to be specific to Chrome and is not observed in other browsers like IE and Firefox. B ...

htmlformsgoogle-chrome

Tips for avoiding duplicate Id tags while using Ajax in MVC

Hello everyone, I am curious to learn about the precautions and techniques you employ when working with Ajax or MVC functions such as @Html.Action in order to effectively manage and prevent duplicate Ids for Html tags. In addition, how does the page handl ...

htmlajaxasp.net-mvc

Tips for arranging divs in Bootstrap 5 to position one above the other

I have chosen to utilize Bootstrap 5 for my website project with the aim of enhancing its responsiveness on all devices. Specifically, I am seeking a way to ensure that when visitors access the site from a mobile device, the image-containing div appears a ...

htmlcssresponsive-designfrontendbootstrap-5

Property float does not account for margin values

Currently delving into the world of the semantic-ui framework, I have been working with segments. Here is a snippet of my code: <!DOCTYPE html> <html> <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery ...

htmlcsssemantic-ui

jQuery AJAX is seamlessly handling cross domain requests in Chrome and other browsers, however, it seems to be struggling in IE10 as it is not properly transmitting data. Additionally, in Internet

My web application requires sending data to an API hosted on a different domain. The API processes the received data and jQuery AJAX handles the response. This process works smoothly on Chrome and Firefox, but encounters issues on Internet Explorer. While ...

javascriptjqueryajaxinternet-explorercors