Solved

How to remove bullets from this list

Posted on 2013-06-30
7
386 Views
Last Modified: 2013-06-30
Hello all experts.

Below is an excerpt from a page that i am working on.

For the life of me I cannot figure out how to reference the list so that the bullet-points can me removed from it.

<!-- horizontal-outer-widgets-2 Widget Area -->
	<div id="horizontal-outer-widgets-2" class="boxed warea fix">
		<!-- widget start --><aside id="flexible-recent-posts-widget-2" class="suf-widget suf-horizontal-widget suf-widget-3c widget_flexible-recent-posts-widget "><div class="dbx-content"><div class="frp-clear"></div>
<ul class="frp-widget">
			<li class="frp-news">
			<div class="news-widget-title"><a href="http://localhost/food/third-post/">Third Post</a></div>
<div class="news-widget-excerpt"><a href="http://localhost/food/third-post/"><?php _e( 'read more', 'frp' ); ?></a></div>
<p><!--
<div class="news-widget-date">30.06.2013</div>
<p>--></p>
		</li>
				<li class="frp-news">
			<div class="news-widget-title"><a href="http://localhost/food/second-post/">Second Post</a></div>
<div class="news-widget-excerpt"><a href="http://localhost/food/second-post/"><?php _e( 'read more', 'frp' ); ?></a></div>
<p><!--
<div class="news-widget-date">30.06.2013</div>
<p>--></p>
		</li>
		</ul>
<div class="frp-all-category-news frp-all-category-news-footer"><a
	href=""></a></div>
</div></aside><!-- widget end -->	</div>
	<!-- /horizontal-outer-widgets-2 -->

Open in new window


Any help will be appreciated.

--d.
0
Comment
Question by:driven_13
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 3
7 Comments
 
LVL 53

Expert Comment

by:Scott Fell, EE MVE
ID: 39288293
Add to your css

ul
{
    list-style-type: none;
}

Or if it is only for a specific list then add a class

ul.no_bullets
{
    list-style-type: none;
}

<ul class="no_bullets">
<li>stuff</li>
</ul>
0
 

Author Comment

by:driven_13
ID: 39288304
Thanx for the response but I actually know how to remove the bullets.

I was looking for some help in how to reference that list in the hierarchy of DIVs and CLASSes.

This is not working:

#horizontal-outer-widgets-2 .frp-widget ul {list-style-type: none;}

Open in new window


Thoughts...??

--d.
0
 
LVL 53

Expert Comment

by:Scott Fell, EE MVE
ID: 39288316
This is a working sample of your code using the css below http://jsbin.com/ihunod/1/edit

ul.frp-widget
{
    list-style-type: none;
}

Open in new window

0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:driven_13
ID: 39288345
Hi.

Unfortunately, that is not working ....[:0(

Here is the link to my site:  http://bit.ly/YMA3zW

Any ideas..??

Thanx.

--d.
0
 
LVL 53

Accepted Solution

by:
Scott Fell,  EE MVE earned 500 total points
ID: 39288364
Starting at line 1383 of your css remove this stuff or at least anything having to do with the background. It is over riding the code you are trying to do.

.suf-mag-category ul li,
.sidebar-tab-content ul li,
.suf-widget ul li,
.suf-flat-widget ul li,
.suf-panel-widget ul li {
	background-repeat: no-repeat;
	padding-left: 22px ;
	background-position: 0 1px;
	padding-bottom: 3px;
}

.tab-box div.sbtab-content-archives ul li,
.tabbed-sidebar div.sbtab-content-archives ul li,
.widget_archive ul li {
	background: url(images/icons/calendar_date.png) no-repeat;
	padding-left: 20px;
	padding-bottom: 3px;
}

Open in new window

0
 

Author Comment

by:driven_13
ID: 39288388
Hi.

Ok, I removed the CSS as per your suggestion and the bullets are gone. Thank you.

But, as per my attached snapshot, there are dots now showing up in the background.

--d.
dots in background
0
 

Author Comment

by:driven_13
ID: 39288392
Scratch that last post as I have figured it out.

Thank you very much for all your help.

--d.
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
In this tutorial viewers will learn how add a full-size background image to a webpage using CSS3. Create a new HTML document with an internal stylesheet.: In CSS, define the html element to have a background image. Use a high resolution image.: In t…
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
Suggested Courses

632 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question