CSS override of product description

Hi

I like, and use, TinyMCE editor to edit my product descriptions, however, for some reason it doesn't have a "Normal" format like the rest of the editors, and thus, when a table is suppose to look like this:

pcselect.co.za/index.php?main_page=product_info&cPath=14_245_246&products_id=528

...It looks, instead, like this:

pcselect.co.za/index.php?main_page=product_info&cPath=14_245_246&products_id=526

If you are wondering how I got it right with the first link, I had to go into CKeditor to correct the format of the table.

Is there a way to add some CSS to that my tables and text automatically adjust to a particular format (I would prefer "Normal DIV" - like the format CKeditor has) so that I don't have to keep changing everything?

Ideally, I would like this done automatically:

-Automatically make table border colour #b9b9b9
-Automatically adjust table length to 350px
-Automatically make format Normal (DIV)

Help in this matter will be greatly appreciated, as it will save me so much time.

Thank you
S

Does this editor not allow setting defaults for things like this? (Never used HTML editors, so not familiar with "common" capabilities.)

You can indeed add style rules to override the standard output results, using !important where necessary in properties. Look at your standard output in view source to see exactly what settings are being made, and add rules like

#productDescription td {border-color: b9b9b9 !important;}

The #productDescription in the selector limits the effect to this kind of location so you don't affect tables on other kinds of pages.

You can't change <p> tags to <div> tags, but you can give #productDescription p {} margins, padding, etc. as you desire, which will have similar effect.

gjh42:

You can't change <p> tags to <div> tags, but you can give #productDescription p {} margins, padding, etc. as you desire, which will have similar effect.

Thank you for your response, but what do you mean by "#productDescription p {} margins" etc..

I tried just setting p to display: none; , ..which fixed the problem.. but got rid of all the table text... so it just left a blank table.

Could you prossible give me some css examples of how I can achieve a perfect result - the result being:

-Get rid of table <p> tags,
-Add a small amount of padding on the inside of the table (in each cell) so that the text doesn't touch the border.

Thank you for your help
S

Anyone have an idea?

Changing the padding to 0 and adding the margin: 0; here fixes it here. I don't know what that might do to other page elements, but it might be a place to start:

P, ADDRESS {
padding: 0;
margin: 0;
}

That would probably affect everything in the site, so the #productDescription part will limit the effect to the descriptions.

#productDescription P, #productDescription ADDRESS {
padding: 0.5em;
margin: 0;
}

You can't automatically get rid of the <p> tags with CSS; what I was telling you was that you can make <p> tags behave like <div> tags.