Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Bulllet  problems with CSS (Dreamweaver MX)

Posted on 2007-03-28
9
Medium Priority
?
230 Views
Last Modified: 2012-06-27
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
0
Comment
Question by:mamadouthiam
[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
  • 5
  • 3
9 Comments
 

Author Comment

by:mamadouthiam
ID: 18808164
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
 
LVL 5

Expert Comment

by:Argblat
ID: 18808165
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
 

Author Comment

by:mamadouthiam
ID: 18808294
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
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
LVL 8

Expert Comment

by:klykken
ID: 18808330
Can you post the code you use for the UL list as well?
0
 

Author Comment

by:mamadouthiam
ID: 18808567
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
 
LVL 5

Expert Comment

by:Argblat
ID: 18811223
This CSS isn't very useful without the associated HTML
0
 

Author Comment

by:mamadouthiam
ID: 18811625
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
 
LVL 5

Accepted Solution

by:
Argblat earned 1500 total points
ID: 18815818
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
 

Author Comment

by:mamadouthiam
ID: 18836219
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

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

As a result of several questions about how to use Bootstrap I thought it would be a good idea to write down the development aspect of creating a Bootstrapped website in as little time as possible. Part 1 of this article will only concentrate on g…
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…
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
Suggested Courses

688 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