After completing the coding for my website, I encountered some issues on specific web browsers like Internet Explorer and Microsoft Edge. Despite conducting searches, I have been unable to find a solution. Here is an excerpt from the CSS code I am currently using:
.container {
width: 70%;
position: relative;
left: 47.5%;
transform: translateX(-50%);
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-o-transform: translateX(-50%);
-ms-transform: translateX(-50%);
background: white;
margin-top: -450px;
}
article {
text-align: justify;
width: 80%;
margin-left: 25%;
color: #666;
margin-bottom: 140px;
}
.grand_titre_section {
font-size: 50px;
font-family: honey;
text-decoration: underline overline dotted orange;
-webkit-text-decoration: underline overline dotted orange;
-moz-text-decoration: underline overline dotted orange;
-o-text-decoration: underline overline dotted orange;
-ms-text-decoration: underline overline dotted orange;
position: sticky;
position: -webkit-sticky;
position: -moz-sticky;
position: -o-sticky;
position: -ms-sticky;
text-decoration-color: orange;
text-decoration-style: dotted;
text-decoration-line: overline underline;
top: 99px;
background: white;
z-index: 10000;
padding: 20px 0px 10px 0px;
}
Additionally, here is the HTML code snippet:
<div class="container">
<article>
<div class="grand1" id="grand1">
<p class="grand_titre_section">Big title</p>
<!-- other elements of the div -->
</div>
</article>
</div>
I have attempted using vendor prefixes and separating elements, but unfortunately, it has not resolved the issue.
Furthermore, the use of 'position: sticky;' does not seem to be effective either.
If more code is required to address this problem, please let me know as my webpage has a unique layout resulting in challenging positioning requirements.