I am making the website and attaching the current situation as in screenshot
as you can see that the background images is not spreading throughout the body. Anyone can figure it out
Here is my index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Welcome</title>
<meta charset="utf-8">
<link rel="stylesheet" href="css/reset.css" type="text/css" media="all">
<link rel="stylesheet" href="css/style.css" type="text/css" media="all">
<script type="text/javascript" src="js/jquery-1.4.2.min.js" ></script>
<script type="text/javascript" src="js/cufon-yui.js"></script>
<script type="text/javascript" src="js/cufon-replace.js"></script>
<script type="text/javascript" src="js/Myriad_Pro_300.font.js"></script>
<script type="text/javascript" src="js/Myriad_Pro_400.font.js"></script>
<script type="text/javascript" src="js/script.js"></script>
<!--[if lt IE 7]>
<link rel="stylesheet" href="css/ie6.css" type="text/css" media="screen">
<script type="text/javascript" src="js/ie_png.js"></script>
<script type="text/javascript">ie_png.fix('.png, footer, header nav ul li a, .nav-bg, .list li img');</script>
<![endif]-->
<!--[if lt IE 9]><script type="text/javascript" src="js/html5.js"></script><![endif]-->
</head>
<body id="page1">
<!-- START PAGE SOURCE -->
<div class="wrap">
<header>
<div class="container">
<h1>Schooling india</h1>
<nav>
<ul>
<li class="current">Home Page</li>
<li>
<div class="dropdown">About Us
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div></li>
<li>
<div class="dropdown">Admissions
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div></li>
<li>
<div class="dropdown">Rules
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div></li>
<li>
<div class="dropdown">Info Corner
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div></li>
<li>
<div class="dropdown">Achievements
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div></li>
<li>
<div class="dropdown">Gallery
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div></li>
<li>
<div class="dropdown">Contact
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div></li>
</ul>
</nav>
<form action="#" id="search-form">
<fieldset>
<div class="rowElem">
<!-- <input type="text" placeholder="Search">
Search</div> -->
<script type="text/javascript">
var tmonth=new Array("January","February","March","April","May","June","July","August","September","October","November","December");
function GetClock(){
var d=new Date();
var nmonth=d.getMonth(),ndate=d.getDate(),nyear=d.getFullYear();
var nhour=d.getHours(),nmin=d.getMinutes(),nsec=d.getSeconds(),ap;
if(nhour==0){ap=" AM";nhour=12;}
else if(nhour<12){ap=" AM";}
else if(nhour==12){ap=" PM";}
else if(nhour>12){ap=" PM";nhour-=12;}
if(nmin<=9) nmin="0"+nmin;
if(nsec<=9) nsec="0"+nsec;
document.getElementById('clockbox').innerHTML=""+tmonth[nmonth]+" "+ndate+", "+nyear+" "+nhour+":"+nmin+":"+nsec+ap+"";
}
window.onload=function(){
GetClock();
setInterval(GetClock,1000);
}
</script>
<div id="clockbox"></div>
<!-- <script > var date=new Date();
document.write(date);</script> -->
</fieldset>
</form>
</div>
</header>
<div class="container">
<aside>
<h3>Categories</h3>
<ul class="categories">
<li><span>Programs</span></li>
<li><span>Student Info</span></li>
<li><span>Teachers</span></li>
<li><span>Admissions</span></li>
<li><span>Administration</span></li>
<li><span>Basic Information</span></li>
<li><span>Vacancies</span></li>
<li class="last"><span>Academic Calendar</span></li>
</ul>
<form action="#" id="newsletter-form">
<fieldset>
<div class="rowElem">
<h2>School lettter</h2>
<input type="email" value="Enter Your Email Here" onFocus="if(this.value=='Enter Your Email Here'){this.value=''}" onBlur="if(this.value==''){this.value='Enter Your Email Here'}" >
<div class="clear">UnsubscribeSubmit</div>
</div>
</fieldset>
</form>
<h2>Academic <span>Calender</span></h2>
<ul class="news">
<li><strong>June 30, 2017</strong>
<h4>1<sup>st</sup> parents-teacher meeting</h4>
parents are requested to be present by 11:00 am sharp </li>
<li><strong>June 14, 2017</strong>
<h4>Start of new term</h4>
Students should be present on the 1st day timings are from 8:00 am to 2:00 pm </li>
<li><strong>May 29, 2017</strong>
<h4>Result declaration</h4>
Report card distribution will start at 9:00pm</li>
<li>
<h4>See more...</h4></li>
</ul>
</aside>
<section id="content">
<div id="banner">
<h2>Educating <span>India <span>Since 1992</span></span></h2>
</div>
<div class="inside">
<h2>Recent <span>News</span></h2>
<ul class="list">
<li><span><img src="images/icon1.png"></span>
<h4>About Us</h4>
<p>This is the region wherein you can give a brief description of your school and its pros. Maybe you can give a read more option too.</p>
</li>
<li><span><img src="images/icon2.png"></span>
<h4>Our Branches</h4>
<p>We have branches in following areas<br><ul style="color: #008cc4">
<li><strong>Branch 1</strong></li>
<li><strong>Branch 2</strong></li>
<li><strong>Branch 3</strong></li>
<li><strong>Branch 4</strong></li></ul></p>
</li>
<li class="last"><span><img src="images/icon3.png"></span>
<h4>Student’s Life</h4>
<p>In this region you can include the alumini students and their profile, recent performance of students in competitions or olympiads</p>
</li>
</ul>
<h2>Move Forward <span>With Your Education</span></h2>
<p><span class="txt1">XYZ school</span>,our school follows the moto of jai Jagat: praise the world. We strive to provide education for everyone</p>
<div class="img-box"><img src="images/1page-img.jpg">Harbouring students from all over the city, with its distingused faculty and staff, we strive to provide excellent education with appropriate details and diversity in knowledge to prrepare better citizens fro a better tomorrow. Having eastablished in 1992, our schoolhas crossed many milestones and from time to time proved its worth by winning competitions and olympiad all over the world</div>
<p class="p0"></p>
</div>
</section>
</div>
</div>
<footer>
<div class="footerlink">
<p class="lf">Copyright © 2017 SiteName - All Rights Reserved</p>
<p class="rf">Design by Rohit Jaiswal</p>
<div style="clear:both;"></div>
</div>
</footer>
<script type="text/javascript"> Cufon.now(); </script>
<!-- END PAGE SOURCE -->
</body>
</html>
Following is the style sheet
article, aside, audio, canvas, command, datalist, details, embed, figcaption, figure, footer, header, hgroup, keygen, meter, nav, output, progress, section, source, video {
display:block;
}
mark, rp, rt, ruby, summary, time {
display:inline;
}
body {
background:#fff;
font-family:Arial, Helvetica, sans-serif;
font-size:100%;
line-height:1em;
color:#454545;
background-image:url(../images/tail-middle.jpg) repeat-y ;
/*background-image: no-repeat;*/
}
.dropdown {
float: left;
overflow: visible;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
padding: 14px 16px;
background-color: inherit;
}
.dropdown:hover .dropbtn {
background-color: #white;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #grey;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.dropdown:hover .dropdown-content {
display: block;
}
html {
min-width:940px;
}
html, body {
height:100%;
}
.container {
margin:0 auto;
width:940px;
overflow:visible;
font-size:.875em;
padding-bottom:176px;
}
header {
background:url(../images/header-bg.jpg) no-repeat center top;
min-width:940px;
}
header .container {
height:194px;
position:relative;
padding:0;
}
section#content {
float:left;
width:691px;
}
aside {
width:219px;
float:left;
margin-right:30px;
padding:5px 0 0 0;
}
.fleft {
float:left;
}
.fright {
float:right;
}
.clear {
clear:both;
}
.col-1, .col-2, .col-3 {
float:left;
}
.alignright {
text-align:right;
}
.aligncenter {
text-align:center;
}
.wrapper {
width:100%;
overflow:hidden;
}
.wrap {
height:auto !important;
height:100%;
min-height:100%;
background:url(../images/tail-middle.jpg) repeat-y center 194px;
min-width:940px;
}
input, select, textarea {
font-family:Arial, Helvetica, sans-serif;
font-size:1em;
vertical-align:middle;
font-weight:normal;
}
fieldset {
border:0;
}
.categories {
padding-bottom:37px;
}
.categories li {
font-weight:bold;
font-size:.857em;
padding-bottom:8px;
margin-bottom:6px;
background:url(../images/divider1.gif) repeat-x left bottom;
}
.categories li.last {
background:none;
padding:0;
margin:0;
}
.categories li span {
display:block;
padding-left:15px;
height:1%;
background:url(../images/marker.gif) no-repeat left 5px;
}
.categories li a {
text-decoration:none;
color:#008cc4;
}
.categories li a:hover {
color:#ff7b01;
}
.news {
margin-top:-25px;
}
.news li {
padding-top:25px;
line-height:1.429em;
}
.news li strong {
font-size:.857em;
color:#454545;
display:block;
padding-bottom:3px;
}
.news li a {
color:#008cc4;
text-decoration:none;
font-weight:bold;
}
.articles {
margin-top:-18px;
}
.articles li {
width:100%;
overflow:hidden;
vertical-align:top;
line-height:1.429em;
padding-top:18px;
}
.articles li img {
float:left;
margin-right:22px;
}
.sitemap {
padding-bottom:15px;
}
.sitemap li {
padding:0 0 5px 16px;
background:url(../images/marker1.gif) no-repeat left 5px;
}
.sitemap li ul {
padding-top:5px;
margin-bottom:-5px;
}
.list {
width:100%;
overflow:hidden;
padding-bottom:40px;
}
.list li {
float:left;
width:175px;
margin-right:53px;
}
.list li.last {
margin:0;
}
.list li span {
display:block;
text-align:center;
}
.list li h4 {
padding-top:20px;
}
.list li p {
margin:0;
}
.img-box {
width:100%;
overflow:hidden;
padding-bottom:20px;
line-height:1.429em;
}
.img-box img {
float:left;
margin:0 20px 0 0;
}
.extra-wrap {
overflow:hidden;
}
p {
margin-bottom:16px;
line-height:1.429em;
}
.p0 {
margin:0;
}
.address {
width:100%;
overflow:hidden;
padding-bottom:40px;
}
.address address {
font-style:normal;
line-height:1.429em;
float:left;
width:248px;
}
.address address strong {
color:#008cc4;
width:94px !important;
width:91px;
float:left;
}
.address .extra-wrap {
float:left;
width:385px;
}
.address p {
margin:0;
}
#banner {
width:691px;
height:299px;
background:url(../images/banner-bg.jpg) no-repeat left top;
}
#banner h2 {
color:#fff;
font-size:42px;
text-transform:none;
line-height:1.2em;
padding:75px 0 0 55px;
margin:0;
}
#banner h2 span {
display:block;
margin-top:-12px;
color:#fff;
}
#banner h2 span span {
font-size:30px;
margin-top:-8px;
}
a {
color:#ff7b01;
outline:none;
}
a:hover {
text-decoration:none;
}
h1 {
text-indent:-9999px;
}
h1 a {
width:473px;
height:63px;
position:absolute;
left:0;
top:4px;
background:url(../images/logo.jpg) no-repeat left top;
}
h2 {
font-size:24px;
line-height:1.2em;
text-transform:uppercase;
margin-bottom:20px;
}
h2 span {
color:#8d8d8d;
}
h3 {
font-size:20px;
line-height:1.2em;
text-transform:uppercase;
margin-bottom:15px;
}
h4 {
font-size:1em;
color:#008cc4;
margin-bottom:5px;
}
h4 a {
color:#008cc4;
text-decoration:none;
}
h4 a:hover {
color:#ff7b01;
}
.txt1 {
color:#008cc4;
font-weight:bold;
}
.link {
position:absolute;
right:0;
top:159px;
}
header .nav-bg {
background:no-repeat center top;
}
header nav {
position:absolute;
left:0;
top:100px;
}
header nav ul li {
float:left;
font-size:16px;
line-height:1.2em;
text-transform:uppercase;
padding-right:1px;
background:url(../images/divider.gif) repeat-y right top;
}
header nav ul li.last {
background:none;
padding:0;
}
header nav ul li a {
color:#454545;
text-decoration:none;
display:block;
float:left;
text-align:center;
padding:18px 0 20px 0;
background-repeat:no-repeat;
background-position:left top;
}
header nav ul li.current a, header nav ul li a:hover {
color:#008cc4;
}
header nav ul li a.m1 {
width:95px;
}
header nav ul li.current a.m1 {
background-image:url(../images/m1-act.jpg);
}
header nav ul li a.m2 {
width:80px;
}
header nav ul li.current a.m2 {
background-image:url(../images/m2-act.jpg);
}
header nav ul li a.m3 {
width:85px;
}
header nav ul li.current a.m3 {
background-image:url(../images/m3-act.jpg);
}
header nav ul li a.m4 {
width:60px;
}
header nav ul li.current a.m4 {
background-image:url(../images/m4-act.jpg);
}
header nav ul li.last {
background:none;
padding:0;
}
header nav ul li a.m5 {
width:100px;
}
header nav ul li.current a.m5 {
background-image:url(../images/m5-act.jpg);
}
header nav ul li a.m6 {
width:100px;
}
header nav ul li.current a.m6 {
background-image:url(../images/m5-act.jpg);
}
header nav ul li a.m7 {
width:75px;
}
header nav ul li.current a.m7 {
background-image:url(../images/m5-act.jpg);
}
header nav ul li a.m8 {
width:85px;
}
header nav ul li.current a.m8 {
background-image:url(../images/m5-act.jpg);
}
#content .inside {
padding:22px 20px 0 29px;
}
#content .inner_copy, #content .inner_copy a {
border:0;
float:right;
background:#000;
color:#ff7b01;
width:100%;
line-height:10px;
font-size:10px;
margin:-50% 0 0 0;
padding:0;
}
#search-form .rowElem {
height:28px;
position:absolute;
right:0;
top:30px;
}
#search-form input {
width:205px;
background:#fff;
padding:4px 5px 4px 5px;
border:1px solid #d0d0d0;
border-right:0;
color:#454545;
line-height:1.2em;
float:left;
height:18px;
}
#search-form a {
text-transform:uppercase;
color:#fff;
text-decoration:none;
float:left;
background-color:#0087c1;
padding:6px 11px 0 11px;
height:22px;
}
#search-form a:hover {
background-color:#47b6e5;
}
#newsletter-form {
padding-bottom:45px;
}
#newsletter-form fieldset {
background:url(../images/newsletter-bg.gif) no-repeat left top;
width:219px;
height:131px;
overflow:hidden;
}
#newsletter-form .rowElem {
padding:13px 19px 0 17px;
}
#newsletter-form input {
border:1px solid #0086b5;
background:#fff;
color:#8e8e8e;
font-size:.857em;
padding:2px 5px 2px 5px;
width:171px;
margin-bottom:13px;
}
#newsletter-form h2 {
color:#fff;
margin-bottom:13px;
}
#newsletter-form a.fleft {
color:#fff;
position:relative;
top:3px;
}
#newsletter-form a.fright {
display:block;
color:#fff;
border:1px solid #26b6e8;
text-decoration:none;
background-color:#006caa;
padding:2px 11px 3px 11px;
}
#newsletter-form a.fright:hover {
background-color:#47b6e5;
}
#contacts-form {
clear:right;
width:100%;
overflow:hidden;
}
#contacts-form fieldset {
border:none;
float:left;
}
#contacts-form .field {
clear:both;
height:30px;
}
#contacts-form .field.extra {
height:268px;
}
#contacts-form label {
float:left;
width:123px;
font-weight:bold;
color:#008cc4;
}
#contacts-form input {
width:277px;
padding:2px 0 2px 3px;
border:1px solid #d1d1d1;
color:#70635b;
}
#contacts-form textarea {
width:503px;
height:252px;
padding:2px 0 2px 3px;
border:1px solid #d1d1d1;
color:#70635b;
overflow:auto;
}
footer {
background:url(../images/footer-bg.png) no-repeat center top;
margin-top:-120px;
min-width:940px;
}
footer .footerlink {
margin:0 auto;
width:940px;
height:60px;
padding-top:60px;
color:#454545;
font-size:.785em;
line-height:1.429em;
}
.footerlink p {
margin:0;
padding:0;
line-height:normal;
white-space:nowrap;
text-indent:inherit;
color:#454545;
}
.footerlink a {
color:#454545;
font-weight:normal;
margin:0;
padding:0;
border:none;
text-decoration:underline;
background-color:transparent;
}
.footerlink a:hover {
color:#454545;
background-color:transparent;
text-decoration:none;
}
.footerlink .lf {
float:left;
}
.footerlink .rf {
float:right;
}
a {
outline:none;
}
Use
background-size:cover;
to stretch the image across the body. If the body background is not covering the footer,that is because you have defined another backgound for footer in
footer {
background:url(../images/footer-bg.png) no-repeat center top;
/*You need to remove the above line*/
margin-top:-120px;
min-width:940px;
}
Edit2
After seeing your [ comment ], it seems that you're still overriding the body background unnecessarily. Why would you?
Change
.wrap {
height:auto !important;
height:100%;
min-height:100%;
background:url(../images/tail-middle.jpg) repeat-y center 194px;
//The above directive will override the body bg, so just remove it
min-width:940px;
}
to
.wrap {
min-width:940px; // Only this seems a sensible declaration.
}
Related
I am relatively new to HTML and CSS, and I know this question has been asked many times. But I haven't found a solution that works. My project partner sent me this HTML footer code which I have to put at the bottom of our website. The lone HTML file itself works when I open it on a browser.
<!DOCTYPE html>
<html>
<style>
.footer-dark {
padding:50px 0;
color:#f0f9ff;
background-color:#0a384b;
}
.footer-dark h3 {
margin-top:0;
margin-bottom:12px;
font-weight:bold;
font-size:16px;
}
.footer-dark ul {
padding:0;
list-style:none;
line-height:1.6;
font-size:14px;
margin-bottom:0;
}
.footer-dark ul a {
color:inherit;
text-decoration:none;
opacity:0.6;
}
.footer-dark ul a:hover {
opacity:0.8;
}
#media (max-width:767px) {
.footer-dark .item:not(.social) {
text-align:center;
padding-bottom:20px;
}
}
.footer-dark .item.text {
margin-bottom:36px;
}
#media (max-width:767px) {
.footer-dark .item.text {
margin-bottom:0;
}
}
.footer-dark .item.text p {
opacity:0.6;
margin-bottom:0;
}
.footer-dark .item.social {
text-align:center;
}
#media (max-width:991px) {
.footer-dark .item.social {
text-align:center;
margin-top:20px;
}
}
.footer-dark .item.social > a {
font-size:20px;
width:36px;
height:36px;
line-height:36px;
display:inline-block;
text-align:center;
border-radius:50%;
box-shadow:0 0 0 1px rgba(255,255,255,0.4);
margin:0 8px;
color:#fff;
opacity:0.75;
}
.footer-dark .item.social > a:hover {
opacity:0.9;
}
.footer-dark .copyright {
text-align:center;
padding-top:24px;
opacity:0.3;
font-size:13px;
margin-bottom:0;
}
</style>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Untitled</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css">
<link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
<div class="footer-dark">
<footer>
<div class="container">
<div class="row">
<div class="col-sm-6 col-md-3 item">
<h3>Services</h3>
<ul>
<li>Consultation</li>
<li>Confinement</li>
<li>Other Services</li>
</ul>
</div>
<div class="col-sm-6 col-md-3 item">
<h3>About</h3>
<ul>
<li>Doctors</li>
<li>Partner Hospitals</li>
<li>Offers</li>
</ul>
</div>
<div class="col-md-6 item text">
<h3>St. San Vitores Hospital</h3>
<p>Your health is our priority. </p>
</div>
<div class="col item social"><i class="icon ion-social-facebook"></i><i class="icon ion-social-twitter"></i><i class="icon ion-social-snapchat"></i><i class="icon ion-social-instagram"></i></div>
</div>
<p class="copyright">St. San Vitores Hospital © 1980 </p>
</div>
</footer>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.bundle.min.js"></script>
</body>
</html>
However, I have to incorporate his code into our main file. I put the contents inside < div class="footer-dark" > in our index.html file, and the content inside the < style > tag in our index.css file.
CSS
#media screen and (max-width: 1240px) {
.container a {
float: none;
display: block;
text-align: left;
}
.header-right {
float: none;
}
}
html {
height: 100%;
box-sizing: border-box;
}
body {
height: 100%;
min-height: 100%;
min-height: 100vh;
display:flex;
flex-direction:column;
}
/* other content of the website*/
footer {
position:absolute;
bottom:0;
width:100%;
height:60px; /* Height of the footer */
background:#6cf;
}
.footer-dark {
padding:50px 0;
color:#f0f9ff;
background-color:#0a384b;
}
.footer-dark h3 {
margin-top:0;
margin-bottom:12px;
font-weight:bold;
font-size:16px;
}
.footer-dark ul {
padding:0;
list-style:none;
line-height:1.6;
font-size:14px;
margin-bottom:0;
}
.footer-dark ul a {
color:inherit;
text-decoration:none;
opacity:0.6;
}
.footer-dark ul a:hover {
opacity:0.8;
}
#media (max-width:767px) {
.footer-dark .item:not(.social) {
text-align:center;
padding-bottom:20px;
}
}
.footer-dark .item.text {
margin-bottom:36px;
}
#media (max-width:767px) {
.footer-dark .item.text {
margin-bottom:0;
}
}
.footer-dark .item.text p {
opacity:0.6;
margin-bottom:0;
}
.footer-dark .item.social {
text-align:center;
}
#media (max-width:991px) {
.footer-dark .item.social {
text-align:center;
margin-top:20px;
}
}
.footer-dark .item.social > a {
font-size:20px;
width:36px;
height:36px;
line-height:36px;
display:inline-block;
text-align:center;
border-radius:50%;
box-shadow:0 0 0 1px rgba(255,255,255,0.4);
margin:0 8px;
color:#fff;
opacity:0.75;
}
.footer-dark .item.social > a:hover {
opacity:0.9;
}
.footer-dark .copyright {
text-align:center;
padding-top:24px;
opacity:0.3;
font-size:13px;
margin-bottom:0;
}
html {
scroll-behavior: smooth;
}
The footer contents overlap some contents in the middle of the webpage. However, when I minimize the browser, the footer actually goes to the bottom. How do I make it stay at the bottom of the webpage regardless of the size of the browser?
Try adding the fixed position and the bottom style to your footer-dark class
.footer-dark {
padding:50px 0;
color:#f0f9ff;
background-color:#0a384b;
position: fixed;
left: 0;
bottom: 0;
width: 100%;
}
From html and also from the index.css it works for me by adding these 2 lines to .footer-dark:
position: fixed;
bottom: 0;
width: 100%;
And remember
<link rel="stylesheet" href="index.css">
in the head section of your html.
* {
margin:0;
padding:0;
}
html, body {
height:100%;
}
body {
background:#fff;
font-family:Arial, Helvetica, sans-serif;
font-size:100%;
line-height:1.25em;
color:#999;
}
img {
border:0;
vertical-align:top;
text-align:left;
}
object {
vertical-align:top;
outline:none;
}
ul, ol {
list-style:none;
}
.fleft {
float:left;
}
.fright {
float:right;
}
.clear {
clear:both;
}
.col-1, .col-2, .col-3 {
float:left;
}
.alignright {
text-align:right;
}
.aligncenter {
text-align:center;
}
.wrapper {
width:100%;
overflow:hidden;
}
.container {
width:100%;
}
/*==== GLOBAL =====*/
.inner-page {
width:864px;
margin:0 auto;
padding:150px 0 0 0;
font-size:.8125em;
position:relative;
}
.header {
height:149px;
overflow:hidden;
}
.header.small {
height:110px;
}
.content {
padding:0 0 60px 0;
}
.footer {
padding:2px 4px 20px 0;
background:url(images/footer-bg.gif) left top repeat-x;
text-align:right;
}
.page {
height:100%;
width:100%;
min-height:1050px;
height:100% !important;
height:1050px;
position:relative;
}
#services {
background:#181818;
}
#home {
background:#181818;
}
#contacts {
background:#181818;
}
/*----- forms parameters -----*/
input, select, textarea {
font-family:Arial, Helvetica, sans-serif; font-size:1em;
vertical-align:middle;
font-weight:normal;
}
/*----- other -----*/
.img-indent {
margin:0 20px 0 0;
float:left;
}
.img-box {
width:100%;
overflow:hidden;
padding-bottom:20px;
}
.img-box img {
float:left;
margin:0 20px 0 0;
}
.extra-wrap {
overflow:hidden;
}
p {
margin-bottom:20px;
}
.p1 {
margin-bottom:10px;
}
.p2 {
margin-bottom:20px;
}
.p3 {
margin-bottom:30px;
}
/*----- txt, links, lines, titles -----*/
a {
color:#f4f4f4;
outline:none;
}
a:hover{
text-decoration:none;
}
h1 {
font-size:20px;
line-height:1.2em;
color:#f4f4f4;
}
h2 {
font-size:16px;
line-height:1.2em;
color:#f4f4f4;
margin-bottom:11px;
}
h3 {
font-size:40px;
color:#2c3234;
line-height:1.2em;
font-weight:normal;
text-transform:uppercase;
}
h4 {
font-size:1em;
font-weight:normal;
}
.line-ver, .line-ver1 {
background-image:url(images/line-ver.gif);
background-repeat:repeat-y;
width:100%;
}
.link1 {
color:#f4f4f4;
text-decoration:none;
font-size:15px;
padding:0 0 0 10px;
}
.link1:hover {
text-decoration:underline;
}
.address dt {
margin-bottom:16px;
}
.address dd {
clear:both;
color:#fff;
}
.address dd span {
float:left;
width:85px;
color:#999;
}
.address dd a {
color:#999;
}
/*===== header =====*/
.header .logo {
font-size:68px;
line-height:1.2em;
float:left;
}
.header .logo a {
color:#fff;
text-decoration:none;
}
.header .nav {
float:right;
}
.header .nav li {
float:left;
padding-left:5px;
}
.header .nav li a {
float:left;
width:153px;
color:#f4f4f4;
text-decoration:none;
background:url(images/nav-bg.png) no-repeat left top;
font-size:20px;
line-height:46px;
text-align:center;
text-transform:uppercase;
}
.header .nav li a:hover, .header .nav li a.current {
background:url(images/nav-bg.png) no-repeat left -46px;
color:#333;
}
/*===== content =====*/
.content {
}
.list1 li {
font-size:15px;
padding:0 0 4px 0;
}
.list1 li a {
color:#f4f4f4;
text-decoration:none;
background:#f53502;
display:inline-block;
padding:4px 10px 4px 10px;
}
.list1 li a:hover {
background:url(images/bg1.gif) left top;
}
.social-links {
width:100%;
overflow:hidden;
padding:19px 0 0 0;
}
.social-links li {
display:inline;
}
.social-links li a {
float:right;
background:url(images/button-left.gif) no-repeat left top #757575;
color:#fff;
text-align:center;
font-size:20px;
text-decoration:none;
margin-left:3px;
}
.social-links li a span {
float:left;
padding:0 10px 0 10px;
line-height:33px;
background:url(images/button-right.gif) no-repeat right top;
cursor:pointer;
}
.social-links li a:hover {
color:#f53502;
}
.logo-big {
padding-bottom:39px;
}
.description {
color:#2e3436;
font-size:17px;
line-height:24px;
text-transform:uppercase;
text-align:right;
padding-bottom:35px;
}
/*===== footer =====*/
.footer {
font-size:10px;
text-transform:uppercase;
color:#fff;
}
.footer a {
color:#f53502;
text-decoration:none;
}
.footer a:hover {
text-decoration:underline;
}
/*----- forms -----*/
#contacts-form fieldset {
border:none;
width:240px;
}
#contacts-form label {
display:block;
height:40px;
overflow:hidden;
}
#contacts-form input {
width:225px;
padding:6px 5px 6px 8px;
color:#333;
background:#f4f4f4;
border:none;
}
#contacts-form textarea {
width:225px;
padding:6px 5px 6px 8px;
height:100px;
color:#333;
background:#f4f4f4;
border:none;
overflow:auto;
margin-bottom:15px;
}
/*==========================================*/
/*======== home page ============*/
#home .social-links li a {
background:url(images/button-left1.gif) no-repeat left top #d9d9d9;
color:#fff;
}
#home .social-links li a span {
background:url(images/button-right1.gif) no-repeat right top;
}
#home .social-links li a:hover {
color:#f53502;
}
#home .footer {
color:#282f31;
background:url(images/footer-bg1.gif) left top repeat-x;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta name="description" content="asdfsfsdfsdf" />
<meta name="keywords" content="asdfsfsdfsdf" />
<meta name="robots" content="all" />
<meta name="revisit-after" content="7 days" />
<meta name="author" content="asdfsfsdfsdf" />
<meta name="identifier-url" content="www.asdfsfsdfsdf.com" />
<meta name="distribution" content="Global" />
<meta name="coverage" content="Worldwide" />
<meta name="rating" content="General" />
<meta name="language" content="English" />
<title>asdfsfsdfsdf</title>
<style type="text/css">
div, p, a, li, td { -webkit-text-size-adjust:none; }
#media print {
html, body {
display: none; /* hide whole page */
}
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<link href="http://www.asdfsfsdfsdf.com/style.css" rel="stylesheet" type="text/css" />
<link href="http://www.asdfsfsdfsdf.com/layout.css" rel="stylesheet" type="text/css" />
<script src="http://www.asdfsfsdfsdf.com/js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="http://www.asdfsfsdfsdf.com/js/cufon-yui.js" type="text/javascript"></script>
<script src="http://www.asdfsfsdfsdf.com/js/cufon-replace.js" type="text/javascript"></script>
<!--[if lt IE 7]>
<link href="http://www.asdfsfsdfsdf.com/ie_style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://www.asdfsfsdfsdf.com/js/ie_png.js"></script>
<script type="text/javascript">
ie_png.fix('.png, .nav a');
</script>
<![endif]-->
<script language="JavaScript">
/**
* Disable right-click of mouse, F12 key, and save key combinations on page
* By Arthur Gareginyan (arthurgareginyan#gmail.com)
* For full source code, visit https://mycyberuniverse.com
*/
window.onload = function() {
document.addEventListener("contextmenu", function(e){
e.preventDefault();
}, false);
document.addEventListener("keydown", function(e) {
//document.onkeydown = function(e) {
// "I" key
if (e.ctrlKey && e.shiftKey && e.keyCode == 73) {
disabledEvent(e);
}
// "J" key
if (e.ctrlKey && e.shiftKey && e.keyCode == 74) {
disabledEvent(e);
}
// "S" key + macOS
if (e.keyCode == 83 && (navigator.platform.match("Mac") ? e.metaKey : e.ctrlKey)) {
disabledEvent(e);
}
// "U" key
if (e.ctrlKey && e.keyCode == 85) {
disabledEvent(e);
}
// "F12" key
if (event.keyCode == 123) {
disabledEvent(e);
}
}, false);
function disabledEvent(e){
if (e.stopPropagation){
e.stopPropagation();
} else if (window.event){
window.event.cancelBubble = true;
}
e.preventDefault();
return false;
}
};
</script>
</head>
<body bgcolor="#333" oncopy="return false" oncut="return false" onpaste="return false">
<!-- privacy page begin -->
<div id="services" class="page">
<div class="inner-page">
<!-- header begin -->
<div class="header">
<div class="logo"><img alt="asdfsfsdfsdf" src="http://www.asdfsfsdfsdf.com/images/asdfsfsdfsdf.jpg" /></div>
<ul class="nav">
<li>home</li>
</ul>
</div>
<!-- header end -->
<!-- content end -->
<div class="content">
<h2>asdfsfsdfsdf™</h2>
<br/>*asdfsfsdfsdf
<br/>*asdfsfsdfsdf
<br/>*asdfsfsdfsdf
<br/>*asdfsfsdfsdf
</p>
<br>
asdfsfsdfsdf
<br><br><br>Request a complimentary sample pack.
<br><br><br><br>
</div>
<!-- content end -->
<!-- footer begin -->
<div class="footer">
Copyright © 2013-2018 asdfsfsdfsdf, LLC. All Rights Reserved view mobile
</div>
<!-- footer end -->
</div>
</div>
<!-- privacy page end -->
<!-- coded by ramzes -->
<script type="text/javascript"> Cufon.now(); </script>
</body>
</html>
Newbie here. I've tried changing the background color at a few different points but with no luck. On a different page, it works! I've tried to compare and contrast the different code to find the difference - also tried changing values in the external CSS file and also to the bgcolor. Deleted temp internet files, closed browser and rebooted. I also verified that I updated the files I need to, saved them, and then tried opening the file (to test) again in the browser. I verified I'm opening the correct file. Any help is truly appreciated. Thanks.
Here's where the changed should be effected:
#services {
background:#181818;
}
Here's some of my HTML code:
</head>
<body bgcolor="#333" oncopy="return false" oncut="return false" onpaste="return false">
<!-- privacy page begin -->
<div id="services" class="page">
<div class="inner-page">
<!-- header begin -->
<div class="header">
<div class="logo"><img alt="fasdfsdfdfasdf" src="http://www.example.com/images/asdfasdfdsaf.jpg" /></div>
<ul class="nav">
<li>home</li>
</ul>
</div>
<!-- header end -->
<!-- content end -->
<div class="content">
<h2>asdfasdf™</h2>
Following is the all in one code i.e. html and style. Question is that why the "Box" div is being overlapped on to the "Footer" div. You can copy paste the code and see it yourself in the browser. I have checked the styles and div's starting and ending myself by so far no success. Am i missing something?
.shell { width:950px; margin:0; position:relative; }
#main { background:#f8f8f8 url(images/main.jpg) left top repeat-x; }
#main .box { float:left; width:306px; padding:0 19px 0 0; }
#main .shell { padding:25px 0; }
#footer { background:url(images/footer.jpg) left top repeat-x; color:#b3adad; padding:24px 4px; font-size:10px; }
#footer a { color:#b3adad; text-decoration:none; }
#footer a:hover { text-decoration:underline; }
#footer .footer-navigation { }
#footer .footer-navigation ul { list-style:none; }
#footer .footer-navigation ul li { float:left; padding-right:8px; margin-right:8px; border-right:1px solid #b3adad; height:10px; line-height:10px; }
#footer .footer-navigation ul li.last { padding-right:0; margin-right:0; border-right:0; }
#footer .footer-navigation ul li a { }
#footer .right { float:right; font-family:Verdana, Arial, Sans-Serif; }
#footer .right a { color:#dad7d7; font-weight:bold; text-decoration:underline; }
#footer .right a:hover { text-decoration:none; }
.box { float:left; width:306px; padding:0 19px 0 0; }
.last-box { padding-right:0; }
.box .entry { height:217px; padding-left:2px; }
.box .big-image { padding:4px 0 10px 0; }
.box .big-image img { border:2px solid #fff; }
.box .buttons .button,
.box .buttons .button span { background:url(images/main-button.jpg) repeat-x; height:29px; line-height:29px; float:right; display:inline; border:1px solid #bfbebe; padding:0 8px; }
.box .buttons .button span { float:left; border:0; background:url(images/main-button-span.jpg) left top no-repeat; padding:0 0 0 7px; }
<div id="main">
<div class="shell">
<div class="box">
<h2 style="color:#565656;">Latest News</h2>
<div class="entry">
<div class="news">
newsstring;
</div>
</div>
</div>
<div class="box">
</div>
</div>
</div>
<!-- End of Main -->
<!-- Footer -->
<div id="footer">
<div class="shell">
<div class="footer-navigation">
<ul>
<li>Home</li>
<li>About</li>
<li>Gallery</li>
<li>Location</li>
<li class="last">Contact</li>
</ul>
</div>
<div class="container">
<table align="center" border="0" cellpadding="0" cellspacing="0" style="height:10px; width:1000px">
<tbody>
<tr>
<td style="height:75px; text-align:center; vertical-align:middle; width:560px">
<p><img alt="Seertech Solutions Pvt. Ltd" src="./css/images/seertechbanner.jpg" style="height:55px; width:660px" /></p>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
Just add "display: inline-block" and "width:100%" in your main div and footer.
CSS:
#footer, #main {
display: inline-block;
width: 100%;
}
Add class .clr to element has class .shell as below:
CSS
.clr:after {
content: "";
display: block;
clear: both;
height: 0;
margin: 0;
padding: 0;
}
HTML
...
<div class="shell clr">
...
Jsfiddle:
https://jsfiddle.net/merLdd2y/
.shell { width:950px; margin:0; position:relative; }
#main { background:#f8f8f8 url(images/main.jpg) left top repeat-x; }
#main .box { float:left; width:306px; padding:0 19px 0 0; }
#main .shell { padding:25px 0; }
#footer { background:url(images/footer.jpg) left top repeat-x; color:#b3adad; padding:24px 4px; font-size:10px; }
#footer a { color:#b3adad; text-decoration:none; }
#footer a:hover { text-decoration:underline; }
#footer .footer-navigation { }
#footer .footer-navigation ul { list-style:none; }
#footer .footer-navigation ul li { float:left; padding-right:8px; margin-right:8px; border-right:1px solid #b3adad; height:10px; line-height:10px; }
#footer .footer-navigation ul li.last { padding-right:0; margin-right:0; border-right:0; }
#footer .footer-navigation ul li a { }
#footer .right { float:right; font-family:Verdana, Arial, Sans-Serif; }
#footer .right a { color:#dad7d7; font-weight:bold; text-decoration:underline; }
#footer .right a:hover { text-decoration:none; }
.box { float:left; width:306px; padding:0 19px 0 0; }
.last-box { padding-right:0; }
.box .entry { height:217px; padding-left:2px; }
.box .big-image { padding:4px 0 10px 0; }
.box .big-image img { border:2px solid #fff; }
.box .buttons .button,
.box .buttons .button span { background:url(images/main-button.jpg) repeat-x; height:29px; line-height:29px; float:right; display:inline; border:1px solid #bfbebe; padding:0 8px; }
.box .buttons .button span { float:left; border:0; background:url(images/main-button-span.jpg) left top no-repeat; padding:0 0 0 7px; }
<div id="main" style="display:inline; width:100%">
<div class="shell">
<div class="box">
<h2 style="color:#565656;">Latest News</h2>
<div class="entry">
<div class="news">
newsstring;
</div>
</div>
</div>
<div class="box">
</div>
</div>
</div>
<!-- End of Main -->
<!-- Footer -->
<div id="footer">
<div class="shell">
<div class="footer-navigation">
<ul>
<li>Home</li>
<li>About</li>
<li>Gallery</li>
<li>Location</li>
<li class="last">Contact</li>
</ul>
</div>
<div class="container">
<table align="center" border="0" cellpadding="0" cellspacing="0" style="height:10px; width:1000px">
<tbody>
<tr>
<td style="height:75px; text-align:center; vertical-align:middle; width:560px">
<p><img alt="Seertech Solutions Pvt. Ltd" src="./css/images/seertechbanner.jpg" style="height:55px; width:660px" /></p>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
You're not properly clearing your floats.
#footer {
background: url(images/footer.jpg) left top repeat-x;
color: #b3adad;
padding: 24px 4px;
font-size: 10px;
clear: both;
}
This will clear the floats of the header.
You can also create the following class and add that to the parent of any container containing floated elements.
.clearFix:after {display: table; clear: both; content: "";}
An element will float around the next content found in the flow, in this case, footer's text. Check this link for more info about floats: https://css-tricks.com/all-about-floats/
In this case, depending on what you plan for your .shell i would add the following style:
.shell:after {
content: ' ';
display: table;
clear: both;
}
.shell { width:950px; margin:0; position:relative; }
.shell:after {content: ' '; display: table; clear: both;}
#main { background:#f8f8f8 url(images/main.jpg) left top repeat-x; }
#main .box { float:left; width:306px; padding:0 19px 0 0; }
#main .shell { padding:25px 0; }
#footer { background:url(images/footer.jpg) left top repeat-x; color:#b3adad; padding:24px 4px; font-size:10px; }
#footer a { color:#b3adad; text-decoration:none; }
#footer a:hover { text-decoration:underline; }
#footer .footer-navigation { }
#footer .footer-navigation ul { list-style:none; }
#footer .footer-navigation ul li { float:left; padding-right:8px; margin-right:8px; border-right:1px solid #b3adad; height:10px; line-height:10px; }
#footer .footer-navigation ul li.last { padding-right:0; margin-right:0; border-right:0; }
#footer .footer-navigation ul li a { }
#footer .right { float:right; font-family:Verdana, Arial, Sans-Serif; }
#footer .right a { color:#dad7d7; font-weight:bold; text-decoration:underline; }
#footer .right a:hover { text-decoration:none; }
.box { float:left; width:306px; padding:0 19px 0 0; }
.last-box { padding-right:0; }
.box .entry { height:217px; padding-left:2px; }
.box .big-image { padding:4px 0 10px 0; }
.box .big-image img { border:2px solid #fff; }
.box .buttons .button,
.box .buttons .button span { background:url(images/main-button.jpg) repeat-x; height:29px; line-height:29px; float:right; display:inline; border:1px solid #bfbebe; padding:0 8px; }
.box .buttons .button span { float:left; border:0; background:url(images/main-button-span.jpg) left top no-repeat; padding:0 0 0 7px; }
<div id="main">
<div class="shell">
<div class="box">
<h2 style="color:#565656;">Latest News</h2>
<div class="entry">
<div class="news">
newsstring;
</div>
</div>
</div>
<div class="box">
</div>
</div>
</div>
<!-- End of Main -->
<!-- Footer -->
<div id="footer">
<div class="shell">
<div class="footer-navigation">
<ul>
<li>Home</li>
<li>About</li>
<li>Gallery</li>
<li>Location</li>
<li class="last">Contact</li>
</ul>
</div>
<div class="container">
<table align="center" border="0" cellpadding="0" cellspacing="0" style="height:10px; width:1000px">
<tbody>
<tr>
<td style="height:75px; text-align:center; vertical-align:middle; width:560px">
<p><img alt="Seertech Solutions Pvt. Ltd" src="./css/images/seertechbanner.jpg" style="height:55px; width:660px" /></p>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
Keep in mind that there are more solutions. You could use flex-box approach, you could use display:inline-block approach, you coul even use grid approach. It all depends on what you want to achieve and what browsers you want to support.
If you have floated children (.box), your parent block don't know about that until you tell him. Just add to parent block (.shell) style overflow :hidden.
#main .shell { overflow :hidden; }
my problem
I just want help on how to make the footer and 'Google in different languages' fixed when I am hovering over the buttons.
I am trying to build it on my own (without referring to google homepage code in chrome dev tools), so I am unaware of what they did so as to fix the position of those two elements.
Here's my code:
<!DOCtype html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="../css_stylesheets/stylesheet3.css"/>
<title>Google</title>
</head>
<body>
<div>
<header class="start">
<ul>
<li>Gmail</li>
<li>Images</li>
<li class="button">Sign in</li>
</ul>
</header>
<h1>
<img src="../Images/googlelogo.png" alt="Google logo"/>
<span>India</span>
</h1>
<form>
<input type="text"/><br>
<input type="submit" value="Google Search" id="text" name="search"/>
<input type="submit" value="I'm Feeling Lucky" name="search2"/>
</form>
<p>
Google.co.in offered in: HindiBanglaMalayalamMarathi
</p>
<footer>
<nav class="left">
<ul>
<li>Advertising</li>
<li>Business</li>
<li>About</li>
</ul>
</nav>
<nav class="right">
<ul>
<li>Privacy</li>
<li>Terms</li>
<li>Settings</li>
<li>UseGoogle.com</li>
</ul>
</nav>
</footer>
</div>
</body>
</html>
My CSS stylesheet:
*
{
padding:0px;
margin: 0px;
}
body
{
font-family:Arial,sans-serif;
}
div:first-child
{
font-size:25px;
margin:auto;
text-align:center;
padding-top:0px;
}
div header ul
{
margin-right:0px;
text-align:right;
font-size: 17px;
}
body div header.start
{
padding-top:0px;
}
h1
{
display:inline-block;
font-size:20px;
}
h1 span
{
position:relative;
right: 63px;
bottom: 5px;
color:rgb(51,187,232);
font-size:small;
font-family: "Arial", sans-serif;
}
li.button a
{
display:inline-block;
outline:none;
background-color:rgb(10,125,247);
padding:9px;
border:solid 1px;
border-radius: 4px;
font-weight: bold;
color:#F5F5F5;
}
li.button a:hover
{
text-decoration:none;
outline:grey 3px;
box-shadow: inset 0 0 0px 1px #27496d;
}
li.button a:active
{
background-color:rgb(11,95,191);
border:inset 1px #C7C7C7;
}
a
{
text-decoration: none;
word-spacing:5px;
font-size: 15px;
color:grey;
}
a:hover
{
text-decoration:underline;
}
a::after
{
content: " ";
text-decoration: none;
}
input[type="text"]
{
margin:auto;
max-width:500px;
width:40%;
padding:10px;
}
input[type="text"]:visited
{
outline:blue;
}
input[type="submit"]
{
color:#727578;
border:solid 0px;
background-color:#E3E6E8;
font-weight:bold;
padding:10px;
margin: 30px 5px;
margin-bottom:0px;
}
input[type="submit"]:hover
{
border:ridge 2px;
color:black;
background-color:#f0f0f0;
}
input[type="submit"]:active
{
outline:blue;
}
p
{
margin:0px;
padding:0px;
font-size:14px;
position:relative;
top:15px;
}
p a::after
{
content: " ";
text-decoration: none;
}
p a:link
{
color: blue;
}
ul li
{
list-style-type: none;
display:inline;
word-spacing: 10px;
}
nav.left ul li
{
padding-top:2px;
position:relative;
right:590px;
top:50px;
}
nav.right ul li
{
position:relative;
left:500px;
top:0px;
}
footer nav.right ul
{
display:block;
background-color:#e3e3e3;
padding-top:20px;
margin-bottom:0px;
}
Let me tell you that I am very new to CSS3 elements. But I am pretty much familiar with most of the CSS ones.
I repeat, I don't need a complete debugging on this (unless required that is). Please help me on that issue (the text in bold at the beginning of this topic).
Your problem is input[type="submit"]:hover changing border-width from 0px to 2px, so total height and width of buttons increasing and moving below content for 4px.
Your solution is to change
input[type="submit"] {
...
border: solid 0px;
...
}
to
input[type="submit"] {
...
border: transparent solid 2px;
...
}
I wonder if someone can help me. This is my first site, and although I have tried to solve as many problems for myself as I can, I have reached a point where I am staring at the screen dribbling at the mouth hitting the refresh key hoping by magic it will resolve itself.
The problem is that although the site seems to work fine in FF, Chrome and IE9+, in versions of IE8 and below, the horizontal navigation bar is invisible. There is a gap where it should be, and the links do work, but the sprite images are not visible.
This site is not yet online so unfortunately I cant give you a link to it, only code.
I do apologise if there is a glaringly obvious and simple answer that Ive been too stupid to spot.
Thankyou for your time.
Jon
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
<title>Alan J. Warde Chartered Surveyor</title>
</head>
<body id="home">
<div id="wrap"><!--wrap starts-->
<img src="images/header.jpg" alt="header" />
<ul id="nav"><!--nav starts-->
<li class="home">Home</li>
<li class="about">About</li>
<li class="services">Services</li>
<li class="contact">Contact</li>
</ul><!--nav ends-->
<div id="main_content"><!--start of main_content-->
<div id="sidebar"><!--start of sidebar-->
<div class="listbox"><!--start of listbox-->
<div class="inner_sidebar">
<ul>
<li>Building Surveys</li>
<li>Valuations</li>
<li>Structural Engineering</li>
<li>Quantity Surveying</li>
<li>Loss Adjusting</li>
</ul>
</div><!--end of inner_sidebar-->
</div><!--end of listbox-->
</div><!--end of sidebar-->
<div id="homecontent"><!--start of Homecontent-->
<div id="inner_content"><!--start of inner_content-->
<h1>A J Warde Chartered Surveyor</h1>
<p>CONTENT</p>
<div id="contact"><!--start of contact-->
<p><img src="images/phone1.png" alt="phone" style="float:left;" />CONTENT</p>
</div><!--end of contact-->
</div><!--end of inner_content-->
</div><!--end of Homecontent-->
</div><!--end of main_content-->
<div id="footer">
<div id="footer_inside">
Registered Company 055012
<ul id="footer_nav"><!--nav starts-->
<li class="home">Home</li>
<li class="about">About</li>
<li class="services">Services</li>
<li class="contact">Contact</li>
</ul><!--nav ends-->
</div><!--end of Footer-inside-->
</div><!--end of footer-->
</div><!--wrap ends-->
</body>
</html>
#charset "utf-8";
/* CSS Document */
/*RESETS AND BASIC SETUP*/
* {margin:0; padding:0;}
html {overflow-y:scroll; overflow: -moz-scrollbars-vertical; }
body {
font: 62.5% "Times New Roman", Times, serif;
background-color: #322e2e;
}
/*TYPOGRAPHY*/
h1 {
padding:10px 0 20px 0;
text-align:center;
font-size:2.4em;
color:#003399;
text-shadow:1px 1px #69F;
}
h2 {
padding:5px 0 5px 0;
text-align:center;
font-size:1.1em;
color:#003399;
text-shadow:1px 1px #69F;
}
/*BASIC ELEMENT STYLING*/
ul {list-style:none inside;}
p {font-size:1.8em; line-height:1.2em; margin-bottom:1.2em; font-weight:bold; color:#333;}
a {outline:none;}
a {text-decoration:none;}
a img {border:none;}
/*END RESET*/
/*STRUCTURE AND THINGS*/
#wrap {
width:995px; /*for IE*/
margin:auto;
background:url(images/content.jpg)repeat-y;
}
html>body #wrap { /*IE hack*/
width:975px;
}
#main_content {
padding:0;
}
#homecontent {
background:url(images/contentimg.jpg) no-repeat;
height:478px;
width:633px;
float:right;
margin-right:12px; /*pushes div closer to left*/
margin-top:2px;
position:relative;
}
#servicescontent {
background:url(images/servicesnewbg.jpg) no-repeat;
height:478px;
width:633px;
float:right;
margin-right:12px; /*pushes div closer to left*/
margin-top:2px;
position:relative;
}
#inner_content {
padding:20px;
position:relative;
}
#contact { /*this is just to centre-align the contact details on home page*/
position:absolute;
left:150px;
width: 330px;
text-align:center;
}
#contact p {
color:#0000FF;
}
#left_col {
border:1px solid red;
float:left;
height:478px;
width:313px;
margin-left:15px; /*pushes div closer to right*/
margin-top:20px;
position:relative;
}
#contactdetails {
position:absolute;
left:50px;
}
#sidebar {
float:left;
background:url(images/sidebar.jpg) no-repeat;
height:478px;
width:313px;
margin-left:15px; /*pushes div closer to right*/
}
.inner_sidebar {
padding:20px 0 80px 0px;
font-size:1.4em;
}
.listbox {
width:230px;
margin-left:10px;
}
.inner_sidebar ul li {
font-size:1.4em;
padding:5px;
margin:5px 0 45px 5px;
font-weight:bold;
color:#FFF;
border:1px solid #FFF;
border-radius:3px;
background-color:rgba(0, 0, 25, 0.5);
}
/*TOP OF PAGE NAVIGATION*/
ul#nav {
}
ul#nav li {
display:inline;
}
ul#nav li a {
display:block;
height:54px;
text-indent:-9999px;
float:left;
}
ul#nav li.home a {
width:404px;
background:url(images/homenav.jpg)top center no-repeat;
}
ul#nav li.about a {
width:160px;
background:url(images/aboutnav.jpg)top center no-repeat;
}
ul#nav li.services a {
width:160px;
background:url(images/servicesnav.jpg)top center no-repeat;
}
ul#nav li.contact a {
width:251px;
background:url(images/contactnav.jpg)top center no-repeat;
}
ul#nav li a:hover {
background-position: center center;
}
body#home li.home a, body#about li.about a, body#services li.services a, body#contact li.contact a {
background-position: bottom center;
}
/*FOOTER*/
#footer {
height:96px;
background:url(images/footer.jpg) no-repeat;
clear:both;
}
#footer_inside {
text-align:center;
width:500px;
margin:auto;
padding:10px 0 0 0;
color:#CCCCCC;
font-size:1.4em;
}
ul#footer_nav li {
display:inline;
padding:0px;
margin:0px;
}
ul#footer_nav li a {
color:white;
text-decoration:none;
padding:0 10px;
border-right:1px solid white;
line-height:25px;
}
ul#footer_nav li:last-child a { /*last child selector to remove last border seperator*/
border:none;
}
Looks like you need to put spaces between the url() and top on each background property.
Lower version IEs have 'hasLayout' attribute that is only in IE.
You could find out about it.
ul#nav {
/* set width and height */
}
I think this might works.