CODEWITHSUNDEEP
htmlcsshtml-table
Melevin Mandana
Melevin Mandana

Reputation: 81

Table disappears in Firefox and Chrome

I have a table and when I load the page in Firefox or chrome its shifted off the screen to the the right leading to most of the table disappearing, the table should be located in the middle of the screen and seems to be overlapping on the right outside of the page area.

<html lang="en">

<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Small North Run</title>
<meta name="description" content=" ">
<meta name="keywords" content=" ">
<link rel="stylesheet" href="default.css" type="text/css">
<link rel="stylesheet" href="sponsor.css" type="text/css">

</head>

<body>

<div id="wrapper">

<header>
    <h1>SMALL NORTH RUN</h1>
</header>

<nav>
<ul id="navlist">
    <li><a href="./">HOME</a></li>
    <li><a href="training">TRAINING REGIME</a></li>
    <li><a href="./forum">FORUM</a></li>
    <li><a href="./sponsor.php">SPONSOR</a></li>
    <li><a href="./contact.php">CONTACT</a></li>
</ul>
</nav>
<hr id="hrnav" />

<div id="content">

<p>This page allows you to sponsor a particular runner. Just simply select the name of the runner you wish to sponsor from the drop down list, then enter the amount you wish to donate followed by a brief message for the runner and then your name. Once making a donation the runner you have sponsored will be notified by email that you have made a donation.</p>
<br/>
<br/>
<br/>
<br/>
<form method="post" action="test.php">
<table>

    <tr><td><label>Runner:</label></td>
    <td>
    <select name="fullname">
    <?php do{?>
    <option value="<?php echo $rsNames['user_ID']; ?>"> <?php echo $rsNames['first_Name'];?> <?php echo $rsNames['last_Name'];?></option>
    <?php } while ( $rsNames= mysql_fetch_assoc($names_query))?>
    </select>
    </td>
    </tr>
    <tr><td><label>Donation (£):</label></td><td><input type="text" maxlength="9" value="0.00" name="donation"/></td></tr>
    <tr>
    <td>
        <label>Message:</label>
    </td>
    <td>
        <textarea  name="donationmessage" maxlength="200" cols="25" rows="6"> </textarea>
    </td>
    </tr>
        </tr>
    <tr><td><label>Your Name:</label></td><td><input type="text" maxlength="30"  name="donator"/></td></tr>
    <tr>
    <td>
    <tr><td><input id="submit" type="submit" value="Confirm Donation"/></td></tr>
    </table>
</form>


</div>



</div> <!-- END WRAPPER -->

</body>

</html>

CSS
#content { text-align: left; margin: 2px; padding: 10px; }

#content p { font: font: 12px/1.5 Verdana, sans-serif; float: left; }

Upvotes: 0

Views: 1387

Answers (3)

DaneSoul
DaneSoul

Reputation: 4511

1) You have some errors in table structure

2) If you need to center table, you can setup it margin-left and margin-right auto.

There is possible table code with align:

<table style='margin: 0 auto;'>
<tr>
        <td><label>Runner:</label></td>
        <td>
<select name="fullname">
<?php do{?>
<option value="<?php echo $rsNames['user_ID']; ?>"> <?php echo $rsNames['first_Name'];?> <?php echo $rsNames['last_Name'];?></option>
<?php } while ( $rsNames= mysql_fetch_assoc($names_query))?>
</select>
     </td>
</tr>
<tr>
        <td><label>Donation (£):</label></td>
        <td><input type="text" maxlength="9" value="0.00" name="donation"/></td>
</tr>
<tr>
        <td><label>Message:</label></td>
        <td><textarea  name="donationmessage" maxlength="200" cols="25" rows="6"> </textarea></td>
</tr>
<tr>
        <td><label>Your Name:</label></td>
        <td><input type="text" maxlength="30"  name="donator"/></td>
</tr>
<tr>
        <td><input id="submit" type="submit" value="Confirm Donation"/></td>
        <td>&nbsp;</td>
</tr></table>

If you still have troubles: post somewhere full HTML and CSS code for detailed analysis.

Upvotes: 0

Deruijter
Deruijter

Reputation: 2159

It seems to work fine for me.

Maybe you have a problem in your css?

EDIT: The float style on your P tag is causing the trouble.

A simple solution could be to use a defloating-break-div (I'm not sure what the proper name is) underneath your P tag:

<div style="float:none;">
     <br />
</div>

This causes the rest of your code to resume the normal layout

Upvotes: 0

AlexC
AlexC

Reputation: 9661

try to add a doctype :

for example, here is the HTML5 doctype 

<!DOCTYPE html>

Upvotes: 1

Related Questions