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

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/

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/

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.

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?

You defined customPara twice

Code:

---

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

---

Code:

---

<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

---

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.

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.

Quote:

---

Originally Posted by 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.

---

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.

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.

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.

Code:

---

<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>

---

Quote:

---

Originally Posted by 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.

Code:

---

<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>

---

---

Thank you for the specificity. I certainly do need it!

For the following code, I want to make a space between the last line and the filter below it. What would be the best way to accomplish that?


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

http://designerperfumesnob.authsafe....ts-c-1358.html

Code:

---

#customHeaderTwo {margin-bottom: 3em;}

---

Adjust to taste.

I originally had 55 errors on this page. This is what I have left that I can't figure out. It seems if I can fix a few, I can fix them all.

Error Line 1250, Column 5: end tag for "br" omitted, but OMITTAG NO was specified <br>


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

Info Line 1250, Column 1: start tag was here <br>

Error Line 1256, Column 5: end tag for "br" omitted, but OMITTAG NO was specified
<br><font size="2"><strong>Standard Ground (USA)</strong> ~ Always Free Shippin…


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

Info Line 1256, Column 1: start tag was here
<br><font size="2"><strong>Standard Ground (USA)</strong> ~ Always Free Shippin…

Error Line 1258, Column 5: end tag for "br" omitted, but OMITTAG NO was specified
<br><font size="2">Arrives in 2-7 <strong>business days</strong><br/></font>


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

Info Line 1258, Column 1: start tag was here
<br><font size="2">Arrives in 2-7 <strong>business days</strong><br/></font>

Error Line 1263, Column 5: end tag for "br" omitted, but OMITTAG NO was specified
<br><br><font size="2"><strong>2nd Day Express (USA)</strong> ~ Starts at only …

✉


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

Info Line 1263, Column 1: start tag was here
<br><br><font size="2"><strong>2nd Day Express (USA)</strong> ~ Starts at only …

Error Line 1263, Column 9: end tag for "br" omitted, but OMITTAG NO was specified <br><br><font size="2"><strong>2nd Day Express (USA)</strong> ~ Starts at only …

✉


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

Info Line 1263, Column 5: start tag was here
<br><br><font size="2"><strong>2nd Day Express (USA)</strong> ~ Starts at only …

Error Line 1267, Column 5: end tag for "br" omitted, but OMITTAG NO was specified
<br>Not available for P.O. Boxes<br/>

✉


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

Info Line 1267, Column 1: start tag was here
<br>Not available for P.O. Boxes<br/>

Error Line 1269, Column 5: end tag for "br" omitted, but OMITTAG NO was specified
<br>Shipping charges for 2nd Day Express will vary depending on the weight of i…

✉


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

Info Line 1269, Column 1: start tag was here
<br>Shipping charges for 2nd Day Express will vary depending on the weight of i…

Error Line 1271, Column 5: end tag for "br" omitted, but OMITTAG NO was specified
<br>Shipping cost is non-refundable for undelivered, unclaimed, returned and re…



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

Info Line 1271, Column 1: start tag was here
<br>Shipping cost is non-refundable for undelivered, unclaimed, returned and re…

Error Line 1275, Column 5: end tag for "br" omitted, but OMITTAG NO was specified
<br><strong>International Customers</strong><br/>



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

Info Line 1275, Column 1: start tag was here
<br><strong>International Customers</strong><br/>

Error Line 1282, Column 26: document type does not allow element "h2" here; missing one of "object", "applet", "map", "iframe", "button", "ins", "del" start-tag <h2 id="customHeaderFive">Return &amp; Exchange Policy</h2>


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>").

Error Line 1288, Column 5: end tag for "br" omitted, but OMITTAG NO was specified
<br><br>Unopened products in their original sealed packaging can be returned up…



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

Info Line 1288, Column 1: start tag was here
<br><br>Unopened products in their original sealed packaging can be returned up…

