Background Image not showing up in IE8 - html

So I have a tiny header image that repeats on the x axis, but for some reason it won't show up in IE8. Anyone know a work around?
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta content='' name='description' />
<meta content='' name='keywords' />
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
<title>Book Site</title>
</head>
<body>
<div id="wrapper">
<div id="header">
<div id="title">
<span class="maintitle">Site Title Goes Here</span>
<br />
<span class="subtitle">Transitional Justice, Post-Conflict Reconstruction & Reconciliation in Rwanda and Beyond
Phil Clark and Zachary D. Kaufman, editors</span>
</div>
<img class="thebook" src="images/thebook.png" />
<span class="bookblurb">
<span class="bookbuy">Buy the book</span>
get it online
<br />
from Columbia,
Hurst or your
favorite reseller
</span>
</div>
<div id="navbar">
<ul>
<li>HOME</li>
<li>ABOUT THE BOOK</li>
<li>AUTHORS</li>
<li>NEWS & EVENTS</li>
<li>KIGALI PUBLIC LIBRARY</li>
<li>CONTACT US</li>
</ul>
</div>
<div id="content">
<div id="blockone">
<div id="polaroid">
<img class="polaroid" src="images/polaroid.png" />
<br />
<span class="roidplace">Gisimba Memorial Centre</span>
<br />
<span class="roidname">Kigali, Rwanda</span>
</div>
<div id="textblockone">
<h3>An incisive analysis of genocide and its aftermath</h3>
<br />
<span class="description">In After Genocide leading scholars and practitioners analyse the political, legal and regional impact of events in post-genocide Rwanda within the broader themes of transitional justice, reconstruction and reconciliation. Given the
forthcoming fifteenth anniversary of the Rwandan genocide, and continued mass violence in Africa, especially in Darfur, the Democratic Republic of Congo (DRC) and northern Uganda, this volume is unquestionably of continuing relevance. </span>
</div>
</div>
<div id="form">
<div id="statement">
This book should be labeled for the mature individual only. But for that mature individual it is of extreme interest.
It shows, far from any Manichean stereotyping, the many facets of having to try to live in an impossibly complex social
and human situation. Highly recommended.
<br /><br />
<span class="author">-Grard Prunier</span>
<br /><span class="bookname">The Rwanda Crisis: History of a Genocide (Hurst, 1995)</span>
</div>
<div id="contactform">
<span class="contactus">Contact us for additional information and site updates</span>
<br />
<span class="theform">
<form class="forming">
Name:
<input type="text" name="firstname" />
<br />
Title:
<input type="text" name="title" />
<br />
Institution:
<input type="text" name="institution" />
<br />
Email:
<input type="text" name="email" />
<br />
Message:
<input type="text" name="message" class="message" />
</form>
</span>
</div>
</div>
</div>
<div id="footer">
<p class="footernav">© 2008 After Genocide <span class="footerlinks">Sitemap | Terms | Privacy | Contact </span>
<span class="plug">Web design by <span class="avity">Avity</span>
</p>
</div>
</div>
</body>
</html>
----------------css-------------------
html, body {
margin:0;
padding:0;
background-color:#fdffe3;
font-family: Arial, Helvetica, sans-serif;
}
#wrapper {
width:1020px;
margin:0 auto;
}
/*begin header style*/
#header {
background:url("images/headback.png")repeat-x;
width:1020px;
height:120px;
font-family:arial;
position:relative;
}
#title {
width:565px;
height:100px;
float:left;
margin:20px 0 0 100px;
}
.maintitle {
font-size:40px;
}
.subtitle {
font-size:13px;
}
.thebook {
float:left;
margin:10px 0 0 30px;
border:2px solid #666666;
}
.bookblurb {
float:left;
width:110px;
margin:15px 0 0 15px;
font-size:13px;
}
.bookbuy {
font-weight:bold;
font-size:14px;
}
/*end header style*/
/*begin navigation style*/
#navbar {
margin:5px 0 0 0;
height: 30px;
width: 1020px;
background-color: #3a3e30;
}
#navbar ul {
padding: 0px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #FFF;
line-height: 30px;
white-space: nowrap;
margin:0 0 0 140px;
}
#navbar ul li {
list-style-type: none;
display: inline;
margin:0 40px 0 0;
}
/*end navigation style*/
/*begin content style*/
#content {
width:775px;
margin:0 auto;
}
#blockone {
margin:25px 0 0 0;
}
#polaroid {
float:left;
width:230px;
}
.roidplace {
font-weight:bold;
font-size:11px;
}
.roidname {
font-size:11px;
margin:0 0 0 40px;
}
#textblockone {
width:745px;
margin:0 0 0 0;
font-family: Arial, Helvetica, sans-serif;
}
.description {
font-size:13px;
}
#form {
background:url("images/formbackround.png") no-repeat;
width:758px;
height:231px;
margin:80px 0 0 10px;
}
#statement {
width:320px;
margin:30px 0 0 30px;
position:absolute;
font-size:15px;
font-style:italic;
float:left;
}
.author {
font-weight:bold;
font-size:14;
}
.bookname {
font-weight:bold;
font-size:11px;
color:#3f91ad;
}
#contactform {
float:right;
width:320px;
margin:20px 30px 0 0;
}
.contactus {
font-weight:bold;
font-size:12px;
}
.theform {
}
.forming {
}
.message {
height:50px;
}
#footer {
width:1020px;
height:65px;
background-color:#dfdacc;
margin:35px 0 0 0;
font-size:13px;
font-weight:bold;
}
.footernav {
margin:30px 0 0 150px;
position:absolute;
width:1020px;
}
.footerlinks {
margin:0 10px 0 10px;
color:#0f77a9;
}
.plug {
margin:0 0 0 175px;
}
.avity {
color:#0f77a9;
}
Live site: http://cheapramen.com/testsite/

