Ваша страница отображается в режиме Причуды в IE8:
Quirks mode - режим рендеринга, используемый
некоторыми веб-браузерами ради
поддержание обратной совместимости
с веб-страницами, предназначенными для пожилых
браузеры или кодированные без стандартов
соответствие.
Вы не можете надеяться, что страница, созданная для работы в режиме IE Quirks, будет работать в любом другом браузере - почти всегда не будет, как в данном случае.
Итак, вы должны изменить тип документа (первая строка) на <!DOCTYPE html>, чтобы вывести его из режима Quirks и устранить оттуда (многочисленные) проблемы.
Если вам нужен дополнительный совет по , как исправить ваш HTML / CSS для работы с правильным типом документа, дайте мне знать, и я предоставлю более подробный ответ, как это сделать.
Я проверял это в IE7 / 8, Firefox, Chrome: он рендерится последовательно.
Я старался сохранить как можно больше вашего HTML / CSS; потому что я сделал это, код мог бы быть более элегантным, но он работает!
Я добавил все стили вверху страницы, чтобы было проще тестировать; Вы должны поместить их в таблицу стилей.
Вы должны будете добавить обратно в ваш PHP, где это уместно. Я добавил крошечный фрагмент PHP для вывода текущего года.
<!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>