please the id = addpage is overflowing, below is the mark up and css
<?php require_once("include/connection.php"); ?>
<?php require_once("include/functions.php"); ?>
<?php
if (intval($_GET['subj']) == 0) {
redirect_to("contents.php");
}
include_once("include/form_functions.php");
// start form processing
// only execute the form processing if the form has been submitted
if (isset($_POST['submit'])) {
$errors = array();
// form validation: initialise an array to hold our errors
$required_fields = array('menu_name', 'position', 'visible');
$errors = array_merge($errors, check_required_fields(required_fields));
$fields_with_lenghts = array('menu_name' => 30);
$errors = array_merge($errors, check_max_field_lenghts($fields_with_lenghts));
//update
$id = mysql_prep($_GET['subj']);
$menu_name = mysql_prep($_POST['menu_name']);
$position = mysql_prep($_POST['position']);
$visible = mysql_prep($_POST['visible']);
if (empty($errors)) {
$query = "UPDATE subjects SET
menu_name = '{$menu_name}',
position = {$position},
visible = {$visible}
WHERE id = {$id}";
$result = mysql_query($query, $connection);
if (mysql_affected_rows() == 1) {
// Success
$message = "The subject was succesfully updated. ";
} else {
//failed
$message = "The subject was not succesfully updated. ";
$message .= "<br />". mysql_error();
}
}else{
//error occured
$message = "There were " . count($errors) . " errors in the form.";
}
} // end of if (isset($_POST['submit']))
?>
<?php find_selectedpage(); ?>
<?php include("include/header.php"); ?>
<div id="navigation">
<?php echo navigation($select_subject, $select_page); ?>
</div> <!--end of navigation div -->
<div id="bodycontent">
<h2>Edit Subject: <?php echo $select_subject['menu_name'];?></h2>
<?php if (!empty($message)) {
echo "<p class=\\"message\\">" . $message . "</p>";
} ?>
<?php
// output a list of the fields that had errors
if (!empty($errors)) {
echo "<p class=\\"errors\\">";
echo "Please review the following fields:<br />";
foreach($errors as $error) {
echo " - " . $error . "<br />";
}
echo "</p>";
}
?>
<form action="edit_subject.php?subj=<?php echo urlencode( $select_subject['id']); ?>
" method="post">
<p>Subject name:
<input type="text" name="menu_name" value="<?php echo $select_subject['menu_name'];?>" id="menu_name" />
</p>
<p>Position:
<select name="position">
<?php
$subject_set = get_all_subjects();
$subject_count = mysql_num_rows($subject_set);
//$count+1 bcos we are adding a subject
for($count=1; $count <= $subject_count+1; $count++) {
echo "<option value=\\"{$count}\\"";
if ($select_subject['position'] == $count) {
echo " selected";
}
echo ">{$count}</options>";
}
?>
</select>
</p>
<p>Visible:
<input type="radio" name="visible" value="0"<?php
if ($select_subject['visible'] == 0) {echo " checked";}
?> /> No
<input type="radio" name="visible" value="1"<?php
if ($select_subject['visible'] == 1) {echo " checked";}
?> />yes
</p>
<input type="submit" name="submit" value="Edit Subject" />
<a href="delete_subject.php?subj=<?php echo
urlencode($select_subject['id']); ?>" onclick="return confirm('Are you
sure?');"> Delete Subject</a>
</form>
<br />
<a href="contents.php">Cancel</a>
[COLOR="purple"]<div id="addpage">
<h3>Pages in this subject:</h3>
<ul>
<?php
$subject_pages = get_pages_for_subject($select_subject['id']);
while($page = mysql_fetch_array($subject_pages)) {
echo "<li><a href=\\"contents.php?page={$page['id']}\\">
{$page['menu_name']}</a></li>";
}
?>
</ul>
<br />
+ <a href="new_page.php?subj=<?php echo $select_subject['id']; ?>
">Add a new page to this subject</a>
</div>
[/COLOR]</div>
<?php require("include/footer.php"); ?>
and the css
/*
CSS for Reacheasy site
*/
body,html {
margin: 0;
}
#page {
width: 1060px;
margin: 0 auto;
position: relative
/* is the same as:
margin-top: 0;
margin-bottom: 0;
margin-left: auto;
margin-right: auto;
*/
}
/* sticky footer */
/*Opera Fix*/
body:before {
content:"";
height:100%;
float:left;
width:0;
margin-top:-32767px;
}
#outer:after {
clear:both;
display:block;
height:1%;
content:" ";
}
/* ... */
/*
CSS for Reacheasy site
*/
html, body {
height:100%;
margin:0;
padding:0;
border:none;
background: url("img/aurora.jpg");
}
#outer {
width:1060px;
margin:auto;
min-height:100%;
margin-top:-52px;
border-left:1px solid black;
border-right:1px solid black;
background: #A1A1A1 url(backgrounds/nav-bg.jpg) repeat-y left top
}
* html #outer {
height:100%
}
h1 {
font-size: xx-large;
color: white;
padding: 2em 0 .2em .4em;
margin: 0;
background: url(img/header.jpg) repeat-y right;
}
h2 {
font-size: x-large;
color: white;
padding: 2em 0 .2em .4em;
margin: 0;
}
p {
font-size:large;
color: white;
padding: 1em 0 .1em .2em;
margin: 0;
}
ul#nav {
height: 2em;
list-style: none;
margin: 0;
padding: .2em 0;
margin:0;
background: url(img/tabs.gif);
}
ul#nav li {
background: #48f url(img/tabs.gif);
float: left;
margin: 0 1px 0 0;
padding-left: 10px;
border-right: 1px solid #A1A1A1;
}
ul#nav a {
background: url(img/tabs.gif) 100% 0;
color: #008;
display: block;
float: left;
height: 2em;
line-height: 2em;
padding-right: 10px;
text-decoration: none;
}
ul#nav li.current {
background-color: #48f;
background-position: 0 -60px;
}
ul#nav li.current a {
background-position: 100% -60px;
color: #fff;
font-weight: bold;
}
#navigation {
width: 180px;
float:left;
}
#navigation li {
margin: 0 1px 0 0;
padding-left: 0px;
text-decoration: none;
list-style: none;
}
#navigation a {
color: #008;
padding-right: 10px;
text-decoration: none;
}
#navigation a:visited{
color: #008;
}
#navigation p {
font-size:xx-small;
color: white;
padding: 1em 0 .1em .2em;
margin: 0;
}
#navigation ul.pages {
padding-left: 2em;
list-style: square;
}
#bodycontent {
float:right;
width:880px;
background:black;
height:390px;
}
#header {
width:100%;
border-top:52px solid #fff;
border-bottom:1px solid #A1A1A1;
}
#footer {
width:1060px;
clear:both;
height:50px;
border-top:1px solid #000;
background-color:#fff;
border-bottom:1px solid #000;
color: #000000;
text-align:center;
margin:0 auto;
}
ul#footlink {
padding: 0px;
margin: 0px;
list-style-type: none;
float: left;
width: 100%;
color: #fff;
}
ul#footlink li {
display: inline;
text-align:center;
}
#bannercontainer{
width: 800px;
height: 400px;
padding: 0;
margin-left: auto;
margin-right: auto;
background: #eee;
border: 1px solid #000;
}
#bannercontainer a{
display: block;
width: 800px;
height: 400px;
padding: 0;
background:#eee url(img/pr.jpg) 0 0 no-repeat;
}
#bannercontainer a:link,#bannercontainer a:visited{
background:#eee url(img/pr.jpg) 0 0 no-repeat;
}
#bannercontainer a:hover{
background:#eee url(img/pr.jpg) 150px 0 no-repeat;
}
#promo-banners{
width:860px;
}
.promo-banner{
border: medium none;
display:block;
float: left;
padding: 0 19px 5px 0;
width: 230px;
}
.promo-seo{
color:white;
display:block;
float:left;
font:12px arial;
height:75px;
margin-bottom:5px;
padding:7px 5px 0;
text-align:left!important;
width:218px;
}
.promo-seo-link{
color:#bdbdbd;
text-decoration:none;
}
.promo-seo-link:visited{
color:#bdbdbd;
}
[COLOR="Purple"]#addpage {
margin-top: 2em;
border-top:1px solid white;[/COLOR]
}
ralphm
June 28, 2011, 9:25am
2
When posting a CSS question, make sure to remove all PHP from the HTML so we can see what the browser sees (that is, once the page have been displayed in a browser). We can only guess at what the page looks like to the browser.
Try adding overflow: hidden:
#addpage {
margin-top: 2em;
border-top:1px solid white;
[COLOR="Red"]overflow: hidden;[/COLOR]
}
If that doesn’t work, send us the HTML that you see in the browser (i.e. go to view source and copy that).
this is the html on the page when it is viewed
<!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>Reacheasy - Foremost website for easy reach of things globally</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<link href="easy.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="outer">
<div id="page">
<div id="header">
<h1>Reacheasy</h1>
<ul id="nav">
<li class="current"><a href="index.html">Home</a></li>
<li><a href="women.html">Women</a></li>
<li><a href="men.html">Men</a></li>
<li><a href="children.html">Children</a></li>
<li><a href="homeandappliances.html">Home&Appliances</a></li>
<li><a href="visionandsound.html">Vision&Sounds</a></li>
<li><a href="motoring.html">Motoring</a></li>
<li><a href="homemore.html">More</a></li>
<li><a href="homecontact.html">Contact us</a></li>
<li><a href=" rl.html">Register/Log in</a></li>
</ul>
</div> <!--end of navigation div -->
</div>
<div id="navigation">
<ul><li
class="selected"><a href="edit_subject.php?subj=1">About reacheasy</a></li><ul class="pages"><li><a href="contents.php?page=1">History</a></li><li><a href="contents.php?page=2">Our mission</a></li></ul><li><a href="edit_subject.php?subj=2">Products</a></li><ul class="pages"><li><a href="contents.php?page=3">game</a></li></ul><li><a href="edit_subject.php?subj=3">Service</a></li><ul class="pages"></ul><li><a href="edit_subject.php?subj=4">tunde did it work again</a></li><ul class="pages"></ul></ul></div> <!--end of navigation div -->
<div id="bodycontent">
<h2>Edit Subject: About reacheasy</h2>
<form action="edit_subject.php?subj=1 " method="post">
<p>Subject name:
<input type="text" name="menu_name" value="About reacheasy" id="menu_name" />
</p>
<p>Position:
<select name="position">
<option value="1" selected>1</options><option value="2">2</options><option value="3">3</options><option value="4">4</options><option value="5">5</options> </select>
</p>
<p>Visible:
<input type="radio" name="visible" value="0" /> No
<input type="radio" name="visible" value="1" checked />yes
</p>
<input type="submit" name="submit" value="Edit Subject" />
<a href="delete_subject.php?subj=1" onclick="return confirm('Are you
sure?');"> Delete Subject</a>
</form>
<br />
<a href="contents.php">Cancel</a>
<div id="addpage">
<h3>Pages in this subject:</h3>
<ul>
<li><a href="contents.php?page=1">
History</a></li><li><a href="contents.php?page=2">
Our mission</a></li> </ul>
<br />
+ <a href="new_page.php?subj=1 ">Add a new page to this subject</a>
</div>
</div>
<div id="footer">
<ul id="footlink">
<li><a href="contact.html">Contact us</a></li>
<li><a href="termsandcondition.html">Terms&Condition</a></li>
<li><a href="right.html">Copyright</a></li>
<li><a href="faq.html">Faq</a>
</li>
</ul>
</div>
</body>
</html>
ralphm
June 28, 2011, 1:26pm
4
Just remove the height from bodycontent:
#bodycontent {
float:right;
width:880px;
background:black;
[COLOR="Red"]height:390px;[/COLOR] /* REMOVE THIS! */
}
It’s usually a bad idea to set a height on an HTML element.
thanks, it works, but they are some page where i dont have enough information on , it and it shows gap between the bodycontent and the footer like the one i paste below
<!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>Reacheasy - Foremost website for easy reach of things globally</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<link href="easy.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="outer">
<div id="page">
<div id="header">
<h1>Reacheasy</h1>
<ul id="nav">
<li class="current"><a href="index.html">Home</a></li>
<li><a href="women.html">Women</a></li>
<li><a href="men.html">Men</a></li>
<li><a href="children.html">Children</a></li>
<li><a href="homeandappliances.html">Home&Appliances</a></li>
<li><a href="visionandsound.html">Vision&Sounds</a></li>
<li><a href="motoring.html">Motoring</a></li>
<li><a href="homemore.html">More</a></li>
<li><a href="homecontact.html">Contact us</a></li>
<li><a href=" rl.html">Register/Log in</a></li>
</ul>
</div> <!--end of navigation div -->
</div>
<div id="navigation">
<ul><li><a href="edit_subject.php?subj=1">About reacheasy</a></li><ul class="pages"><li
class="selected"><a href="contents.php?page=1">History</a></li><li><a href="contents.php?page=2">Our mission</a></li></ul><li><a href="edit_subject.php?subj=2">Products</a></li><ul class="pages"><li><a href="contents.php?page=3">game</a></li></ul><li><a href="edit_subject.php?subj=3">Service</a></li><ul class="pages"></ul><li><a href="edit_subject.php?subj=4">tunde did it work again</a></li><ul class="pages"></ul></ul> <br />
<a href="new_subject.php">+ Add a new subject</a>
</ul>
</div> <!--end of navigation div -->
<div id="bodycontent">
<h2> History</h2>
<p>This is the company history for now</p>
<p><a href="edit_page.php">Edit this page</a></p> <br />
<br />
</div>
</div>
<div id="footer">
<ul id="footlink">
<li><a href="contact.html">Contact us</a></li>
<li><a href="termsandcondition.html">Terms&Condition</a></li>
<li><a href="right.html">Copyright</a></li>
<li><a href="faq.html">Faq</a>
</li>
</ul>
</div>
</body>
</html>
/*
CSS for Reacheasy site
*/
body,html {
margin: 0;
}
#page {
width: 1060px;
margin: 0 auto;
position: relative
/* is the same as:
margin-top: 0;
margin-bottom: 0;
margin-left: auto;
margin-right: auto;
*/
}
/* sticky footer */
/*Opera Fix*/
body:before {
content:"";
height:100%;
float:left;
width:0;
margin-top:-32767px;
}
#outer:after {
clear:both;
display:block;
height:1%;
content:" ";
}
/* ... */
/*
CSS for Reacheasy site
*/
html, body {
height:100%;
margin:0;
padding:0;
border:none;
background: url("img/aurora.jpg");
}
#outer {
width:1060px;
margin:auto;
min-height:100%;
margin-top:-52px;
border-left:1px solid black;
border-right:1px solid black;
background: #A1A1A1 url(backgrounds/nav-bg.jpg) repeat-y left top
}
* html #outer {
height:100%
}
h1 {
font-size: xx-large;
color: white;
padding: 2em 0 .2em .4em;
margin: 0;
background: url(img/header.jpg) repeat-y right;
}
h2 {
font-size: x-large;
color: white;
padding: 2em 0 .2em .4em;
margin: 0;
}
p {
font-size:large;
color: white;
padding: 1em 0 .1em .2em;
margin: 0;
}
ul#nav {
height: 2em;
list-style: none;
margin: 0;
padding: .2em 0;
margin:0;
background: url(img/tabs.gif);
}
ul#nav li {
background: #48f url(img/tabs.gif);
float: left;
margin: 0 1px 0 0;
padding-left: 10px;
border-right: 1px solid #A1A1A1;
}
ul#nav a {
background: url(img/tabs.gif) 100% 0;
color: #008;
display: block;
float: left;
height: 2em;
line-height: 2em;
padding-right: 10px;
text-decoration: none;
}
ul#nav li.current {
background-color: #48f;
background-position: 0 -60px;
}
ul#nav li.current a {
background-position: 100% -60px;
color: #fff;
font-weight: bold;
}
#navigation {
width: 180px;
float:left;
}
#navigation li {
margin: 0 1px 0 0;
padding-left: 0px;
text-decoration: none;
list-style: none;
}
#navigation a {
color: #008;
padding-right: 10px;
text-decoration: none;
}
#navigation a:visited{
color: #008;
}
#navigation p {
font-size:xx-small;
color: white;
padding: 1em 0 .1em .2em;
margin: 0;
}
#navigation ul.pages {
padding-left: 2em;
list-style: square;
}
#bodycontent {
float:right;
width:880px;
background:black;
}
#header {
width:100%;
border-top:52px solid #fff;
border-bottom:1px solid #A1A1A1;
}
#footer {
width:1060px;
clear:both;
height:50px;
border-top:1px solid #000;
background-color:#fff;
border-bottom:1px solid #000;
color: #000000;
text-align:center;
margin:0 auto;
}
ul#footlink {
padding: 0px;
margin: 0px;
list-style-type: none;
float: left;
width: 100%;
color: #fff;
}
ul#footlink li {
display: inline;
text-align:center;
}
#bannercontainer{
width: 800px;
height: 400px;
padding: 0;
margin-left: auto;
margin-right: auto;
background: #eee;
border: 1px solid #000;
}
#bannercontainer a{
display: block;
width: 800px;
height: 400px;
padding: 0;
background:#eee url(img/pr.jpg) 0 0 no-repeat;
}
#bannercontainer a:link,#bannercontainer a:visited{
background:#eee url(img/pr.jpg) 0 0 no-repeat;
}
#bannercontainer a:hover{
background:#eee url(img/pr.jpg) 150px 0 no-repeat;
}
#promo-banners{
width:860px;
}
.promo-banner{
border: medium none;
display:block;
float: left;
padding: 0 19px 5px 0;
width: 230px;
}
.promo-seo{
color:white;
display:block;
float:left;
font:12px arial;
height:75px;
margin-bottom:5px;
padding:7px 5px 0;
text-align:left!important;
width:218px;
}
.promo-seo-link{
color:#bdbdbd;
text-decoration:none;
}
.promo-seo-link:visited{
color:#bdbdbd;
}
#addpage {
margin-top: 2em;
border-top:1px solid white;
}