Try adding a space between ) and repeat-x.

Correct code after adding space looks like this:
#header {
background:url("images/headback.png") repeat-x;
width:1020px;
height:120px;
font-family:arial;
position:relative;
}

Related

Image not showing within div

My Divs are aligned perfectly. I am trying to add an image in the center div but as soon as I add the image the divs disappear and the image is not showing.
I am having the issue with adding the image, can someone please assist. Why is my image not showing whats wrong with my code?
<style>
.div_parent{
display:inline;
background-image: url('../images/image.jpg') top center no-repeat;"
}
.div_center {
width:300px;
float:left;
border-color:black;
border-style:solid;
border-width:3px;
height :700px
}
.div_right
{
background-color:#edeeef;
border-color:black;
border-style:solid;
border-width:3px;
width: 150px;
float:left;
height:100%
}
.div_left
{
background-color:#edeeef;
border-color:black;
border-style:solid;
border-width:3px;
width: 150px;
float:left;
height:100%
}
</style>
<div class="div_parent">
<div class="div_left">
<br /><br /><br /><br /><br /><br />
<FONT size="3" style="font-family:sans-serif ; color:red; text-align:center;" > <STRONG>Welcome to the Reporting Portal! </STRONG> </font><br />
<br />
<FONT size="2" style="font-family:sans-serif; text-align: left;">
Reports on this site are available as view-only or as an Excel download. </font>
</div>
<div class="div_center">
</div>
<div class="div_right">
<br /><br /><br /><br /><br /><br />
<FONT size="3" style="font-family:sans-serif ; color:red; text-align:center;" > <STRONG> We're Here to Help! </STRONG> </font><br /><br />
<FONT size="2" style="font-family:sans-serif; text-align:left;">
We're friendly and available to chat. Reach out to us anytime and we'll happily answer your questions.</br><br />
Supervisors should submit requests including specific fields and search criteria to us at Report Manager</a></font>
</div>
</div>
Have you tried something like this out?
.container {
width: 100%;
height: 50px;
display: inline-block;
}
.element__left,
.element__right,
.element__center {
height: 50px;
}
.element__left, .element__right {
width: 25%;
float: left;
background-color: grey;
}
.element__center {
width: 50%;
float: left;
background-color: green;
}
<div class="container">
<div class="element__left">
<div class="element__center">
<div class="element__right">
</div>
.divOuter{
display:inline;
text-align:center;
}
.divInner1{
border: 1px solid;
float:left;
width:150px;
height:150px;
margin-left:3px;
margin-right:3px;
}
.divInner2{
border: 1px solid;
float:left;
width:250px;
height:150px;
margin-left:3px;
margin-right:3px;
}
.divInner3{
border: 1px solid;
float:left;
width:150px;
height:150px;
margin-left:3px;
margin-right:3px;
}
<body>
<div class='divOuter'>
<div class='divInner1'>First DIV</div>
<div class='divInner2'>Second DIV</div>
<div class='divInner3'>Third DIV</div>
</div>
</body>
Lets try following way:
<!DOCTYPE html>
<html class="not-ie" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>aligning 3 divs with different widthst</title>
<style type="text/css">
* { padding:0; margin:0;}
body { font-family:Arial, Helvetica, sans-serif; color:#fff; font- size:16px;}
.div_parent { position:relative; width:100%; height:300px; overflow:auto; line-height:300px; text-align:center;}
.div_left { position:absolute; left:0; top:0; height:100%; background-color:#900; width:150px;}
.div_middle { position:absolute; left:150px; right:150px; top:0; height:100%; overflow:auto; background-color:#00F;}
.div_right { position:absolute; right:0; top:0; height:100%; background-color:#900; width:150px;}
</style>
</head>
<body>
<div class="div_parent">
<div class="div_left">width: 100px;</div>
<div class="div_middle">width: screen - 200px;</div>
<div class="div_right">width: 100px;</div>
</div>
</body>
</html>

My input date in Mozilla Firefox is different with Google Chrome

I already make a form consist of two inputs (input text and input date) and a button. I design the form in Google Chrome.
Here it is :
After I finished the form, I'm trying to open the page in Mozilla Firefox Browser and I see that the date input is not date-formatted.
Like this :
This is my code
<!DOCTYPE HTML><HTML>
<body>
<!--NAVIBAR-->
<div class="container">
<div class="row">
<div class="col-md-3 no-float"><br>
<img src="img/logo-pln-persero.png" style="height:150px; margin-top:-40px;" ><hr>
<p class="navbar-font-gold">
<?php
$tgl_hari_ini = date('D, d M Y ');
echo $tgl_hari_ini;
?>
</p>
<div role="navigation">
<div class="navbar-main-collapsed">
<ul class="nav li navbar-stacked">
<li>
<a class="page-scroll" href="home.php">
<p class="navbar-font">HOME</p>
</a>
</li>
<li>
<a class="page-scroll" href="home.php?cek=logout">
<p class="navbar-font">LOG OUT</p>
</a>
</li>
</ul>
</div>
</div><hr>
<!-- Footer Starts -->
<div class="footer">
© Copyright 2015
</div>
<!-- # Footer Ends -->
</div>
<div class="col-md-9 no-float">
<div class="span">
<header><p class="font-header br1" align="center" style="padding-top:10px;">SISTEM PENGADAAN BARANG/JASA <br>UPT SULSELRABAR </p><hr></header>
<div class="form-thumbnail">
<form method="post">
<h3 style="font-weight:bold" align="center">Surat Kuasa Kerja</h3>
<div class="form-group">
Nomor SKK:
<input type="text" class="form-control" name="no_skk" placeholder="NO SKK" style="width:300px;"></input>
</div>
<div class="form-group">
Tanggal Masuk:
<input type="date" class="form-control" name="tgl_skk" style="width:200px;"></input>
</div>
<div class="form-group" align="center">
<button type="submit" class="btn btn-custom btn-default" name="btn_submit_skk" style="border-radius:0px"> Simpan </button>
</div>
</form>
<a class="page-scroll" href="kontrak-home.php?id=<?php echo $id;?>">
<span class="glyphicon glyphicon-arrow-left"></span> Back
</a>
</div>
</div>
</div>
</div>
<script src="js/bootstrap.min.js"></script>
</body>
</HTML>
and my head tag is :
<head>
<title>Edit Surat Kuasa Kerja</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<style>
*
{
margin:0;padding:0;
}
html,body,.container
{
height:100%;
}
.container
{
display:table;
width: 100%;
margin-top: -50px;
padding-top: 50px;
padding-left:0px;
padding-right:0px;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.font-header{
font-weight:bold;
color:gold;
font-size:48px;
line-height:50px;
}
.font-kontrak{
font-weight:bold;
color:black;
}
.font-progress>a:hover{
}
.thumbnail{
border-radius:0px 0px 0px 0px;
}
.footer {
position:absolute;
bottom:0px;
background-color: #3E4095;
height: 50px;/* or however high you would like */
color:gold;
font-weight:bold;
}
header
{
background:#820404;
height: 130px;
margin-left:-15px;
margin-right:-15px;
}
#br1
{
line-height:25px;
}
.col-md-3.no-float, .col-md-9.no-float {
float: none;
}
.col-md-3
{
display: table-cell;
background: #3E4095;
width: 25%;
}
.col-md-9
{
display: table-cell;
width: 75%;
height:100vh;
}
input[type=text]
{
border-radius:0px 0px 0px 0px;
}
input[type=password]
{
border-radius:0px 0px 0px 0px;
}
input[type=date]
{
border-radius:0px 0px 0px 0px;
}
.navbar-font
{
font-size:16px;
font-weight:bold;
color:white;
}
.navbar-font-gold{
font-size:16px;
font-weight:bold;
color:gold;
}
.nav li
{
line-height:15px;
}
.nav>li>a:hover
{
background-color:gold;
width:100%;
margin:0;
}
.p1{
line-height: 20px;
font-weight:bold;
font-size:24px;
}
.row
{
height: 100%;
display: table-row;
}
.col-special{
column-count:2;
-webkit-columns:2;
-moz-columns:2;
margin-left:6px;
}
.thumbnail{
border-radius:0px 0px 0px 0px;
border:none;
}
.form-thumbnail{
display: table;
background:#EEEEEE;
margin-top:10vh;
margin-left:40vh;
padding-bottom:30px;
padding-top:30px;
padding-left:70px;
padding-right:70px;
}
</style>
</head>
Can I Use: Date and time input types. Simply put, this is not widely supported. Using the native input type will currently not have a consistent behavior across browsers.
As far as I'm aware, input date types aren't supported by Firefox.

How to get two horizontal bars to butt up against each other

Am working on making a copy of the BBC site and want to make two horizontal bars (part of the header) butt up against each other. Right now, there is a space between the two which I want to remove.
Here is the image I am getting:
Here is the HTML and CSS:
<!doctype html>
<html>
<head>
<title>BBC_Copy</title>
<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style type="text/css">
body {
margin:0;
font-family: arial, helvetica, sans-serif;
}
#topbar {
background-color:#7A0000;
width: 100%;
height:40px;
color:white;
}
.fixedwidth {
width:1050px;
margin:0 auto;
}
#logodiv {
padding-top:5px;
float:left;
border-right:1px solid #770000;
padding-right: 10px;
}
#signindiv {
font-weight: bold;
padding:2px 80px 12px 20px;
font-size: 0.9em;
float:left;
border-right:1px solid #770000;
}
#signindiv img {
position:relative;
top:3px;
}
#topmenudiv {
float:left;
}
#topmenudiv ul {
margin:0;
padding:0;
}
#topmenudiv li {
list-style: none;
font-wieght:bold;
font-size:0.9em;
border-right:1px solid #770000;
height:100%;
padding:10px 20px 12px 20px;
float:left;
}
#searchdiv {
float:left;
padding:5px 0 0 10px;
}
#searchdiv input {
height:25px;
border:none;
font-size:0.9em;
padding-left: 10px;
background-image: url("images/magnify.png");
background-repeat: no-repeat;
background-position:center right;
}
.break {
clear:both;
}
#newsbar {
background-color:#7A0000;
width: 100%;
height:40px;
color:white;
}
</style>
</head>
<body>
<div id="container">
<div id="topbar">
<div class="fixedwidth">
<div id="logodiv">
<img src="images/bbc_logo.png" />
</div>
<div id="signindiv">
<p><img src="images/signin.png" />Sign In</p>
</div>
<div id="topmenudiv">
<ul>
<li>News</li>
<li>Sport</li>
<li>Weather</li>
<li>iPlayer</li>
<li>TV</li>
<li>Radio</li>
<li>More...</li>
</ul>
</div>
<div id="searchdiv">
<input type="text" placeholder="Search" />
</div>
</div>
<div class="break">
</div>
<div id="newsbar">
</div>
</div>
</body>
</html>
Your problem is in:
<div id="signindiv">
<p><img src="images/signin.png" />Sign In</p>
</div>
The <p> tags are adding extra margin on top and bottom. I would recommend getting rid of the p tags... they don't add any semantic advantage.
Replace this:
<div id="signindiv">
<p><img src="images/signin.png" />Sign In</p>
</div>
with this:
<div id="signindiv">
<img src="images/signin.png" />Sign In
</div>
Result: http://jsfiddle.net/ru7zzc1w/1/

