Jump to content

Table or form messing up layout


Recommended Posts

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>
<meta charset="iso-8859-1" />
<title>HIGHWAY - Hard Rock'n'Roll</title>
<link rel="Shortcut icon" href="favicon2.ico" type="image/x-icon">
<link rel="stylesheet" type="text/css" media="screen" href="styles.css">
<style>
ul {list-style-type: none; margin: 0; padding: 0;}
li {display: inline;}
</style>
</head>
<body style="background-color:#000"> <center>
<img src="logo_entete.jpg" alt="Logo Highway" style="width:700px; height:196px;"><br/>
<br/>
<br/>
<!-- Site navigation menu -->
<nav>
<ul>
<li><a href="news_fr.html">★ NEWS</a></li>    
<li><a href="band_fr.html">★ BAND</a></li>    
</ul>
</nav>
<br/>
<!-- Main content -->
<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>
 </br>
 
</td>
</table>
<p class="section_form" align="left">
<form action="MAILTO:ca.guntert@hotmail.fr"
method="post" enctype="text/plain">
Abonnez-vous à la newsletter :
     
<input type=text name:mail value="Votre adresse email">
     
<input type="submit" value="S'abonner">
</form>
</p>
<br/>
<!-- Footer -->
<p class="footer">© Highway Corp. 2014</p>
</body>
</html>

 

Link to post
Share on other sites

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
<input type=text name:mail value="Votre adresse email">
&nbsp &nbsp &nbsp
<input type="submit" value="S'abonner">
</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.
Link to post
Share on other sites

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 ?
Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...