Jump to content
UncleStef Mentoring Update: New SEO course!

artblanc

New Members
 View Profile  See their activity

  • Posts

    3

  • Joined

  • Last visited

 Content Type 

Posts posted by artblanc

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

    in Beginners Web Design

    Posted

    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

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

    in Beginners Web Design

    Posted

    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.

×
×
  • Create New...