CSS style sheet not displaying outside google chrome

jsmookler1 · 01-30-2013, 01:46 PM

I have been having display issues near the top of the page where the links to other pages are overlapping with the other wording on the top of the page. It seems to display perfectly, exactly how I wanted it to in google chrome. But when I use ie9 its messed up so I tried to add an additional style sheet specific for ie9 to correct the issues somehow but nothing I'm doing seems to work. I have the site live right now at www.paylesspc.6te.net if it helps anyone to view it there.
If anyone can help thanks.

------------ HTML ------------- index.html -------------------

<!doctype html>
<html>

<head>
<meta charset="utf-8">
<title>Payless PC</title>
<script src="http://use.edgefonts.net/quantico.js"></script>
<link href="styles/PaylessPC.css" rel="stylesheet" type="text/css">
</head>

<body>
<div id="container">
<div id="header">
<h1>Payless PC</h1>
<p>Repairs, Training, Networking, & Custom Builds</p>
<ul>
<li><a href="about.html">About Us</a></li>
<li><a href="contact.html">Contact Us</a></li>
<li><a href="testimonials.html">Testimonials</a></li>
</ul>
</div>
<div id="main_image">
<div id="main_text">
<h2>Economy Upgrade, Professional Gain</h2>
<h3>Why replace a PC that isnt broken?</h3>
<p><br>
Lets us help you to provide significant computer performance increases while sticking to a budget.  A low-cost upgrade can be your ticket to a longer lasting computer. Ask About our Memmory discounts.</p>
<p><a href="quickfix.html">Read More...</a></p>
</div>
</div>
<div id="left_column">
<p><img src="images/Spare_Parts___Upgrades.jpg" width="316" height="130" alt="Car"></p>
<h2>About Us</h2>
<p>We are those people who live for technology.  We enjoy what we do and we enjoy sharing our knowledge with you.  At Payless PC we strive to bring you fast results and encourage better understanding of our everchanging technical world.<br>
<a href="about.html">read more...</a></p>
</div>
<div id="center_column">
<p><img src="images/computer-upgrade-in-edinburgh.jpg" width="316" height="130" alt="Data"></p>
<h2>Contact Us</h2>
<p>We dedicate ourselves to an open communication relationship with our customers.  You may call us by phone at xxxx-xxx-xxxx or email us at <a href="mailto

aylesspcptc@gmail.com">paylesspcptc@gmail.com</a>. Ask about our at-home services! Or log on to our website and talk to a representitive online (lol you need code this into the site to call our cellphones whenever so we can text to the web.) <br>
<a href="contact.html">read more...</a></p>
</div>
<div id="right_column">
<p><img src="images/computer-upgrades.jpg" width="316" height="130" alt="Helmet"></p>
<h2>Testimonials</h2>
<p>(forumesqe? page for this link. ) We are proud of the service that we provide for the community and we dedicate a section of (ourselves) to your opinions.  This page provides a place for the community to express their opinions about our services.<br>
<a href="testimonials.html">read more...</a></p>
</div>
</div>
</body>
</html>

----------- CSS --------- paylesspc.css ----------

@charset "utf-8";
/* CSS Document */

#container {
width: 968px;
background: #FFF;
padding-left: 10px;
padding-right: 10px;
overflow: hidden;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
}
body {
}
#main_image {
background-image: url(../images/3dwin.jpg);
background-repeat: no-repeat;
height: 376px;
width: 968px;
position: relative;
padding: 0px;
word-wrap: break-word;
}
#left_column, #center_column, #right_column {
width: 316px;
float: left;
}
#center_column, #right_column {
margin-left: 10px;
}
h1 {
font-family: quantico, serif;
font-size: 72px
;
margin: 0;
float: left;
padding-right: 20px;
padding-left: 5px;
}
#header {
color: #FFF;
background-color: #000;
height: 100px;
position: relative;
padding: 0px;

[if IE 7]>

<link href="_css/ie9.css" rel="stylesheet" type="text/css">

<![endif]
}
body {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
color: #3B3B3B;
background-color: #FFF;
margin: 0px;
padding-left: 0px;
overflow: hidden;
}
#header p {
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size: 30px;
font-variant: small-caps;
margin-top: 0px;
margin-bottom: 0px;
padding-top: 15px;
padding-left: 0px;
padding-right: 0px;
margin-left: 0px;
}
#header a {
font-size: 20px;
font-weight: bold;
font-variant: small-caps;
color: #FFF;
text-decoration: none;
text-align: center;
display: block;
width: 100px;
padding-top: 0px;
padding-right: 10px;
padding-bottom: 0px;
padding-left: 10px;
}
#header ul li {
float: left;
padding-left: 0px;
}
#header ul {
margin: 0px;
list-style-type: none;
position: absolute;
right: -1px;
bottom: -1px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
}
#main_text {
background-color: #FFF;
background: rgba(255,255,255,0.8);
width: 300px;
position: absolute;
right: 29px;
bottom: 25px;
padding: 12px;
border-radius: 10px;
}
#main_text h3 {
font-size: 16px;
margin: 0px;
}
#main_text h2 {
color: #00ADEF;
margin-top: 0px;
margin-bottom: 10px;
}

#main_text p {
font-size: 14px;
line-height: 1.2;
margin: 0px;
}

