I'm new here and I just began learning about html/css for a few days, after getting a hang for both, I design this simple page. The problem is the css only recognized by Chrome (v13) not Firefox (v6) or IE (v9).
Here's my html files:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href="http://fonts.googleapis.com/css?family=Lekton" rel="stylesheet" type="text/css"/>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>Overcompensate</title>
<link rel="stylesheet" type="css" media="screen" href="css/overcompensation_of_style.css"/>
</head>
<body>
<div id="container">
<div id="banner">
<h1><a href="#"><img src="images/header.png" alt="Art Blanc"/></a></h1>
</div>
<div id="sidebar">
<ul>
<li><a href="#">WORK</a></li>
<li><a href="#">JOURNAL</a></li>
<li><a href="#">PLAY</a></li>
<li><a href="#">COLOPHON</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</div>
<div id="content">
<h3><a href="#">The Unbearable Lightness of Being</a></h3>
<p>
Gentrify cardigan photo booth, Austin mustache next level keffiyeh tumblr. Marfa irony squid, biodiesel helvetica skateboard trust fund. Blog skateboard fixie iphone cred. Organic gluten-free carles, american apparel terry richardson tofu keytar trust fund before they sold out locavore etsy. Brooklyn cosby sweater beard, brunch scenester next level locavore gluten-free sartorial. Sustainable before they sold out chambray bicycle rights biodiesel. Letterpress homo twee, tumblr blog american apparel chambray.
</p>
<blockquote>
<p>
Butcher synth DIY, american apparel gluten-free quinoa food truck +1 wayfarers wolf yr lomo next level keffiyeh. Wolf mcsweeney's beard wes anderson, squid tattooed dreamcatcher thundercats biodiesel vice craft beer vegan. Locavore fanny pack iphone letterpress homo sustainable.
</p>
</blockquote>
<p>
Lo-fi <a href="#">gluten-free</a> yr wolf, scenester letterpress food truck Austin. Cosby sweater VHS shoreditch stumptown. Bicycle rights cardigan skateboard PBR homo. Vinyl stumptown brunch cardigan banh mi.
</p>
<p>
Butcher synth DIY, american apparel gluten-free quinoa food truck +1 wayfarers wolf yr lomo next level keffiyeh. Wolf mcsweeney's beard wes anderson, squid tattooed dreamcatcher thundercats biodiesel vice craft beer vegan. Locavore fanny pack iphone letterpress homo sustainable. Lo-fi <a href="#">gluten-free</a> yr wolf, scenester letterpress food truck Austin. Cosby sweater VHS shoreditch stumptown. Bicycle rights cardigan skateboard PBR homo. Vinyl stumptown brunch cardigan banh mi.
</p>
<p>So I asked Bob about quotations and he said <cite>I know as much about quotations as I do about pigeon fancying</cite>. Luckily, I found HTML Dog and it said...</p>
<blockquote title="From HTML Dog, http://www.htmldog.com/">
<p>
blockquote, q and cite are used for quotations. blockquote is block-line and used for large or citations, whereas q is in-line and used for smaller phrases. cite is also in-line and preferable to q for its semantic nature and possible future deprecation of q.
</p>
</blockquote>
</div>
<div id="footer">
<p>
If it worth thinking, it's worth overcompensating.
</p>
</div>
</div>
</body>
</html>
Here's my css file:
body {
margin: 0 0 0 0;
padding: 0 0 0 0;
font-family: Verdana, sans-serif;
font-size: .81em;
line-height: 1.8em;
color: #3A3D41;
background-color: #F8F8F8; /* the off-white thing */
text-align: left;
min-width: 760px;
}
/*----- Container -----*/
#container {
position: relative;
margin: 0 0 0 0;
padding: 0 0 0 0;
width: auto;
}
/*----- Banner -----*/
#banner {
position: relative;
height: 80px;
width: 440px;
margin: 4em 0 2em 32em;
}
#banner h1 {
font-family: "Lekton", Verdana, sans-serif;
font-size: 1em;
text-align: center;
}
/*----- sidebar -----*/
#sidebar {
margin-left: 120px;
float: left;
font-family: "Lekton", Verdana, sans-serif;
text-align: right;
width: 200px;
list-style: none;
/* background-color: red; */
}
#sidebar a {
font-family: "Lekton", Verdana, sans-serif;
font-size: 1.4em;
line-height: 3em;
text-decoration: none;
color: #3A3D41;
}
#sidebar a:hover {
font-family: "Lekton", Verdana, sans-serif;
font-size: 1.4em;
line-height: 3em;
border-color: #888;
border-width: 0 0 1px 0;
border-style: none none solid none;
text-decoration: none;
}
#sidebar li {
list-style: none;
}
/*----- content -----*/
#content {
margin: 0 32em;
width: 440px;
/* background-color: green; */
}
#content blockquote {
margin-left: 36px;
padding-left: 12px;
border-style: none none none solid;
border-width: 0 0 0 1px;
}
#content a {
font-family: "Lekton", Verdana, sans-serif;
text-decoration: none;
}
#content a:link {
text-decoration: none;
color: #3A3D41;
border-color: #888;
border-width: 0 0 1px 0;
border-style: none none solid none;
padding: 3px 0px 2px 0px;
background-color: inherit;
}
#content a:visited {
color: #3A3D41;
border-color: #999;
border-width: 0 0 1px 0;
border-style: none none dotted none;
padding: 3px 0px 2px 0px;
background-color: inherit;
}
#content a:hover {
color: #3A3D41;
text-decoration: none;
background-color: #606870;
border-color: #606870;
}
/*----- footer -----*/
#footer {
position: relative;
clear: both;
margin: 4em 0 0 32em;
padding: 0 0 0 .4em;
width: 440px;
color: #3A3D41;
height: 12em;
border-top: 1px solid;
}
Here's the screenshot
So can anybody please help me find what am I do wrong with them? thanks beforehand.