I am trying to design a page that has a set container that adjusts when
you change the size of the page. I am using float, and I am having a
problem where the background does not show up when you use a table.
In my
case, for a form. Can someone explai to me why the background is not
white
as I have set in the container? Why is it that if I change float to
relative for the form does the background then work? Below is the
code. I
have replaced where I have images with colors so that you can see the
layout.
Thanks,
Mike
------------
<!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></title>
<style type="text/css">
body
{
font-family: "Lucida Grande", Tahoma,
Verdana, Arial, Helvetica,
sans-serif;
color: #555753;
background: #505050;
margin-top: 0px;
}
#container
{
width: 800px;
background: white;
margin: 0 auto;
text-align: left;
}
#topbar
{
width: 800px;
height: 90px;
float: left;
background: blue;
}
#menu_blank
{
width: 100px;
height: 25px;
float: left;
background: orange;
}
#home_menu
{
width: 100px;
height: 25px;
float: left;
background: yellow;
}
#mystory_menu
{
width: 100px;
height: 25px;
float: left;
background: red;
}
#photoalbum_menu
{
width: 100px;
height: 25px;
float: left;
background: green;
}
#journal_menu
{
width: 100px;
height: 25px;
float: left;
background: cyan;
}
#table_placement
{
float: left;
}
.input-box
{
background: #F1F1F1;
border: black solid 1px
}
</style>
</head>
<body>
<div id="container">
<div id="topbar">
</div>
<div id="home_menu">
</div>
<div id="mystory_menu">
</div>
<div id="photoalbum_menu">
</div>
<div id="journal_menu">
</div>
<div id="menu_blank">
</div>
<div id="menu_blank">
</div>
<div id="menu_blank">
</div>
<div id="menu_blank">
</div>
<div id="table_placement">
<table>
<form id="journalEntry" action="journalentry.php"
method="post"
name="journalEntry">
<tr>
<td>
<table>
<tr>
<td><h2>Enter
Journal Information</h2></td>
</tr>
</table>
<table>
<tr>
<td
valign="top"><label for="title">Title:</label>
<td><input
type="text" name="title" size="80" class="input-box" /></td>
</tr>
<tr>
<td
valign="top"><label for="entry">Entry:</label></td>
<td><textarea
name="entry" rows="20"
cols="80"class="input-box"></textarea></td>
</tr>
<tr>
<td></td>
<td align="right"><input
type="submit" name="submit" value="Submit
Entry" /></td>
</tr>
</table>
</td>
</tr>
</form>
</table>
</div>
</div>
</body>
</html>
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
