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.
Related
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
ok so the thing here is , the only way i can get the password_photo_galleries to go where they need to be is adding an extra button on the navbar to open that info.. what im trying to do is have the navbar button MyGallery bring up both photo_galleries, and password_photo_galleries, but i can't seem to figure out how to get it to combine with that one button.. any help would be much appreciated, i also just thought about something, the only way i can think it might work is make the button My Gallery do a drop down with two buttons My Gallery / Password Gallery but my navbar is -90deg so i dont know how that would work , but just a thought.. either way will work fine.. thanks again
#profile_photo_galleries .heading {
text-transform:uppercase;
font-size:38px;
color:#FF00FF;
font-weight:normal;
border-bottom:1px dotted #666666;
padding-bottom:10px;
margin-bottom:20px;
}
#profile_password_photo_galleries .heading {
text-transform:uppercase;
font-size:38px;
color:#FF00FF;
font-weight:normal;
border-bottom:1px dotted #666666;
padding-bottom:10px;
margin-bottom:20px;
}
#profile_photo_galleries {
width:400px;
height:600px;
color:#000000;
font-family:"Baskerville Old Face",serif;
font-style:italic;
font-size:20px;
background-color:rgba(0,0,255);
position:absolute;
top:200px;
right:-1200px;
padding:40px;
transition:left 0 ease-in-out;
}
#profile_password_photo_galleries {
width:400px;
height:600px;
color:#000000;
font-family:"Baskerville Old Face",serif;
font-style:italic;
font-size:20px;
background-color:rgba(0,0,255);
position:absolute;
top:200px;
right:-1200px;
padding:40px;
transition:left 0 ease-in-out;
}
#profile_photo_galleries:target {
right:80%;
margin-right:-520px;
}
#profile_password_photo_galleries:target {
right:80%;
margin-right:-520px;
}
.photo_gallery {
position:fixed;
bottom:0;
left:0;
width:96.9%;
margin-bottom:0;
background-color:rgba(0,0,0,0.5);
z-index:99;
}
.password_photo_galleries {
position:fixed;
bottom:0;
left:0;
width:96.9%;
margin-bottom:0;
background-color:rgba(0,0,0,0.5);
z-index:99;
}
.photo_gallery .heading,.password_photo_galleries .heading {
text-transform:uppercase;
font-size:38px;
font-weight:normal;
border-bottom:1px dotted #666666;
padding-bottom:10px;
margin-bottom:20px;
}
.password_photo_galleries .heading {
text-transform:uppercase;
font-size:38px;
font-weight:normal;
border-bottom:1px dotted #666666;
padding-bottom:10px;
margin-bottom:20px;
}
.photo_gallery .images a,.password_photo_galleries .images a {
display:block;
float:left;
border:5px solid #000;
margin-right:10px;
margin-bottom:10px;
}
.password_photo_galleries .images a {
display:block;
float:left;
border:5px solid #000;
margin-right:10px;
margin-bottom:10px;
}
.photo_gallery_preview,.password_photo_galleries_preview {
border:1px solid #333;
overflow:auto;
padding:20px 15px;
width:100px;
background-color:#000;
}
.password_photo_galleries_preview {
border:1px solid #333;
overflow:auto;
padding:20px 15px;
width:100px;
background-color:#000;
}
.photo_gallery_name a,.password_photo_galleries_name a {
color:#FFF;
margin-bottom:20px;
display:block;
text-transform:uppercase;
}
.password_photo_galleries_name a {
color:#FFF;
margin-bottom:20px;
display:block;
text-transform:uppercase;
}
.photo_gallery_link {
display:block;
margin-bottom:15px;
}
.password_photo_galleries_link {
display:block;
margin-bottom:15px;
}
.photo_gallery_count {
font-style:italic;
color:#666;
}
.password_photo_galleries {
font-style:italic;
color:#666;
}
HTML CODE FOR THE NAVBAR
<div id="right_menu">
<span>my gallery</span>
<span>Password</span***this is the one i would like to open up with just the button my gallery or if you could make a drop down for a rotation -90deg span for my nav bar that would be awesome****
</div>
here is the navbar , no links
#right_menu {
position:fixed;
font-size:15px;
top:0;
right:0;
background-color:#FF00FF;
width:50px;
height:100%;
}
#right_menu a {
text-align:center;
display:block;
padding:10px;
height:15%;
width:50px;
margin-bottom:0;
text-transform:uppercase;
position:relative;
}
#right_menu a:nth-child(1) {
background-color:#FF00FF;
color:#FFF;
}
#right_menu a:nth-child(1) span {
display:block;
position:absolute;
top:40px;
left:-40px;
width:130px;
color:#FFF;
-webkit-transform:rotate(-90deg);
-moz-transform:rotate(-90deg);
-ms-transform:rotate(-90deg);
transition:left .3s ease;
}
#right_menu a:nth-child(1):hover span {
left:-45px;
}
Every DOM element has a single id. you could approximate it using something like this
<div id='id1'><span id='id2'></span></div>
and then use navigation to get what you really want.
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'm trying to make a navigation bar for my website, but the 'info' button will not stay inside the parent. Here is my HTML:
<div id="header">
<div id="homeB">
HOME
</div>
<div id="infoB">
INFO
</div>
</div>
<div id="main"></div>
And my CSS:
#header {
height:11%;
width:70%;
background:violet;
margin-left:15%;
}
#main {
height:100%;
width:70%;
background:blue;
margin-top:1%;
margin-left:15%;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
display:inline-block;
}
#homeB {
width:20%;
height:100%;
background:red;
}
#homeBTEXT {
display:block;
font-size:250%;
text-align:center;
text-decoration:none;
font-family:Impact, charcoal, sans-serif;
color:blue;
}
#infoB {
width:20%;
height:50px;
background:red;
float:right;
left:64.2%;
}
#infoBTEXT {
display:block;
font-size:250%;
text-align:center;
text-decoration:none;
font-family:Impact, charcoal, sans-serif;
color:blue;
}
Could someone clear up why this is not working?
Thanks, I'm not great at a lot of HTML and CSS elements, so any extra help would be appreciated too :)
Give float: left; to the #homeBTEXT and also clear the #header!
#homeBTEXT {
display:block;
font-size:250%;
text-align:center;
text-decoration:none;
font-family:Impact, charcoal, sans-serif;
color:blue;
float:left;
}
#header {overflow: hidden;}
Preview
Fiddle: http://jsbin.com/setipusabihu/1
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");
}