html output to web
<!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>
<title>ORSCA - Outlaw Racing Street Car Association</title>
<link href="stylesheets/main.css" rel="stylesheet" type="text/css" title="default" />
<script type="text/javascript">
var staticmenuids=["staticmenu"]
var staticmenuoffsetY=[]
function getmenuoffsetY(){
for (var i=0; i<staticmenuids.length; i++){
var currentmenu=document.getElementById(staticmenuids[i])
staticmenuoffsetY.push(isNaN(parseInt(currentmenu.style.top))? 0 : parseInt(currentmenu.style.top))
}
initstaticmenu()
}
function initstaticmenu(){
var iebody=(document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
var topcorner=(window.pageYOffset)? window.pageYOffset : iebody.scrollTop
for (var i=0; i<staticmenuids.length; i++)
document.getElementById(staticmenuids[i]).style.top=topcorner+staticmenuoffsetY[i]+"px"
setTimeout("initstaticmenu()", 100)
}
if (window.addEventListener)
window.addEventListener("load", getmenuoffsetY, false)
else if (window.attachEvent)
window.attachEvent("onload", getmenuoffsetY)
</script>
</head>
<body>
<div id="container">
<div id="top"></div>
<div id="main-container">
<div id="main-nav">
<a id="news" href="#" title="news"><span>News</span></a>
<a id="forums" href="#" title="forums"><span>Forums</span></a>
<a id="classifieds" href="http://www.racingjunk.com" target="_blank" title="classifieds"><span>Classifieds</span></a>
<a id="raceschedule" href="index.php?page=calendar" title="raceschedule"><span>Race Schedule</span></a>
<a id="rulebooks" href="index.php?page=rulebooks" title="rulebooks"><span>Rule Books</span></a>
<a id="standings" href="index.php?page=standings" title="standings"><span>Standings</span></a>
<a id="records" href="#" title="records"><span>Records</span></a>
<a id="photogallery" href="http://prophotoproductions.exposuremanager.com/g/drag_racing" target="_blank" title="photogallery"><span>Photo Gallery</span></a>
<a id="racerprofile" href="#" title="racerprofile"><span>Racer Profile</span></a>
</div>
<div id="main-content-holder">
<div id="content">
<div id="calholder">
<FORM name="chooseyear" class="chooser">
<select name="menu2" onchange="window.location=this.options[this.selectedIndex].value;">
<option value="index.php?page=calendar&month=2&year=2009">2009
<option SELECTED value="index.php?page=calendar&month=2&year=2010">2010
<option value="index.php?page=calendar&month=2&year=2011">2011
</SELECT>
</FORM>
<FORM name="choosemonth" class="chooser">
<select name="menu1" onchange="window.location=this.options[this.selectedIndex].value;">
<option value="index.php?page=calendar&month=1&year=2010">January
<option value="index.php?page=calendar&month=2&year=2010">February
<option value="index.php?page=calendar&month=3&year=2010">March
<option value="index.php?page=calendar&month=4&year=2010">April
<option value="index.php?page=calendar&month=5&year=2010">May
<option value="index.php?page=calendar&month=6&year=2010">June
<option value="index.php?page=calendar&month=7&year=2010">July
<option value="index.php?page=calendar&month=8&year=2010">August
<option value="index.php?page=calendar&month=9&year=2010">September
<option value="index.php?page=calendar&month=10&year=2010">October
<option value="index.php?page=calendar&month=11&year=2010">November
<option value="index.php?page=calendar&month=12&year=2010">December
</SELECT>
</FORM>
<div id="calendar">
<div id="month">February 2010</div>
<div class="weekend">sun</div>
<div class="weekday">mon</div>
<div class="weekday">tue</div>
<div class="weekday">wed</div>
<div class="weekday">thu</div>
<div class="weekday">fri</div>
<div class="weekend">sat</div>
<div class="weekday"></div>
<div class="weekday">1</div>
<div class="weekday">2</div>
<div class="weekday">3</div>
<div class="weekday">4</div>
<div class="weekday">5</div>
<div class="weekend">6</div>
<div class="weekend">7</div>
<div class="weekday">8</div>
<div class="weekday">9</div>
<div class="weekday">10</div>
<div class="weekday">11</div>
<div class="eventday4">12</div>
<div class="eventday4">13</div>
<div class="eventday2">14</div>
<div class="weekday">15</div>
<div class="weekday">16</div>
<div class="weekday">17</div>
<div class="weekday">18</div>
<div class="weekday">19</div>
<div class="weekend">20</div>
<div class="weekend">21</div>
<div class="weekday">22</div>
<div class="weekday">23</div>
<div class="weekday">24</div>
<div class="weekday">25</div>
<div class="weekday">26</div>
<div class="weekend">27</div>
<div class="weekend">28</div>
<div class="event"><img src="images/test.jpg" width="200px" align="left" />February 12-14th, 2010</div>
<div class="event"><img src="images/flyer.jpg" width="200px" align="left" />February 12, 2010</div></div></div></div>
</div>
<div id="sponsors">
<object width="698" height="183">
<param name="movie" value="images/sponsors.swf">
<embed src="images/sponsors.swf" width="698" height="183">
</embed>
</object>
</div>
<div id="main-classes"> <img src="http://berryequipment.net/orsca/images/autopromod.png" /> <a href="http://www.southerndieselperformance.com/" target="_blank"><img src="http://berryequipment.net/orsca/images/stp.png" border="0" /></a> </div>
</div>
</div>
</body>
</html>
css
html {min-width:999px;}
body {
min-width:999px; margin: 0px;
padding: 0px;
background: #000000 url(http://berryequipment.net/orsca/images/repeatbg2.jpg) repeat-y 50% 0;
}
#container {
text-align: center;
width: 100%;
background: url(http://berryequipment.net/orsca/images/mainbg.jpg) no-repeat 50% 108px;
}
#top {
text-align: center;
min-width: 999px;
height: 108px;
background: #000 url(http://berryequipment.net/orsca/images/topbg.jpg);
}
#main-container {
position: relative;
width: 1001px;
min-height: 784px;
margin-left: auto;
margin-right: auto;
text-align: left;
}
#main-nav {
position: relative;
margin-top: 48px;
margin-left: 12px;
width: 982px;
height:58px;
background-color: #434222;
}
#news
{
float: left;
display: block;
width: 94px;
height: 58px;
background: url("../images/nav/news.jpg") no-repeat 0 0;
}
#news:hover
{
background-position: 0 -58px;
}
#news span
{
display: none;
}
#forums
{
float: left;
display: block;
width: 79px;
height: 58px;
background: url("../images/nav/forums.jpg") no-repeat 0 0;
}
#forums:hover
{
background-position: 0 -58px;
}
#forums span
{
display: none;
}
#classifieds
{
float: left;
display: block;
width: 106px;
height: 58px;
background: url("../images/nav/classifieds.jpg") no-repeat 0 0;
}
#classifieds:hover
{
background-position: 0 -58px;
}
#classifieds span
{
display: none;
}
#raceschedule
{
float: left;
display: block;
width: 127px;
height: 58px;
background: url("../images/nav/raceschedule.jpg") no-repeat 0 0;
}
#raceschedule:hover
{
background-position: 0 -58px;
}
#raceschedule span
{
display: none;
}
#rulebooks
{
float: left;
display: block;
width: 105px;
height: 58px;
background: url("../images/nav/rulebooks.jpg") no-repeat 0 0;
}
#rulebooks:hover
{
background-position: 0 -58px;
}
#rulebooks span
{
display: none;
}
#standings
{
float: left;
display: block;
width: 96px;
height: 58px;
background: url("../images/nav/standings.jpg") no-repeat 0 0;
}
#standings:hover
{
background-position: 0 -58px;
}
#standings span
{
display: none;
}
#records
{
float: left;
display: block;
width: 86px;
height: 58px;
background: url("../images/nav/records.jpg") no-repeat 0 0;
}
#records:hover
{
background-position: 0 -58px;
}
#records span
{
display: none;
}
#photogallery
{
float: left;
display: block;
width: 125px;
height: 58px;
background: url("../images/nav/photogallery.jpg") no-repeat 0 0;
}
#photogallery:hover
{
background-position: 0 -58px;
}
#photogallery span
{
display: none;
}
#racerprofile
{
float: left;
display: block;
width: 164px;
height: 58px;
background: url("../images/nav/racerprofile.jpg") no-repeat 0 0;
}
#racerprofile:hover
{
background-position: 0 -58px;
}
#racerprofile span
{
display: none;
}
#main-content-holder {
position: relative;
margin-top: 0px;
width: 758px;
background:url(../images/repeatbg.jpg) repeat-y 0 0;
}
#content {
padding: 10px;
color: #FFF;
width: 738px;
text-align: left;
background: url(../images/contentbgtop.jpg) no-repeat;
min-height: 678px;
}
#home_content1 {
color: #FFF;
width: 758px;
height: 391px;
background: url(../images/home_contentbg1.jpg);
}
#home_content2 {
width: 758px;
height: 305px;
background: url(../images/home_contentbg2.jpg);
}
#sponsors {
margin-top: 55px;
padding-top: 41px;
text-align: center;
width: 758px;
height: 225px;
background: url(../images/sponsors.png) no-repeat;
}
#main-classes {
position: absolute;
top: 150px;
left: 797px;
width: 203px;
height: 626px;
}
#calholder {
width: 738px;
text-align: left;
}
#calendar {
width: 455px;
text-align: left;
}
#month {
margin-left: 40px;
font: 2em Trebuchet MS, sans-serif; line-height: 1.25; color: #FFF;
display: block;
}
.weekday {
color: #FFF;
margin-left: 20px;
text-align: center;
font: 1.125em Lucida Sans Unicode, sans-serif; color: #FFF;
float: left;
width: 45px;
height: 45px;
line-height: 45px;
}
.weekend {
margin-left: 20px;
text-align: center;
font: 1.125em Lucida Sans Unicode, sans-serif; color: #800000;
float: left;
width: 45px;
height: 45px;
line-height: 45px;
}
.eventday1 {
background: url(../images/event1.jpg);
margin-left: 20px;
text-align: center;
font: 1.125em Lucida Sans Unicode, sans-serif; color: #FFF;
float: left;
width: 45px;
height: 45px;
line-height: 45px;
}
.eventday2 {
background: url(../images/event2.jpg);
margin-left: 20px;
text-align: center;
font: 1.125em Lucida Sans Unicode, sans-serif; color: #FFF;
float: left;
width: 45px;
height: 45px;
line-height: 45px;
}
.eventday3 {
background: url(../images/event3.jpg);
margin-left: 20px;
text-align: center;
font: 1.125em Lucida Sans Unicode, sans-serif; color: #FFF;
float: left;
width: 45px;
height: 45px;
line-height: 45px;
}
.eventday4 {
background: url(../images/event4.jpg);
margin-left: 20px;
text-align: center;
font: 1.125em Lucida Sans Unicode, sans-serif; color: #FFF;
float: left;
width: 45px;
height: 45px;
line-height: 45px;
}
.eventday5 {
background: url(../images/event5.jpg);
margin-left: 20px;
text-align: center;
font: 1.125em Lucida Sans Unicode, sans-serif; color: #FFF;
float: left;
width: 45px;
height: 45px;
line-height: 45px;
}
.chooser {
float: right;
margin-right: 10px;
margin-top: 10px;
}
#rules {
margin-top: 0px;
margin-left: 200px;
width: 500px;
}
.wireframemenu{
border: 1px solid #282828;
background-color: #202020;
border-bottom-width: 0;
width: 170px;
position: absolute;
}
* html .wireframemenu{ /*IE only rule. Original menu width minus all left/right paddings */
width: 164px;
}
.wireframemenu ul{
padding: 0;
margin: 0;
list-style-type: none;
}
.wireframemenu a{
font: bold 13px Verdana;
padding: 4px 3px;
display: block;
width: 100%; /*Define width for IE6's sake*/
color: #FFFFFF;
text-decoration: none;
border-bottom: 1px solid #303030;
}
.wireframemenu a:visited{
color: #FFFFFF;
}
html>body .wireframemenu a{ /*Non IE rule*/
width: auto;
}
.wireframemenu a:hover{
background-color: #181818;
color: #FFF;
}
img, div { behavior: url(../iepngfix.htc) }
.event {
padding: 20px;
width: 500px;
background-color: #FFF;
float: left;
position: relative;
}
my event class divs are inside the content div. They are popping out the bottom of it though, the content div isn’t expanding to hold the event divs.
http://www.berryequipment.net/orsca/index.php?page=calendar
Put a white background behind the event divs to make it easy to see.
This is happening in FF3.5, IE8, Safari. It works correctly in IE5.5, 6, and 7… go figure.
