Question about overriding a graphic bullet in a ul/li block

1 reply [Last post]

Tue, 2012-03-06 01:10

itechieguy.com

Offline

newbie

Last seen: 9 years 46 weeks ago

Timezone: GMT-8

Joined: 2012-02-13

Posts: 6

Points: 11

Hello,

I am working with a Wordpress theme. Ifn their ul/li they use an out of proportion arrow bullet. In order to make sure any change I make will not be overwritten by the next update, I am trying to reclass ul/li. Currently, I have been able to turn of the oversized bullets in my sample, but I have been unable to get a standards bullet like circle or square to display in my ul/li case. This is a small sample that exhibits the problem. I am pretty new to CSS/html, so any insight would be appreciated.

BTW, the div inclusion is set up to match what I see in their html file.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>test</title>
<style type="text/css">
  <!--Theme's ul/li style. -->
  <!--Note: I do not include the graphic for this sample. Running without it, standards bullets will displace for both samples-->
  .entry ul { list-style-type:none;margin: 0 0 15px 15px;padding:0;}
  .entry ul li {list-style-type:none;margin: 0 0 5px; padding: 0 0 0 18px;background: url(arrow_next.gif) 0 1px no-repeat;}
  <!-- My Reclassing -->
  .entry ul.myul {list-style-type:square;margin:0;padding:0;}
  .entry ul li.myli {background: none;list-style-type:square;}
</style>
</head>
 
<body>
  <div id="outer-wrap">
    <div id="wrap" class="clearfix">
    	<div id="container" class="clearfix">
    		<div id="content">
    			<div class="entry">
          <!--Theme's ul/li block with oversized bullets--> 
           <ul>
              <li>this is item 1</li>
              <li>this is item 2</li>
              <li>this is item 3</li>
              <li>this is item 4</li>
            </ul>
            <br/>
          <!--My ul/li block oversized bullets gone, but standard bullets not displaying--> 
            <ul class="myul">
              <li class="myli">this is item 1</li>
              <li class="myli">this is item 2</li>
              <li class="myli">this is item 3</li>
              <li class="myli">this is item 4</li>
            </ul>
          </div>
  </div><!--end outer-wrap div-->
</body>
</html>

Tags:

Tue, 2012-03-06 02:37