Always Problems with the way I'm styling my custom inline Code!

[traytray]

I just did an HTML validation and received 8 errors. Right now, I am concerned with the errors concerning this inline code because I thought it was finally correct:


<div class="myCustomParagraph"><center><span id="customHeaderOne">Floral fragrances on sale this week at the Snob!</center></span>

<p id="customPara">This week at DesignerPerfumeSnob.com we are featuring products with floral fragrance notes. You can find them on sale from Feb 10th to Feb 16th. </p>

<p id="customPara"> What would you like to see on sale next week? Send an <a href="index.php?main_page=contact_us"><font size="2"><font color="ED3A84">email</font></font></a> and let us know!</p><span id="customHeaderTwo"><center>FREE U.S. SHIPPING + No Minimum Purchase!</center></span></div>


The errors noted for this code are as follows:

Line 1512, Column 173: end tag for "span" omitted, but OMITTAG NO was specified
...stomHeaderOne">Floral fragrances on sale this week at the Snob!</center></span>


You may have neglected to close an element, or perhaps you meant to "self-close" an element, that is, ending it with "/>" instead of ">".


Line 1512, Column 90: start tag was here
…div class="myCustomParagraph"><center><span id="customHeaderOne">Floral fragra…


Line 1512, Column 180: end tag for element "span" which is not open
…stomHeaderOne">Floral fragrances on sale this week at the Snob!</center></span>

The Validator found an end tag for the above element, but that element is not currently open. This is often caused by a leftover end tag from an element that was removed during editing, or by an implicitly closed element (if you have an error related to an element being used where it is not allowed, this is almost certainly the case). In the latter case this error will disappear as soon as you fix the original problem.

Line 1516, Column 8: ID "customPara" already defined
<p id="customPara"> What would you like to see on sale next week? Send an <a hr…

An "id" is a unique identifier. Each time this attribute is used in a document it must have a different value. If you are using this attribute as a hook for style sheets it may be more appropriate to use classes (which group elements) than id (which are used to identify exactly one element).

Line 1514, Column 8: ID "customPara" first defined here

<p id="customPara">This week at DesignerPerfumeSnob.com we are featuring produc…

Line 1516, Column 230: document type does not allow element "center" here; missing one of "object", "applet", "map", "iframe", "button", "ins", "del" start-tag

…</p><span id="customHeaderTwo"><center>FREE U.S. SHIPPING + No Minimum Purchas…

The mentioned element is not allowed to appear in the context in which you've placed it; the other mentioned elements are the only ones that are both allowed there and can contain the element mentioned. This might mean that you need a containing element, or possibly that you've forgotten to close a previous element.

One possible cause for this message is that you have attempted to put a block-level element (such as "<p>" or "<table>") inside an inline element (such as "<a>", "<span>", or "<font>").


Let me know if you need to see anything else.

Thanks!

http://designerperfumesnob.authsafe.com/

[frank18]

Look at the syntax of html:

you can have <span><center> something something </center></span>

but you can't have <center><span> something something </center></span>

see http://www.w3schools.com/

[gjh42]

And this one error has cascaded to show several resulting validation errors. Fixing it will cause many if not all of the other validation errors to disappear.

[traytray]

I'm still getting some errors. This is the code now:

<div class="myCustomParagraph"><span id="customHeaderOne"><center>Floral fragrances on sale this week at the Snob!</center></span>

<p id="customPara">This week at DesignerPerfumeSnob.com we are featuring products with floral fragrance notes. You can find them on sale from Feb 10th to Feb 16th. </p>

<p id="customPara"> What would you like to see on sale next week? Send an <a href="index.php?main_page=contact_us"><font size="2"><font color="ED3A84">email</font></font></a> and let us know!</p><span id="customHeaderTwo"><center>FREE U.S. SHIPPING + No Minimum Purchase!</center></span></div>

These are the errors:

ID X already defined

An "id" is a unique identifier. Each time this attribute is used in a document it must have a different value. If you are using this attribute as a hook for style sheets it may be more appropriate to use classes (which group elements) than id (which are used to identify exactly one element).


Line 1516, column 8: ID "customPara" already defined

<p id="customPara"> What would you like to see on sale next week? Send an <a hr…



document type does not allow element X here; missing one of Y start-tag