Error Line 1288, Column 9: end tag for "br" omitted, but OMITTAG NO was specified
<br><br>Unopened products in their original sealed packaging can be returned up…


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

Info Line 1288, Column 5: start tag was here
<br><br>Unopened products in their original sealed packaging can be returned up…

Error Line 1292, Column 5: end tag for "br" omitted, but OMITTAG NO was specified
<br>You can expect a refund within one billing cycle of our receiving your retu…

✉


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

Info Line 1292, Column 1: start tag was here
<br>You can expect a refund within one billing cycle of our receiving your retu…

Error Line 1294, Column 5: end tag for "br" omitted, but OMITTAG NO was specified
<br>Opened packages cannot be returned. <br/>

✉


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

Info Line 1294, Column 1: start tag was here
<br>Opened packages cannot be returned. <br/>

Error Line 1296, Column 5: end tag for "br" omitted, but OMITTAG NO was specified
<br>Please make your selections carefully as <strong>we do not offer exchanges.…

✉


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

Info Line 1296, Column 1: start tag was here
<br>Please make your selections carefully as <strong>we do not offer exchanges.…

Error Line 1300, Column 5: end tag for "br" omitted, but OMITTAG NO was specified
<br><br><strong>Returns should be sent to:</strong><br/><br/>

✉


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

Info Line 1300, Column 1: start tag was here
<br><br><strong>Returns should be sent to:</strong><br/><br/>

Error Line 1300, Column 9: end tag for "br" omitted, but OMITTAG NO was specified
<br><br><strong>Returns should be sent to:</strong><br/><br/>

✉


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

Info Line 1300, Column 5: start tag was here
<br><br><strong>Returns should be sent to:</strong><br/><br/>

Error Line 1303, Column 5: end tag for "br" omitted, but OMITTAG NO was specified
<br>Returns<br/>

✉


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

Info Line 1303, Column 1: start tag was here
<br>Returns<br/>

Error Line 1305, Column 5: end tag for "br" omitted, but OMITTAG NO was specified
<br>Order # (please enter your order number)<br/>

✉


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

Info Line 1305, Column 1: start tag was here
<br>Order # (please enter your order number)<br/>

Error Line 1307, Column 5: end tag for "br" omitted, but OMITTAG NO was specified
<br>5 Plant Ave<br/>

✉


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

Info Line 1307, Column 1: start tag was here
<br>5 Plant Ave<br/>

Error Line 1309, Column 5: end tag for "br" omitted, but OMITTAG NO was specified
<br>Hauppauge, NY 11788<br/>

✉


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

Info Line 1309, Column 1: start tag was here
<br>Hauppauge, NY 11788<br/>

Error Line 1311, Column 5: end tag for "br" omitted, but OMITTAG NO was specified
<br><strong>Please include your original packing slip.</strong><br/></font>

✉


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

Info Line 1311, Column 1: start tag was here
<br><strong>Please include your original packing slip.</strong><br/></font>

I do know that I need to have a way I can use the same heading for paragraphs several times on a page. I believe that is called a class, but I don't know how to set it up.

http://designerperfumesnob.authsafe....ppinginfo.html

Quote:

---

<br><strong>Please include your original packing slip.</strong><br/></font>

---

what is it you are trying to do with this code and others like it?
There is no such thing as <br>.........</br>
The <br> tag (normally done as <br /> OR <br class="clearBoth" /> in XHTML) is a line break and cannot have any effect on a string of text as you are trying to use it. http://www.w3schools.com/tags/tag_br.asp

Quick rule on class or ID. There may be many in your "Class" but no one has your "ID." .class or #id in a stylesheet.

Quote:

---

Originally Posted by dbltoe

what is it you are trying to do with this code and others like it?
There is no such thing as <br>.........</br>
The <br> tag (normally done as <br /> OR <br class="clearBoth" /> in XHTML) is a line break and cannot have any effect on a string of text as you are trying to use it. http://www.w3schools.com/tags/tag_br.asp

