Truman Posted July 27, 2015 Share Posted July 27, 2015 (edited) As an exercise, I'm making an another web page () For some reason all the text in <body> section is italic, underlined and linked to a contact.htm page that I used in navigation bar behind one of the buttons. Why is this happening and can you help me to change this to normal text? I tried with font-style="normal" but it did not work. Edited July 27, 2015 by Truman Link to comment Share on other sites More sharing options...
davej Posted July 27, 2015 Share Posted July 27, 2015 Can you post some code? Link to comment Share on other sites More sharing options...
Ingolme Posted July 28, 2015 Share Posted July 28, 2015 (edited) That's the symptom of an unclosed tag. Most tags in HTML need a closing tag, such as </b>, </i>, </a> or </p> Make sure your HTML code is valid to ensure that your page displays properly. You can use the W3C validator: http://validator.w3.org/ Edited July 28, 2015 by Ingolme Link to comment Share on other sites More sharing options...
Truman Posted July 28, 2015 Author Share Posted July 28, 2015 (edited) Can you post some code?I tried to attach file, but for some reason it didn't work. I'm pasting code for the whole page:<!DOCTYPE HTML><html><head><title>Sign-up for e-mail specials</title><style>#header {background-image: url(greenleaves.jpg); padding: 10px; color: white}</style></head><body><div id="header"><h1 class="pagetitle">The Garden Company</h1><h5 class="tagline"><i>Helping your garden grow since 1975<i></h5></div><nav><hr><p style="font-family: Arial, Helvetica, sans-serif; color: black; font-style: normal; margin:0px"><a class="buttonlink" href="index.htm"><img src="button.jpg" alt="">Home</a><a href="tips.htm"><img src="button.jpg" style="border:none"></a><a href="problems.htm"><img src="button.jpg" style="border:none"></a><a href="products.htm"><img src="button.jpg" style="border:none"></a><a href="about.htm"><img src="button.jpg"style="border:none"</a><a href="contact.htm"><img src="button.jpg"style="border:none"</a></p><hr></nav><h3 font-style="normal">Sign-up for E-mail Specials</h3><table><form method="post" action="mailto:miloshman2004@yahoo.com" enctype="text/plain"><tr><td>Name</td><td><input type="text" name="Name" size="30" maxlength="50" requierd></td><tr><td>E-mail address</td><td><input type="email" name="E-mail address"></td></tr><tr><td>State:</td><td><select name="state"><optgroup label="Europe"><option>Spain</option><option>Slovakia</option><option>France</option></optgroup><optgroup label="America"><option>SAD</option><option>Canada</option></optgroup></select></td></tr><tr><td>Level of gardening expertise:</td><td><input type="radio" name="level" value="Beginner">Beginner<br><input type="radio" name="level" value="Intermediate">Intermediate<br><input type="radio" name="level" value="Expert">Expert<br><input type="radio" name="level" value="Pro">Professional<br></td></tr><tr><td></td><td><input type=checkbox" name="partner" value="Yes" checked="checked">Yes, I would also like to receive coupons and offers from other gardening-related companies.</td></tr><tr><textarea name="comments" rows="5" cols="60"></textarea></tr><tr><input type="submit"><input type="reset" value="clear"></tr></form></table><hr><p class="copyright">Copyright ©2012 The Garden ™<br>No material may be reproduced without written permission<br><a href="mailto:webmaster@contoso.com?subject=Question/Comment" title="webmaster@contoso.com" style="color: black; text-decoration:none">Contact the <del>Webmaster</del><b>Master Gardener<b></a></p></body></html> Edited July 28, 2015 by Truman Link to comment Share on other sites More sharing options...
Wolverine Posted July 28, 2015 Share Posted July 28, 2015 a few things that I think might help but are my opinion only, on these lines it might help if you closed the img tage: [*]<a class="buttonlink" href="index.htm"><img src="button.jpg" alt="">Home</a>↩ [*]<a href="tips.htm"><img src="button.jpg" style="border:none"></a>↩ [*]<a href="problems.htm"><img src="button.jpg" style="border:none"></a>↩ [*]<a href="products.htm"><img src="button.jpg" style="border:none"></a>↩ [*]<a href="about.htm"><img src="button.jpg"style="border:none"</a>↩ [*]<a href="contact.htm"><img src="button.jpg"style="border:none"</a></p>↩ and it might help if you put a semicolon to the right of the word none. But that is my personal opinion only. 1 Link to comment Share on other sites More sharing options...
Ingolme Posted July 28, 2015 Share Posted July 28, 2015 There is no need to put a semi-colon for one CSS declaration. The semi-colon is a separator, not a terminator, so it's only needed to separate statements if you have more than one. The unclosed <img> tag is clearly the reason of the styles leaking onto the rest of the page. Link to comment Share on other sites More sharing options...
Truman Posted July 28, 2015 Author Share Posted July 28, 2015 (edited) It didn't work, but thanks anyhow. I tried with </img>... Edited July 28, 2015 by Truman Link to comment Share on other sites More sharing options...
Wolverine Posted July 28, 2015 Share Posted July 28, 2015 There is no need to put a semi-colon for one CSS declaration. The semi-colon is a separator, not a terminator, so it's only needed to separate statements if you have more than one. The unclosed <img> tag is clearly the reason of the styles leaking onto the rest of the page. I am still learning and thus said, "my personal opinion only". Link to comment Share on other sites More sharing options...
Ingolme Posted July 28, 2015 Share Posted July 28, 2015 It didn't work, but thanks anyhow. I tried with </img>... You don't need </img>, you just need to put the closing angle bracket: <a href="about.htm"><img src="button.jpg"style="border:none"></a><a href="contact.htm"><img src="button.jpg"style="border:none"></a> Link to comment Share on other sites More sharing options...
davej Posted July 28, 2015 Share Posted July 28, 2015 Your primary problem is within these two lines... <a href="about.htm"><img src="button.jpg"style="border:none"</a><a href="contact.htm"><img src="button.jpg"style="border:none"</a></p> However you should also paste the code here... https://validator.w3.org/#validate_by_input ...and fix the other errors. 1 Link to comment Share on other sites More sharing options...
dsonesuk Posted July 28, 2015 Share Posted July 28, 2015 You need to add space between attributes and there values or you end up with weird mixture of both, or with some of these attributes with empty values, or unrecognised attributes appearing. Link to comment Share on other sites More sharing options...
Wolverine Posted July 29, 2015 Share Posted July 29, 2015 Here are the results I got when I tried to fix it in the Validator:Info: The Content-Type was text/html. Using the HTML parser.Info: Using the schema for HTML with SVG 1.1, MathML 3.0, RDFa 1.1, and ITS 2.0 support.Error: Start tag form seen in table.From line 26, column 8; to line 27, column 813>↩<table>↩<form method="post" action="mailto:miloshman2004@yahoo.com" enctype="text/plain">↩<tr>↩Error: Element form not allowed as child of element table in this context. (Suppressing further errors from this subtree.)From line 26, column 8; to line 27, column 813>↩<table>↩<form method="post" action="mailto:miloshman2004@yahoo.com" enctype="text/plain">↩<tr>↩Contexts in which element form may be used:Where flow content is expected.Content model for element table:In this order: optionally a caption element, followed by zero or more colgroup elements, followed optionally by a thead element, followed optionally by a tfoot element, followed by either zero or more tbody elements or one or more tr elements, followed optionally by a tfoot element (but there can only be one tfoot element child in total), optionally intermixed with one or more script-supporting elements.Error: Start tag textarea seen in table.From line 65, column 5; to line 65, column 49</tr>↩<tr><textarea name="comments" rows="5" cols="60"></textFatal Error: Cannot recover after last error. Any further errors will be ignored.From line 65, column 5; to line 65, column 49</tr>↩<tr><textarea name="comments" rows="5" cols="60"></textDocument checking completed.Source<!DOCTYPE HTML>↩<html>↩<head>↩<title>Sign-up for e-mail specials</title>↩<style>↩#header {background-image: url(greenleaves.jpg); padding: 10px; color: white}↩</style>↩</head>↩<body>↩<div id="header">↩<h1 class="pagetitle">The Garden Company</h1>↩<h5 class="tagline"><i>Helping your garden grow since 1975</i></h5>↩</div>↩<nav>↩<hr>↩<p style="font-family: Arial, Helvetica, sans-serif; color: black; font-style: normal; margin:0px">↩<a class="buttonlink" href="index.htm"><img src="button.jpg" alt="">Home</a>↩<a href="tips.htm"><img src="button.jpg" style="border:none" alt=""></a>↩<a href="problems.htm"><img src="button.jpg" style="border:none" alt=""></a>↩<a href="products.htm"><img src="button.jpg" style="border:none" alt=""></a>↩<a href="about.htm"><img src="button.jpg" style="border:none" alt=""></a>↩<a href="contact.htm"><img src="button.jpg" style="border:none" alt=""></a></p>↩<hr>↩</nav>↩<h3 style="font-style:normal">Sign-up for E-mail Specials</h3>↩<table>↩<form method="post" action="mailto:miloshman2004@yahoo.com" enctype="text/plain">↩<tr>↩<td>Name</td>↩<td><input type="text" name="Name" size="30" maxlength="50" required></td>↩<tr>↩<td>E-mail address</td>↩<td><input type="email" name="E-mail address"></td>↩</tr>↩<tr>↩<td>State:</td>↩<td>↩<select name="state">↩<optgroup label="Europe">↩<option>Spain</option>↩<option>Slovakia</option>↩<option>France</option>↩</optgroup>↩<optgroup label="America">↩<option>SAD</option>↩<option>Canada</option>↩</optgroup>↩</select>↩</td>↩</tr>↩<tr>↩<td>Level of gardening expertise:</td>↩<td>↩↩<input type="radio" name="level" value="Beginner">Beginner<br>↩<input type="radio" name="level" value="Intermediate">Intermediate<br>↩<input type="radio" name="level" value="Expert">Expert<br>↩<input type="radio" name="level" value="Pro">Professional<br>↩</td>↩</tr>↩<tr>↩<td></td>↩<td><input type="checkbox" name="partner" value="Yes" checked="checked">Yes, I would also like to receive coupons and offers from other gardening-related companies.</td>↩</tr>↩<tr><textarea name="comments" rows="5" cols="60"></textarea></tr>↩<tr><input type="submit">↩<input type="reset" value="clear"></tr>↩</form>↩</table>↩<hr>↩<p class="copyright">Copyright ©2012 The Garden ™<br>↩No material may be reproduced without written permission<br>↩<a href="mailto:webmaster@contoso.com?subject=Question/Comment" title="webmaster@contoso.com" style="color: black; text-decoration:none">Contact the <del>Webmaster</del><b>Master Gardener<b></a></p>↩</body>↩</html> I do not know enough HTML or CSS to fix the remaining errors, sorry about that. Link to comment Share on other sites More sharing options...
dsonesuk Posted July 29, 2015 Share Posted July 29, 2015 Well there's your problem, you are placing html elements outside td, this is the only table child element where these can be placed, the form element cannot be placed in td because any element that uses a closing tag such as <form> must open and close (</form>) within the same td cell, you can place the form element outside the table, OR place form and all other form input elements within a single td. Link to comment Share on other sites More sharing options...
Truman Posted August 1, 2015 Author Share Posted August 1, 2015 You don't need </img>, you just need to put the closing angle bracket: <a href="about.htm"><img src="button.jpg"style="border:none"></a><a href="contact.htm"><img src="button.jpg"style="border:none"></a>Thanks a lot! You're right. <img> is one-side tag, this was my shame... 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