<div> spacing

arenaninja · November 22, 2011

Hey all. I have a page which is not playing well with my browser. Now I'm a newbie with no experience in all this, but I started tinkering with CSS to make my page display much nicer, the result is the code below. The elements inside of "offsetdiv" are essentially a navigation bar, while the code below is a weekly calendar displayed in a table.

div#offsetdiv
{
    text-align:center;
}
/* Styling for navigation bar on signup page */
ul#date-offset
{
    margin:20px;
    padding:0;
    list-style:none;
    width:400px;
}
#calendarContainer
{
    overflow:auto;
    height:70%;
    border-bottom:thin;
}

        <div id="offsetdiv">
            <ul id="date-offset">
                    <li><a href="#" onclick="onPrevWeek()">Prev Week</a></li>
                    <li><a href="#" onclick="onPrevDay()">Prev Day</a></li>
                    <li><a href="#" onclick="onNextDay()">Next Day</a></li>
                    <li><a href="#" onclick="onNextWeek()">Next Week</a></li>
            </ul>
            <form name="form1" method="post">
                <input type="hidden" name="offset" value="<?=$dateOffset?>" /> 
                <input type="hidden" name="equipid" value="<?=$equipid?>" />
            </form>
        </div>

        <br />
        <div id="calendarContainer">
                <table cols="8">
                    <tr>
		<td width="6%"></td>... display table </tr></table></id>