Quick rule on class or ID. There may be many in your "Class" but no one has your "ID." .class or #id in a stylesheet.

---

Thank you for replying. What I was attempting to do was create a space between one sentence and the sentence below it. I thought using <br>at the start of sentence and <br/> at the end, would create a single space where using <p> would create too large of a space. I guess I just don't know how to create spaces between sentences.

On this page: http://designerperfumesnob.authsafe....ppinginfo.html

I have two headings: Shipping Information and Return & Exchange Policy. There might be other pages where I'll want several headings. I find I have to create too many custom headers when I could probably just create one class that would give me the same result that I could use over and over. For example I want a class that would produce the effect that customHeaderTwo currently produces, and another class that mimics customHeaderOne. How would I do that in CSS and what would the inline HTML be?

I hope this has answered your question regarding my goal here.

As dbltoe said, remove the <br> at the front of your text. The <br /> at the end will provide a line break. Use two for a line space.

You've given the headings their own ids, which allows you to style them in the stylesheet. Now just follow through and do the same for the text, using the <div> tag: <div id="customshippingtext">Your text here.</div>. Remove all the inline styling and add #customshippingtext to the stylesheet and style as desired. You can use the same id (or class) on other pages, assuming you want those elements to be styled the same.

The only time I use inline styling is if I want to display, say, one word in bold font.

Quote:

---

Originally Posted by stevesh

As dbltoe said, remove the <br> at the front of your text. The <br /> at the end will provide a line break. Use two for a line space.

You've given the headings their own ids, which allows you to style them in the stylesheet. Now just follow through and do the same for the text, using the <div> tag: <div id="customshippingtext">Your text here.</div>. Remove all the inline styling and add #customshippingtext to the stylesheet and style as desired. You can use the same id (or class) on other pages, assuming you want those elements to be styled the same.

The only time I use inline styling is if I want to display, say, one word in bold font.

---

Yay! I've finally learned about no <br> in front of a sentence! Thank you all!!

Right now, the actual web page is looking exactly how I want it. To achieve that, inline I am using <font size="2"> at the start of every sentence. I tried a few things in CSS and inline, but I can't figure out what I would actually code to be able to eliminate all of those and just have the whole text show up in the font size I want. Then, for special words or sentences, maybe I can specify inline what I want.

If I want to use multiple headings on a page, it appears as if I need to set up a class rather than an ID. Again, I have played around with that, and fallen on my face. The headings I use would be the size and color I have on this page, but if I wanted to change the color or font, once I saw how one was done, I could create additional classes.

Also, at the top of the page, I want to begin with perhaps one line space more than I currently have before my first header starts, but I get an error if I just start with <p>.

Thank you, and I'm hoping that others reading this thread might be benefitting as well.

http://designerperfumesnob.authsafe....ppinginfo.html

Quote:

---

Originally Posted by traytray

Yay! I've finally learned about no <br> in front of a sentence! Thank you all!!

Right now, the actual web page is looking exactly how I want it. To achieve that, inline I am using <font size="2"> at the start of every sentence. I tried a few things in CSS and inline, but I can't figure out what I would actually code to be able to eliminate all of those and just have the whole text show up in the font size I want. Then, for special words or sentences, maybe I can specify inline what I want.

If I want to use multiple headings on a page, it appears as if I need to set up a class rather than an ID. Again, I have played around with that, and fallen on my face. The headings I use would be the size and color I have on this page, but if I wanted to change the color or font, once I saw how one was done, I could create additional classes.

Also, at the top of the page, I want to begin with perhaps one line space more than I currently have before my first header starts, but I get an error if I just start with <p>.

Thank you, and I'm hoping that others reading this thread might be benefitting as well.

http://designerperfumesnob.authsafe....ppinginfo.html

---

Since I posted the above, I added <div class="myCustomParagraph"> to the top of the inline styling and I started my text with
<p id="customPara">

