Home>Support>Styling conflict with Ie

Styling conflict with Ie

By Lilla, 7 years ago. Last reply by Lilla, 7 years ago.
Notice: This thread is over two years old; the information may be outdated. Please consider creating a new thread if you require free support. If you have an active SiteOrigin Premium license, you can email our premium support desk at [email protected].

Hi,

I designed a page using SiteOrigin Editor, that I stylized using . It works well on Google Chrome and Firefox, but it can’t be read properly on IE.

Then, I tried to rebuild it using “Widget Styles” > “Attributes” > “CSS Styles”, but it applies the propeties to the whole element, and I can’t use any selector to select an item in particular.

I don’t want to create a widget for every single text line (for example: title + text + title + text), how can I solve this please?

Thank you very much.

This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.

  1. 7 years, 6 months ago Alex S
    Hi, I Work Here

    Hi Lilla,

    Do you have a public URL where we can take a look at what’s going on?

  2. 7 years, 6 months ago Lilla

    Hi Alex,

    Sorry for this late reply.

    I found another way to design my page. But here is an example of html code I wanted to create using SiteOrigin Editor. It works with Google Chrome but not on IE.

    Thank you !

    Forwardis – Careers

    .button {
    border-radius: 3px;
    background-color: #303246;
    display: inline-block;
    padding: 10px 15px;
    margin: 15px 30px;
    font-size: 18px;
    }
    .button2 {
    border-radius: 3px;
    background-color: #303246;
    display: inline-block;
    padding: 5px 10px;
    margin: 15px 30px;
    font-size: 12px;
    }
    p.button > a, p.button2 > a {
    padding: 0;
    text-decoration: none;
    color: #ffffff;
    }
    section + section {
    margin-top: 30px;
    }
    section > article {
    padding: 5px 15px;
    border: 1px solid #303246;
    margin-bottom: 5px;
    }
    section > article:nth-child(odd) {
    background-color: #fdd7e2;
    }
    section > article > div {
    display: inline-block;
    }
    section > article > div > p {
    margin: 0 0 15px;
    }
    section > article > div > h3 {
    margin: 10px 0;
    }

  3. 7 years, 6 months ago Lilla 
    <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Forwardis - Careers</title>
<style type="text/css">
.button {
border-radius: 3px; 
background-color: #303246; 
display: inline-block; 
padding: 10px 15px; 
margin: 15px 30px;
font-size: 18px;
}
.button2 {
border-radius: 3px; 
background-color: #303246; 
display: inline-block; 
padding: 5px 10px; 
margin: 15px 30px;
font-size: 12px;
}
p.button > a, p.button2 > a {
padding: 0; 
text-decoration: none; 
color: #ffffff;
}
section + section {
margin-top: 30px; 
}
section > article {
padding: 5px 15px; 
border: 1px solid #303246;
margin-bottom: 5px; 
}
section > article:nth-child(odd) {
background-color: #fdd7e2;
}
section > article > div {
	display: inline-block;
}
section > article > div > p {
margin: 0 0 15px;
}
section > article > div > h3 {
margin: 10px 0; 
}
</style>
</head>
<body>
<section style="height:400px; background-color: #e60050; background-size:100%; font-size:20px; color: #ffffff; display: flex;">
<div style="text-align: center; margin: auto;">Texte
</div>
</section>
<section style="text-align: center;">
<p class="button";>
<a href="http://forwardis.com";>Candidature spontanée</a>


<p class="button";>
<a href="#offres";>Voir nos opportunités</a>


</section>
<section id="offres">
<article>
<div>
<h3>Titre du poste</h3>
Département


Contrat


Localisation


Description 2-3 lignes


</div>
<p class="button2";>
<a href="http://forwardis.com";>Voir l'offre en détail</a>


<p class="button2";>
<a href="http://forwardis.com";>Postuler directement</a>


</article>
<article>
<div>
<h3>Titre du poste</h3>
Département


Contrat


Localisation


Description 2-3 lignes


</div>
</article>
</section>

</body>
</html>
Replies on this thread are closed. Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More