Is there a fix to lists in the CSS or in the module styles so that an unordered list works?

posted in: Css | 0

Summary:

1. Create a ‘list’ class in the CSS file. Make sure that the specified image file in the defined ‘list’ class (org_arrow.gif) should be present in the image folder.

.list{ padding:0; margin:0;}
.list ul{ padding:0; margin:0;}
.list ul li{ padding:0; margin:0; background-image:url(../images/org_arrow.gif); background-repeat:no-repeat; background-position:left top; list-style:none; padding-left:10px; padding-bottom:5px;}
.list ul li a:link{font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#000; text-decoration: none; font-weight:normal;}
.list ul li a:visited{font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#000; text-decoration: none; font-weight:normal;}
.list ul li a:hover{font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#d22551; text-decoration: none; font-weight:normal;}

2. Add the below mentioned code  in the FCK editor’s ‘source’  to display arrows / bullets in the front end.
What you need to do is, put all the list items in a div and define a pre defined class (<div>) to that div to display <specified image> before the list items in the front end. You should put this ‘list’ class in the FCK editor’s html source <ul> option as mentioned in the ‘Sample code’.

Sample code:

<div>
<div>
<ul>
<li><a href=”#”>Romans barn deep with talent</a></li>
<li><a href=”#”>Lookin at Lucky adds hood</a></li>
<li ><a href=”#”>Conveyance set for San Rafael Stakes</a></li>
<li><a href=”#”>Gio Ponti looks sharp in drill </a></li>
<li><a href=”#”>St Trinians bound for Santa Maria Handicap</a></li>
<li><a href=”#”>Abrams eyes big day with Cal-breds</a></li>
<li><a href=”#”>Contessa has big plans for Eightyfiveinafifty</a></li>
<li><a href=”#”>NBC to televise six Derby prep races</a></li>
<li><a href=”#”>Crisp makes successful jump to stakes</a></li>
<li><a href=”#”>$99,000 carryover up for grabs at Philly Park</a></li>
<li><a href=”#”> Neko Bay draws off to win San Pasqual</a></li>
</ul></div>

Previous Post
Next Post

Leave a Reply