6 Replies Latest reply on Oct 20, 2015 7:43 AM by osgood_

    Why is this UL CSS not working as expected

    matthew stuart Level 2

      I am trying to add an image as the bullet to a UL, but it just won't display on a bootstrap page, but will do in a standard HTML5 page.

       

      Here's the code in bootstrap page:

       

      .bluesquare {

        list-style-image:url(images/bullet.png);

      }

       

            <aside class="col-lg-4 col-md-4 col-sm-4 mtop">

              <article class="greypnl">

                <ul class="bluesquare">

                  <li>Side links here</li>

                  <li>Side links here</li>

                </ul>

              </article>

            </aside>

       

       

      Here's the code in an HTML5 page:

       

      .bluesquare {

        list-style-image:url(images/bullet.png);

      }

       

            <aside class="col-lg-4 col-md-4 col-sm-4 mtop">

              <article class="greypnl">

                <ul class="bluesquare">

                  <li>Side links here</li>

                  <li>Side links here</li>

                </ul>

              </article>

            </aside>

       

      There is no difference between the two that I can see, so what's stopping it from working?

       

      I can only get the image to appear as the bullet dot when I add an inline style to the UL itself like so: <ul class="bluesquare" style="list-style-image:url(images/bullet.png);">.

       

      Any control of image placement for the bullet is only able as inline code like so: <li style="background: url(images/bullet.png) no-repeat 0px 0px; padding:0 0 5px 30px;">

       

      Any thoughts on what's overriding bullet images in a bootstrap layout? I really don't want to have to code every bullet that is going to appear like this!

       

      Thanks.

        • 1. Re: Why is this UL CSS not working as expected
          MurraySummers Level 8

          Honestly, I never use the list-style-image style. I always apply a global targeted CSS rule to the <li> like this -

           

          ul.some_class li {

               background-image:url(blah.jpg);

               background-repeat:no-repeat;

               padding-left:30px;

          }

           

          Have you tried that?

          1 person found this helpful
          • 2. Re: Why is this UL CSS not working as expected
            osgood_ Level 8

            Try as Murray has suggested:

             

            .bluesquare li {

            background-image: :url(images/bullet.png);

            background-repeat: no-repeat;

            }

             

                  <aside class="col-lg-4 col-md-4 col-sm-4 mtop">

                    <article class="greypnl">

                      <ul class="bluesquare">

                        <li>Side links here</li>

                        <li>Side links here</li>

                      </ul>

                    </article>

                  </aside>

             

            If that fails sometimes with Bootstrap you have to kick its *** - try an id instead of a class.

             

            #bluesquare li {

            background-image: :url(images/bullet.png);

            background-repeat: no-repeat;

            padding: 0 0 0 20px;

            }

             

            <ul id="bluesquare">

            <li>Side links here</li>

            <li>Side links here</li>

            </ul>

            • 3. Re: Why is this UL CSS not working as expected
              matthew stuart Level 2

              I don't know what's going on with it. I seem to have absolutely no control over the UL or LI in this particular page where I am using an external style sheet. I've even made sure the style is last in the style sheet and is in the last attached CSS doc after the bootstrap CSS. So it should be overriding, but it's not, however if I do inline styling using exactly the same styles, then it works!

              1 person found this helpful
              • 4. Re: Why is this UL CSS not working as expected
                osgood_ Level 8

                matthew stuart wrote:

                 

                I don't know what's going on with it. I seem to have absolutely no control over the UL or LI in this particular page where I am using an external style sheet. I've even made sure the style is last in the style sheet and is in the last attached CSS doc after the bootstrap CSS. So it should be overriding, but it's not, however if I do inline styling using exactly the same styles, then it works!

                 

                If you 'unhook' the bootstrap.css file do the bullets show then?

                • 5. Re: Why is this UL CSS not working as expected
                  David_Powers Adobe Community Professional (Moderator)

                  matthew stuart wrote:

                   

                  Any thoughts on what's overriding bullet images in a bootstrap layout? I really don't want to have to code every bullet that is going to appear like this!

                  I've just done a quick test with an unordered list in Bootstrap. When I turned on Live Code, there was an inline style attribute with an empty string as a value. This effectively overrides any external styles.

                   

                  I then assigned the class of .bluesquare to the unordred list and created the following style rule:

                   

                  .bluesquare li {

                     list-style-image: url(../images/bluesquare.png);

                  }

                   

                  It worked correctly.

                   

                  For some reason, I can't reproduce the original inline style, but it might help explain what's going on.

                  1 person found this helpful
                  • 6. Re: Why is this UL CSS not working as expected
                    osgood_ Level 8

                    I just did a test using Bootstrap and everything worked as expected - hand coded. Nothing in the Bootstrap css file overides the bullet styling here.