I know this has been asked a million times, but I haven't had much luck making it work.I'm working on a Posterous layout, and I'm trying to get my may content to flow to the bottom.
Here is a link to the layout so far
You can see that the content is held within center_col, so I basically need this column to stretch to the bottom of the page/window regardless of how much content is in there.
Here is the current HTML:
<!DOCTYPE html>
<html>
<head>
<title>{Title}</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
* {margin:0;padding:0}/* mac hide \*/
html { height: 100%;}
* html #wrap {height: 100%;}/* end hide */
body {
background: #FFFFFF;
color: #fff;
height:100%;
min-width:800px;}
#inner {
position:relative;
width:100%
}
#wrap {
min-height: 100%;
margin-left:50%;
position:relative;
background:#F9F9F9;
color:#000;
z-index:1
}
#center_col {
float: left;
width: 800px;
height: auto;
margin-left:-380px;/* drag it central on the page*/
position:relative;
display:inline;/* ie double margin bug*/
background:#FFFFFF;
}
#sidebar {
width:204px;
height: 100%;
padding-right:26px;
float:left;
min-height:234px;
position:relative;
background: #FFFFFF;
}
#content {
width:570px;
height: 100%;
min-height: 100%;
position:relative;
float:left;
background: #F9F9F9 url('http://www.rockettree.com/images/bg-content.png') left top repeat-y;
padding-top:21px;
padding-bottom:48px;
}
.postunit {
width: 500px;
margin-left: 30px;
padding: 10px 5px 20px 5px;
background: #FFFFFF;
border: 1px solid #F9F9F9;
}
.sidebar {
border: 1px solid #000000;
background-color: #FFFFFF;
margin-top: 50px;
padding-left: 10px;
float: left;
height: auto;
width:200px;
-moz-border-radius: 10px;
border-radius: 10px;
}
p{
padding:5px;
margin-bottom:1em;
}
</style>
<!--[if IE]><style type="text/css">body {width:expression( documentElement.clientWidth < 802 ? (documentElement.clientWidth == 0 ? (body.clientWidth < 802 ? "802" : "auto") : "802px") : "auto" );}</style><![endif]-->
</head>
<body>
<div id="wrap">
<div id="inner">
<div id="center_col">
<div id="sidebar">
<div class="header">
<h1>{Title}</h1>
<p>{Description}</p>
</div>
{block:ListSidebar}
<div class="profile">
<a href="{ProfileLink}">
<img src="{PortraitURL-45}" width='75' height='75'>
</a>
<p>{Profile}</p>
</div>
{/block:ListSidebar}
</div>
<div id="content">
<div class="posts">
{block:Posts}
<div id="postunit_{PostID}" class="postunit">
{block:EditBox/}
<div class="post">
<h3><a class="posttitle" href="{Permalink}">{Title}</a></h3>
<a class="button" href="{Permalink}">Posted {TimeAgo}</a>
{Body}
</div>
{block:Responses}
{block:ResponsesList}
{/block:ResponsesList}
{block:Sharing}
{block:Tweet /} {block:FbLike /}
{/block:Sharing}
<div class="postresponses">
<a class="button" href="#">{ResponseCount} Response{ResponseCountPluralized}</a>
</div>
{block:ResponsesShow}
{Responses}
{ResponseForm}
{/block:ResponsesShow}
{/block:Responses}
</div>
{/block:Posts}
</div>
{block:Pagination/}
</div>
</div>
</div>
</div>
</body>
</html>
Set the height of the containing elements of the #center_col div to 100%. I tested this and it worked!
If you are using jQuery:
<script type="text/javascript">
$(function(){
var height = $("#content").height();
$("#sidebar").height(height);
});
</script>
where < div id="content" > is the div with the size you want to replicate in < div id="sidebar" >
If your layout is going to stay this simple, I say just fake it with a nice little background image =)
If that won't do, I think JS is your only way to go.
e.g.
window.addEventListener('load',fit,false);
window.addEventListener('resize',fit,false);
function fit(){
var myHeight;
if( typeof( window.innerWidth ) == 'number' ) {
//Non-IE
myHeight = window.innerHeight;
} else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
//IE 6+ in 'standards compliant mode'
myHeight = document.documentElement.clientHeight;
} else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
//IE 4 compatible
myHeight = document.body.clientHeight;
}
document.getElementById('content').style.height=myHeight + 'px';
}
Related
<%# page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<script src="//code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="style/result.css?v=1.3" />
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<%# page import = "java.io.*" %>
<style>
html,body{
width:100%;
min-width:200px;
height:100%;
}
div {
width: 100%;
height: 100%;
border: 1px solid #000;
}
ul,li{
list-style:none;
margin:0;
padding:0;
}
img {
font-size:0;
line-height:0;
}
img.menu {
font-size:0;
line-height:0;
width:90px;
height:90px;
cursor:pointer;
}
.right_div{
width: 90px;
height: auto;
float:right;
}
.center_div{
width: 500px;
height: 100%;
float:right;
right:90px;
}
.right_top{
height: 90px;
}
.center_top{
height: 90px;
}
.middle{
top: 90px;
height: auto;
}
.center_number,.center_alphabet,.center_korean {
width: 500px;
height: 100%;
float:right;
box-sizing: border-box;
background: #ffffff;
}
#dropHere{
width: Calc(100% - 500px - 90px);
height: 100%;
left:10px;
background-color: skyblue;
border: dotted 1px black;}
.default_top {
width: Calc(100% - 500px - 90px);
height: 90px;
left:10px;
box-sizing: border-box;
background: #ffffff;
}
</style>
<script type="text/javaScript" >
$(function(){
//Make every clone image unique.
var counts = [0];
var resizeOpts = {
handles: "all" ,autoHide:true};
$(".dragImg").draggable({
helper: "clone",
//Create counter
start: function() { counts[0]++; }
});
$("#dropHere").droppable({
drop: function(e, ui){
if(ui.draggable.hasClass("dragImg")) {
$(this).append($(ui.helper).clone());
$("#dropHere .dragImg").addClass("item-"+counts[0]);
$("#dropHere .item-"+counts[0]).removeClass("dragImg ui-draggable ui-draggable-dragging");
$(".item-"+counts[0]).dblclick(function() {
$(this).remove();
});
$(".item-"+counts[0]).draggable().resizable();
}
}
});
var zIndex = 0;
function make_draggable(elements)
{
elements.draggable({
containment:'parent',
start:function(e,ui){ ui.helper.css('z-index',++zIndex); },
stop:function(e,ui){
}
});
}
});
</script>
<html>
<head>
<title>Graphic maker</title>
</head>
<body>
<div class="right_div">
<div class="right_top">
<ul>
<li><img src="image/test.PNG" width="90" height="90"></li>
</ul>
</div>
<div class="middle">
<ul>
<li><img class="menu" src="image/app_icon.PNG" title="number"></li>
</ul>
</div>
</div>
<div class="center_div">
<div class="center_top">
<input type="text" style="font-size:15pt; text-align:center; width:494px; height:85px;"> </div>
<div class="middle">
<div class="center_number">
<%
File path_number=new File("D://image//number");
File[] fileList_number=path_number.listFiles();
if(fileList_number.length>0){
for(int i=0;i<fileList_number.length;i++){
String name=fileList_number[i].toString().substring(fileList_number[i].toString().lastIndexOf("\\")+1);
String fullname="image/number/"+fileList_number[i].toString().substring(fileList_number[i].toString().lastIndexOf("\\")+1);
%>
<img src=<%=fullname%> class="dragImg"
title=<%=name%>
width="90" height="90" >
<%
}
}
%>
</div>
</div>
</div>
<div class="default_top">
<script src="js/test.js" >
</script>
<h1>aaa</h1>
</div>
<div id="dropHere" ></div>
</body>
</html>
There is a script part at the top, jsp and Java code in the middle, and a div called dropHere is defined at the bottom. In the jsp implementation part, after taking one of several images returning to the loop and dropping it on dropHere, you want to make the dropped image draggable or resizable again.
But only resizing works. In my case, I drag & drop and bring it to the dropHere area and add that class. In this case, how do I add it as a div?
Or is there another way?
I'm trying to make a php gallery and thats why I need a good Mask, where the pictures later can be shown.
I want the Mask not to be bigger than screen-size. I mean, there must be no scrolling and the whole <body> needs to have just the width and height of the browser windows, so that every child object in <body> is limited to the frame-size of the browser and will be shrunk down if it overflows. I've tried with max-width and max-height on the <body>, but it doesn't work.
Here are the contents of my index.html file:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="mother">
<div id="header">
<div id="back-link">
Home
</div>
<div id="prev">
next picture
</div>
<div id="next">
previous picture
</div>
<div id="headline">
<p class="h2">Our Galery</p>
</div>
</div>
<!-- Content -->
<div id="container-bild">
<img src="./bilder/P1130079.JPG" id="img-bild" />
</div>
</div>
</body>
</html>
Here are the contents of my style.css file:
body {
max-width: 100%;
max-height: 100%;
}
/* mother-container */
div#mother {
max-width: 100%;
max-height: 100%;
margin: auto;
}
/* main-container */
#container-bild {
max-width: 100%;
max-height: 100%;
}
/* picture in main-container */
#img-bild {
max-width: 100%;
max-height: 100%;
border: 1px solid #280198;
}
Here is a screenshot of what it looks like:
To set the height and width to be 100% of the window (viewport) size, use:
height: 100vh;//100% view height
width: 100vw;// 100% view width
.
div {
background-color: blue;
height: 100vh;
width: 100vw;
position: absolute;
top: 0;
left: 0;
color: white;
}
<div>some content here</div>
Try:
html,
body {
height: 100%;
}
body {
overflow: hidden;
}
Do you know how many child elements will be in your gallery? If the number of elements is static, you could simply set their dimensions in CSS using vw and vh units. No JavaScript involved, and the elements would never be able to overflow your body.
As a reminder for my future self:
.book {
margin: auto;
width: 100vh;
max-width: 100vw;
min-width: 500px;
}
Though this is completely unrelated, for links, you might want to use something like:
a[href^="#"] {
text-decoration: none;
color: black;
background: url("http://www.yaml.org/spec/1.2/term.png") no-repeat bottom right;
}
a[href^="#"]:hover {
text-decoration: underline;
color: blue;
background: none;
}
I'm not sure if this is possible with css, it could be.
I have solved similar issue with javascript:
window.top.innerHeight;
gets the available height, excluded menubars etc. of the borwser.
See how I did for the height, my issue was that the footer should be at the bottom even if content was empty->
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>C-Driver Manager</title>
<meta name="keywords" content="Aygit,Device,Driver,Surucu,Download,Indir,yedekle,Unknown,Bilinmeyen,Backup,Back-up,stuurprogramma,apparaat,windows,w7,w8,w10,multilanguage,tool,free,gratis,ucretsiz">
<meta name="description" content="Windows 7/8/10 Device indentify, Driver backup, Driver info">
<link rel="stylesheet" type="text/css" href="main.css">
<link rel="icon" href="images/favicon.ico">
</head>
<body onResize="resizecontainer();">
<div class="divtop">
<div class="divtopcontainer">
<div class="divlogo">
</div>
<div class="divHmenu">
<style>
.mnuHorizontal
{
list-style:none;
}
.mnuHorizontal li
{
float:left;
}
.mnuHorizontal .activemnu a,.mnuHorizontal li a:hover
{
background:#00B7EF;
border-radius:5px;
color:white;
}
.mnuHorizontal li a
{
display:inline-block;
text-decoration:none;
padding:5px 12px;
text-align:center;
font-weight:bold;
color:#020042;
}
</style>
<ul class="mnuHorizontal">
<li id="index.php">HOME</li>
<li id="features.php">FEATURES</li>
<li id="download.php" class="activemnu">DOWNLOAD</li>
<li id="contact.php">CONTACT</li>
</ul>
</div>
</div>
</div>
<div class="divblueline"></div>
<div class="divcontainer">
<div style="float:left">
<h2>What is C-Driver Manager</h2>
C-Driver Manager is a simple tool that;
<ul>
<li>displays information about your devices</li>
<li>identify unrecognized devices by windows</li>
<li>Backups your devices driver</li>
</ul>
<h2>Why C-Driver Manager?</h2>
<ul>
<li>No installation needed</li>
<li>No adware</li>
<li>No spyware</li>
<li>Absolutely freeware</li>
</ul>
</div>
<div>
<img alt="" src="images/devmgr5.jpg" height="430" width="700">
</div>
</div>
<div class="divblueline"></div>
<div class="divbottom">
<div id="chmx">
</div>
</div>
</body>
<script>
for (i=0;i<document.getElementsByClassName('mnuHorizontal').item(0).children.length; i++)
{
if (document.getElementsByClassName('mnuHorizontal').item(0).children[i].id ==
"index.php")
{
document.getElementsByClassName('mnuHorizontal').item(0).children[i].className = 'activemnu';
}
else
{
document.getElementsByClassName('mnuHorizontal').item(0).children[i].className = '';
}
}
resizecontainer();
function resizecontainer()
{
avh = window.top.innerHeight;
dbh = document.getElementsByClassName('divbottom').length *
document.getElementsByClassName('divbottom').item(0).clientHeight;
dbt = document.getElementsByClassName('divtop').length *
document.getElementsByClassName('divtop').item(0).clientHeight;
dbbl = document.getElementsByClassName('divblueline').length *
document.getElementsByClassName('divblueline').item(0).clientHeight;
decrh = dbh + dbt + dbbl;
document.getElementsByClassName('divcontainer').item(0).style.minHeight = (avh - decrh) + 'px';
}
</script>
</html>
look for this function inside the example above ->
function resizecontainer()
{
avh = window.top.innerHeight;
dbh = document.getElementsByClassName('divbottom').length *
document.getElementsByClassName('divbottom').item(0).clientHeight;
dbt = document.getElementsByClassName('divtop').length *
document.getElementsByClassName('divtop').item(0).clientHeight;
dbbl = document.getElementsByClassName('divblueline').length *
document.getElementsByClassName('divblueline').item(0).clientHeight;
decrh = dbh + dbt + dbbl;
document.getElementsByClassName('divcontainer').item(0).style.minHeight = (avh - decrh) + 'px';
}
This works great. This will keep your image from growing too large width wise and also keep its proportions.
img {
max-width: 100%;
height: auto;
}
My CSS solution is:
position: absolute;
width: 100%;
height: 100%;
overflow: hidden;
This question already has answers here:
set content height 100% jquery mobile
(8 answers)
Closed 8 years ago.
I have a mobile webpage created using jquery mobile which contains a header and 4 divs. The header is to occupy 10% of the page with the following 90% filled equally with the divs. I have the following code but I can't seem to get it to fill the page. I've done some research and I believe this may be to do with the content being less than the height of the page so I've tried setting the page height to the viewport height using jquery to no avail. Any ideas what I may be doing wrong?
<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1, maximum-scale=1,user-scalable=no">
<link rel="stylesheet" href="css/jquery.mobile-1.4.0.css"/>
<script src="js/jquery.js"></script>
<script src="js/jquery.mobile-1.4.0.min.js"></script>
<style>
#header
{
height:10%;
}
.content
{
height: 90%;
margin: 0px;
padding:0px;
}
#box1
{
width:100%;
height:22%;
border: solid 1px #000000;
position: relative;
background-color: red;
}
#box2
{
width:100%;
height:22%;
border: solid 1px #000000;
position: relative;
background-color: green;
}
#box3
{
width:100%;
height:22%;
border: solid 1px #000000;
position: relative;
background-color: blue;
}
#box4
{
width:100%;
height:22%;
border: solid 1px #000000;
position: relative;
background-color: orange;
}
</style>
<script type="text/javascript">
function SetHeightOfDiv(){
var viewportHeight = $(window).height();
var theDiv = document.getElementById('home');
theDiv.style.height = viewportHeight + "px";
}
</script>
</head>
<body onload="SetHeightOfDiv()">
<div data-role="page" id ="home">
<div data-role="header" id="header" data-tap-toggle="false"></div>
<div data-role="content" class ="content">
<div id="box1">
</div>
<div id="box2">
</div>
<div id="box3">
</div>
<div id="box4">
</div>
</div>
</div>
</body>
</html>
Read this: http://jqmtricks.wordpress.com/2014/02/06/content-div-height-fill-page-height/
DEMO
function SetHeightOfDiv() {
var screen = $.mobile.getScreenHeight();
var header = $(".ui-header").hasClass("ui-header-fixed") ? $(".ui-header").outerHeight() - 1 : $(".ui-header").outerHeight();
var footer = $(".ui-footer").hasClass("ui-footer-fixed") ? $(".ui-footer").outerHeight() - 1 : $(".ui-footer").outerHeight();
/* content div has padding of 1em = 16px (32px top+bottom). This step
can be skipped by subtracting 32px from content var directly. */
var contentCurrent = $(".ui-content").outerHeight() - $(".ui-content").height();
var content = screen - header - footer - contentCurrent;
$(".ui-content").height(content);
}
You also need to trigger this on window resize and orientationchange:
$(document).on("pageshow", "#home", function () {
SetHeightOfDiv();
});
$(window).on("resize orientationchange", function () {
SetHeightOfDiv();
});
Check out my blog here:
http://www.brixwork.com/realtors/blog/seo/best-time-to-post-on-facebook-or-twitter-and-email/
When you try to click the "LIKE" button, the pop up comes up at the right height, but the width is restricted to the width of the button.
Here's my CSS code:
.blog_social_media {
float: right;
border-left: 1px dotted #666;
margin-bottom: 10px;
margin-left: 10px;
padding-top: 10px;
overflow: visible;
}
.blog_social_media div {
position:relative;
display:block;
float:left;
}
iframe.fb_ltr {
width: 300px !important;
}
.blog_twitter_button {
width: 55px;
height: 62px;
margin: 0px 0px 10px 10px;
}
.blog_facebook_button {
width: 50px;
height: 63px;
overflow: visible !important;
margin: 0px 0px 10px 10px;
}
.blog_googleplus_button {
width: 50px;
height: 64px;
margin: 0px 0px 10px 10px;
}
Here's the HTML code:
<div class="blog_social_media" style="width:65px; height:auto;">
<div class="blog_twitter_button">
Tweet
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
</div>
<div class="blog_facebook_button">
<div class="fb-like" data-href="http://www.brixwork.com/realtors/blog/seo/three-reasons-to-claim-your-place-on-google-places/" data-send="false" data-layout="box_count" data-width="50" data-show-faces="false" data-font="lucida grande">
</div>
</div>
<div class="blog_googleplus_button">
<!-- Place this tag where you want the +1 button to render -->
<g:plusone size="tall"></g:plusone>
<!-- Place this render call where appropriate -->
<script type="text/javascript">
(function() {
var po = document.createElement('script');
po.type = 'text/javascript';
po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(po, s);
})();
</script>
</div>
</div>
I have overflow:visible; set on all my elements that enclose the facebook balloon. The same CSS logic works just fine on the Google+ popup dialogue, just the Facebook one is choking. What's going on that I can fix?
Thanks in advance.
.fb_edge_widget_with_comment span
{overflow:visible !important; width:450px !important; margin-right:-375px;}
Put that in your css, it will set the size of the popup to its undeclared size and will reduce the overwidth by negative margining.
It seems like there is a problem with:
<div class="blog_facebook_button">
<div class="fb-like" data-href="http://www.brixwork.com/realtors/blog/seo/three-reasons-to-claim-your-place-on-google-places/" data-send="false" data-layout="box_count" data-width="50" data-show-faces="false" data-font="lucida grande">
</div>
</div>
The attr data-width="50" needs to be data-width="250" and then you need to add
.blog_facebook_button { position: relative; }
.fb-like { position: absolute; top: 0; left: 0; }
This worked for me.
.fb-like span {
overflow:visible !important; width:450px !important; margin-right:-400px;
}
looks like div.fb-like -> span is cutting it off try CSS:
div.fb-like span {
width: 450px;
overflow: visible;
}
It looks like my styling in Google Chrome isn't quite working out as I have intended (link). It works just fine on Internet Explorer 8.
Here's the style sheet:
#charset "utf-8";
/* Stylesheet for Northview Game Tickets */
#mainwrapper {
width:18cm;
height:25cm;
background-color:#0F0;
}
#title {
width:680px;
height:117px;
/*background-image:url(http://nhswag.com/tickets/images/title.png);*/
background-color:#183f61;
}
#title-img {
width:680px;
height:117px;
}
#sportimage {
width:680px;
height:302px;
background-image:url(http://nhswag.com/tickets/images/sportimg.png);
}
#instructionstitle {
width:340px;
height:57px;
float:left;
padding-top:15px;
/*background-color:#353435;*/
background-color:#183f61;
vertical-align:text-bottom;
color:#FFFFFF;
}
#instructions {
width:340px;
height:416px;
float:left;
text-align:left;
padding-top:15px;
/*background-color:#8B8B8B;*/
/*background-color:#003;*/
background-color:#F2EEEA;
}
#ticketinfo {
width:170px;
height:189px;
float:right;
text-align:left;
padding-top: 15px;
padding-left: 15px;
/*background-color:#767676;*//*#633;*/
background-color:#d9d5d2;
}
#barcodewrapper {
width:170px;
height:189px;
float:right;
padding-top:44px;
/*background-color:#767676;*//*#FFF;*/
background-color:#d9d5d2;
}
#barcode {
border-width:thick;
border-color:#000;
}
#adspace {
width:340px;
height:284px;
float:right;
padding-top:10px;
background-image:url(http://nhswag.com/tickets/images/ad.png);
}
#copyrightwrapper {
width:680px;
height:57px;
padding-top:25px;
background-color:#183f61;
font-size:12px;
color:#FFFFFF;
}
What style option may be causing the inconsistencies?
EDIT:
Page source:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="ticketstyle.css" />
<title>NHSWAG Game Ticket</title>
</head>
<?php
/*
Required Fields:
1) name
2) type (adult/student/child)
3) price
4) barcodeid
ex: http://nhswag.com/tickets/ticketprint.php?name=John%20Smith&type=Adult&price=4.98&barcodeid=9780618503049
*/
function google_qr($url,$size ='150',$EC_level='L',$margin='0') {
$url = urlencode($url);
echo '<img id="barcode" src="http://chart.apis.google.com/chart?chs='.$size.'x'.$size.'&cht=qr&chld='.$EC_level.'|'.$margin.'&chl='.$url.'" alt="QR code" width="'.$size.'" height="'.$size.'"/>';
}
?>
<body style="background-color:#b0b0b0">
<center>
<div id="mainwrapper">
<div id="title">
</div>
<div id="sportimage">
sportimage
</div>
<div id="instructionstitle">
Instructions</div>
<div id="ticketinfo">
<strong>Ticket Details:</strong><br><br>
Name:<br>
<?php echo $_GET["name"]; ?><br>
Type:<br>
<?php echo $_GET["type"]; ?><br>
Price:<br>
$<?php echo $_GET["price"]; ?>
</div>
<div id="barcodewrapper">
<center>
<div id="barcode">
<?php google_qr('http://www.nhswag.com/tickets/check/ticketcheck.php?barcodeid='.$_GET["barcodeid"],100); ?>
<?php // echo md5("JustianMeyerNorthview Gwinett Football"); ?>
</div>
</center>
</div>
<div id="instructions">
<ol>
<li>Print this ticket and keep it for your records.</li>
<li>Present this ticket at the entrance of your <strong>Northview High School</strong> sponsored event.</li>
<li>Enjoy! Ask the ticket manager for seating.</li>
</ol>
</div>
<div id="adspace">
<p>Advertisement</p>
<p> </p>
</div>
<div id="copyrightwrapper">
Copyright © NHSwag Team, 2011
</div>
</div>
</center>
</body>
</html>
Your page is rendering in Quirks mode in IE8:
Quirks mode is a rendering mode used
by some web browsers for the sake of
maintaining backward compatibility
with web pages designed for older
browsers or coded without standards
conformance.
You can't hope that a page which is created to work in IE Quirks mode will work in any other browser - it almost always won't, as it the case here.
So, you should change the doctype (first line) to <!DOCTYPE html> to get it out of Quirks mode and fix the (numerous) problems from there.
If you need more advice on how to fix your HTML/CSS to work with a proper doctype, let me know and I'll provide a more thorough answer on how to do this.
I tested this in IE7/8, Firefox, Chrome: it renders consistently.
I tried to keep as much of your HTML/CSS as possible; because I did that, the code could be more elegant, but it works!
I added all the styles at the top just to make it easier to test; you should put them in your stylesheet.
You will have to add back in your PHP where appropriate. I added in one tiny snippet of PHP to output the current year.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>NHSWAG Game Ticket</title>
<style type="text/css">
html, body {
margin: 0;
padding: 0;
border: 0
}
body {
background: #b0b0b0;
padding: 5px
}
#mainwrapper {
width: 680px;
margin: 0 auto
}
#title {
height: 117px;
/*background-image:url(http://nhswag.com/tickets/images/title.png);*/
background-color: #183f61;
}
#sportimage {
height: 302px;
background-image: url(http://nhswag.com/tickets/images/sportimg.png);
}
#floatContainer {
background: #f2eeea;
overflow: auto
}
#left {
float: left;
width: 50%
}
#right {
float: right;
width: 50%
}
#instructionstitle {
height: 32px;
padding-top: 12px;
/*background-color: #353435;*/
background-color: #183f61;
vertical-align: text-bottom;
color: #fff;
text-align: center
}
#barcodewrapper {
overflow: auto;
background: #d9d5d2
}
#barcode {
float: left;
padding: 20px
}
#ticketinfo {
float: left;
padding: 16px 0
}
#ticketinfo dd {
margin-left: 12px
}
#ticketinfo dl {
margin: 0
}
#copyrightwrapper {
height: 35px;
padding-top: 22px;
background-color: #183f61;
font-size: 12px;
color: #fff;
text-align: center
}
#adspace {
height: 284px;
background: #fff;
text-align: center;
background:url(http://nhswag.com/tickets/images/ad.png) no-repeat
}
#adspace p {
margin: 0;
padding: 12px 0
}
</style>
</head>
<body>
<div id="mainwrapper">
<div id="title">title</div>
<div id="sportimage">sportimage</div>
<div id="floatContainer">
<div id="left">
<div id="instructionstitle"> Instructions </div>
<div id="instructions">
<ol>
<li>Print this ticket and keep it for your records.</li>
<li>Present this ticket at the entrance of your <strong>Northview High School</strong> sponsored event.</li>
<li>Enjoy! Ask the ticket manager for seating.</li>
</ol>
</div>
</div>
<div id="right">
<div id="barcodewrapper">
<div id="barcode"> <img id="barcode" src="http://chart.apis.google.com/chart?chs=100x100&cht=qr&chld=L|0&chl=http%3A%2F%2Fwww.nhswag.com%2Ftickets%2Fcheck%2Fticketcheck.php%3Fbarcodeid%3D" alt="QR code" width="100" height="100"/> </div>
<div id="ticketinfo"> <strong>Ticket Details:</strong><br>
<br>
<dl>
<dt>Name:</dt>
<dd>John Smith</dd>
<dt>Type:</dt>
<dd>Student</dd>
<dt>Price:</dt>
<dd>$5</dd>
</dl>
</div>
</div>
<div id="adspace">
<p>Advertisement</p>
<p> </p>
</div>
</div>
</div>
<div id="copyrightwrapper"> Copyright © NHSwag Team, <?php echo date('Y') ?></div>
</div>
</body>
</html>
It's because of IE's default box-sizing (which is non-w3c compliant, BTW, and it's Chrome that's working correctly) when it is in Quirks Mode.
Try this:
#ticketinfo {
width:170px;
height:189px;
float:right;
text-align:left;
padding-top: 15px;
/*padding-left: 15px;*/
/*background-color:#767676;*//*#633;*/
background-color:#d9d5d2;
}
In IE the element's width is 170px, in Chrome: 170px + 15px padding.
But what you REALLY should do is to use a correct doctype.
his problem cause by different block model implementation between ie and chrome/firefox/opera (w3c) which ie9 now already comply with standard. I have tested with IE8 and chrome. simple fix:
#copyrightwrapper {
width: 680px;
height: 57px;
padding-top: 25px;
background-color: #183F61;
font-size: 12px;
color: white;
clear: both; /*add this to make sure footer is in the bottom as u use float before*/
}
then remove unnecessary padding-top from other float div