Hello Forum,
I really do not understand why I keep having issues with the way my test project display on other browsers (Microsoft Edge, Explorer and Firefox). I thought that when a website is built, it is compatible with any browser. I don’t know if the website is launched, it will correct itself and display well in other browsers.
Please how do I correct this issue so that I don’t get to see it again in the future?
Here is the Screenshot for Microsoft Edge and Chrome. Below is also my HTML and Css
Microsoft Edge
Chrome Screenshot
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<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>Index</title>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<link href='https://fonts.googleapis.com/css?family=Comfortaa' rel='stylesheet' />
<link href='https://fonts.googleapis.com/css?family=Nunito' rel='stylesheet' />
<link href='https://fonts.googleapis.com/css?family=Cooperb' rel='stylesheet' />
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<!-- Bootstrap CSS CDN -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous" />
<!-- Our Custom CSS -->
<!-- <link rel="stylesheet" href="style.css"/>-->
<link href="css2/style2.css" rel="stylesheet" />
<link rel="stylesheet" href="style2.css" />
<!-- Scrollbar Custom CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.min.css" />
<!-- Font Awesome JS -->
<script defer src="https://use.fontawesome.com/releases/v5.0.13/js/solid.js" integrity="sha384-tzzSw1/Vo+0N5UhStP3bvwWPq+uvzCMfrN1fEFe+xBmv1C/AtVX5K0uZtmcHitFZ" crossorigin="anonymous"></script>
<script defer src="https://use.fontawesome.com/releases/v5.0.13/js/fontawesome.js" integrity="sha384-6OIrr52G08NpOFSZdxxz1xdNSndlD4vdcf/q2myIUVO0VsqaGHJsB0RaBE01VTOY" crossorigin="anonymous"></script>
<style type="text/css">
.wrapper {
display: flex;
width: 100%;
align-items: stretch;
}
#sidebar {
min-height: 100vh;
min-width: 250px;
max-width: 250px;
top: 0;
left: 0;
z-index: 999;
background: #00003D;
color: #fff;
transition: all 0.3s;
}
#sidebar.active {
margin-left: -250px;
}
a[data-toggle="collapse"] {
position: relative;
}
.dropdown-toggle::after {
display: block;
position: absolute;
top: 50%;
right: 20px;
transform: translateY(-50%);
}
@media (max-width: 768px) {
#sidebar {
margin-left: -250px;
}
#sidebar.active {
margin-left: 0;
}
}
body {
font-family: 'Comfortaa';
background-color: #DCDCDC;
}
p {
font-family: 'Poppins', sans-serif;
font-size: 1.1em;
font-weight: 300;
line-height: 1.7em;
color: #999;
}
a, a:hover, a:focus {
color: inherit;
text-decoration: none;
transition: all 0.3s;
}
#sidebar {
/* don't forget to add all the previously mentioned styles here too */
min-height: 100vh;
min-width: 250px;
max-width: 250px;
top: 0;
left: 0;
z-index: 999;
background: #00003D;
color: #fff;
transition: all 0.3s;
}
#topbar {
background: #00003D;
}
#sidebar .sidebar-header {
padding: 20px;
background: #00003D;
font-size: 10pt;
font-weight: bold;
}
#sidebar ul.components {
padding: 20px 0;
border-bottom: 1px solid #47748b;
}
#sidebar ul p {
color: #fff;
padding: 10px;
font-size: 10pt;
}
#sidebar ul li a {
padding: 10px;
font-size: 1.1em;
display: block;
font-size: 10pt;
}
#sidebar ul li a:hover {
color: #7386D5;
background: #fff;
}
#sidebar ul li.active > a, a[aria-expanded="true"] {
color: #fff;
background: #00003D;
}
ul ul a {
font-size: 0.9pt !important;
padding-left: 30px !important;
background: #4682b4;
}
#sidebarCollapse {
background-color: #00003D;
font-size: 8pt;
max-width: 25px;
min-width: 25px;
max-height: 25px;
min-height: 25px;
}
#sideCollapse {
background-color: #00003D;
font-size: 8pt;
max-width: 26px;
min-width: 26px;
max-height: 26px;
min-height: 26px;
}
#content {
width: 100%;
font-size: 10pt;
}
#center-content {
margin-right: 50%;
position: center;
font-size: 10pt;
}
.page {
width: 300px;
height: 350px;
position: absolute;
margin: auto;
}
#midcont {
position: relative;
background-color: #ffffff;
border: 1px solid #ccc;
}
</style>
<style>
#Label14 {
position: absolute;
bottom: 80px;
left: 0px;
top: 20%;
left: 40%;
opacity: 0.2;
}
.test {
-moz-transform: rotate(-40deg); /* FF3.5+ */
-o-transform: rotate(-40deg); /* Opera 10.5 */
-webkit-transform: rotate(-40deg); /* Saf3.1+, Chrome */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=-40); /* IE6,IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=-40)"; /* IE8 */
-sand-transform: rotate(-40deg);
}
</style>
</head>
<body style="font-family: 'Comfortaa'; background-color: #eeeeee;">
<form id="form1" runat="server">
<div class="wrapper">
<!-- Sidebar -->
<nav id="sidebar">
<ul class="list-unstyled components">
<li>
<a href="#homeSubmenu" data-toggle="collapse" aria-expanded="false" class="toggle">Profile</a>
</li>
<li>
<a href="#CarSubmenu" data-toggle="collapse" aria-expanded="false" class="toggle">Dashboard</a>
</li>
<li>
<a href="#phoneSubmenu" data-toggle="collapse" aria-expanded="false" class="toggle">Customers</a>
</li>
</ul>
</nav>
<div id="content">
<nav id="topnav" class="navbar navbar-expand-lg navbar-default navbar-inverse navbar-fixed-top" role="navigation" style="background-color: #eeeeee; font-size: small; font-family: 'Comfortaa';">
<div class="container-fluid">
<button type="button" id="sidebarCollapse" class="btn btn-info">
<i class="fas fa-align-left"></i>
<span class="sr-only">Toggle Navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<h3 style="font-size: 10pt; font-weight: bolder; font: bolder; color: #00003D;"></h3>
<button class="btn btn-info d-lg-none ml-auto" id="sideCollapse" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<i class="fas fa-align-justify"></i>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="nav navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="Home.aspx" style="font-weight: bolder;">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" style="font-weight: bolder;">About</a>
</li>
<li class="dropdown" id="Pbutton" style="margin-right: 10px;">
<script src="https://js.paystack.co/v1/inline.js"></script>
<asp:Button type="button" ID="lipaybutton" runat="server" class="btn btn-primary navbar-btn" BackColor="SteelBlue" Text="wallet" Style="font-size: 7pt;" />
</li>
<li class="dropdown" style="margin-right: 10px;">
<asp:Button ID="btnSignOut" runat="server" class="btn btn-primary navbar-btn" BackColor="SteelBlue" Text="Log Out" Style="font-size: 7pt" />
</li>
</ul>
</div>
</div>
</nav>
<hr />
<div class="line"></div><br />
<div class="container" id="center-content" style="margin-top: 0%; font-family: 'Comfortaa'; width: 100%; padding: .5rem; margin: 0px;">
<div class="form-horizontal" style="width: 100%;">
<h5 style="margin-top: -3%; font-family: Tahoma; color: #00003D;">Dashboard</h5>
<hr />
<asp:Button ID="Button1" runat="server" Text="Add New User" Font-Size="Small" BackColor="SteelBlue" Class="btn btn-primary" />
<label runat="server" style="font-size: 8pt; color: #00003D; font-family: 'Century Gothic';">(Authorize other users to Authenticate documents with QR code).</label>
<asp:Label ID="Label19" runat="server" Text=""></asp:Label><asp:Label ID="labelid" runat="server" Text="Uid"></asp:Label><asp:Label ID="createby" runat="server" Text="ukosimons@gmail.com"></asp:Label><asp:Label ID="role" runat="server" Text="role"></asp:Label>
<br />
<br />
<div>
<div class="contain" style="width:100%;">
<div class="card-deck mb-3 text-center">
<div class="card mb-4 shadow-sm" style="background-color: #487393;">
<div class="card-header">
<h4 class="my-0 font-weight-normal">CERTIFICATE</h4>
</div>
<div class="card-body">
<h1 class="card-title pricing-card-title">$0 <small class="text-muted">/ mo</small></h1>
<ul class="list-unstyled mt-3 mb-4">
<li>10 users included</li>
<li>2 GB of storage</li>
<li>Email support</li>
<li>Help center access</li>
</ul>
<button type="button" class="btn btn-lg btn-block btn-outline-primary">Sign up for free</button>
</div>
</div>
<div class="card mb-4 shadow-sm" style="background-color: #81969C;">
<div class="card-header">
<h4 class="my-0 font-weight-normal">ID CARD</h4>
</div>
<div class="card-body">
<h1 class="card-title pricing-card-title">$15 <small class="text-muted">/ mo</small></h1>
<ul class="list-unstyled mt-3 mb-4">
<li>20 users included</li>
<li>10 GB of storage</li>
<li>Priority email support</li>
<li>Help center access</li>
</ul>
<button type="button" class="btn btn-lg btn-block btn-primary" style="background-color: steelblue;">Get started</button>
</div>
</div>
<div class="card mb-4 shadow-sm" style="background-color: #CECECF;">
<div class="card-header">
<h4 class="my-0 font-weight-normal">INVOICE</h4>
</div>
<div class="card-body">
<h1 class="card-title pricing-card-title">$29 <small class="text-muted">/ mo</small></h1>
<ul class="list-unstyled mt-3 mb-4">
<li>30 users included</li>
<li>15 GB of storage</li>
<li>Phone and email support</li>
<li>Help center access</li>
</ul>
<button type="button" class="btn btn-lg btn-block btn-primary" style="background-color: steelblue;">Contact us</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<footer>
<div class="container1" style="background-color: #D1D1D1; font-size: 8pt; height: 240px; position: relative; margin-bottom: 0%; max-width: 100%; font-family: 'Comfortaa';">
<p class="pull-right"><a href="#" style="color: white; font-family: 'Comfortaa';">Back to Top</a></p>
<div class="container-fluid" style="text-align: center; font-family: 'Comfortaa';">
<p style="color: white; font-family: 'Comfortaa'; margin-top: 3%; margin-left: 0%;">Contact Address: Nigerian Merit Award House</p>
<p style="color: white; font-family: 'Comfortaa';">Maitama District Abuja, F.C.T</p>
<p style="color: white; font-family: 'Comfortaa';">08138709222 08037445843 08023456781</p>
<asp:HyperLink ID="HyperLink5" runat="server" ImageUrl="~/images/facebk-icon1.png" imagesize="10" Height="20" NavigateUrl="http://www.facebook.com">HyperLink</asp:HyperLink>
<asp:HyperLink ID="HyperLink1" runat="server" ImageUrl="~/images/facebk-icon12.png" NavigateUrl="http://www.twitter.com">HyperLink</asp:HyperLink>
<asp:HyperLink ID="HyperLink6" runat="server" ImageUrl="~/images/email-icon-1.png" NavigateUrl="http://www.gmail.com">HyperLink</asp:HyperLink>
<asp:HyperLink ID="HyperLink7" runat="server" ImageUrl="~/images/linedin.png" NavigateUrl="http://www.linkedin.com">HyperLink</asp:HyperLink>
<asp:HyperLink ID="HyperLink8" runat="server" ImageUrl="~/images/whatsapp2.png" image-size="30px" NavigateUrl="http://www.whatsapp.com">HyperLink</asp:HyperLink>
</div>
<br />
<br />
<p style="color: white; margin-bottom: -4%; font-weight: bold;">Copyright © 2020 Joscheck Tech. All Rights Reserved.</p>
</div>
</footer>
</div>
</div>
</form>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.concat.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#sidebar").mCustomScrollbar({
theme: "minimal"
});
$('#sidebarCollapse').on('click', function () {
// open or close navbar
$('#sidebar').toggleClass('active');
// close dropdowns
$('.collapse.in').toggleClass('in');
// and also adjust aria-expanded attributes we use for the open/closed arrows
// in our CSS
$('a[aria-expanded=true]').attr('aria-expanded', 'false');
});
});
</script>
</body>
</html>
