In Line Editing - CSS

Headings etc are all CSS as well

h1 {}

h2{} and so on.

When the user in the admin chooses the dropdown, then the CSS will know what to do with that HTML format element.

Hi Asad,

It may help to understand your issue if you include a link so we can inspect the CSS that is being applied. You won't be able to apply negative padding. I'd say to make sure the margin-left is 0 and just use padding to indent. However, like I said, a link to the issue would help me provide a better answer

Carol | BCGurus.com | http://bcgurus.com/Business-Catalyst-Templates for only $7

Hi Asad,

This is what I would recommend:

blockquote { 

    font-size: 14px;

    margin: 0;

    padding: 0 0 14px 20px;

    text-align: left;

}

Remove the float and the width. Not needed. Also remove the <p> within the blockquotes and the extra spacing <p> </p> and <br /> in between the items. You may need to adjust the margin on the <ul> to get the spacing you desire inbetween the items.

Hope this helps! Let me know if you run into anything else.

Carol

Hi Asad,

What are you trying to do with the spacing? Depending on what you want to achieve, you could edit the ul styles:

- ul: adjusting the margin. which is currently margin: 11px 0 11px 1px; or the padding on this element padding: 0 0 0 40px;

Also, the blockquote is getting extra margin because there is a <p> tag within it.  I would remove the <p> tag all together. I would recommend looking at the code in Firefix and downloading the add-on Firebug. This will let you see the styles on each element and manipulate them in real time to see what will work.

Carol

Hi Asad,

I would recommmend cleaning up the HTML and remove the blockquotes all together, along with the extra uls, p and div tags. You can use a single unordered list and each li will represent each section. This will be easier for the client to manage as well. You can use a <br /> tag to break the text from the headers In the WYSISYG, you can create a break by pushing (shift + enter). Just pushing (enter) creates a new paragraph. When in doubt, view the code in HTML view and you can clean it up that way.

--- Example of clean up ---

<ul>

  <li><strong>Rising Costs in Fuel </strong><br />

    <a href="/products/roadnet">Roadnet®</a> is route planning software that calculates effective route plans using digital map data incorporating vehicle height and weight restrictions (also useful for heavy shipment loads) together with historical road speed information, resulting in better use of resources to meet demand by delivering more and driving less thus reducing levels of fuel used.</li>

  <li><strong>Direct Store Delivery Requests</strong><br />

    It is becoming increasingly common for direct store delivery to take place within the beverage industry these days. This provides a complex challenge for transport managers. Daily route optimisation, fleet vehicle tracking, load planning and automated delivery transactions are all essential for servicing customers effectively. Using <a href="/products/roadnet">Roadnet®</a> <a href="/products/Fleetloader">Fleetloader®</a> and <a href="/products/Pulse">Pulse</a> will allow you to do this successfully and will also shorten the order-cash cycle. Follow the links for more information on these logistic planning apps. </li>

</ul>

Gotcha. Missed that. I would wrap whatever needs to be 20px to the left within a class and target that class with a margin-left of -20px; If your client is responsible for making edits and they don't want to be in the HTML view, I would revert back to wrapping that content in a blockquote and set that margin: 0 0 0 -20px;