WordPress.org

Ready to get started?Download WordPress

Forums

CSS after code doesnt seem to work on page (1 post)

  1. devo.uk
    Member
    Posted 3 years ago #

    hi ..

    i am creating a page in which i wanted to use an orderlist with a special bullet and spaced equally.

    i created the following code

    css as below

    /* -------- 3 Column Order List -------- */
    
    div.tick3col ol
    {
      width: 100%;  /* room for 3 columns */
    
    }
    div.tick3col ol  li
    {
      float: left;
      width: 20em;  /* accommodate the widest item */
      list-style-type: none;
      background-image: url('../images/bluetick.png');
      background-position: 0px 50%; /* X-pos Y-pos (from top-left) */
      background-repeat: no-repeat;
      padding-left: 54px;
      line-height: 38px;
    
    }
    /* stop the floating after the list */
    div.tick3col:after
    {
      clear: left;
    }
    
    /* separate the list from what follows it */
    div.tick3col
    {
        margin-bottom: 1em;
    
    }

    then inside the page added the following

    <div class="tick3col">
    <ol>
    	<li><a title="Vertical Blinds" href="/blinds/vertical-blinds/">vertical blinds</a></li>
    	<li><a title="Roller Blinds" href="/blinds/roller-blinds/">roller blinds</a> (including motorised)</li>
    	<li><a title="Venetian Blinds" href="/blinds/venetian-blinds/">venetian blinds</a></li>
    	<li><a title="Wood Venetian Blinds" href="/blinds/wood-venetian-blinds/">wood venetian blinds</a></li>
    	<li><a title="pleated blinds" href="/blinds/pleated-blinds/">pleated blinds</a></li>
    	<li><a title="wood weave blinds" href="/blinds/woodweave-blinds/">wood weave blinds</a></li>
    </ol>
    </div>

    this is the first time i try using the pseduo class :after, it took me a while to get the css working until i used div.tickcol3 refrence prefixes so either the reset css or other template/theme css didnt interfear

    so why cant i get the div.tickcol3:after css to clear the float for the spacing

    i am doing something wrong ??

    thanks

Topic Closed

This topic has been closed to new replies.

About this Topic