Now the code looks good enough, but my issue is that if I use strict html (<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">), IE does not leave a space between my <div>'s -- instead they overlap. What gives, and how do I fix this? As this happens when I change the DOCTYPE, I believe it is HTML related (as opposed to CSS) but as I said I'm very new at this so feel free to correct me.

Thanks in advance.

teynon · November 22, 2011

Can you post a full html output with the css template? Then I can tinker with it. If they are overlapping though, without reading through all of that, is that you might have some stuff floating and need to add some clear: both divs. But I didn't look through everything. Post a full html / css doc and i'll fix it.

arenaninja · November 22, 2011

Alright. Here's the page's html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
            "http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
<title>User Sign Up</title>
<link rel ="stylesheet" type="text/css" href="utilities/csstest.css" />
</head>
<body onload="setFocus()" bgcolor="#ffffff" text="#000000">

<script language="JavaScript" type="text/javascript">
	// <!-- start
	function onPrevWeek()
                {
                    var offset = window.document.form1.offset.value - 7;
                    var equipid = window.document.form1.equipid.value;
                    document.location="signuptest.php?id="+equipid+"&offset="+offset;
                }
                function onPrevDay()
	{
                    // They want to move the offset
                    var offset = window.document.form1.offset.value - 1;
                    var equipid = window.document.form1.equipid.value;
                    document.location="signuptest.php?id="+equipid+"&offset="+offset;
	}

	function onNextDay()
	{			
                    var offset = window.document.form1.offset.value - 0;
                    offset = offset + 1;
                    var equipid = window.document.form1.equipid.value;
                    document.location="signuptest.php?id="+equipid+"&offset="+offset;
	}
                function onNextWeek()
                {
                    var offset = window.document.form1.offset.value - 0;
                    offset = offset+7;
                    var equipid = window.document.form1.equipid.value;
                    document.location="signuptest.php?id="+equipid+"&offset="+offset;
                }

	function setFocus()
	{
	    // EMPTY
	}

	function popUp(URL) 
	{
		day = new Date();
		id = day.getTime();
		eval("page" + id + " = window.open(URL, '" + id + "', 'toolbar=0,scrollbars=1,location=0,statusbar=0,menubar=0,resizable=0,width=400,height=200,left = 312,top = 84');");
	}
// End --> 
</script>

        <h3><a href="admin.php">Back to equipment list</a></h3>
        <h4>Equipment signup</h4>

        <div id="offsetdiv">
            <ul id="date-offset">
                    <li><a href="#" onclick="onPrevWeek()">Prev Week</a></li>
                    <li><a href="#" onclick="onPrevDay()">Prev Day</a></li>
                    <li><a href="#" onclick="onNextDay()">Next Day</a></li>
                    <li><a href="#" onclick="onNextWeek()">Next Week</a></li>
            </ul>
            <form name="form1" method="post">
                <input type="hidden" name="offset" value="" /> 
                <input type="hidden" name="equipid" value="1" />
            </form>
        </div>

        <br />
        <div id="calendarContainer">
                <table cols="8">
                    <tr>
		<td width="6%"></td>
	<th id="calendarHeaders">Monday, Nov. 21, 2011</th><th id="calendarHeaders">Tuesday, Nov. 22, 2011</th><th id="calendarHeaders">Wednesday, Nov. 23, 2011</th><th id="calendarHeaders">Thursday, Nov. 24, 2011</th><th id="calendarHeaders">Friday, Nov. 25, 2011</th><th id="calendarHeaders">Saturday, Nov. 26, 2011</th><th id="calendarHeaders">Sunday, Nov. 27, 2011</th>                    </tr>
	<tr><td id="tblLeftmost">0:00 - 1:00</td><td ="blanktd"><a href="signupnow.php?date=2011-11-21&time=0:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-22&time=0:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-23&time=0:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-24&time=0:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-25&time=0:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-26&time=0:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-27&time=0:0&id=1">Sign up</a></td></tr><tr><td id="tblLeftmost">1:00 - 2:00</td><td ="blanktd"><a href="signupnow.php?date=2011-11-21&time=1:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-22&time=1:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-23&time=1:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-24&time=1:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-25&time=1:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-26&time=1:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-27&time=1:0&id=1">Sign up</a></td></tr><tr><td id="tblLeftmost">2:00 - 3:00</td><td ="blanktd"><a href="signupnow.php?date=2011-11-21&time=2:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-22&time=2:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-23&time=2:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-24&time=2:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-25&time=2:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-26&time=2:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-27&time=2:0&id=1">Sign up</a></td></tr><tr><td id="tblLeftmost">3:00 - 4:00</td><td ="blanktd"><a href="signupnow.php?date=2011-11-21&time=3:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-22&time=3:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-23&time=3:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-24&time=3:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-25&time=3:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-26&time=3:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-27&time=3:0&id=1">Sign up</a></td></tr><tr><td id="tblLeftmost">4:00 - 5:00</td><td ="blanktd"><a href="signupnow.php?date=2011-11-21&time=4:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-22&time=4:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-23&time=4:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-24&time=4:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-25&time=4:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-26&time=4:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-27&time=4:0&id=1">Sign up</a></td></tr><tr><td id="tblLeftmost">5:00 - 6:00</td><td ="blanktd"><a href="signupnow.php?date=2011-11-21&time=5:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-22&time=5:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-23&time=5:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-24&time=5:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-25&time=5:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-26&time=5:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-27&time=5:0&id=1">Sign up</a></td></tr><tr><td id="tblLeftmost">6:00 - 7:00</td><td ="blanktd"><a href="signupnow.php?date=2011-11-21&time=6:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-22&time=6:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-23&time=6:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-24&time=6:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-25&time=6:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-26&time=6:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-27&time=6:0&id=1">Sign up</a></td></tr><tr><td id="tblLeftmost">7:00 - 8:00</td><td ="blanktd"><a href="signupnow.php?date=2011-11-21&time=7:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-22&time=7:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-23&time=7:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-24&time=7:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-25&time=7:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-26&time=7:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-27&time=7:0&id=1">Sign up</a></td></tr><tr><td id="tblLeftmost">8:00 - 9:00</td><td ="blanktd"><a href="signupnow.php?date=2011-11-21&time=8:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-22&time=8:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-23&time=8:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-24&time=8:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-25&time=8:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-26&time=8:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-27&time=8:0&id=1">Sign up</a></td></tr><tr><td id="tblLeftmost">9:00 - 10:00</td><td ="blanktd"><a href="signupnow.php?date=2011-11-21&time=9:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-22&time=9:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-23&time=9:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-24&time=9:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-25&time=9:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-26&time=9:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-27&time=9:0&id=1">Sign up</a></td></tr><tr><td id="tblLeftmost">10:00 - 11:00</td><td ="blanktd"><a href="signupnow.php?date=2011-11-21&time=10:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-22&time=10:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-23&time=10:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-24&time=10:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-25&time=10:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-26&time=10:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-27&time=10:0&id=1">Sign up</a></td></tr><tr><td id="tblLeftmost">11:00 - 12:00</td><td ="blanktd"><a href="signupnow.php?date=2011-11-21&time=11:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-22&time=11:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-23&time=11:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-24&time=11:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-25&time=11:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-26&time=11:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-27&time=11:0&id=1">Sign up</a></td></tr><tr><td id="tblLeftmost">12:00 - 13:00</td><td ="blanktd"><a href="signupnow.php?date=2011-11-21&time=12:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-22&time=12:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-23&time=12:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-24&time=12:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-25&time=12:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-26&time=12:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-27&time=12:0&id=1">Sign up</a></td></tr><tr><td id="tblLeftmost">13:00 - 14:00</td><td ="blanktd"><a href="signupnow.php?date=2011-11-21&time=13:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-22&time=13:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-23&time=13:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-24&time=13:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-25&time=13:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-26&time=13:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-27&time=13:0&id=1">Sign up</a></td></tr><tr><td id="tblLeftmost">14:00 - 15:00</td><td ="blanktd"><a href="signupnow.php?date=2011-11-21&time=14:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-22&time=14:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-23&time=14:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-24&time=14:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-25&time=14:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-26&time=14:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-27&time=14:0&id=1">Sign up</a></td></tr><tr><td id="tblLeftmost">15:00 - 16:00</td><td ="blanktd"><a href="signupnow.php?date=2011-11-21&time=15:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-22&time=15:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-23&time=15:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-24&time=15:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-25&time=15:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-26&time=15:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-27&time=15:0&id=1">Sign up</a></td></tr><tr><td id="tblLeftmost">16:00 - 17:00</td><td ="blanktd"><a href="signupnow.php?date=2011-11-21&time=16:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-22&time=16:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-23&time=16:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-24&time=16:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-25&time=16:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-26&time=16:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-27&time=16:0&id=1">Sign up</a></td></tr><tr><td id="tblLeftmost">17:00 - 18:00</td><td ="blanktd"><a href="signupnow.php?date=2011-11-21&time=17:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-22&time=17:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-23&time=17:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-24&time=17:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-25&time=17:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-26&time=17:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-27&time=17:0&id=1">Sign up</a></td></tr><tr><td id="tblLeftmost">18:00 - 19:00</td><td ="blanktd"><a href="signupnow.php?date=2011-11-21&time=18:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-22&time=18:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-23&time=18:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-24&time=18:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-25&time=18:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-26&time=18:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-27&time=18:0&id=1">Sign up</a></td></tr><tr><td id="tblLeftmost">19:00 - 20:00</td><td ="blanktd"><a href="signupnow.php?date=2011-11-21&time=19:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-22&time=19:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-23&time=19:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-24&time=19:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-25&time=19:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-26&time=19:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-27&time=19:0&id=1">Sign up</a></td></tr><tr><td id="tblLeftmost">20:00 - 21:00</td><td ="blanktd"><a href="signupnow.php?date=2011-11-21&time=20:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-22&time=20:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-23&time=20:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-24&time=20:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-25&time=20:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-26&time=20:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-27&time=20:0&id=1">Sign up</a></td></tr><tr><td id="tblLeftmost">21:00 - 22:00</td><td ="blanktd"><a href="signupnow.php?date=2011-11-21&time=21:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-22&time=21:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-23&time=21:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-24&time=21:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-25&time=21:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-26&time=21:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-27&time=21:0&id=1">Sign up</a></td></tr><tr><td id="tblLeftmost">22:00 - 23:00</td><td ="blanktd"><a href="signupnow.php?date=2011-11-21&time=22:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-22&time=22:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-23&time=22:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-24&time=22:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-25&time=22:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-26&time=22:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-27&time=22:0&id=1">Sign up</a></td></tr><tr><td id="tblLeftmost">23:00 - 24:00</td><td ="blanktd"><a href="signupnow.php?date=2011-11-21&time=23:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-22&time=23:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-23&time=23:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-24&time=23:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-25&time=23:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-26&time=23:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-27&time=23:0&id=1">Sign up</a></td></tr>		<tr>
	</tr>
</table>
        </div>
  <div id="centered">
      <br />
Page generated in 0.06472 seconds.</div>  </div>

And the css:

body
{
    font-size:75%;
    font-family:verdana,arial,'sans serif';
    width:100%;
    margin:1.5% 5% 1% 7%;
    /* top right bottom left*/
}
h3 
{
    font-family:verdana,arial,'sans serif';
    text-decoration: none;
    font-size:110%;
    text-align:center;
    margin-top:3px;
    margin-bottom:5px;
}
h4
{
    text-align:center;
}
a:hover
{
    color:#000;
}
#centered
{
    text-align:center;
}
#calendarContainer
{
    overflow:auto;
    height:70%;
    border-bottom:thin;
}
div#offsetdiv
{
    text-align:center;
}
/* Styling for navigation bar on signup page */
ul#date-offset
{
    margin:20px;
    padding:0;
    list-style:none;
    width:400px;
}
ul#date-offset li {display:inline; text-align:center;} /* Makes this list horizontal */
ul#date-offset li a /* Default formatting for links in this list */
{
    text-decoration:none;
    padding:5px 0;
    width:100px;
    background:rgb(216,216,216);
    color:black;
    float:left;
    text-align:center;
    border-left:1px solid #fff;
}
ul#date-offset li a:hover
{
    color:white;
    background:black;
}

/* Table elements */
table
{
    font-family:verdana,arial,'sans serif';
    font-size:100%;
    border-spacing:0px;
    border-collapse:collapse;
    border-bottom:1px solid rgb(216,216,216);
}
table th
{
    text-align:center;
    font-weight:normal;
    padding:0.2em 0.5em;
    border-top:1px dotted black;
    border-bottom:1px dotted black;
    border-right:1px dotted black;
}
#calendarHeaders
{
    width:12%;
}
table td 
{
    text-align:left;
    border-top:1px dotted black;
    padding:.5em 1em;
    border-right:1px dotted black;
}
#blanktd
{
    text-align:center;
}
#tblLeftmost
{
    padding:0 0;
    width:6%;
    font-size:95%;
    height:5em;
    text-align:center;
    border-right: 1px dotted black;
}
table thead th 
{
    text-align:center;
    border-bottom:1px solid black;
}
table th.Corner 
{
    text-align: left;
}

teynon · November 22, 2011

Any chance you can post a picture of how it's suppose to look? I see a lot of issues, but I can't tell what your end goal is.

arenaninja · November 22, 2011

Sure. Here's it is:

I just want the division centered and with nice spacing.

And if you could tell me what else is wrong I would really appreciate it. I'm learning all of this as I fix this thing one line at a time. The php is much more horrible than the html (I'm not very good at either, though I can tell bad code apart from good code). Unfortunately if I turn on strict HTML for the entire thing it'll probably just stop running :'(

teynon · November 22, 2011

Tried to get it as close as I could before I get some sleep:

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
<title>User Sign Up</title>
<link rel ="stylesheet" type="text/css" href="csstest.css" />
</head>
<body onload="setFocus()" bgcolor="#ffffff" text="#000000">
    <div class="body">
        <h3><a href="admin.php">Back to equipment list</a></h3>
        <h4>Equipment signup</h4>

        <div id="offsetdiv">
            <ul id="date-offset">
                    <li><a href="#" onclick="onPrevWeek()">Prev Week</a></li>
                    <li><a href="#" onclick="onPrevDay()">Prev Day</a></li>
                    <li><a href="#" onclick="onNextDay()">Next Day</a></li>
                    <li><a href="#" onclick="onNextWeek()">Next Week</a></li>
            </ul>
            <div class="clearfix"></div>
            <form name="form1" method="post">
                <input type="hidden" name="offset" value="" /> 
                <input type="hidden" name="equipid" value="1" />
            </form>
        </div>

        <br />
        <div id="calendarContainer">
                <table cols="8" align="center">
                    <tr>
		<td width="6%"></td>
	<th id="calendarHeaders">Monday, Nov. 21, 2011</th><th id="calendarHeaders">Tuesday, Nov. 22, 2011</th><th id="calendarHeaders">Wednesday, Nov. 23, 2011</th><th id="calendarHeaders">Thursday, Nov. 24, 2011</th><th id="calendarHeaders">Friday, Nov. 25, 2011</th><th id="calendarHeaders">Saturday, Nov. 26, 2011</th><th id="calendarHeaders">Sunday, Nov. 27, 2011</th>                    </tr>
	<tr><td id="tblLeftmost">0:00 - 1:00</td><td ="blanktd"><a href="signupnow.php?date=2011-11-21&time=0:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-22&time=0:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-23&time=0:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-24&time=0:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-25&time=0:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-26&time=0:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-27&time=0:0&id=1">Sign up</a></td></tr><tr><td id="tblLeftmost">1:00 - 2:00</td><td ="blanktd"><a href="signupnow.php?date=2011-11-21&time=1:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-22&time=1:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-23&time=1:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-24&time=1:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-25&time=1:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-26&time=1:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-27&time=1:0&id=1">Sign up</a></td></tr><tr><td id="tblLeftmost">2:00 - 3:00</td><td ="blanktd"><a href="signupnow.php?date=2011-11-21&time=2:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-22&time=2:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-23&time=2:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-24&time=2:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-25&time=2:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-26&time=2:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-27&time=2:0&id=1">Sign up</a></td></tr><tr><td id="tblLeftmost">3:00 - 4:00</td><td ="blanktd"><a href="signupnow.php?date=2011-11-21&time=3:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-22&time=3:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-23&time=3:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-24&time=3:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-25&time=3:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-26&time=3:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-27&time=3:0&id=1">Sign up</a></td></tr><tr><td id="tblLeftmost">4:00 - 5:00</td><td ="blanktd"><a href="signupnow.php?date=2011-11-21&time=4:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-22&time=4:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-23&time=4:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-24&time=4:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-25&time=4:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-26&time=4:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-27&time=4:0&id=1">Sign up</a></td></tr><tr><td id="tblLeftmost">5:00 - 6:00</td><td ="blanktd"><a href="signupnow.php?date=2011-11-21&time=5:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-22&time=5:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-23&time=5:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-24&time=5:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-25&time=5:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-26&time=5:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-27&time=5:0&id=1">Sign up</a></td></tr><tr><td id="tblLeftmost">6:00 - 7:00</td><td ="blanktd"><a href="signupnow.php?date=2011-11-21&time=6:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-22&time=6:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-23&time=6:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-24&time=6:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-25&time=6:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-26&time=6:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-27&time=6:0&id=1">Sign up</a></td></tr><tr><td id="tblLeftmost">7:00 - 8:00</td><td ="blanktd"><a href="signupnow.php?date=2011-11-21&time=7:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-22&time=7:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-23&time=7:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-24&time=7:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-25&time=7:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-26&time=7:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-27&time=7:0&id=1">Sign up</a></td></tr><tr><td id="tblLeftmost">8:00 - 9:00</td><td ="blanktd"><a href="signupnow.php?date=2011-11-21&time=8:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-22&time=8:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-23&time=8:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-24&time=8:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-25&time=8:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-26&time=8:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-27&time=8:0&id=1">Sign up</a></td></tr><tr><td id="tblLeftmost">9:00 - 10:00</td><td ="blanktd"><a href="signupnow.php?date=2011-11-21&time=9:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-22&time=9:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-23&time=9:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-24&time=9:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-25&time=9:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-26&time=9:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-27&time=9:0&id=1">Sign up</a></td></tr><tr><td id="tblLeftmost">10:00 - 11:00</td><td ="blanktd"><a href="signupnow.php?date=2011-11-21&time=10:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-22&time=10:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-23&time=10:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-24&time=10:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-25&time=10:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-26&time=10:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-27&time=10:0&id=1">Sign up</a></td></tr><tr><td id="tblLeftmost">11:00 - 12:00</td><td ="blanktd"><a href="signupnow.php?date=2011-11-21&time=11:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-22&time=11:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-23&time=11:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-24&time=11:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-25&time=11:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-26&time=11:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-27&time=11:0&id=1">Sign up</a></td></tr><tr><td id="tblLeftmost">12:00 - 13:00</td><td ="blanktd"><a href="signupnow.php?date=2011-11-21&time=12:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-22&time=12:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-23&time=12:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-24&time=12:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-25&time=12:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-26&time=12:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-27&time=12:0&id=1">Sign up</a></td></tr><tr><td id="tblLeftmost">13:00 - 14:00</td><td ="blanktd"><a href="signupnow.php?date=2011-11-21&time=13:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-22&time=13:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-23&time=13:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-24&time=13:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-25&time=13:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-26&time=13:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-27&time=13:0&id=1">Sign up</a></td></tr><tr><td id="tblLeftmost">14:00 - 15:00</td><td ="blanktd"><a href="signupnow.php?date=2011-11-21&time=14:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-22&time=14:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-23&time=14:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-24&time=14:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-25&time=14:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-26&time=14:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-27&time=14:0&id=1">Sign up</a></td></tr><tr><td id="tblLeftmost">15:00 - 16:00</td><td ="blanktd"><a href="signupnow.php?date=2011-11-21&time=15:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-22&time=15:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-23&time=15:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-24&time=15:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-25&time=15:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-26&time=15:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-27&time=15:0&id=1">Sign up</a></td></tr><tr><td id="tblLeftmost">16:00 - 17:00</td><td ="blanktd"><a href="signupnow.php?date=2011-11-21&time=16:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-22&time=16:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-23&time=16:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-24&time=16:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-25&time=16:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-26&time=16:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-27&time=16:0&id=1">Sign up</a></td></tr><tr><td id="tblLeftmost">17:00 - 18:00</td><td ="blanktd"><a href="signupnow.php?date=2011-11-21&time=17:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-22&time=17:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-23&time=17:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-24&time=17:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-25&time=17:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-26&time=17:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-27&time=17:0&id=1">Sign up</a></td></tr><tr><td id="tblLeftmost">18:00 - 19:00</td><td ="blanktd"><a href="signupnow.php?date=2011-11-21&time=18:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-22&time=18:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-23&time=18:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-24&time=18:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-25&time=18:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-26&time=18:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-27&time=18:0&id=1">Sign up</a></td></tr><tr><td id="tblLeftmost">19:00 - 20:00</td><td ="blanktd"><a href="signupnow.php?date=2011-11-21&time=19:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-22&time=19:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-23&time=19:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-24&time=19:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-25&time=19:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-26&time=19:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-27&time=19:0&id=1">Sign up</a></td></tr><tr><td id="tblLeftmost">20:00 - 21:00</td><td ="blanktd"><a href="signupnow.php?date=2011-11-21&time=20:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-22&time=20:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-23&time=20:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-24&time=20:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-25&time=20:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-26&time=20:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-27&time=20:0&id=1">Sign up</a></td></tr><tr><td id="tblLeftmost">21:00 - 22:00</td><td ="blanktd"><a href="signupnow.php?date=2011-11-21&time=21:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-22&time=21:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-23&time=21:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-24&time=21:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-25&time=21:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-26&time=21:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-27&time=21:0&id=1">Sign up</a></td></tr><tr><td id="tblLeftmost">22:00 - 23:00</td><td ="blanktd"><a href="signupnow.php?date=2011-11-21&time=22:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-22&time=22:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-23&time=22:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-24&time=22:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-25&time=22:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-26&time=22:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-27&time=22:0&id=1">Sign up</a></td></tr><tr><td id="tblLeftmost">23:00 - 24:00</td><td ="blanktd"><a href="signupnow.php?date=2011-11-21&time=23:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-22&time=23:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-23&time=23:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-24&time=23:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-25&time=23:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-26&time=23:0&id=1">Sign up</a></td><td ="blanktd"><a href="signupnow.php?date=2011-11-27&time=23:0&id=1">Sign up</a></td></tr>		<tr>
	</tr>
</table>
        </div>
        <div id="centered">
        <br />
Page generated in 0.06472 seconds.
        </div>
    </div>
</body>
</html>

CSS

html, body
{
    font-size:75%;
    font-family:verdana,arial,'sans serif';
    width:100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
    /* top right bottom left*/
}
h3 
{
    font-family:verdana,arial,'sans serif';
    text-decoration: none;
    font-size:110%;
    text-align:center;
    margin-top:3px;
    margin-bottom:5px;
}
h4
{
    text-align:center;
}
a:hover
{
    color:#000;
}
#centered
{
    text-align:center;
}
#calendarContainer
{
    overflow:auto;
    height:70%;
    border-bottom:thin;
    width: 70%;
    margin: 0px auto;
}
div#offsetdiv
{
    text-align:center;
}
/* Styling for navigation bar on signup page */
ul#date-offset
{
    margin:0px auto;
    padding:0px;
    list-style:none;
    width: 404px;
}
ul#date-offset li {
    text-align:center; 
    margin: 0px; 
    padding: 0px;
} /* Makes this list horizontal */
ul#date-offset li a /* Default formatting for links in this list */
{
    float: left;
    text-decoration:none;
    padding:5px 0px;
    margin: 0px;
    width:100px;
    background:rgb(216,216,216);
    color:black;
    text-align:center;
    border-left:1px solid #fff;
    border-spacing: 0px;
}
ul#date-offset li a:hover
{
    color:white;
    background:black;
}

