Bulllet problems with CSS (Dreamweaver MX)

I am trying to get some bullets to work with CSS and I am struggling greatly (partly b/c I am just learning CSS).

The div class that I my body text in is

.splitright {
background: #ffffff;
float: right;
width:520px;
padding-left: 10px;
overflow: hidden;
text-align: justify;
}

I tried to create another class for bullets and nothing works properly.  Even using the defaults (clicking on the li button) gives weird results.  I don't know if the splitright is causing this or something else.

Any ideas
mamadouthiamAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

mamadouthiamAuthor Commented:
I should mention that I am also encountering other formatting problems with this CSS.  For example, when I added background color to some rows in a table that did not show up either.  

mama
0
ArgblatCommented:
HTML has a built in bullet-point list that requires no CSS to create

Put this into your code for an example:

<ul>
     <li>One</li>
     <li>Two</li>
     <li>Three</li>
</ul>
0
mamadouthiamAuthor Commented:
Argblat,

Doesn't work correctly with the CSS I have now.  I would be happy with the standard you indicate but it does not render properly.

mama
0
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

klykkenCommented:
Can you post the code you use for the UL list as well?
0
mamadouthiamAuthor Commented:
klykken,

Here is the entire CSS.  I pulled out the bullets ".bullet" at the top.

.bullets {
      text-align: left;
      list-style-image: url(file:///M|/web-dev/communications/images/bullet.png);
      text-indent: 30px;
      }

All CSS


*{border:0;margin:0;padding:0;background:transparent;}

/* ~~~~~~~~~ breadcrumb ~~~~~~~~~ */
#breadcrumb
{
      text-align: left;
      height: 30px;
      background-color: #E7F2FE;
      border-top-width: 1px;
      border-top-style: solid;
      border-top-color: #CCCCCC;
      margin-top: 0px;
      margin-right: 0px;
      margin-bottom: 0;
      margin-left: 0px;
      padding-top: 0;
      padding-right: 20px;
      padding-bottom: 0;
      padding-left: 20px;
      clear: both;
      
}
/* ~~~~~~~~~ breadcrumb ~~~~~~~~~ */
body
{
font-family: trebuchet ms, verdana, arial, tahoma;
font-size: 80%;
background-color: #ffffff;

margin-top: 0px;
background: #ffffff url('images/bg.gif') top center repeat-x;
}

      
#border
{
border: 0px ;
width: 770px;
background-color: #FFFFFF;
background:url('images/backround2.gif') no-repeat;
margin: 0 auto;
}

#header
{
height: 193px;
width:743px;
margin-left:-2px;
background-image:url(images/daisy.jpg);
}

* html #header { margin-left: 0; }

#content
{
padding: 0.5em 1em;
max-width: 740px;
background-color: #FFFFFF;
}

* html #content {height:1%}
* > html #content {height:auto}

#container
{
width: 740px;
margin: 0px auto;
background-color: #ffffff;
border: 0px solid #669900;
}

.Breadcrumb {
      FONT-WEIGHT: normal; FONT-SIZE: 9px; COLOR: #000000; FONT-FAMILY: Verdana
}

.bullets {
      text-align: left;
      list-style-image: url(file:///M|/web-dev/communications/images/bullet.png);
      text-indent: 30px;
      }

.splitleft {
background: #ffffff url('images/menu.gif') top center no-repeat;
float: left;
overflow: hidden;
text-align: center;
}

.splitright {
background: #ffffff;
float: right;
width:520px;
padding-left: 10px;
overflow: hidden;
text-align: justify;
}


#introduction{
      float:left;
      width:180px;
      padding:0px 0px;
      margin:5px 0px 20px 0px;
      background: url(images/menu.gif) no-repeat;
      text-align:left;
      line-height:1.5em;
      color:#999999;
      font-size:1.0em;
      font-family:"Lucida Grande","Lucida Sans Unicode",arial,sans-serif;
      letter-spacing:0px;
}

#introduction ul, #introduction li {
text-align:center;
      list-style: none;
      margin: 0;
      padding: 0;
}

#introduction a {
      border-bottom: none;
      color:#999999;
}

#introduction h3{
      text-align: center;
      position:static;
}

#introduction a:link, a:visited{
      color:#999999;
}

#introduction a:hover, a:active{
      color:#5B8FBE;
}