For some reason, my images don't have lined up links

I could be missing some coding, but here is what I mean:
Messed up one
Perfectly fine one
Basically, on the messed up web page, my links don't align like the other pages. My coding for the MESSED UP ONE is:
<div class="header"><div style="margin-left:200px;"> <img src="images/logo_2.jpg" width="600" style="padding-top:12.5px;" />
</div>
</div>
<div>
<p><img src="images/1st-link.jpg" onmouseover="this.src='images/1st-link-roll.jpg'" onmouseout="this.src='images/1st-link.jpg'" />
<img src="images/2nd-link.jpg" onmouseover="this.src='images/2nd-link-roll.jpg'" onmouseout="this.src='images/2nd-link.jpg'" />
<img src="images/3rd-link.jpg" onmouseover="this.src='images/3rd-link-roll.jpg'" onmouseout="this.src='images/3rd-link.jpg'" />
<img src="images/4th-link.jpg" onmouseover="this.src='images/4th-link-roll.jpg'" onmouseout="this.src='images/4th-link.jpg'" />
</p>
<p> </p>
</div>
<p> </p>
<p> </p>
<img id="image" src="images/14_Seal2.jpg" /> <!-- TemplateEndEditable -->
<!-- TemplateBeginEditable name="main="Main" content="Content"" --><p id="main">Main Content</p>
<div id="footer"><p><form action="" method="post" id="form-radio">
<p>
<label>
<input type="radio" name="Website Feedback" value="radio" id="WebsiteFeedback_0" />
Yes</label>
<br />
<label>
<input type="radio" name="Website Feedback" value="radio" id="WebsiteFeedback_1" />
No</label>
<br />
</p>
</form></p><p id="pfoot" style="vertical-align:bottom;">Teenspace and Teens For Antartica Preservation Inc. <br />Web Desinger: Mathew Crogan</p></div>
The coding for the PERFECTLY FINE page is:
<div class="header"><div style="margin-left:200px;"> <img src="images/logo_2.jpg" width="600" style="padding-top:12.5px;" />
</div>
<div>
<p><img src="images/1st-link.jpg" onmouseover="this.src='images/1st-link-roll.jpg'" onmouseout="this.src='images/1st-link.jpg'" />
<img src="images/2nd-link.jpg" onmouseover="this.src='images/2nd-link-roll.jpg'" onmouseout="this.src='images/2nd-link.jpg'" />
<img src="images/3rd-link.jpg" onmouseover="this.src='images/3rd-link-roll.jpg'" onmouseout="this.src='images/3rd-link.jpg'" />
<img src="images/4th-link.jpg" onmouseover="this.src='images/4th-link-roll.jpg'" onmouseout="this.src='images/4th-link.jpg'" />
</p>
<p> </p>
</div>
<p> </p>
<p> </p>
<img src="images/14_Teens.jpg" id="image"/><!-- TemplateEndEditable -->
<!-- TemplateBeginEditable name="main="Main" content="Content"" --><p id="main">Main Content</p>
<div id="footer"><p id="pfoot" style="vertical-align:bottom;">Teenspace and Teens For Antartica Preservation Inc. <br />Web Desinger: Mathew Crogan</p></div>
And lastly, the CSS STYLE SHEET for BOTH pages is:
#charset "utf-8";
/* CSS Document */
.header
{
height: 150px;
width: 100%;
margin-left: 25px;
margin-right: 50px;
position:relative;
left:0px;
top:0px;
}
html
{
width: 1000px;
height: 650px;
background-color:#D7D7FF;
margin:0px;
padding:0px;
}
#rollover
{
display:block;
width:120px;
border:1px solid #000;
float:left;
margin-top:30px;
}
#firstlink
{
display:block;
width:120px;
border:1px solid #000;
float:left;
margin-top:30px;
margin-left:265px;
}
a img
{
border:none;
}
#image
{
height:230px;
width:300px;
float:left;
border: 3px solid #B5B5B5;
margin-left:150px;
margin-top:10px;
border-radius:25px;
box-shadow:10px 10px 6px #A3A3A3;
}
#main
{
height:250px;
width:450px;
border:3px solid #B5B5B5;
margin-left:500px;
margin-top:15px;
border-radius:25px;
box-shadow:10px 10px 6px #A3A3A3;
padding-left:10px;
padding-top: 6px;
font-family: Georgia, "Times New Roman", Times, serif;
font-weight:400;
background-color:#FFF;
}
#footer
{
height:100px;
bottom:0px;
text-align:center;
width:100%;
padding-top:100px;
padding-left:25px;
}
#pfoot
{
margin-left:50px;
}
#form-radio
{
float:left;
}
Any help would be MUCH appreciated, Thanks

