artblanc Posted August 23, 2011 Report Share Posted August 23, 2011 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. Quote Link to comment Share on other sites More sharing options...
Andrea Posted August 23, 2011 Report Share Posted August 23, 2011 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 Quote Link to comment Share on other sites More sharing options...
artblanc Posted August 24, 2011 Author Report Share Posted August 24, 2011 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? Quote Link to comment Share on other sites More sharing options...
falkencreative Posted August 24, 2011 Report Share Posted August 24, 2011 You can usually fix that by adding a img { border:0; } to your stylesheet. Quote Link to comment Share on other sites More sharing options...
artblanc Posted August 24, 2011 Author Report Share Posted August 24, 2011 You can usually fix that by adding a img { border:0; } to your stylesheet. Thanks Ben. Works like a charm. Any resources about these topics about cross-browser html/css compatibility stuff? Quote Link to comment Share on other sites More sharing options...
Andrea Posted August 24, 2011 Report Share Posted August 24, 2011 You can probably find some good stuff here: http://www.456bereastreet.com/archive/200602/writing_crossbrowser_css/ Quote Link to comment Share on other sites More sharing options...
Recommended Posts
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.