SitePoint Sponsor

User Tag List

Results 1 to 4 of 4

Thread: ol width 100%?

  1. #1
    SitePoint Guru
    Join Date
    Jul 2004
    Location
    Netherlands
    Posts
    672
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    ol width 100%?

    I am having a little trouble of getting the div's 100% width with ofverflow set to scroll, i am using geshi, does anybody know what is the problem ?

    HTML Code:
    .php {
        background-color:#0d5680;
        border:1px solid #000;
        color:#000;
        width:90%;
        padding:0px 0px 0px 30px;
        max-height:500px;
        overflow:scroll;
    }
    .php ol {
        padding:0px 0px 0px 5px;
        list-style: decimal-leading-zero;
        width:100%;
        display:block;
    }
    .php li {
        margin:0px;
        padding:1px;
        color:#fff;
        border-left:5px solid #000;    
        background-color:#fff;
        white-space:pre;
        width:100%;
    }
    div.de1 {
        background-color:#fff;
    }
    div.de2 {    
        background-color:#edf1f4;    
    }

    This is what part of the html looks like :

    HTML Code:
    <div class="php" style="font-family: monospace;"><ol><li class="li1"><div class="de1">&nbsp;</div></li>
    <li class="li2"><div class="de2">&nbsp; &nbsp; &nbsp; &nbsp; <span class="kw2">public</span> <span class="kw2">function</span> index<span class="br0">&#40;</span><span class="br0">&#41;</span></div></li>
    <li class="li1"><div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; <span class="br0">&#123;</span></div></li>
    <li class="li2"><div class="de2">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="re0">$rssMaxCharDescription</span> = <span class="nu0">500</span>;</div></li>
    <li class="li1"><div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div></li>
    <li class="li2"><div class="de2">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="co1">// Check to see if the users has requested an rss feed</span></div></li>
    <li class="li1"><div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="re0">$isFeed</span> = ife<span class="br0">&#40;</span><span class="re0">$this</span>-&gt;<span class="me1">RequestHandler</span>-&gt;<span class="me1">prefers</span><span class="br0">&#40;</span><span class="st0">'rss'</span><span class="br0">&#41;</span> == <span class="st0">'rss'</span>, <span class="kw2">true</span>, <span class="kw2">false</span><span class="br0">&#41;</span>;</div></li>
    <li class="li2"><div class="de2">&nbsp;</div></li>
    Attached Images Attached Images
    • File Type: gif 1.gif (27.4 KB, 6 views)
    Go visit my site :-D you know you want to ;-)
    www.mech7.net

  2. #2
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    1 - validate your code at http://validator.w3.org and fix those couple of problems

    2 - don't use &nbsp's to create spacing, use padding/margin in your css to position elements correctly.

    3 - When you're dealing with block level elements, you don't need to apply a width as they'll be rendered at 100&#37; anyway.

    I've removed the width's from your CSS, changed overflow to auto and made the height slightly smaller so you can see the overflow working and it seems to be what you're after?

    Code:
    .php {
        background-color:#0d5680;
        border:1px solid #000;
        color:#000;
        padding:0px 0px 0px 30px;
        max-height: 150px;
        overflow: auto;
    }
    .php ol {
        padding:0px 0px 0px 5px;
        list-style: decimal-leading-zero;
        display:block;
    }
    .php li {
        margin:0px;
        padding:1px;
        color:#fff;
        border-left:5px solid #000;    
        background-color:#fff;
        white-space:pre;
    }
    div.de1 {
        background-color:#fff;
    }
    div.de2 {    
        background-color:#edf1f4;    
    }
    Don't forget to fix the HTML problems though and also take into consideration that IE6 doesn't support min or max-height

  3. #3
    SitePoint Guru
    Join Date
    Jul 2004
    Location
    Netherlands
    Posts
    672
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks but it still does not work properly.. the html is a bit messy but that is because it is generated by GESHI.. by default it's allot worse

    I know about max sizes not working in IE 6 but it's personal project and i don't feel like hacking away for old technologies

    Now i know that the width is inherited from the parent.. but when that is set to 100&#37; it still does not work? Is there anyway to get it to stretch to a 100% when there is a scroll ?
    Go visit my site :-D you know you want to ;-)
    www.mech7.net

  4. #4
    SitePoint Guru
    Join Date
    Jul 2004
    Location
    Netherlands
    Posts
    672
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Setting it to display table works ok

    HTML Code:
    .php ol {
        padding:0px 0px 0px 5px;
        list-style: decimal-leading-zero;
        width:100&#37;;
        display:table;
    }
    Go visit my site :-D you know you want to ;-)
    www.mech7.net


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •