[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 671
  • Last Modified:

How to clear out previous <ol> properties in CSS...??

Hello all experts.

I am using WordPress and a widget in one of my columns uses a "Text Widget".

The content of this text-widget is as follows:

<div>
<ol style="  list-style-type: square;
  list-style-position: outside;
  padding: 0px 0px 20px 0px;
	margin: 0px;
  text-indent: 5px;
  width: 100%; 
  margin: auto; 
  text-align:left;">
<li>Clean inside/outside of your computer case</li>
<li>Backup all of your personal files, drivers and email</li>
<li>Reformat (Erase) your computers hard drive</li>
<li> Reload a fresh copy of your Windows operating system</li>
<li> Add all the newest Windows security patches and settings</li>
<li> Defragment and optimize your computer's hard drive for top performance</li>
<li>Install all printers, scanners, etc.</li>
<li>Install your current Internet provider</li>
<li>Setup your email</li>
<li>Install all of your software</li>
</ol>
</div>

Open in new window


But this theme in WP has previous properties for the <ol> tag that needs to be "zeroed out" first, as this is how it is showing up:

wrong ol
Any ideas how to do this....??

Thanx in advance.

--d.
0
driven_13
Asked:
driven_13
  • 2
  • 2
1 Solution
 
Jason C. LevineNo oneCommented:
You can't really zero out a previous style declaration.  If you are seeing something like the above, it usually indicates poor CSS planning as the offending style is over-declared higher up in the cascade.

You have two choices.  One is to rethink the CSS completely and not have any styles for common tags (or set clearing styles for those tags) and move all styling lower down the cascade so the affect tags by class and ID.  This is more work, but better design.

The other choice is to figure out what is causing the unwanted effect and add the clear to the inline style above.  background:none; would probably do it.  But this gets obnoxious to have to remember to do and also hard to keep track of.
0
 
driven_13Author Commented:
Hi jason1178.  We meet again...[:0)

Your second choice did it as the first choice is way beyond my expertise...[:0(

But I have a follow-up question:  The attached pic is how it is showing up with this code:

<div>
<ol style="list-style-type: square; list-style-position: outside; padding: 0px 0px 20px 0px; margin: 0px; text-indent: 5px; width: 90%; margin: auto; text-align:left;">
<li style="background:none;">Clean inside/outside of your computer case</li>
<li style="background:none;">Backup all of your personal files, drivers and email</li>
<li style="background:none;">Reformat (Erase) your computers hard drive</li>
<li style="background:none;">Reload a fresh copy of your Windows operating system</li>
<li style="background:none;">Add all the newest Windows security patches and settings</li>
<li style="background:none;">Defragment and optimize your computer's hard drive for top performance</li>
<li style="background:none;">Install all printers, scanners, etc.</li>
<li style="background:none;">Install your current Internet provider</li>
<li style="background:none;">Setup your email</li>
<li style="background:none;">Install all of your software</li>
</ol>
</div>

Open in new window

Which is fine but notice that extra bit of indentation in the second line when it wraps around?  How can I get rid of that...??  It needs to be in line with the line above.
indentation
Any help will be greatly appreciated.

--d.
0
 
Jason C. LevineNo oneCommented:
Get rid of text-indent
0
 
driven_13Author Commented:
Thanx again.  

Appreciate all our help.

--d.
0

Featured Post

Important Lessons on Recovering from Petya

In their most recent webinar, Skyport Systems explores ways to isolate and protect critical databases to keep the core of your company safe from harm.

  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now