/* Table elements */
table
{
    font-family:verdana,arial,'sans serif';
    font-size:100%;
    border-spacing:0px;
    border-collapse:collapse;
    border-bottom:1px solid rgb(216,216,216);
}
table th
{
    text-align:center;
    font-weight:normal;
    padding:0.2em 0.5em;
    border-top:1px dotted black;
    border-bottom:1px dotted black;
    border-right:1px dotted black;
}
#calendarHeaders
{
    width:12%;
}
table td 
{
    text-align:left;
    border-top:1px dotted black;
    padding:.5em 1em;
    border-right:1px dotted black;
}
#blanktd
{
    text-align:center;
}
#tblLeftmost
{
    padding:0 0;
    width:6%;
    font-size:95%;
    height:5em;
    text-align:center;
    border-right: 1px dotted black;
}
table thead th 
{
    text-align:center;
    border-bottom:1px solid black;
}
table th.Corner 
{
    text-align: left;
}

.body {
    width: 100%;
    height: 100%;
}

.clearfix {
    clear: both;
}

arenaninja · November 22, 2011

Thanks a lot! I'll try to read the documentation to try to digest what clear does.

I have an additional issue and I'd rather not make another thread for it. I've managed to make this page HTML 4 Strict compliant (700 errors gone ::) ) but I'm having a cross-browser issue. W3C didn't accept using '&' (which is used repeatedly on this code to redirect to a lot of pages), so I replaced it with '&' and now my code is compliant, but all browsers (except IE) have issues interpreting this and just show '&' instead of parsing it to an ampersand. How do I fix this so that it works in all browser?

