Table or form messing up layout

christina_g · August 25, 2014

Hello everyone,

I am facing an issue with a page containing a table and a form : the form does not take over the style defined in the style sheet.

It work out fine once I omit the closing </table>, however in that case the order of the elements gets messed up.

What can I do to fix this ?

Here is the code (I've taken out several irrelevant elements (additional list items, metas, etc.) :

<!DOCTYPE html>

<html>

<head>

<title>HIGHWAY - Hard Rock'n'Roll</title>

<style>

ul {list-style-type: none; margin: 0; padding: 0;}

li {display: inline;}

</style>

</head>

<br/>

<nav>

<ul>

</ul>

</nav>

<br/>

<h1 style="text-align:left">CONTACT</h1>

</br>

<table>

<tr>

<td><u>Booking (France)</u><br/><br/>

HIGHWAY Corp.<br/>

128 Place du Quebec, Appt 36<br/>

34000 Montpellier - France<br/>

Email : highwaybeer@hotmail.com<br/>

Téléphone : +33 6 29 37 93 57

</td>

<td><u>Booking international (hors France)</u><br/><br/>

Big Noise Productions<br/>

Christina Guntert<br/>

Email : ca.guntert@hotmail.fr<br/>

Téléphone : +33 6 43 58 53 29<br/>

</br>

</td>

<td><u>Technicien son</u><br/><br/>

Adrien Lagarde<br/>

Email : lagarde.music@gmail.com<br/>

Téléphone : +33 6 48 55 29 59<br/>

</br>

</td>

</table>

<form action="MAILTO:ca.guntert@hotmail.fr"

method="post" enctype="text/plain">

Abonnez-vous à la newsletter :

</form>

</p>

<br/>

<p class="footer">© Highway Corp. 2014</p>

</body>

</html>

niche · August 25, 2014

Please post the relevant part of your stylesheet.

Ingolme · August 26, 2014

You probably should validate your HTML file first using the W3C Validator.

Your <tr> tag isn't closed so that might be messing thing up.

<p> elements cannot contain block elements, so the browser is interpretting your code as

<p class="section_form" align="left"></p>

<form action="MAILTO:ca.guntert@hotmail.fr"

method="post" enctype="text/plain">

Abonnez-vous à la newsletter :

&nbsp &nbsp &nbsp

&nbsp &nbsp &nbsp

</form>

<p></p>

I would recommend against using the style attribute and <br> tags. You should keep all your styles in a stylesheet. <br> elements aren't necessary if you wrap things in appropriate block elements and apply margins. Block elements automatically put a line break before and after its content.

christina_g · August 26, 2014

Thanks to both for your remarks !

Here is the relevant part of the style sheet :

Form:

p.section_form {background-color: #000;

color: #FFFFFF;

font-size: 16px;

font-family: "Microsoft Sans Serif", Arial, sans-serif;

text-align: left;

margin-left: 30px;}

Table:

table, td {background-color: #000;

color: #FFFFFF;

vertical-align: top;

border-spacing: 30px;

font-size: 16px;

font-family: "Microsoft Sans Serif", Arial, sans-serif;

text-align: left;

margin-left: 30px;}

Footer:

p.footer {background-color: #000;

color: #FFFFFF;

font-size: 12px;

font-family: "Microsoft Sans Serif", Arial, sans-serif;

text-align: center;}

I've closed the <tr> properly now, unfortunately this has no impact on the problem.If I should not use a <p> element for the form, which kind of "identification" should I use ?

Ingolme · August 26, 2014

The <form> element itself can be styled and given a class name. All visible elements in HTML can have a class or ID.

Sign In

Table or form messing up layout

Recommended Posts

christina_g

Link to comment

Share on other sites

niche

Link to comment

Share on other sites

Ingolme

Link to comment

Share on other sites

christina_g

Link to comment

Share on other sites

Ingolme

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity