Strange formatting in the internet explorer browser (IE)

Question

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-->

html css internet-explorer

Answer 1

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

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 3

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.

Answer 4

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.

Strange formatting in the internet explorer browser (IE)

Answer №1

Answer №2

Similar questions

Using jQuery to target adjacent elements excluding those that are separated by other text

Leveraging Font Awesome icons within a WordPress theme

Bootstrap 4: The mystery behind why the popover fails to appear inside a scrollable dropdown

Is there a difference in font size between Firefox and Webkit browsers?

Creating a subtle vanishing popup dialog using only CSS (no reliance on jQuery)

Having difficulty pinpointing and deleting an added element using jQuery or JavaScript

The styles within a media query are not being successfully implemented

Ways to retrieve element(s) and delete a specific class located in the DOM structure

How can I adjust the height of the carousel slider to fit the course section perfectly?

JavaScript not properly rendering CSS styles

What is the best way to adjust the height of a dropdown box in an angular application?

Is there a way for me to activate onMouseEnter on elements that are positioned behind other elements

Dynamic resizing of Bootstrap Carousel

Guide on replacing the character "&" in PHP with ease

What steps should be taken to incorporate a user input space similar to the one found in the Wordpress new post section

unable to load the ajax file

Is it possible to enable auto-completion for IDs in a separate CSS file using WebStorm 7?

Jquery enables smooth image transitions when changing classes

Generating Speech from Text using jQuery API in HTML

Troubleshooting Display Issue with Nested Div Selection in jQuery Tooltips