.ab.col #left_column {
color: #FFF;
background-color: #666;
padding-top: 0px;
padding-right: 10px;
padding-bottom: 0px;
padding-left: 10px;
}
#header ul li a {
overflow: hidden;
}

.ab.col #right_column {
width: 622px;
}
.post_header {
background-color: #999;
padding-top: 2px;
padding-right: 10px;
padding-bottom: 2px;
padding-left: 10px;
}
.post_header h3 {
margin-top: 5px;
margin-bottom: 10px;
}
#right_column .post_header p {
font-size: 12px;
color: #FFF;
margin: 0px;
padding-left: 0px !important;
}
.ab.col #right_column p {
padding-right: 10px;
padding-left: 10px;
}
.ab.col h2 {
font-family: Arial, Helvetica, sans-serif;
font-size: 72px;
font-variant: small-caps;
text-align: center;
word-spacing: .3em;
clear: left;
position: relative;
top: -15px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: -25px;
margin-left: 0px;
}

#header h1 a{
font-size: 72px;
font-variant: normal;
width: auto;
}

---------- CSS added for ie9 -------- ie9.css ---------------

@charset "utf-8";
/* CSS Document */

div.container {
overflow:hidden;
word-wrap: break-word;
}

#container {
width: 968px;
background: #FFF;
padding-left: 10px;
padding-right: 10px;
overflow: hidden;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
}
body {
}
#main_image {
background-image: url(../images/3dwin.jpg);
background-repeat: no-repeat;
height: 376px;
width: 968px;
position: relative;
padding: 0px;
word-wrap: break-word;
}
#left_column, #center_column, #right_column {
width: 316px;
float: left;
}
#center_column, #right_column {
margin-left: 10px;
}
h1 {
font-family: quantico, serif;
font-size: 88px
;
margin: 0;
float: left;
padding-right: 20px;
padding-left: 5px;
}
#header {
color: #FFF;
background-color: #000;
height: 150px;
position: relative;
padding: 0px;
}
body {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
color: #3B3B3B;
background-color: #FFF;
margin: 0px;
padding-left: 0px;
overflow: hidden;
}
#header p {
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size: 30px;
font-variant: small-caps;
margin-top: 0px;
margin-bottom: 0px;
padding-top: 15px;
padding-left: 0px;
padding-right: 0px;
margin-left: 0px;
}
#header a {
font-size: 20px;
font-weight: bold;
font-variant: small-caps;
color: #FFF;
text-decoration: none;
text-align: center;
display: block;
width: 100px;
padding-top: 0px;
padding-right: 10px;
padding-bottom: 0px;
padding-left: 10px;
}
#header ul li {
float: left;
padding-left: 0px;
}
#header ul {
margin: 0px;
list-style-type: none;
position: absolute;
right: -1px;
bottom: -1px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
}
#main_text {
background-color: #FFF;
background: rgba(255,255,255,0.8);
width: 300px;
position: absolute;
right: 29px;
bottom: 25px;
padding: 12px;
border-radius: 10px;
}
#main_text h3 {
font-size: 16px;
margin: 0px;
}
#main_text h2 {
color: #00ADEF;
margin-top: 0px;
margin-bottom: 10px;
}

#main_text p {
font-size: 14px;
line-height: 1.2;
margin: 0px;
}

.ab.col #left_column {
color: #FFF;
background-color: #666;
padding-top: 0px;
padding-right: 10px;
padding-bottom: 0px;
padding-left: 10px;
}
#header ul li a {
overflow: hidden;
}

.ab.col #right_column {
width: 622px;
}
.post_header {
background-color: #999;
padding-top: 2px;
padding-right: 10px;
padding-bottom: 2px;
padding-left: 10px;
}
.post_header h3 {
margin-top: 5px;
margin-bottom: 10px;
}
#right_column .post_header p {
font-size: 12px;
color: #FFF;
margin: 0px;
padding-left: 0px !important;
}
.ab.col #right_column p {
padding-right: 10px;
padding-left: 10px;
}
.ab.col h2 {
font-family: Arial, Helvetica, sans-serif;
font-size: 72px;
font-variant: small-caps;
text-align: center;
word-spacing: .3em;
clear: left;
position: relative;
top: -15px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: -25px;
margin-left: 0px;
}

#header h1 a{
font-size: 77px;
font-variant: normal;
width: auto;
}

Frankie · 01-31-2013, 12:25 PM

Quote:

Code:

<!doctype html>
<html>
<!--[if IE 9]>
<link href="styles/ie9.css" rel="stylesheet" media="screen" type="text/css">
<![endif]-->
<head>
<meta charset="utf-8">
<title>Payless PC</title>
<script src="http://use.edgefonts.net/quantico.js"></script>
<link href="styles/PaylessPC.css" rel="stylesheet" type="text/css">
</head>

This way, IE will load both stylesheets, and the second one overrules the first. So no wonder why it doesn't have any effect. Turn the order around and things should work. And put all links inside the head:

Code:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Payless PC</title>
<script src="http://use.edgefonts.net/quantico.js"></script>
<link href="styles/PaylessPC.css" rel="stylesheet" type="text/css">
<!--[if IE 9]><link href="styles/ie9.css" rel="stylesheet" media="screen" type="text/css"><![endif]-->
</head>

By the way, there is another method of targeting IE, even IE versions: the html tag conditional class method. Have a look at the source code of www.conijnconsultancy.com.