and got rid of all the <font> tags, but I am getting errors.


I am still in need of the following:

If I want to use multiple headings on a page, it appears as if I need to set up a class rather than an ID. Again, I have played around with that, and fallen on my face. The headings I use would be the size and color I have on this page, but if I wanted to change the color or font, once I saw how one was done, I could create additional classes.

Also, at the top of the page, I want to begin with perhaps one line space more than I currently have before my first header starts, but I get an error if I just start with <p>.

Thank you!

These are the errors I am getting now:

1. Line 1276, Column 26: document type does not allow element "h2" here; missing one of "object", "applet", "map", "iframe", "button", "ins", "del" start-tag
<h2 id="customHeaderFive">Return &amp; Exchange Policy</h2><br />

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>").

1. Line 1279, Column 25: document type does not allow element "p" here; missing one of "object", "applet", "map", "iframe", "button", "ins", "del" start-tag
<p id="customParaThree"><strong>Refunds</strong><br /><br />

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>").

2. Line 1306, Column 6: end tag for "p" omitted, but OMITTAG NO was specified </div>

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

3. Line 1279, Column 2: start tag was here
<p id="customParaThree"><strong>Refunds</strong><br /><br />

4. Line 1306, Column 6: end tag for "p" omitted, but OMITTAG NO was specified </div>

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

5. Line 1255, Column 2: start tag was here
<p id="customParaTwo"><strong>Standard Ground (USA)</strong> ~ Always Free Shi…

http://designerperfumesnob.authsafe....ppinginfo.html

You have
<p id="customParab">
in two places, which is an example of when to use a class instead of an id.
<p class="customParab">

To eliminate one validation error source, change all of your <br> to <br />.

When I refreshed your page, I saw that you have fixed the <p> id and <br /> items. Unique ids or a repeated class tag would each work here. A class tag would only have to be written once in your stylesheet, making it more efficient and easier to maintain.

One of your repeated errors is very clear: you have opened paragraphs with <p id=...> but never closed them with </p>. This also causes the

Quote:

---

document type does not allow element "whatever" here;

---

errors, as <h#> headings and <p> paragraphs are not allowed to be inside another <p> element. Closing the preceding <p> will take care of these.

There's absolutely no need to go into the Zen Cart code and add a bunch of <br /> to try to move an item up or down. Even if the item is not contained in the stylesheet, there is an ID or class defined in Zen Cart that can be used for spacing. You've done this in both the S&R text, but the logoWrapper as well.

An example is the Shippping Information page you posted. There are three <br>'s added to the code in the logoWrapper when you could have added a margin or padding to the stylesheet. Google padding versus margin to learn which ones to use.

There is SO MUCH that can be done to ZC without having to touch all this code like you have. Since the idea is to have a consistency throughout a site, why would you want to add extra code unless necessary. Headings, paragraphs, and many other things are already defined. So, you really wouldn't need to add classes to headings, paragraphs, etc. unless you wanted them to NOT look like the site. The whole idea of a stylesheet is to LOWER the number of places that changes would have to be made. Basic calls (h, p, tr, td, font, font-color) should be consistent. In the case of this page, using a p tag without some adjustment looks too small. But, rather than jump to fancy calls for just one page, I would suggest you first think about changing the font size for the basic p tag. Then there would only be a few specific places that you would need to change.

To me, this page makes me look left, then right, then back again for the information. You talk about Return & Exchange Policy but the only sub-header is refunds.

What I'm trying to say is that (IMHO) you are concentrating on "pretty" versus "practical." Get it on the page with basic calls and THEN see what needs to be prettied up.

PS - Info on addressing. -- You need to make sure that the post office will accept the address you are using for you returns. If their computer does not see "Returns" as a registered recipient, the computer will kick it back. We had one customer that had their company name misspelled on their PO Box and had lots of mail returned until they realized what was happening.

