CSS help

[LooseDrumSticks]

I'm pretty new to CSS (but not compleltely) so here is my problem...

In my section details, on the description I want to space my text lines out a little between lines.

I'm sure that the only way to do this would be through CSS but I'm not 100% sure how to implement it.

I guess I need to add the line spacing code into the Actinic Style Sheet, and call it from the descriptions box, but could someone tell me how to do this so I don't have the CSS code appear in the page description?

Thanks in advance for any help.

[leehack]

The CSS style you want to add is:

line-height: 1.3em;

adjust the 1.3 to suit, 1.2 - 1.4 usually looks good.

This just needs adding into the style that currently styles the text you wish to alter.

[LooseDrumSticks]

Thanks Lee ... How do I impliment this class into the description so it won't show as 'text'.

Do I need to wrap it in some kind of HTML quote?

[leehack]

You shouldn't need to include this in the description at all. The area you wish to change is currently styled through the CSS file. Select the area in design view and note the css style being applied to that area. Locate this style in your stylesheet and add the code provided.

Make sure you snapshot before you try anything and ensure that you check your website as other areas may also use this style. Without seeing your site or code, i cannot say for definite where you need to do this, you will need to investigate this yourself and take the appropriate action. I would expect the style to be used with a <span>, however it's not guaranteed.

[LooseDrumSticks]

Thanks Lee ... I'll delve into the CSS file.

[LooseDrumSticks]

fyi:

<h3 class="product"><actinic:variable name='SectionDescription'/></h3><div/>

h3.product {
font-size: <actinic:variable name="StandardFontSize" />;
line-height: 1.7em;
font-weight: 100;
margin: 0px;
padding: 0px 0px 0px 0px;
color: black;
}

Thanks again Lee.

[jont]

Hi Dave - as your padding is the same on all sides you only need to declare the value once, similarly when set to zero there is no need to declare the units ... there is nothing wrong with what you have done but using shorthand across a large stylesheet can save valuable page overhead.

[LooseDrumSticks]

Thanks Jonty ... It's always good to pick up new tips, and it's especially important when keeping the Actinic CSS tidy!

[leehack]

There is at least another 20 opportunities to do this within the stylesheet. This rule applies to both padding and margin. If either are like:

margin: 0px 20px 0px 20px;

that can be slimmed down to:

margin: 0 20px;

and if all four settings are the same, then just include it once as already mentioned.

[LooseDrumSticks]

If, as in my code, the padding and margin are all set to 0, do I need to include it at all? Won't they by default be set to 0?

OR, have you already said this(!)

[jont]

Lee means in specific blocks eg:

rule1 {
padding: 0 20px 0 20px;
margin: 5px 5px 5px 5px;
text-align: left;
}

becomes

rule1 {
padding: 0 20px;
margin: 5px;
text-align: left;
}

although padding and margins should inherit often best to include, especially for IE6 as this is a pain with positioning and often zeroing the margins, padding and borders can resolve.

You will often see at the start of CSS

* {
padding: 0;
margin: 0;
border: none;
}

to start from a level playing field

[leehack]

If they are set to "0", then leave them as that. They may be resetting marging settings they inherit from parents. The things mentioned above, do not change any of the current settings, they are merely setting them in a shorter and more efficient manner. Never delete a setting, you could end up with a nightmare on your hands, we are just telling it the same settings in a more efficient manner.

[fleetwood]

* {
padding: 0;
margin: 0;
border: none;
}

Never knew you could do that Jonty!

Is '*' accepted by css as 'all' across all browsers?

[leehack]

I'm not aware of any browsers that do not understand it. It's a great facility, however it does mean that you need to set them manually on each style if required, which while building, can be a little confusing when you first start using it, as nothing has anything until you put it in.

This also gives a belt and braces approach as any browser that does not understand it, will often be OK as you are then having to manually include a setting if required anyway.

[jont]

Yep - the "*" effectively sets everything as declared... body, p, td, h1 etc.

I find it good practice to zero everything out and then build up from scratch - this should not take any longer as is arguably the same time to add back in compared to taking back out again. Adding back to each style also focuses your attention to each element - especially when messing with positioning, floats etc to ensure it will work cross-browser.