I'm building a simple website, and discovered that the while the CSS works fine in Chrome (which I usually work with), it doesn't at all in Firefox or IE. As in it's a blank white page with pictures and text, like I hadn't written any CSS. The HTML loads fine, but it's obvious that the CSS isn't being used at all.
Here's all of my HTML:
<!DOCTYPE HTML>
<html>
<head>
<title>Apple Tree House</title>
<link rel="stylesheet" type="css" href="stylesheet.css" />
<link rel="shortcut icon" href="root/icon.ico" type="image/ico" />
</head>
<body>
<div id="container">
<header>
<img src="root/logo.png" id="logo" width="300px" height="300px">
<h2>New Bed and Breakfast</h2>
<h1>Opening January 2015</h1>
<h4>Apple Tree House, Farndon Road, Woodford Halse, Northamptonshire</h4>
</header>
<div id="textcontainer">
---Basic text info here---
</div>
<footer>
<img src="root/footer.png" id="footbanner">
</footer>
</div>
</body>
</html>
And my CSS:
html, body{
margin: 0;
padding: 0;
}
body {
background-color:#85A366;
font-family:Arial, Helvetica, Sans-serif;
font-size:12pt;
margin:0 auto;
padding-left:10px;
padding-right:10px;
}
#container{
width:80%;
height:100%;
padding-left:5px;
padding-right:5px;
padding-bottom:0px;
padding-top:0px;
text-align:center;
color:black;
background:#FFFFEE;
margin:0 auto;
font-family: Goudy Old Style,Garamond,Big Caslon,Times New Roman,serif;
font-weight:600;
font-style:italic;
font-size:13pt;
color:#7D5833;
}
h1, h2, h3, h4, h5, h6 {
color:#472400;
}
h1 { font-size: 40px; }
h2 { font-size: 32px; }
h4 { font-size: 24px; }
#textcontainer{
width:45%;
text-align:center;
margin:0 auto;
top:auto;
}
footer{
text-align:center;
height:100px;
}
#footbanner {
max-width:100%;
max-height:100%;
}
#media screen and (max-width:420px) {
table{
font-size:8pt;
}
#container {
width:100%;
}
}
Anything you can see in there that's making it work in Chrome but not at all in other browsers?
<link/> type should be text/css not just css as shown below:
<link rel="stylesheet" type="text/css" href="stylesheet.css" />
i'm no expert here, but it caught my eye that you used 'css' instead of 'text/css'.
perhaps that will fix the issue?
although strangely enough this does work for me:
http://prntscr.com/58m1fi
Related
If you have these big "slanted" fonts (not sure on the terminology), your opacity is less than 1, and you're using text-align:right, the end of the text will get cut off. I also found that in the OSX version of Safari, the end doesn't render even when the opacity is at 1. Anywhere else it seems to only be the case while opacity is < 1. This only seems to happen when aligning the text to the right.
I have recreated the problem in jsfiddle:
http://jsfiddle.net/qcr62eoa/
The code:
<head>
<title>Test</title>
<link href='http://fonts.googleapis.com/css?family=Playball' rel='stylesheet' type='text/css'>
<style>
.box {
background-color: lightblue;
width: 500px;
font-family: 'Playball', cursive;
text-align: right;
padding-right:30px;
}
.box h1 {
opacity: 0.5;
font-size:48px;
font-weight:400;
}
</style>
</head>
<body>
<div class="box">
<h1>Hello world</h1>
</div>
</body>
I don't know if you are looking for a workaround or an explanation, it is indeed weird and have no answer for that, but a workaround is available :). you could add some padding to the "box h1".
I tested it and it worked
<head>
<title>Test</title>
<link href='http://fonts.googleapis.com/css?family=Playball' rel='stylesheet' type='text/css'>
<style>
.box {
background-color: lightblue;
width: 500px;
font-family: 'Playball', cursive;
text-align: right;
padding-right:30px;
}
.box h1 {
opacity: 0.5;
padding-right:10px;
font-size:48px;
font-weight:400;
}
</style>
</head>
<body>
<div class="box">
<h1>Hello world</h1>
</div>
</body>
Hope this helped
cheers
My layout currently breaks on 320px resolution (.info drops below .icon and breaks the layout) and I'm lost as to how about preventing it from breaking.
The .num info(number) is being loaded dynamically, and could be anything from 0 - 2147483647. If the screen resolution is not wide enough to show the .num and the .unread on one line, instead of breaking, I would like the .unread to drop down to the next line (display:block applied to it?). I tried to think of a way to use only css, then though I could use js to apply class if more than 2 digits are present, but this direction still doesn't seem right if the resolution is wider and could show more digits. E.G - 1000px could show many more digits... I would want it to stay on one line in this case.
My code is below:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/normalize/3.0.1/normalize.min.css" />
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
<style>
body{
padding:20px;
}
.wrapper {
background-color:#cccccc;
border-radius:20px;
overflow:hidden;
border:2px solid black;
}
.icon {
font-size:40px;
padding:12px;
display:block;
}
.icon, .info {
float:left;
}
.info {
border-left:1px solid black;
padding-left: 15px;
}
.info h3 {
font-size:16px;
margin:10px 0 0;
}
.info p {
margin:10px 0;
}
.num {
font-weight:bold;
font-size:20px;
}
.unread {
white-space: nowrap;
}
</style>
</head>
<body>
<div class="wrapper">
<div>
<div class="icon">X</div>
<div class="info">
<h3>Header Information</h3>
<p>
<a class="num">23</a>
<span class="unread">Unchecked Voicemails to Date</span>
</p>
</div>
</div>
</div>
</body>
</html>
http://plnkr.co/edit/18Mids4M3SupNwOT8ocP?p=preview
I figured it out. I needed to add a width to the .info container and make the elements inside of .info p display:inline-block.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/normalize/3.0.1/normalize.min.css" />
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
<style>
body{
padding:20px;
}
.wrapper {
background-color:#cccccc;
border-radius:20px;
overflow:hidden;
border:2px solid black;
}
.icon {
font-size:40px;
padding:12px;
}
.icon, .info {
float:left;
}
.info {
border-left:1px solid black;
padding-left:15px;
width:60%;
}
.info h3 {
font-size:16px;
margin:10px 0 0;
}
.info p {
margin:5px 0 15px;
}
.info span {
display:inline-block;
}
.num {
font-weight:bold;
font-size:20px;
}
</style>
</head>
<body>
<div class="wrapper">
<div>
<div class="icon">X</div>
<div class="info">
<h3>Header Information</h3>
<p>
<a class="num">2</a>
<span class="unread">Unopened Voicemails</span>
</p>
</div>
</div>
</div>
</body>
</html>
http://plnkr.co/edit/NanIRaMcK9AJvpNEQG3Z?p=preview
I am unable to remove default top margin after many attempts. Below is my html and css code. Please suggest where I am lacking?
HTML file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
<title>Sample</title>
</head>
<body>
<div id="maincontainer">
<div id="header">
<h1>Sample</h1>
</div>
</div>
<div id="contents">
Body of page
</div>
</body>
</html>
CSS File
html, body
{
margin:0 auto;
padding:0;
border:0;
background:#fff;
font-family:Times New Roman;
font-size: 16px;
width:1024px;
}
#maincontainer
{
margin:0;
padding:5px;
}
#header
{
margin:0;
padding:0;
height:100px;
background:#8A0808;
text-align:left;
}
h1
{
margin:0;
padding:0 0 0 10px;
font-size: 60px;
font-weight:normal;
color:#fff;
}
padding: 5px; on the #maincontainer might be your issue. There's going to be 5px of white surrounding anything inside of the #maincontainer div.
I am learning CSS by my onw, and already spent some hours on this, without solution...
I need to put a text over a image, but there is two images in the same line (inline-block). Please, see my code (example):
<html>
<head>
<title>Test</title>
<style type="text/css">
.payrow { display:inline-block; width:100%; margin-bottom:14px; text-align:center; }
.paybtn { display:inline-block; margin:0 10px 0 10px; text-align:center; }
.paybtn img { width:250px; height:120px; margin:3px; border:0; filter:alpha(opacity=80); opacity:.80; }
.paybtn a:hover img { filter:alpha(opacity=100); opacity:1; }
.vtotal { font:bold 20px Arial, Helvetica, sans-serif; color:#7A7A7A; }
</style>
</head>
<body>
<div class="payrow">
<div class="paybtn">
<img src="paybtn1.gif" alt="PayPal1">
<div class="vtotal">Total: U$ 510.00</div>
</div>
<div class="paybtn">
<img src="paybtn2.gif" alt="PayPal2">
<div class="vtotal">Total: U$ 580.00</div>
</div>
</div>
</body>
</html>
This is the result of my code:
And this is what I really want:
Please, can someone give me an idea of what to do?
Thanks!
You could use negative margins
.vtotal {
font:bold 20px Arial, Helvetica, sans-serif;
color:#7A7A7A;
position:relative;
margin-top:-40px; /*adjust the pixels accordingly*/
}
Demo at http://jsfiddle.net/gaby/5fxRf/
I want to embedded some styles into my website, however, the right style didn't show up, and I don't know why.
My code is here:
<head>
...
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/1.4.0/bootstrap.min.css"/>
<style type="text/css">
#bd { font-family: 'Neuton', serif; color:#646464; font-size:16px; line-height:21px; font-weight:200;}
...
</head>
<body>
...
<div class="container" id="bd">
I want to use the font "Neuton' here. But I fail to do it..
</div>
</body>
Can anyone help me with this :(?
*******update**
I still can't find the reason, let me give more context:
I'm practicing using HTML/CSS to write a portfolio, and here is all of my code:
<head>
<title> XXXXX </title>
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/1.4.0/bootstrap.min.css"/>
<link href="http://fonts.googleapis.com/css?family=Oswald" rel="stylesheet" type="text/css"/>
<link href="http://fonts.googleapis.com/css?family=Neuton:200" rel="stylesheet" type='text/css'/>
<link href="http://fonts.googleapis.com/css?family=Terminal+Dosis:300" rel="stylesheet" type="text/css"/>
<style type="text/css">
body { padding-top: 40px;}
#bd { font-family: 'Neuton', serif; color:#646464; font-size:16px; line-height:21px; font-weight:200;}
#bd a {
text-decoration: none;
border-bottom: 1px dotted;
color:#646464;
}
#bd a:hover { text-decoration: none; border-bottom: 1px dotted; color:#646464; background-color:#c0f4ff; }
h1 {
font-family: 'Terminal Dosis', sans-serif;
color:#646464;
padding:0px;
margin-top:-14px;
margin-bottom:0px;
font-weight:300;
font-size:15px;
}
#sections { font-family: 'Terminal Dosis', sans-serif; color:#7a7a7a; padding:0px; font-weight:300; font-size:80%; line-height:15px;}
#name { font-family: 'Oswald', sans-serif; font-size:20px; color:#7a7a7a; padding-bottom:7px;}
.dashbar { border-top: 1px dashed #bbbbbb; margin-bottom: 35px; margin-top:00px; }
#active { background-color:#c0f4ff; color:#646464; width:100%;}
#navlist li { color:#7a7a7a; font-family: 'Oswald', sans-serif; font-size:15px; display: inline;
list-style-type: none; float:right; padding-left:74px; padding-top:2px; padding-bottom:0px; }
a { text-decoration: none; color:#7a7a7a; }
a:hover {color:#646464; text-decoration: none; background-color:#c0f4ff; } /*color:: the color displayed when you mouse over the link*/
a:visited { text-decoration: none; ;}/* mouse over link */
a:active { background-color:#c0f4ff; color:#646464; } /*the one that is activated */
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="span4" id="name">My Name</div>
<ul id="navlist">
<li>
PROJECTS
</li>
<li>
<a id="active" href="index.html">HOME</a>
</li>
</ul>
</div>
<div class="dashbar"></div>
<div class="container">
<div class="row">
<div class="span-one-third" id="bd">
<!-- content-->
<h1>ABOUT</h1>
***I want to use the font Neuton Here***
</div>
<div class="span10" style="margin-left: 30px;">
<!-- put an image here -->
</div>
</div>
</div>
</div>
</body>
I don't know about that bootstraper , however I think you should import the fonts, I used google api. jsFiddle
It is probably because you missed out </style> tag. Your code doesn't show it.
for some point you should clear the browsing history for css to work if the css code has been change
There may be two problems:
Did you close that <style> tag? (</style>)
Where are you getting that font from? Is it installed on your computer? If not you need to use #font face.
If you have closed the <style> tag and/or used #font face, you better include it in your code, there will be a lot of people telling you to do that.
Thanks for reading!