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

[gjh42]

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.

[gjh42]

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.

[dbltoe]

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.

[traytray]

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.

[gjh42]

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.

[traytray]

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?

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

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

[traytray]

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>

(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

[gjh42]

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.

[traytray]

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