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

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 > 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.com/shippinginfo.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:```
<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>

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.

gjh42:

You have set font-size for <p>, but you haven't used <p> tags. Try this:```
<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>

> 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.com/shippinginfo.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.com/boutique-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.com/products_new.html

http://designerperfumesnob.authsafe.com/featured_products.html

http://designerperfumesnob.authsafe.com/products_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.