I closed the <p id=...> with </p>, but now the following lines of text are too small. Dbltoe noted this would happen and said “first think about changing the font size for the basic p tag.”

I think this is a wonderful idea and would make life simpler if I didn’t need to add all those <br /> tags. However, of course I don’t know how to change the font size for the basic p tag.

In the stylesheet, I have created the class like this:

.customparatwo a {
color: #444443;
font-size: 1.3em;
text-align: left;
}

Inline styling I added these:

<div class="myCustomParagraph"> this to the very top of the page.
<p class="customParaTwo"> this looks like it needed to be inserted again if I added a header.

I’m not getting errors regarding these, so this at least is correct?

Dbltoe said: “Headings, paragraphs, and many other things are already defined. So, you really wouldn't need to add classes to headings…..”

Oh, how I wish I understood this! I already have two headings on the Shipping page that uses the same font, size and color. Let’s say I wanted to add two more headings that looked the same. I thought that I would be better off in this case using a class instead of an ID, but now I’m confused. If I want to use several headings on one page, what is the best way to do that and could you show me the code for the stylesheet and what I would insert inline?

Dbltoe said: “To me, this page makes me look left, then right, then back again for the information. You talk about Return & Exchange Policy but the only sub-header is refunds.”

I had a terrible time doing this page and I’m glad to receive feedback on it, even negative feedback. I think if I can get the code correct, I can start again and try to make it more cohesive.

Thank you also for the Info on the addressing. I asked the company over and over if Returns was enough and they assured me it was, but I too have my doubts. I will look into this further.

In general, <h2> headings in a site should all look the same, whatever you decide that should be. Occasionally you may have a page that needs special treatment for an element that also appears on many other pages; in that case, you can use a selector like (in this case)
#shippingInfoMainContent h2 {what: ever;}
to address just the <h2> elements in the shipping info page. In this rule, you should only put properties that need to be different from standard. The rest will be handled by the generic
h2 {what: ever;}
rule near the top of stylesheet.css. You can edit this rule to specify any general styling you want for h2 headings, including margin-top and margin-bottom to establish line spacing. This is usually better if it is the same for (most) all pages. Likewise for standard <p> tags, which will be handled by a
p {what: ever;}
rule (this is probably combined with a number of other selectors in your stylesheet, and you may want to give it its own rule for fine control).

The id="shippingInfoMainContent" is generated by stock Zen Cart code, with similar ids for every kind of page, so you don't need to add any custom tags in most cases.

OK, minus some font size issues, this page is starting to look so much better IMHO.

http://designerperfumesnob.authsafe....ppinginfo.html

A couple of things:

I finally understood that all I need to enter is <h2> because there is a master h2 in the stylesheet. I put <h2> everywhere I wanted a heading and that eliminated the need for a class. Is this correct?

I still have:
<div class="myCustomParagraph"><br /><br/> at the top of the inline styling and I don't know if it's necessary. I don't know how to create a space between the heading Shipping & Returns and the <h2> Standard Ground, without adding the two br tags.


I still don't know how to get the font back to where it should be after the heading, so it's too small, or how to maintain the font size throughout. It looks like the font size should be 1.3em.

I don't mind adding the br tags, but if I can bypass them I would. The p tag seems to create too great a space.

I think once this is cleared up, I can use this information as a basis for all of my pages.

Perhaps if you showed me the code I could then follow through for the rest of the page(s):

This is the first few lines of the inline styling:

<div class="myCustomParagraph"><br /><br/>

<h2>Standard Ground (USA)</h2><br />

Always Free Shipping<br />
Arrives in 2-7 business days<br />

<h2>2nd Day Express (USA)</h2><br />

Starts at only $7.95<br /><br />

Arrives in 2-3 <strong>business days</strong><br /><br />

Not available for P.O. Boxes<br /><br />

I've noticed that I have no reference to "custompara" other than at the very top, so I know that's messed up.

In stylesheet CSS I have:

