Jump to content

[Newbie question] CSS only work on Chrome, not on Firefox or IE


artblanc

Recommended Posts

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

thepreview.th.jpg

 

So can anybody please help me find what am I do wrong with them? thanks beforehand.

Link to comment
Share on other sites

Your link from html to css is wrong. Change

<link rel="stylesheet" type="css" media="screen" href="css/overcompensation_of_style.css"/>

 

to

 

<link rel="stylesheet" type="text/css" media="screen" href="css/overcompensation_of_style.css"/>

 

See: http://www.csstutori...ss-in-webpages/

 

or

 

http://www.w3schools...s/css_howto.asp

Link to comment
Share on other sites

Your link from html to css is wrong. Change

<link rel="stylesheet" type="css" media="screen" href="css/overcompensation_of_style.css"/>

 

to

 

<link rel="stylesheet" type="text/css" media="screen" href="css/overcompensation_of_style.css"/>

 

See: http://www.csstutori...ss-in-webpages/

 

or

 

http://www.w3schools...s/css_howto.asp

 

Hey it works! Thank you very much. I'll try to be more thorough next time around. One quick though off-topic, in IE 9 there's a rectangle border around the image, what should I do to remove it?

 

81882984.th.png

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...