/* ~~~~~~~~~ footer ~~~~~~~~~ */
#footer
{
      text-align: center;
      height: 30px;
      background-color: #E7F2FE;
      border-top-width: 1px;
      border-top-style: solid;
      border-top-color: #CCCCCC;
      margin-top: 50px;
      margin-right: 15px;
      margin-bottom: 0;
      margin-left: 15px;
      padding-top: 0;
      padding-right: 20px;
      padding-bottom: 0;
      padding-left: 20px;
      clear: both;
      
}


#footer a:link, a:visited{
      color:#5B8FBE;
}

#footer a:hover, a:active{
      color:#cccccc;
}




a:active,
a:visited,
a:link                            { color: #5B8FBE; text-decoration: none; }
a:hover                              { color: #999999; text-decoration: none; }

/* ~~~~~~~~~ menu ~~~~~~~~~ */

    #topmenu {
      position: relative;
      top: 13px;
      left: 15px;
      width: 540px;
      font-size:93%;
      margin: 0;
      line-height:normal;
      height: 41px;
      }
    #topmenu ul {
        margin:0;
        padding:0px 0px 0 2px;
        list-style:none;
      }
    #topmenu li {
      display:inline;
      margin:0;
      padding:0;
      }
    #topmenu a {
      float:left;
      background:url(images/menuleft.gif) no-repeat left top;
      margin:0;
      padding:0 0 0 4px;
      text-decoration:none;
      }
    #topmenu a span {
      float:left;
      display:block;
      background:url(images/menuright.gif) no-repeat right top;
      padding:5px 15px 4px 6px;
      color:#5B8FBE;
      }
        
    /* Commented Backslash Hack hides rule from IE5-Mac \*/
    #topmenu a span {float:none;}
    /* End IE5-Mac hack */
    #topmenu a:hover span {
      color:#5B8FBE;
      }
    #topmenu a:hover {
      background-position:0% -42px;
      }
    #topmenu a:hover span {
      background-position:100% -42px;
    }
/* ~~~~~~~~~ Headings ~~~~~~~~~ */    
h1
{
      FONT-SIZE: 20px;
      COLOR: #5B8FBE;
      padding-bottom: 10px;
}
h2
{
      FONT-SIZE: 14px;
      COLOR: #5B8FBE;
      padding-bottom: 5px;
}

h3{
      color:#5B8FBE;
      font-family:geneva,arial,sans-serif;
      font-weight:normal;
      text-transform:uppercase;
      word-spacing:4px;
      letter-spacing:3px;
      font-size:0.8em;
      font-weight:bold;
      padding:0 2px;
      margin:0;
}

/*~~~~~~~~~~~styles~~~~~~~~~~~~~~~*/

.bodytext {font-size: 16px}
.style5 {
      font-size: 12px;
      color: #CCCCCC;
0
ArgblatCommented:
This CSS isn't very useful without the associated HTML
0
mamadouthiamAuthor Commented:
Sorry,

Perhaps that is where my problem lies.

When I am coding this, I apply the "style" (in Dreamweaver MX) and my presumption (b/c it works in other pages with other CSS) is that is will apply that class to the text selected.

An example being:

<ul>
      <li class="bullets">A. to mock up footer with RSS and </li>
      <li class="bullets">mock up of new page for later discussion </li>
      <li class="bullets"> Web Trends 8 update </li>
 </ul>

Hope this helps and thanks for your patience.


mama
0
ArgblatCommented:
Instead of giving each li the class bullets ... give the ul class bullets instead

remove all the formatting for bullets (start clean) ... try to get the list-style-image to work correctly first

should be something like

ul.bullets li {
 list-style-image: url(file:///M|/web-dev/communications/images/bullet.png);
}

please note that your url(PATH) is weird ... your using absolute paths when you should be using a relative path
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
mamadouthiamAuthor Commented:
Argblat,

I tried the following:

.ul {
      text-align: left;
      list-style-image: url(../images/bullet.png);
      text-indent: 30px;

to no avail.  

The image bullets show up in IE but not FF (FF just has some little (default?) arrows).  I can actually live with this but the indent is not working at all.  They are all aligned left with the rest of the text (and the bullets actually even farther to the left).  Moreover, when the text is long and need to wrap it looks like:

   *  Landing Pages - http://www.optimizeandprophesize.com/jonathan_mendezs_blog/2007/02/7_rules_for_lan.html

meaning the 2nd line is justified farther over than the 1st line.

Help???
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.