开发者

jQTouch list bullets not showing

I am trying jQTouch for an iPhone web app, but I want content on the pages to be able to have normal bullet lists, not styled as the bars in the jqt theme. So I am trying to override the css selectors in the theme.css:

#jqt .content ul {
color: #fff;
    border: none;
font: inherit;
padding: 0;
margin: 15px 10px 17px 10px;
}

#jqt .content ul li {
    color: #fff;
    border-top: none;
    border-bottom: none;

    list-style-type:disc;
    padding: 10px 10px 10px 10px;
    background-image: none;
    overflow: hidden;
开发者_如何学编程}

It works fine in that it overrides it, but I don't get any visible list bullets. Any ideas why?


Just overwrite the li (not the ul)

CSS:

div#jqt #textpage li
{
    list-style-type:disc;
    padding: 7px 20px 0px 10px; /* set these as required */
}

HTML:

<!-- PAGE 2d -->       
<div id="page-2d">
    <div class="toolbar">
        <h1>Page Heading</h1>
        <a class="back" href="#page-2">Back</a>
    </div>
    <div id="textpage" >
        <h1>My heading</h1><br />
        <p>Stuff</p> 
        <p>More Stuff</p><br />
        <h2>Sub Heading</h2>
        <!-- Note No <ul> works don't know why -->  
        <li>My List Item1 </li>
        <li>My List Item2 </li>


Overflow hidden seems to be the problem, based on a quick test i did.

This is what i am using for my project and its working like a charm:

ul.text, .text ul
{
    border: 0;
    background: transparent;
}
ul.text li, .text ul li
{
    list-style-type: disc;
    -webkit-border-radius: 0;
    border-radius: 0;
    filter: 0; // hide IE gradient
    margin-left: 19px;
    background: transparent; 
    border: none;
    font-size: 1em;
    font-weight: normal;
}

Hope it helps


Check the display type on the LI. I had this issue because they were set to "block" when they should have been "list-item"

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