Strange formatting in the internet explorer browser (IE)

I have encountered an issue with CSS animation elements on the home page. The animations appear correctly in Google Chrome, but there is a strange indentation problem when viewed in IE. I have tried several solutions without success.

Although I am not a web developer, I need to resolve this issue promptly.

To view the affected page, click here:

Below is the relevant code snippet:

.header-wrapper{
width: 100%;
background-image: url(https://www.littlecity.org/wp-content/uploads/2015/11/FusciaChevronPattern-cover.jpg);
...
<!--Code continues as before-->

htmlcssinternet-explorer

Answer №1

Personally, I believe that using IE is the correct approach. However, you can enhance the design by removing the display: inline; property from the parent div and adding left: 0; to the span:

.header-wrapper{
width: 100%;
        background-image: url(https://www.littlecity.org/wp-content/uploads/2015/11/FusciaChevronPattern-cover.jpg);
        background-size: cover;
position: relative;  
margin: 0 auto 0 auto;
font-family: "museo-sans", Helvetica, Arial, sans-serif;

}
.rw-wrapper{
width: 80%;
        position: relative; 
margin: 0 auto 0 auto;
font-family: "museo-sans", Helvetica, Arial, sans-serif;
vertical-align: middle;
text-align: center;
line-height: 1;

}

.rw-sentence{
margin: 0;
text-align: center;
        display: block;    
position: relative;
        text-transform: none;
        vertical-align: middle;
}
.rw-sentence span{
color: #fff;
font-size: 18px;
font-weight: 600;
        white-space: normal;
}
@media (min-width: 480px) { .rw-sentence span{ font-size: 24px;} }
@media (min-width: 768px) { .rw-sentence span{ font-size: 32px;} }
.rw-words{
        text-transform: none;
        line-height: 1;
}
.rw-words span{
  left: 0;
position: absolute;    
opacity: 0;
overflow: hidden;
width: 100%;
color: #fff;
        font-weight: 300;
        text-align: center;
        white-space: normal;
}
.rw-words-1 span{
animation: rotateWordsFirst 20s linear infinite 0s;
}
.rw-words-2 span{
animation: rotateWordsSecond 18s linear infinite 0s;
}
.rw-words span:nth-child(2) { 
animation-delay: 4s; 
color: #fff;
}
.rw-words span:nth-child(3) { 
animation-delay: 8s; 
color: #fff;
}
.rw-words span:nth-child(4) { 
animation-delay: 12s; 
color: #fff;
}
.rw-words span:nth-child(5) { 
animation-delay: 16s; 
color: #fff;
}
@keyframes rotateWordsFirst {
        0% { opacity: 1; animation-timing-function: ease-in; width: 100%; }
    10% { opacity: 0; width: 100%; }
17% { opacity: 0; width: 100%; }
    23% { opacity: 0; width: 100%; }
    35% { opacity: 0; width: 100%; }
    45% { opacity: 0; width: 100%; }
    55% { opacity: 0; width: 100%; }
    65% { opacity: 0; width: 100%; }
    75% { opacity: 0; width: 100%; }
    100% { opacity: 0;}
}
.button1{
    color: #fff;
    display: inline-block;
    font-size: 18px;
    letter-spacing: .75px;
    padding: 15px 21px;
    text-transform: uppercase;
    text-decoration: none;
    -webkit-transition: all 0.2s;
    transition: all 0.2s;
    vertical-align: middle;
}
a.button1 { display: inline-block; text-decoration: none; vertical-align: top; border: none; }
a.button1:link { color: #fff; text-decoration: none;}
.blue-bg { background-color: #00bce4;}
.contained-7 { max-width: 735px; }
.centered { margin-left: auto; margin-right: auto; }
.viewport-two-thirds-height { height: 600px; height: 66.66vh; }
.content-overlay { z-index: 1; position: relative; }
.content-overlay.middle { position: absolute; width: 100%; top: 50%; left: 0; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); }
.align-center { text-align: center; }
.padding-3x-2x { padding: 60px 40px; }
<div class="header-wrapper viewport-two-thirds-height">
<div class="content-overlay middle">
<h2 class="rw-sentence">
<img class="padding-2x" src="https://www.littlecity.org/wp-content/uploads/2015/11/TagYoureIt_type.png" alt="Tag You're It!" /><br />
<span>When you give, you</span><br />
<div class="rw-words rw-words-1">
<span>provide opportunities for people to work.</span>
<span>allow students to learn.</span>
<span>help preserve families and strengthen relationships.</span>
<span>improve the overall quality of life of the individuals we serve.</span>
<span>spread happiness and joy to each of our children and adults.</span>
                </div>
</h2>
<div class="contained-7 centered align-center padding-3x-2x">
<a class="button1 blue-bg" title="Give Now" href="https://little.convio.net">Give Now</a>
</div>
</div>
</div>

Answer №2

You're facing two issues:
1. The class name on your a element is incorrect, it should be changed from button2 greenbg to button2 green-bg;

2. You have the CSS rule 

.text1, a.text1:link{color:white}
instead of 
.text1, a.text1:link{ color:black}
. I added black as an example to show you that the text is white on a white background.

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

attempting to display an element using jQuery that belongs to the identical class

I have multiple buttons with the class .modif, each with a different title attribute such as title="one". All these buttons are associated with boxes that share the class .box_slide. However, I am trying to display only the box that also has the additional ...

jquerycss

An illustration of HTML frames

Is this method effective? <html> <body> <center> <frameset rows="50%,50%"> <frame src="images.html"> <frameset> <form action="abc.html"> <input type="submit" name="abc page" value="abc page"> </form> & ...

html

Is it possible to align divs so that they touch when they wrap to a new line, creating a grid-like appearance?

My React board component consists of an array of divs that I want to arrange in a grid-like map. The issue is, when the div wraps to a new line, there is significant space between each row. I aim to have the divs close together with no gaps. GameMap state ...

javascriptcssreactjsflexbox

Overlap of columns within a nested flexbox arrangement

While working with React and Styled Components, I encountered a problem of elements overlapping each other: https://i.stack.imgur.com/RuCYu.png There are a few instances of overlap, including: The padding below the <ul> element is colliding with ...

javascripthtmlreactjscssflexbox

Change the text color of the Vuetify button to customize its appearance

Is there a way to change the default active color for button text in a toolbar using CSS? v-btn(:to="item.path" active-class="v-btn--active toolbar-btn-active") {{item.meta.title}} I attempted to override it with this custom class: .toolbar-btn-active { ...

htmlcssvue.jsvuetify.js

The <link> element in the HTML file referring to the stylesheet {% static 'css/style.css' %} is not functioning properly

I am having trouble aligning text to the center in VS Code when linking CSS to HTML. The 'center-aliend' property doesn't seem to work for me. Can someone point out what I might be doing wrong? I am trying to position the text 'Hello St ...

htmlcssdjango

Rotate the image as you hover your cursor over it

I am trying to implement a script where the image is rotated when the user hovers over it. Unfortunately, the hovering effect is not functioning as expected. $("#alcazar-image").rotate({ bind: { mouseover : function() { $(this).rotate({anima ...

jquerycsstwitter-bootstrap-3hover

I am interested in displaying all the items on the list instead of just one

<html> <head> <link rel="stylesheet" type="text/css" href="mango.css"> <script> function showItems(){ var items = document.querySelectorAll("#main li"); items.forEach(i ...

javascripthtmlcssmenuonclick

Can IE(7?) cause distortion of backgrounds from sprites?

This task is giving me a headache. We're almost finished with revamping our website. The last step involves consolidating all the glyphs and icons into a sprite. These images are transparent .png files, so we made sure the sprite maintains transparen ...

cssinternet-explorerbackground-imagesprite

Personalized element IDs and unique CSS styles

After editing the code snippet below... <div id="rt-utility"><div class="rt-block fp-roksprocket-grids-utility title5 jmoddiv"> I applied the changes in my custom.css file like this: #rt-utility .rt-block {CODE HERE} However, when attemptin ...

css

Tips on linking a condition-reaction to document.querySelector

I am struggling to connect the condition-reactions to the input id of passid. I am unsure where to place the document.querySelector() method in order to link the indexed conditions correctly. Below is the code snippet: <!doctype html> <html> ...

javascripthtmlmethodsconditional-statements

Optimizing SEO with asynchronous image loading

I've been developing a custom middleman gem that allows for asynchronous loading of images, similar to the effect seen on Medium. Everything is functioning smoothly, but I'm uncertain about the impact on SEO. The image tag in question looks like ...

javascripthtmlseo

pure-react-carousel: every slide is in view

Issue I am encountering a problem where the non-active slides in my container are not being hidden properly. This results in all of the slides being visible when only one should be displayed. Additionally, some slides are rendering outside of the designate ...

javascriptcssreactjspure-react-carousel

Currently, I am expanding my knowledge of PHP and MySQL by working on a dynamic form that utilizes arrays. As I progress through the project,

One of my recent projects involved creating dynamic rows in a form using code. I managed to save the data in an array and display it using a foreach loop, but I'm facing challenges when trying to insert this data into a database. Here's a glimps ...

javascriptphpcssmysql

Learn how to save user input from form fields and text areas into JSON format using Angular

Is there a way to add comments using Angular when a user clicks on a button? Currently, whenever text is entered in the input field or textarea, it disappears and an empty block without any name, country, and comments is displayed. The entered text should ...

htmlangularjsjson

My AngularJs code seems to be throwing some errors

I recently started learning Angularjs and here is the code I have written: <!DOCTYPE html> <html> <head> <title>ng-Messages Service</title> <script src='https://ajax.googleapis.com/ajax/libs/jquery ...

htmlangularjsmodel-view-controller

Is it possible to integrate a standard drop-down menu/style into a MUI Select component?

I am currently working on implementing the default drop-down menu style for my MUI Select Component. Here is the desired menu appearance: https://i.stack.imgur.com/GqfSM.png However, this is what my current Select Component looks like: https://i.stack. ...

javascriptcssmaterial-uidrop-down-menujsx

What's the Best Way to Add a Border to My Two-Column Form?

I'm currently working on a reservation form for my website with a 2-column layout. In one column, I have tables, and I've been trying to add a divider between the columns but haven't found a solution yet. Despite researching ways to add a d ...

htmlformscssstylesmultiple-columns

The public link created by Github only displays the name of the repository

Hello, I am a newbie in the world of web development. After dedicating a week to practicing HTML, I decided to create a project based on my CV. However, when I attempted to host the HTML files on GitHub, I encountered an issue. Whenever I clicked on the ...

htmlgithub

"Ensure that the data in the div is being updated accurately via AJAX in ASP.NET MVC

I'm currently using a div element to display data on page load through AJAX calls. $(document).ready(function () { email_update(); }); function email_update() { $.ajax({ url: '@Url.Action("EmailsList", "Questions")', ...

javascriptjquerycssasp.netajax