Why does my page's wrapper get smaller after log-in?

When logged out, my page wrapper which is the very light grey background, expands 100% of the page, but once you log in it gets smaller and resizes to the width of the member bar...
TO TEST USER ACCOUNT BELOW:
http://creatorsparadise.herobo.com/
USERNAME: TEST
PASSWORD: TEST123
HTML FOR LOGGED OUT...
<!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="style.css">
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Creator's Paradise - Home</title>
<style type="text/css">
.auto-style1 {
text-decoration: none;
}
.auto-style2 {
border-width: 0px;
}
</style>
</head>
<body>
<div id="header">
<div id="logo" style="height: 75px">
<img src="images/logo.png" />
</div>
<div id="links1">
<ul id="topbar">
<li>home</li>
<li>forums</li>
<li>themes</li>
<li>codes</li>
<li>learn</li>
<li>more</li>
</ul>
</div>
<div id="member">
<center><div id="login">
<form action="" method="post">
<table cellpadding="2" cellspacing="2" style="height: 18px; width: 1000px;">
<tr>
<td colspan="2" style="height: 24px"><? if(!isset($_POST['login'])){?>
<? }else{ echo "".$final_report."";}?> </td>
<td width="80" style="height: 24px"><a class="userandpass">Username:</a></td>
<td width="180" style="height: 24px"><input type="text" name="username" size="25" maxlength="25"></td>
<td style="height: 24px"></td>
<td width="80" style="height: 24px"><a class="userandpass">Password:</a></td>
<td width="180" style="height: 24px"><input type="password" name="password" size="25" maxlength="25"></td>
<td style="height: 24px"> </td>
<td style="height: 24px"><input type="submit" name="login" value="Login" width="25px"/></td>
</tr>
<tr>
<td><br></td>
</tr>
</table>
</form>
</div>
</center>
</div>
</div>
<div id="wrapper">
<div id="core">
<div id="leftsend">
<div id="leftside">
</div>
<div id="rightside">
<a class="advertise">Partners</a>
<div class="clickable">
</div>
<div class="clickable1">
</div>
<div class="clickable2">
</div>
<div id="vertical_line_1">
</div>
</div>
</div>
</div>
<div id="barone">
</div>
</div>
<div id="footer">
<div id="infooter">
</div>
</div>
<div id="copyright">
<div id="incopyright">
<a class="copy">Copyright © 2013 CreatorsParadise.com</a>
</div>
</div>
</body>
</html>
HTML FOR LOGGED IN...
<!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="style.css">
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Creator's Paradise - Home</title>
<style type="text/css">
.auto-style1 {
text-decoration: none;
}
.auto-style2 {
border-width: 0px;
}
</style>
</head>
<body>
<div id="header">
<div id="logo" style="height: 75px">
<img src="images/logo.png" />
</div>
<div id="links1">
<ul id="topbar">
<li>home</li>
<li>forums</li>
<li>themes</li>
<li>codes</li>
<li>learn</li>
<li>more</li>
</ul>
</div>
<div id="member">
<ul id="loggedin">
<li>Members Area</li>
<li>Settings</li>
<li>Logout</li>
</ul>
</div>
<div id="wrapper">
<div id="core">
<div id="leftsend">
<div id="leftside">
</div>
<div id="rightside">
<a class="advertise">Partners</a>
<div class="clickable">
</div>
<div class="clickable1">
</div>
<div class="clickable2">
</div>
<div id="vertical_line_1">
</div>
</div>
</div>
</div>
<div id="barone">
</div>
</div>
<div id="footer">
<div id="infooter">
</div>
</div>
<div id="copyright">
<div id="incopyright">
<a class="copy">Copyright © 2013 CreatorsParadise.com</a>
</div>
</div>
</body>
</html>
BOTH USE THE SAME CSS FILE...
body{
background:#333333;
width:100%;
margin: 0 auto;
}
#header{
width:1100px;
height:110px;
margin:0 auto;
margin-bottom:20px;
}
#member{
width:100%;
height:32px;
margin:0 auto;
margin-top:21px;
border-top:2px solid #999999;
border-right:2px solid #999999;
border-left:2px solid #999999;
background-color:#575757;
}
.userandpass{
color:white;
font-family: "Arial";
font-size:15px;
}
.yep{
color:white;
font-family: "Arial";
text-decoration: none;
}
a{
color:red;
font-family: "Arial";
text-decoration: none;
}
#loggedin{
float:right;
margin-right:30px;
margin-top:5px;
}
#loggedin li{
display:inline;
margin-right:20px;
}
#loggedin li a{
display:inline;
color:white;
font-family: "Arial";
font-size:17px;
}
#loggedin a:hover{
display:inline;
color:#6ad5f1;
font-family: "Arial";
font-size:17px;
}
#logo{
margin-left:30px;
margin-top:25px;
}
#topbar{
float:right;
margin-right:30px;
}
#topbar li{
display:inline;
margin-right:20px;
}
#topbar li a{
display:inline;
color:white;
font-family: "Berlin Sans FB Demi";
font-size:22px;
}
#topbar a:hover{
display:inline;
color:#6ad5f1;
font-family: "Berlin Sans FB Demi";
font-size:22px;
}
#links1{
width:700px;
height:60px;
float:right;
margin-top:-65px;
}
#wrapper{
width:100%;
height:800px;
background-color:#F8F8F8;
border-top:2px solid #999999;
margin: 0 auto;
border-bottom:1px solid #999999;
}
#barone{
width:100%;
height:20px;
background: rgb(214,214,214); /* Old browsers */
background: -moz-linear-gradient(top, rgb(214,214,214) 86%, rgb(201,201,201) 96%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(86%,rgb(214,214,214)), color-stop(96%,rgb(201,201,201))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgb(214,214,214) 86%,rgb(201,201,201) 96%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgb(214,214,214) 86%,rgb(201,201,201) 96%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgb(214,214,214) 86%,rgb(201,201,201) 96%); /* IE10+ */
background: linear-gradient(to bottom, rgb(214,214,214) 86%,rgb(201,201,201) 96%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d6d6d6', endColorstr='#c9c9c9',GradientType=0 ); /* IE6-9 */
border-bottom:1px solid #999999;
margin: 0 auto;
}
#footer{
width:100%;
height:250px;
background-color:#575757;
border-top:5px solid #999999;
border-bottom:1px solid #999999;
margin: 0 auto;
}
#copyright{
background:#333333;
width:100%;
height:4px;
margin: 0 auto;
}
#incopyright{
width:1050px;
height:4px;
margin:0 auto;
margin-bottom:20px;
}
.copy{
text-align:center;
color:white;
font-family: "Berlin Sans FB Demi";
font-size:15px;
margin-left:385px;
}
#core{
width:1120px;
height: 780px;
margin:0 auto;
margin-top:15px;
margin-bottom:25px;
}
div.clickable {
position:relative;
margin-left:35px;
margin-top:65px;
}
div.clickable a {
position:absolute;
width:150px;
height:150px;
text-decoration:none;
background:url(images/square_advert_1.png);
}
div.clickable a:hover {
position:absolute;
width:150px;
height:150px;
text-decoration:none;
background:url(images/square_advert_2.png);
}
div.clickable1 {
position:relative;
margin-left:35px;
margin-top:290px;
}
div.clickable1 a {
position:absolute;
width:150px;
height:150px;
text-decoration:none;
background:url(images/square_advert_1.png);
}
div.clickable1 a:hover {
position:absolute;
width:150px;
height:150px;
text-decoration:none;
background:url(images/square_advert_2.png);
}
div.clickable2 {
position:relative;
margin-left:35px;
margin-top:515px;
}
div.clickable2 a {
position:absolute;
width:150px;
height:150px;
text-decoration:none;
background:url(images/square_advert_1.png);
}
div.clickable2 a:hover {
position:absolute;
width:150px;
height:150px;
text-decoration:none;
background:url(images/square_advert_2.png);
}
#leftsend{
width:1080px;
height:760px;
margin:0 auto;
}
#rightside{
width:220px;
height:760px;
background:#EBEBEB;
float:right;
border: 1px solid #CFCFCF;
}
#vertical_line_1{
width:1px;
height:800px;
background:#B5B5B5;
float:right;
margin-right:240px;
margin-top:-530px;
}
.advertise{
font-family: Arial;
font-size: 18px;
font-weight: bolder;
color:#838383;
float:right;
margin-right:75px;
margin-top:20px;
text-decoration: underline;
}
#leftside{
width:815px;
height:770px;
float:left;
}
#premium{
margin-left:50px;
}
#login{
margin:0 auto;
margin-bottom:21px;
}
I DOUBT YOU WILL NEED THE PHP BUT HERE IT IS FOR LOGGED OUT
<? ob_start();session_start();include_once"config.php";
if(isset($_SESSION['username']) || isset($_SESSION['password'])){
header("Location: http://creatorsparadise.herobo.com/index_logged.php");
}else{
if(isset($_POST['login'])){
$username= trim($_POST['username']);
$password = trim($_POST['password']);
if($username == NULL OR $password == NULL){
$final_report.="<a class='yep'>Please fill out all fields or </a><a href='www.http://creatorsparadise.herobo.com/index_logged.php'>Register Here</a>";
}else{
$check_user_data = mysql_query("SELECT * FROM `members` WHERE `username` = '$username'") or die(mysql_error());
if(mysql_num_rows($check_user_data) == 0){
$final_report.="<a class='yep'>This username does not exist. </a><a href='http://creatorsparadise.herobo.com/index_logged.php'>Register Here</a>";
}else{
$get_user_data = mysql_fetch_array($check_user_data);
if($get_user_data['password'] != $password){
$final_report.="<a class='yep'>Your password is incorrect. </a><a href='http://creatorsparadise.herobo.com/index_logged.php'>Register Here</a>";
}else{
$start_idsess = $_SESSION['username'] = "".$get_user_data['username']."";
$start_passsess = $_SESSION['password'] = "".$get_user_data['password']."";
$final_report.="<a class='yep'>Wait one moment...</a> <meta http-equiv='Refresh' content='2; URL=http://creatorsparadise.herobo.com/index_logged.php'/>";
}}}}}
?>
PHP FOR LOGGED IN
<? ob_start(); session_start();include_once"config.php";
if(!isset($_SESSION['username']) || !isset($_SESSION['password'])){
header("Location: http://http://creatorsparadise.herobo.com/");
}else{
$user_data = "".$_SESSION['username']."";
$fetch_users_data = mysql_fetch_object(mysql_query("SELECT * FROM `members` WHERE `username`='".$user_data."'"));
}
?>
The problem is that you don't close #header, so #wrapper becomes its child instead of a sibling.
Then, add </div> just before <div id="wrapper"> to close <div id="header">
As stated by Oriol, you need to insert a closing DIV for your #header.
Here is where you will need to close the #header:
<div id="member">
<ul id="loggedin">
................
</ul>
</div>
</div> /*--------Missing closing div--------*/
<div id="wrapper">
<div id="core">
<div id="leftsend">
<div id="leftside"></div>
<div id="rightside">