h1 {font-size: 2em; font-family: georgia; font-style: italic; color:#ED3A84;}
h2 {font-size: 1.5em;}
h3 {font-size: 1.3em;}
h4, h5, h6, LABEL, h4.optionName, LEGEND, ADDRESS, .sideBoxContent, .larger{font-size: 1.1em;}
.biggerText {font-size: 1.2em;}
.clearBoth {clear: both;}
HR {height: 1px;margin-top: 0.5em;border: none;border-bottom: 3px solid #cccccc;}
h1, h2, h3, h4, h5, h6 {margin: 0.3em 3px;}
p {font-size: 1.3em;}

I just added the p {font-size: 1.3em;} and I’m not sure if this is correct.

The h2 tags are indented and the start of the next line is not. How can I get it all indented?

Doesn’t this read much better with these headings and aligned left?

You have set font-size for <p>, but you haven't used <p> tags. Try this:

Code:

---

<div id="shippingInfoMainContent" class="content">

<h2>Standard Ground (USA)</h2>
<p>Always Free Shipping<br>
Arrives in 2-7 business days</p>

<h2>2nd Day Express (USA)</h2>
<p> Starts at only $7.95<br><br>

Arrives in 2-3 <strong>business days</strong><br><br>

Not available for P.O. Boxes<br><br>

Shipping charges for 2nd Day Express will vary depending on the weight of items in your order. Shipping costs are shown and calculated before you checkout. Please proceed to checkout to see costs for your order. <br><br>

Shipping cost is non-refundable for undelivered, unclaimed, returned and refused packages, unless we made an error. </p>

<h2>International Customers</h2>
<p>We do NOT ship internationally at the present time.</p>

<h2>Refunds</h2>
<p>Unopened products in their original sealed packaging can be returned up to 30 days after the ship date for a full refund minus a shipping charge of $5.95 (per item - standard shipping, or $5.95 plus any additional shipping cost you incurred for using 2nd Day Express), which will be deducted from the credit we apply.<br><br>

Any shipping cost you incur to return the product to us will not be refunded.<br><br>

You can expect a refund within one billing cycle of our receiving your returned product.<br><br>

Opened packages cannot be returned. <br><br>

Please make your selections carefully as <strong>we do not offer exchanges.</strong></p>

<h2>Returns should be sent to:</h2>
<p>
Returns<br>
Order # (please enter your order number)<br>
5 Plant Ave<br>
Hauppauge, NY 11788</p>

<h2> *Please include your original packing slip.</h2>

</div>

---

(The gray text is the ZC-generated code that surrounds your custom text. You can use #shippingInfoMainContent as part of a selector if you need to make something unique for this page.)
Add to your stylesheet
#shippingInfoMainContent {margin-top: 2em;}
to space the h2 down from the main Shipping & Returns heading. Adjust the 2em to taste (1.6em, 2.3em...).

Sometimes using <br /> is necessary (like an address), and <br /><br /> can be much simpler than custom <p class="tightPara"> </p> tags which you then have to have a style rule for.

Quote:

---

Originally Posted by gjh42

You have set font-size for <p>, but you haven't used <p> tags. Try this:

Code:

---

<div id="shippingInfoMainContent" class="content">

<h2>Standard Ground (USA)</h2>
<p>Always Free Shipping<br>
Arrives in 2-7 business days</p>

<h2>2nd Day Express (USA)</h2>
<p> Starts at only $7.95<br><br>

Arrives in 2-3 <strong>business days</strong><br><br>

Not available for P.O. Boxes<br><br>

Shipping charges for 2nd Day Express will vary depending on the weight of items in your order. Shipping costs are shown and calculated before you checkout. Please proceed to checkout to see costs for your order. <br><br>

Shipping cost is non-refundable for undelivered, unclaimed, returned and refused packages, unless we made an error. </p>

<h2>International Customers</h2>
<p>We do NOT ship internationally at the present time.</p>

<h2>Refunds</h2>
<p>Unopened products in their original sealed packaging can be returned up to 30 days after the ship date for a full refund minus a shipping charge of $5.95 (per item - standard shipping, or $5.95 plus any additional shipping cost you incurred for using 2nd Day Express), which will be deducted from the credit we apply.<br><br>

Any shipping cost you incur to return the product to us will not be refunded.<br><br>

You can expect a refund within one billing cycle of our receiving your returned product.<br><br>

Opened packages cannot be returned. <br><br>

Please make your selections carefully as <strong>we do not offer exchanges.</strong></p>

<h2>Returns should be sent to:</h2>
<p>
Returns<br>
Order # (please enter your order number)<br>
5 Plant Ave<br>
Hauppauge, NY 11788</p>

<h2> *Please include your original packing slip.</h2>

</div>

---

(The gray text is the ZC-generated code that surrounds your custom text. You can use #shippingInfoMainContent as part of a selector if you need to make something unique for this page.)
Add to your stylesheet
#shippingInfoMainContent {margin-top: 2em;}
to space the h2 down from the main Shipping & Returns heading. Adjust the 2em to taste (1.6em, 2.3em...).

Sometimes using <br /> is necessary (like an address), and <br /><br /> can be much simpler than custom <p class="tightPara"> </p> tags which you then have to have a style rule for.

---

I loved it and applied it! This is the only error I am getting regarding this page specifically:

Line 1249, Column 10: ID "shippingInfoMainContent" already defined

<div id="shippingInfoMainContent" class="content">


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).


Info Line 1248, Column 10: ID "shippingInfoMainContent" first defined here

<div id="shippingInfoMainContent" class="content">


I manually entered <div id="shippingInfoMainContent" class="content"> to the top of the Shipping page inline. I get the feeling I don't need it because I am not referencing it further on the page. However, if I remove it, I get a bunch more errors.

It appears as if I have to begin the page (all pages?) with more than an h2 tag, but this div id doesn't seem to be the thing.

http://designerperfumesnob.authsafe....ppinginfo.html

Eliminate the gray code from the beginning AND the end of my post above - it is only there to show what Zen Cart already outputs for you to use in styling.

I removed the grey code and it removed the error.

In stylesheet CSS, I'm using #shippingInfoMainContent {margin-top: 3em;} for the Shipping & Returns page and tried to do something similar for this page:

http://designerperfumesnob.authsafe....ue-ezp-16.html

to create the same margin-top between the page heading and the first h2 tag, but I can't come up with the right wording to make it happen.

And what would I put in the stylesheet to make a line space(s) between the heading and the Filter for these pages:

http://designerperfumesnob.authsafe....ducts_new.html

http://designerperfumesnob.authsafe...._products.html

http://designerperfumesnob.authsafe....ducts_all.html

You really need to learn how to look up these things for yourself. Firefox with its Firebug extension (or some other browsers' web developer tools) will let you find the styling that applies to any page element, and try new styling to see what works before you change actual files.

Just looking at "view source" in your browser will show you the name of the container just before your new content; use that in the style rule. If you want the same effect as the shipping page, just add the selector to the list at the beginning.

The Boutique page is a special case because there is not an id on the enclosing div. You can use a selector of #ezpagesHeading+div:
#shippingInfoMainContent, #ezpagesHeading+div {margin-top: 3em;}

Some of the other pages are also built very differently than the define page you were first asking about, and if you want this space for many or all pages, it will be better to change the approach and add margin below the <h1> instead of above the content.

h1 {margin-bottom: 3em;}

Of course you would need to remove the #shippingInfoMainContent margin so it doesn't double up. If this then causes undesired spacing in any pages, a rule can be made to exempt them from this general rule.

The h1 {margin-bottom: 3em;} worked perfectly to create the spacing for all pages. All of the errors have been eliminated, except for one I can't locate, and I think that one might be removed when I have the mega menu redone into a regular menu.

Thank you for your support.