I've encountered an issue where the text is stacking on top of itself in Internet Explorer only. Here is the specific CSS for IE:
h2 {
font-family: 'Paytone One', sans-serif;
font-size: 30px;
position: relative !important;
top:-150px !important;
left:-250px !important;
color: black;
}
h3 {
font-family: 'Paytone One', sans-serif;
font-size: 20px;
position: relative !important;
top:150px !important;
left: 100px !important;
}
.image2 {
position: relative !important;
bottom:100px !important;
left: 100px !important;
}
.box1 {
width: 100%;
height: 5px;
background-color: #FC3B3B;
position: relative !important;
bottom:0px !important;
left: 0px !important;
}
p {
position: relative !important;
bottom:0px !important;
left: 0px !important;
font-size: 15px;
font-family: arial;
color: #585858;
}
I added !important which led to this issue. How can I prevent this from happening while still defining the position?
Here is the HTML part of my page:
<!DOCTYPE html>
<head>
<link href='http://fonts.googleapis.com/css?family=Paytone+One' rel='stylesheet' type='text/css'>
<title>Louis Moore | Creating The Future </title>
<!--[if IE]>
<link rel="stylesheet" type"text/css" href="ie.css" >
<![endif]-->
</head>
<style>
.box {
background-color: #F1F2F2;
border: 1.5px #D1D3D4 solid;
position: relative;
top: 100px;
height:450px;
width:100%;
}
.image1 {
position: absolute;
top:-100px;
left: 400px;
}
body{
font-family: 'Paytone One', sans-serif;
font-size: 30px;
}
h1 {
font-family: 'Paytone One', sans-serif;
font-size: 40px;
position: absolute;
top:150px;
left: 400px;
}
h2 {
font-family: 'Paytone One', sans-serif;
font-size: 30px;
position: absolute;
top:200px;
left: 500px;
color: #FC3B3B;
}
h3 {
font-family: 'Paytone One', sans-serif;
font-size: 20px;
position: absolute;
top:300px;
left: 400px;
}
.image2 {
position: absolute;
top:370px;
left: 600px;
}
.box1 {
width: 100%;
height: 5px;
background-color: #FC3B3B;
position: absolute;
top:560px;
left: 0px;
}
p {
position: absolute;
top:600px;
left: 100px;
font-size: 15px;
font-family: arial;
color: #585858;
}
</style>
<body>
<div class="box">
<img src="louis.png" class="image1" alt="." width="400px" height="400px">
<h1> WELCOME TO MY PAGE<h1>
<h2>COMING SOON... <h2>
<h3>BUT FOR NOW FOLLOW ME ON TWITTER</h3>
<a href="http://twitter.com/louismoore18"><img src="twitter.png" class="image2" border="0" alt="."></a>
</div>
<div class="box1">
</div>
<p>louismoore.net © All rights reserved 2012</p>
</body>
</html>