christina_g Posted August 25, 2014 Share Posted 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> <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 comment Share on other sites More sharing options...
niche Posted August 25, 2014 Share Posted August 25, 2014 Please post the relevant part of your stylesheet. Link to comment Share on other sites More sharing options...
Ingolme Posted August 26, 2014 Share Posted 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 :       <input type=text name:mail value="Votre adresse email">       <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 comment Share on other sites More sharing options...
christina_g Posted August 26, 2014 Author Share Posted 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 ? Link to comment Share on other sites More sharing options...
Ingolme Posted August 26, 2014 Share Posted 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. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now