Sample:

document.location="signuptest.php?id="+equipid+"&offset="+offset;

in ie: signuptest.php?id=1&offset=-1

not ie: signuptest.php?id=1&offset=-1 (which is nonsense and does not redirect)

teynon · November 22, 2011

arenaninja,

That is a javascript call. When you pass variables through the browser URL, you should do it like this:

equipid = encodeURIComponent(equipid);
offset = encodeURIComponent(offset);
document.location="signuptest.php?id="+equipid+"&offset="+offset;

You should never use & in a url unless you are trying to send the value of &. Ampersand is a key symbol in urls.

However, after reviewing your code, the reason your getting those errors is because your javascript is inside of the body. You need to have your javascript in the <head>

Here is how it is normally inserted:

<html>
<head>
<title></title>
<script></script>
</head>
<body>
</body>
</html>

Furthermore, you should place javascript of any length in an external file.

arenaninja · November 22, 2011

Well moving the JS to the <head> solved the validation issue with '&'

I've organized the CSS slightly better so that I have default css in 'default' and all the classes in a separate file. I'm about to try out passing variables through encodeURIComponent() so before that I wanted to ask a last favor for this page.

As you can see, I'm trying to display the schedule with a fixed screen height. Ideally, I should like to fix the position of the table headers while the content remains scrollable. I tried placing the headers in a different <div> and adjusting the width slightly, but the table headers and the content then became misaligned. Is there a way to fix the headers, or am I stuck with what I have here? I've looked at some solutions in google but some of them use extensive JS (which I don't want) or CSS hacks (also don't want, as I'd like code that validates for upgradeability)

arenaninja · November 22, 2011

Ok.. so far I've put the headers in a different <div> element that has the property {overflow-y:scroll} which shows a vertical scrollbar. However, I need the scrollbar to actually be there without being visible. It seems that changing the scrollbar color is proprietary to IE so just changing the color on the scrollbar won't work. Any ideas?

Sign In

<div> spacing

Recommended Posts

arenaninja

Link to comment

Share on other sites

teynon

Link to comment

Share on other sites

arenaninja

Link to comment

Share on other sites

teynon

Link to comment

Share on other sites

arenaninja

Link to comment

Share on other sites

teynon

Link to comment

Share on other sites

arenaninja

Link to comment

Share on other sites

teynon

Link to comment

Share on other sites

arenaninja

Link to comment

Share on other sites

arenaninja

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information