When I try to validate my CSS code on w3c, it gives me these errors sorry if this has already been asked but I can't seem to find an answer. Some errors where fixed but these ones are still there.
Parse Error <html> <head> > <title>style2.CSS</title> </head> <body> html{ background-image: url(headerimg.jpg); }
130 Parse Error
<head>
<meta http-equiv="content-type";content="text/html";charset="UTF-8"/>
<title>style2.CSS</title>
</head>
<body>
html{
background-image: url(headerimg.jpg);
}
header{
background-image: url(headerimg.jpg);
background-position: center top;
background-repeat: no-repeat;
background-size:1000px 150px;
}
body{
background-image:url(bg.jpg);
padding-left:175px;
padding-right:175px;
width:940px;
}
#text{
background-color:white;
padding-top:0px;
padding-left:20px;
padding-right:69.5px;
width:600px;
padding-bottom:0px;
display:inline-block;
}
#headchoix{
background-color:#333;
height:50px;
word-wrap: normal;
padding-top:30px;
}
#bot{
float: top;
float:right;
background-color:#D3D3D3;
height:713px;
padding-left:0.1px;
width:250px;
}
#top1,#top2,#top3,#top4,#top5,#top6{
padding-right:40px;
color:white;
padding-left:10px;
font-size:150%;
font-weight: bold;
text-decoration:none;
}
#pad{
float:left;
}
#footerchoix{
background-color:#333;
width:940px;
height:160px;
display:inline-block;
}
#aside2,#aside1{
float:left;
padding-right:170px;
color:white;
}
#aside3{
float:left;
color:white;
}
#aside4{
float:right;
color:white;
width:200px;
}
a:visited{
color:black;
}
a:hover{
color:red;
}
a:active{
color:yellow;
}
a:link{
color:blue;
}
</body>
Your meta tag has erroneous semi-colons:
This:
<meta http-equiv="content-type";content="text/html";charset="UTF-8"/>
Should read:
<meta http-equiv="content-type" content="text/html" charset="UTF-8" />
As the validator suggests, there was a parse-error at the semi-colon before the content attribute. That is because you are not supposed to separate attributes with semi-colons. You use white-space characters to separate attributes.
You should put CSS inside style tags
<style>
html{
background-image: url(headerimg.jpg);
}
header{
background-image: url(headerimg.jpg);
background-position: center top;
background-repeat: no-repeat;
background-size:1000px 150px;
}
body{
background-image:url(bg.jpg);
padding-left:175px;
padding-right:175px;
width:940px;
}
#text{
background-color:white;
padding-top:0px;
padding-left:20px;
padding-right:69.5px;
width:600px;
padding-bottom:0px;
display:inline-block;
}
#headchoix{
background-color:#333;
height:50px;
word-wrap: normal;
padding-top:30px;
}
#bot{
float: top;
float:right;
background-color:#D3D3D3;
height:713px;
padding-left:0.1px;
width:250px;
}
#top1,#top2,#top3,#top4,#top5,#top6{
padding-right:40px;
color:white;
padding-left:10px;
font-size:150%;
font-weight: bold;
text-decoration:none;
}
#pad{
float:left;
}
#footerchoix{
background-color:#333;
width:940px;
height:160px;
display:inline-block;
}
#aside2,#aside1{
float:left;
padding-right:170px;
color:white;
}
#aside3{
float:left;
color:white;
}
#aside4{
float:right;
color:white;
width:200px;
}
a:visited{
color:black;
}
a:hover{
color:red;
}
a:active{
color:yellow;
}
a:link{
color:blue;
}
</style>
Include this in head tag
Related
My divs cover each other which is not intended. I have run it through a debugger and nothing came up...
I'm trying to build a pop-up menu.
This is my html:
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="noteBack.css">
</head>
<body>
<div class="container">
<header><span>Note</span></header>
<div class="sub-header"><span>friday 25.7.13 </span></div>
</div>
</body>
</html>
this is my css:
.container{
position:relative;
width:382px;
border:1px solid black;
}
header{
position:absolute;
width:100%;
height:41px;
color:white;
background-color:#de4b4b;
font-weight: bold;
font-size:14px;
margin:auto;
}
header span{
display:inline-block;
padding-left:172px;
padding-top:14px;
padding-bottom:14px;
}
.sub-header{
position:absolute;
width:100%;
height:37px;
background-color:white;
font-size:10px;
margin:auto;
}
.sub-header span{
display:inline-block;
padding:bottom:14px;
}
any help would be appreciated.
JsFiddle
Your positioning system is causing problem ,Try this css
.container{
/*container position should be absolute*/
position:absolute;
width:382px;
border:1px solid black;
}
header{
/*header position should be relative*/
position:relative;
width:100%;
height:41px;
color:white;
background-color:#de4b4b;
font-weight: bold;
font-size:14px;
margin:auto;
}
header span{
display:inline-block;
padding-left:172px;
padding-top:14px;
padding-bottom:14px;
}
.sub-header{
/*sub-header position should be relative*/
position:relative;
width:100%;
height:37px;
background-color:white;
font-size:10px;
margin:auto;
}
.sub-header span{
display:inline-block;
padding:bottom:14px;
}
I am facing a weird problem with my external css files. I am creating jSP website where i have 3 external CSS files for Mobile, Tablet and Desktop respectively. The css files are loading fine in the Local development environment. Their include statments are below.
<link rel="stylesheet" type="text/css" href="<c:out value="${pageContext.request.contextPath}"/>/css/style_eng.css" />
<link rel="stylesheet" type="text/css" href="<c:out value="${pageContext.request.contextPath}"/>/css/mobile_eng.css" media="only screen and (max-width:480px)">
<link rel="stylesheet" type="text/css" href="<c:out value="${pageContext.request.contextPath}"/>/css/tablet_eng.css" media="only screen and (min-width:481px) and (max-width:768px)">
<link rel="stylesheet" type="text/css" href="<c:out value="${pageContext.request.contextPath}"/>/css/style_eng.css" media="only screen and (min-width:769px)">
The JSTL statements are working fine and in in source code the statements are
<link rel="stylesheet" type="text/css" href="/ns/css/style_eng.css" />
<link rel="stylesheet" type="text/css" href="/ns/css/mobile_eng.css" media="only screen and (max-width:480px)">
<link rel="stylesheet" type="text/css" href="/ns/css/tablet_eng.css" media="only screen and (min-width:481px) and (max-width:768px)">
<link rel="stylesheet" type="text/css" href="/ns/css/style_eng.css" media="only screen and (min-width:769px)">
Now my problem is that the tablet_eng.css file is not loading. Even though the file is there in the view source. In chrome i noticed that the tablet_eng.css losses the code format and appears as a single string.
#charset "utf-8"; /* CSS Document */ body { font-size:.75em; } /*HeaderDiv */ .phoneMenu { display:none; } .LogImage { display:none; } .ArabicHome a { background-color:#e9ecef; position:absolute; top:45px; right:30px; font-size:1.3em; font-family:Tahoma, Geneva, sans-serif; font-weight:bold; width:25px; height:25px; background:url(../image/arabic_icon2.PNG) no-repeat center; background-size:20px 20px; border:solid #bfc7cf 1px; } .HeaderDivWrapper { border-bottom:solid #2a4660 4px; width:100%; position:relative; overflow:hidden; } .HeaderDiv { max-width:768px; background:url(../image/head_back.png) no-repeat; background-size:auto 100%; background-position:right top; padding:18px; height:100px; } #headerLogo p { background:url(../image/logo_mun_tab.png) no-repeat; padding-left:80px; padding-top:37px; } #menuDiv ul li { background:url(../image/arrow_down_tab.PNG) no-repeat center right; margin-left:15px; padding-right:10px; } #menuDiv { /*float:right; */ margin-top:100px; } /*end HeaderDiv */ /*Roll CSS*/ #rollDivWrapper { width:100%; position:relative; } #rollDiv { position:relative; max-width:768px; } #rollText { width:99.5%; max-width:768px; background:rgb(255,24,26); background-color:rgba(255,24,26, .8); padding:8px; color:#FFF; position:relative; left:0%; right:0; bottom:0; top:auto; font-size:.8em; border:none; -webkit-border-top-right-radius:0em; -webkit-border-bottom-left-radius:0em; -moz-border-radius-topright:0em; -moz-border-radius-bottomleft:0em; border-top-right-radius:0em; border-bottom-left-radius:0em; } #rollText a { position:relative; left:50%; line-height:2em; padding:.2em; -webkit-border-radius:.15em; -moz-border-radius:.15em; border-radius:.15em; } .bx-wrapper .bx-prev { display:none; } .bx-wrapper .bx-next { display:none; } #rollText h2 { font-size:2em; font-weight:bold; margin-bottom:.5em; margin-right:15px; width:100px; float:left; } #rollText p { font-size:1em; margin-bottom:.5em; } #rollText span { font-weight:bold; float:right; } #changeimg1 { display:none; } #changeimg2 { display:block; } #Bullet { position:absolute; top:55%; right:5%; } #Bullet ul li { display:inline; margin-left:20px; } #Bullet ul li img { width:15px; height:15px; } /*End of Roll CSS*/ /*followLink CSS*/ #followUS h2 { display:none; } #pclink { display:none; } #smartlink { display:block; float:right; } #smartlink ul li { display:inline; } #demo2 { margin-top:0px; } #Projects { width:30%; margin-left:3%; float:left; } .Projects1 { } .Projects2 { } .Projects3 { } #followLink { max-width:1000px; margin:0 auto; padding:18px; position:relative; } #followUSWrapper { width:100%; position:relative; float:right; bottom:0; margin-top:18px; } #shareThis { width:25%; position:relative; float:left; display:none; } #followUS { width:50%; position:relative; float:right; bottom:0; } #likeNet { float:right; width:50%; position:relative; } #likeNet #likeNetIn { float:left; width:66px; background:url(../image/share_box.png) no-repeat center top; margin-right:10px; margin-bottom:0px; padding-top:5px; } #likeNet ul li span { margin-left:20px; font-size:.9em; color:#0195f8; } #likeNet ul li img { margin-top:11px; } #likeNet ul li { display:inline; } /* End followLink CSS*/ /*news And Event CSS*/ /*End of news And Event CSS*/ /*Advertisement Roll*/ #AdvWrapper { display:none; } /*End of Advertisement Roll*/ /*footer CSS*/ #footerWrapper { background-color:#2a4660; } #footer { max-width:1000px; margin:0 auto; padding:25px; position:relative; overflow:hidden; } .footerOne { float:left; width:25%; border-right:solid #FFF 1px; padding-bottom:400px; margin-bottom:-400px; } .footerTwo { float:left; width:25%; margin-left:3%; border-right:solid #FFF 1px; height:100%; padding-right:10px; padding-bottom:400px; margin-bottom:-400px; } .footerThree { float:left; width:28%; margin-left:3%; border-right:solid #FFF 1px; padding-bottom:400px; margin-bottom:-400px; display:none; } .footerThreeMob { background-color:#09F; position:fixed; bottom:0; right:0%; padding:5px; display:block; width:80px; } .footerThreeMob p a { color:#2a4660; } .footerThreeMob p a:link { color:#FFF; text-decoration:none; } .footerThreeMob p a:visited { color:#FFF; text-decoration:none; } .footerThreeMob p a:hover { color:#bfc7cf; text-decoration:none; } .footerThreeMob p a:active { color:#2a4660; text-decoration:none; } .footerThreeMobIn { margin-top:10px; display:none; } .footerFour { float:left; width:25%; margin-left:3%; padding-bottom:400px; margin-bottom:-400px; } #Copyright { float:left; width:100%; margin-top:15px; margin-bottom:0px; padding-bottom:400px; margin-bottom:-400px; background-color:#2a4660; padding-top:15px; z-index:1; } /*End of footer CSS*/ #ContactMap { margin-top:145px; margin-left:20px; } .LoginMenuIn { margin-left:0%; }
Update: i have used web developer plugin and it is catching an error "Timestamp: 2/8/2014 5:26:42 PM
Error: The stylesheet http://websrv.municipality.gov.bh/ns/css/tablet_eng.css was not loaded because its MIME type, "text/html", is not "text/css".
Source File: http://websrv.municipality.gov.bh/ns/indexEn.jsp
Line: 0"
What is your browser's width? Because notice the media="only screen and (min-width:481px) and (max-width:768px)"> on it? It has a max-width:768px which will only take effect on view size with width of 481 - 768 pixels. Out of those ranges, css will load but will not be implemented.
A few things to try:
Run your css through a validator to make sure it isn't a simple syntax error.
Make sure it's not a caching issue – if you can't change the server settings, try a cachebuster by writing a version parameter to the .css file.
Concatenate your CSS files – you should do this anyways, along with minification, for optimized performance. Grunt is a good JavaScript taskrunner you can put into your deployment strategy that can handle this for you. GitHub example.
Switch to Sass (cleaner than regular CSS), and use Compass which concatenates and minifies for you.
Otherwise it's a little difficult to pinpoint the problem without more information.
Solved by Writing a Java Filter and adding text/css to all requests with .css extension.
if(request.getHeader("accept")!=null && request.getHeader("accept").indexOf("css") != -1){
response.setHeader("Content-Type", "text/css");
}
I am trying to make my button horizontal but always not work
I have tried display:block, display:inline, adjust padding & margin
This is my html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="refresh" content="text/html">
<title>Rumah Yatim dan Dlu'afa | Jazirah Indonesia I</title>
<link rel="stylesheet" type="text/css" href="basic.css">
</head>
<body>
<div class="banner_box">
<span>
<img src="images/head.png" height="150px" class="banner_img" alt="logo">
</span>
<p1>
RUMAH TAHFIDZ
</p1>
<br>
<p2>
YATIM PIATU DAN DLU'AFA
<p2>
<ul class="navbutton">
<li>BERANDA</li>
<li>ACARA</li>
<li>INFO</li>
<li>DONASI</li>
<li>PROFIL</li>
</ul>
</div>
</body>
</html>
and this is my css
/* Html */
html {
min-height:100%;
min-width:100%;
max-height:100%;
max-width:100%;
}
/* Background */
body {
background:url(images/body.png);
background-repeat:no-repeat;
background-size:cover;
background-position:center;
background-attachment:fixed;
}
/* Banner */
.banner_box {
width:480px;
height:180px;
padding:5px;
border:4px;
border-style:solid;
border-color:#063;
margin:0 auto;
}
.banner_img {
float:left;
padding-right:10px;
}
p1 {
font-size:30px;
font-weight:bold;
color:#FFF;
text-align:center;
}
p2 {
font-size:20px;
color:#FFF;
text-align:center;
}
/* Button */
.myButton {
background-color:#44c767;
border-radius:28px;
border:1px solid #18ab29;
cursor:pointer;
color:#ffffff;
font-family:arial;
font-size:17px;
padding:10px 20px;
text-decoration:none;
text-shadow:0px 1px 0px #2f6627;
}
.myButton:hover {
background-color:#5cbf2a;
}
.myButton:active {
position:relative;
top:1px;
}
ul.navbutton {
position:relative;
list-style-type:none;
}
ul.navbutton li {
display:inline;
}
and this is preview
https://db.tt/uxAm95A2
help my practice
thank you in advance :)
Check this link, if this is what you want:-
http://jsfiddle.net/s7d8D/
ul.navbutton {position: relative;width: 100%;}
Try
ul li {
display:inline-block;
float:left;
}
Thanks a lot to you guys :D :D :D
I have edited my html and css
my html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta http-equiv="refresh" content="text/html">
<title>Rumah Yatim dan Dlu'afa | Jazirah Indonesia I</title>
<link rel="stylesheet" type="text/css" href="basic.css">
</head>
<body>
<div class="banner_box">
<span>
<img src="images/head.png" height="150px" class="banner_img" alt="logo">
</span>
<span class="p1">
RUMAH TAHFIDZ
</span>
<span class="p2">
YATIM PIATU DAN DLU'AFA
</span>
<ul class="navbutton">
<li class="navbutton1">
BERANDA
</li>
<li class="navbutton2">
ACARA
</li>
</li>
<li class="navbutton5">
PROFIL
</li>
<li class="navbutton4">
DONASI
</li>
<li class="navbutton3">
INFO
</ul>
</div>
</body>
</html>
and this is my css
/* Html */
html {
min-height:100%;
min-width:100%;
max-height:100%;
max-width:100%;
}
/* Background */
body {
background:url(images/body.png);
background-repeat:no-repeat;
background-size:cover;
background-position:center;
background-attachment:fixed;
}
/* Banner */
.banner_box {
width:480px;
height:186px;
padding:5px;
border:4px;
border-style:solid;
border-color:#063;
border-radius:35px;
margin:0 auto;
}
.banner_img {
padding-right:10px;
}
.p1 {
font-size:30px;
font-weight:bold;
color:#FFF;
position:relative;
top:-128px;
text-align:center;
}
.p2 {
font-size:20px;
color:#FFF;
position:relative;
top:-129px;
left:190px;
text-align:center;
}
/* Button */
.myButton {
background-color:#44c767;
border-radius:28px;
border:1px solid #18ab29;
cursor:pointer;
color:#ffffff;
font-family:arial;
font-size:17px;
padding:10px 20px;
text-decoration:none;
text-shadow:0px 1px 0px #2f6627;
}
.myButton:hover {
background-color:#5cbf2a;
}
.myButton:active {
position:fixed;
top:1px;
}
.navbutton {
position:inline;
width:100%;
}
.navbutton1 {
position:relative;
top:-38px;
left:-30px;
list-style-type:none;
}
.navbutton2 {
position:relative;
top:-58px;
left:80px;
list-style-type:none;
}
.navbutton3 {
position:relative;
top:-118px;
left:170px;
list-style-type:none;
}
.navbutton4 {
position:relative;
top:-98px;
left:240px;
list-style-type:none;
}
.navbutton5 {
position:relative;
top:-78px;
left:330px;
list-style-type:none;
}
works well on firefox, safari and chrome :D :D
preview
https://db.tt/oLPp1Bza
I can get my background image to fill out every browser other than safari on the mac. I've had issues with background images before and I finally want to get this figured out. If there is an "industry standard" for getting background images to fit across all browsers OR to design pages specifically for a certain browser and get certain pages to display based on what browser the user has, I would like to know what that technique is. Also when I open my page up in safari everything is somehow shifted to the left. I've been trying to figure this stuff out for a while and all I've discovered is others have the same problem. If anyone can give me a solution to these problems that would be awesome. Here is the code for my html and css.
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="home.css" />
</head>
<body>
<div class="container">
<div class="logo">
<img src="IB SportsTV Logo.png" width="240px" height="180px"/>
</div>
<p class="teaser">July 24th</p>
</div>
</body>
</html>
CSS:
<style type="text/css">
#import url("reset.css");
html
{
padding:0;
margin:0;
}
body
{
background-image:url("HomeIBSTVBG.png");
background-size:100%;
background-repeat:no-repeat;
background-color:black;
}
.container
{
width: 73.2em;
margin: 0 auto;
position:relative;
}
.login
{
position:absolute;
top:50px;
right:100px;
color:white;
font-family:trajan pro;
}
.register
{
position:absolute;
top:300px;
right:100px;
}
.text
{
color:white;
font-size:20px;
font-weight:bold;
font-family:trajan pro;
}
.logo
{
position:absolute;
top:-20px;
left:100px;
}
.box
{
position:absolute;
top:20px;
left:15px;
overflow:hidden;
width:470px;
height:310px;
}
.boxtext
{
position:absolute;
bottom:-300px;
width:470px;
height:310px;
font-size:25px;
font-family:trajan pro;
color:white;
}
.twitterfeed
{
position:absolute;
top:240px;
left:100px;
}
/*memberpage box properties*/
.gamebox
{
position:absolute;
top:150px;
right:100px;
}
.leaderboardbox
{
position:absolute;
top:165px;
left:100px;
}
.viewerspotbox
{
position:absolute;
top:370px;
left:93px;
}
/*picks page properties*/
.mainform
{
position:absolute;
top:150px;
left:100px;
color:white;
font-family:trajan pro;
border:solid darkblue;
background-color:blue;
}
.form2
{
position:absolute;
top:150px;
right:400px;
color:white;
font-family:trajan pro;
border:solid darkblue;
}
.form3
{
position:absolute;
top:500px;
right:400px;
color:white;
font-family:trajan pro;
border:solid darkblue;
}
.form4
{
position:absolute;
top:850px;
right:400px;
color:white;
font-family:trajan pro;
border:solid darkblue;
}
.form5
{
position:absolute;
top:1200px;
right:400px;
color:white;
font-family:trajan pro;
border:solid darkblue;
}
/*Leaderboard Table Properties*/
.tablehead
{
color:white;
font-family:trajan pro;
background-color:blue;
border-color:darkblue;
}
.tablecontents
{
color:white;
text-align:left;
font-family:trajan pro;
background-color:transparent;
border-color:darkblue;
}
.tableposition
{
position:absolute;
top:250px;
left:150px;
}
caption
{
caption-side:bottom;
color:white;
font-size:42px;
font-family:trajan pro;
}
/*teaser text*/
.teaser
{
color:black;
font-family:trajan pro;
font-size:72px;
position:absolute;
left:450px;
top:250px;
}
</style>
Try adding a width and height to html, to give body something to inherit:
html {
width: 100%;
height: 100%;
}
Works for me all the time with full-page background or videos.
I'm in need of inserting a Hack to a web page, so it works well on IE7.0
But I'm having issues with the way I'm doing things. It should be simple.
The actual CSS code is the following:
<style type="text/css">
body { margin:0;}
#home_splash { background-image:url(homeimages/image-background.jpg);background-repeat:repeat-x; background-position:left top;}
#home_splash #home_text { height:470px; padding-top:25px;padding-left:38px; }
#home_splash #home_text_1,
#home_splash #home_text_2 { display:none; }
#home_splash #home_text_1 { width:172px; height:58px; top:0px; left:70px; position:relative; background:inherit; background-position: -70px 0px; }
#home_splash #home_text_2 { width:212px; height:27px; top:460px; left:868px; position:relative; background:inherit; background-position: -868px -460px; }
#home_splash {background-color:#d1d1d9;margin-top:-15px; background-repeat:repeat;width:100%; }
#home_splash .picture { background-image: url(homeimage/image.jpg); width:960px; height:520px; display:block; margin-top:20px; margin-left :auto; margin-right:auto; }
#home_splash #boxes { margin-left:auto; margin-right:auto;padding-top:0px; font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; color:#666; font-size:12px; font-weight:bold; height:190px; width:930px;}
#home_splash #boxes .box { width:33%; float:left; display:block;background-repeat:repeat-x;}
#home_splash #boxes h3 { font-size:23px; border-bottom: 1px solid #bcbcc4; color:#000033; margin:0; }
#home_splash #boxes h3,
#home_splash #boxes p {margin: 4px 25px; }
#home_splash #boxes p { line-height:160%; }
#home_splash #boxes .box_separator { border-right:1px solid #eee;}
ul#nav { width:100%; height:37px; margin:0px;display:block; background-color:#000; background-repeat:repeat-x; }
#container {background-color:#d1d1d9; zoom:1; }
#content { margin:0; }
.splash_text {width:885px; height:463px;}
</style>
I'd like to make ONE CHANGE in this CSS.
I'd like change the following line :
#home_splash .picture { background-image: url(homeimage/image.jpg); width:960px; height:520px; display:block; margin-top:20px; margin-left :auto; margin-right:auto; }
I want IE7.0 to remove the 'margin-top:20px;' property - but INLINE in this html file only
Conditional comments are exactly what you need. I'm assuming by "rmeove the margin-top: 20px' property, you mean set it to 0 (as there's really no other way to remove it). Here's the code:
<!--[if IE 7]><style type="text/css">#home_splash .picture { margin-top: 0; }</style<![endif]-->
Just stick that in your HTML file, below the CSS you already have, and you should be golden.
Since you're coding into an HTML file, by far the easiest option is conditional comments:
<!--[if IE 7]>
Special instructions for IE 7 here
<![endif]-->
See http://www.quirksmode.org/css/condcom.html for more info.
If you want the hack in the same css as the other browsers:
*+ html #home_splash .picture { background-image: url(homeimage/image.jpg);}
Look here:
http://css-discuss.incutio.com/wiki/Star_Html_Hack