The mentioned element is not allowed to appear in the context in which you've placed it; the other mentioned elements are the only ones that are both allowed there and can contain the element mentioned. This might mean that you need a containing element, or possibly that you've forgotten to close a previous element.

One possible cause for this message is that you have attempted to put a block-level element (such as "<p>" or "<table>") inside an inline element (such as "<a>", "<span>", or "<font>").


•Line 1512, column 116: document type does not allow element "center" here; missing one of "object", "applet", "map", "iframe", "button", "ins", "del" start-tag

…ph"><span id="customHeaderOne"><center>Floral fragrances on sale this week at …

Line 1516, column 230: document type does not allow element "center" here; missing one of "object", "applet", "map", "iframe", "button", "ins", "del" start-tag

…</p><span id="customHeaderTwo"><center>FREE U.S. SHIPPING + No Minimum Purchas…

Can you please help with these?

[kobra]

You defined customPara twice

Line 1516, Column 8: ID "customPara" already defined 

<p id="customPara">This week at DesignerPerfumeSnob.com we are featuring products with floral fragrance notes. You can find them on sale from Feb 10th to Feb 16th. </p>

<p id="customPara"> What

[traytray]

I changed the inline code to this:

<div class="myCustomParagraph">

<span id="customHeaderOne">Floral fragrances on sale this week at the Snob!</span>

<p id="customPara"> This week at DesignerPerfumeSnob.com we are featuring products with floral fragrance notes. You can find them on sale from here to here.

<br /><br /> What would you like to see on sale next week? Send an <a href="index.php?main_page=contact_us"><font size="2"><font color="ED3A84">email</font></font></a> and let us know!

</p>

<span id="customHeaderTwo">FREE U.S. SHIPPING + No Minimum Purchase!</span>
</div>

The errors for this code are now gone, but so is the centering for custom header one and two. This is the part of the stylesheet that should govern the centering:

.myCustomParagraph #customHeaderOne {
color: #000;
font-size: 150% /* - - - Can use px or em if you like - - */
font-weight: bold;
font-face: georgia,times new roman,times,serif;
text-align; center;
}

.myCustomParagraph #customHeaderTwo {
color: #ed3a84;
font-size: 150%
font-style: italic;
font-weight: bold;
font-face: georgia,times new roman,times,serif;
text-align; center;
}

but it doesn't, so I had added the <center> and then got the errors.

[gjh42]

Change the <span id="customHeaderOne"> to <h2 id="customHeaderOne"> and they will auto-center.
A span is an inline element by default, so some formatting properties will not apply to it. It may also work to make the spans display: block; if you really feel they are not headers.

[traytray]

Change the <span id="customHeaderOne"> to <h2 id="customHeaderOne"> and they will auto-center.
A span is an inline element by default, so some formatting properties will not apply to it. It may also work to make the spans display: block; if you really feel they are not headers.

I changed the code to:

<div class="myCustomParagraph">

<h2 id="customHeaderOne">Floral fragrances on sale this week at the Snob!</span>

<p id="customPara"> This week at DesignerPerfumeSnob.com we are featuring products with floral fragrance notes. You can find them on sale from here to here.

<br /><br /> What would you like to see on sale next week? Send an <a href="index.php?main_page=contact_us"><font size="2"><font color="ED3A84">email</font></font></a> and let us know!

</p>

<span id="customHeaderTwo">FREE U.S. SHIPPING + No Minimum Purchase!</span>
</div>

and got this:

http://designerperfumesnob.authsafe.com/

Please note that all coding both inline and css was done based on input from this forum.

[stevesh]

And you want that text centered ? Just change the left here to center:

#customPara {
color: #444443;
font-size: 1.3em;
text-align: left;
}

Let me know if I misunderstood.

[gjh42]

I guess I needed to be very specific. You only changed the first opening <span to <h2; you need to change the </span> to </h2>, and do the same for the other span/heading.

<h2 id="customHeaderOne">Floral fragrances on sale this week at the Snob!</span>

 <p id="customPara"> This week at DesignerPerfumeSnob.com we are featuring products with floral fragrance notes. You can find them on sale from here to here. 

 <br /><br /> What would you like to see on sale next week? Send an <a href="index.php?main_page=contact_us"><font size="2"><font color="ED3A84">email</font></font></a> and let us know!

 </p>

 <span id="customHeaderTwo">FREE U.S. SHIPPING + No Minimum Purchase!</span>
</div>