7 replies [Last post]
Sidewinderx
Offline
newbie
Last seen: 5 years 52 weeks ago
Joined: 2008-07-29
Posts: 2
Points: 0

I have an ordered list inside a

(that will horizontally scroll when the content exceeds 600px). Each alternating line
  • in the
      has its own color (even/odd respectively). The problem is that when the content of the list is larger than the div it does cause div scroll, but the background color of the
    1. 's end at the 600px mark and any content beyond the 600px (when you scroll over) will not be styled. Below is my code, can anyone offer any advice?
  • <html>
    <head>
    <style type="text/css">
    .container {
        background-color: #F9F9F9;
        border: 1px solid #000;
        width: 600px;
        height: 500px;
        margin: 0 auto;
    }
     
    .code {
        background-color: fbfbfd;
        border: 1px solid #dae0e4;
        font-size: 11px;
        margin: 10px 4px;
        padding: 8px;
        width: auto;
        overflow: auto;
    }
     
    ol {
        width: auto;
    }
    li {
        font-size: 1.25em; line-height: 1.5em; white-space: nowrap;
        width: auto;
    }
     
    .even {
        background: #F3F3F0;
    }
     
    .odd {
        background: #fcfcfc;
    }
    </style>
     
    </head>
    <body>
     
    <div class="container">
    <div class="code">
     
    <ol style="padding: 0px; margin: 0px; margin-left: -5px;">
       <li class="even">
          this_line_is_longer_than_600px_________________________________________________________________________________
       </li>
     
       <li class="odd">
          this is a short line
       </li>
       <li class="even"">
          this is another short line
       </li>
    </ol>
     
    </div>
    </div>
     
    </body>
    </html>

    Thanks,
    John

    zaneTrance
    zaneTrance's picture
    Offline
    Regular
    Lost Vegas
    Last seen: 5 years 51 weeks ago
    Lost Vegas
    Joined: 2008-07-29
    Posts: 15
    Points: 0

    simpleeee use two classes, thats wy i luv classes xD

    <html>
    <head>
    <style type="text/css">
    .container {
        background-color: #F9F9F9;
        border: 1px solid #000;
        width: 600px;
    	overflow: hidden;
        height: 500px;
        margin: 0 auto;
    }
     
    .code {
        background-color: fbfbfd;
        border: 1px solid #dae0e4;
        font-size: 11px;
        margin: 10px 4px;
        padding: 8px;
        width: auto;
        overflow: auto;
    }
     
    ol {
        width: auto;
    }
    li {
        font-size: 1.25em; line-height: 1.5em; white-space: nowrap;
        width: auto;
    }
     
    /** remember to add spaces to the stuff in the li or it wont wrap xD **/
     
    li.long {
    	width: 580px;
    	height: auto;
    	white-space: normal;
    }
     
    .even {
        background: #F3F3F0;
    }
     
    .odd {
        background: #fcfcfc;
    }
    </style>
     
    </head>
    <body>
     
    <div class="container">
    <div class="code">
     
    <ol style="padding: 0px; margin: 0px; margin-left: -5px;">
       <li class="even long">
          this_line_is_longer_than_600px_______lol____lo l____lol____lol____lol____lol____lol____lol____lol____lol____lol____lol____lol____lol____lol____lo l_ ___lol___ _ lol____lol_ ___</li>
     
       <li class="odd">
          this is a short line   </li>
       <li class="even"">
          this is another short line   </li>
    </ol>
     
    </div>
    </div>
     
    </body>
    </html>

    Sidewinderx
    Offline
    newbie
    Last seen: 5 years 52 weeks ago
    Joined: 2008-07-29
    Posts: 2
    Points: 0

    Thank you, but I don't want

    Thank you, but I don't want the content / li to wrap to the next line - it want the

  • background to extend when you scroll over. I realize my css doesn't function that well in IE. Here is a picture of the issue www.extreme-hq.com/csserror.png
  • Thanks,
    John

    zaneTrance
    zaneTrance's picture
    Offline
    Regular
    Lost Vegas
    Last seen: 5 years 51 weeks ago
    Lost Vegas
    Joined: 2008-07-29
    Posts: 15
    Points: 0

    did you try z-index

    it should be able to over lap anything with a lower z-index level than it:

    the conatainer would be: z-index: 0;
    the li would be: z-index: 1;
    or
    z-index:9999;

    anything above the container
    xD :thumbsup:

    zaneTrance
    zaneTrance's picture
    Offline
    Regular
    Lost Vegas
    Last seen: 5 years 51 weeks ago
    Lost Vegas
    Joined: 2008-07-29
    Posts: 15
    Points: 0

    Sidewinderx wrote:Thank you,

    Sidewinderx wrote:

    Thank you, but I don't want the content / li to wrap to the next line - it want the

  • background to extend when you scroll over. I realize my css doesn't function that well in IE. Here is a picture of the issue www.extreme-hq.com/csserror.png
  • Thanks,
    John

    woah!!! hold up! use my style, but add a :hover pseudo to the the li. when you hover it becomes z-index above the container, but when you move away, walla! if you dont want it to wrap, set the height of the li's to the size of the text, but remember, margins and padding play a big role in the way ur whole deal functions and looks.

    zaneTrance
    zaneTrance's picture
    Offline
    Regular
    Lost Vegas
    Last seen: 5 years 51 weeks ago
    Lost Vegas
    Joined: 2008-07-29
    Posts: 15
    Points: 0

    Sidewinderx wrote:Thank you,

    Sidewinderx wrote:

    Thank you, but I don't want the content / li to wrap to the next line - it want the

  • background to extend when you scroll over. I realize my css doesn't function that well in IE. Here is a picture of the issue www.extreme-hq.com/csserror.png
  • Thanks,
    John

    woah!!! hold up! use my style, but add a :hover pseudo to the the li. when you hover it becomes z-index above the container, but when you move away, walla! if you dont want it to wrap, set the height of the li's to the size of the text, but remember, margins and padding play a big role in the way ur whole deal functions and looks.

    zaneTrance
    zaneTrance's picture
    Offline
    Regular
    Lost Vegas
    Last seen: 5 years 51 weeks ago
    Lost Vegas
    Joined: 2008-07-29
    Posts: 15
    Points: 0

    Sidewinderx wrote:Thank you,

    Sidewinderx wrote:

    Thank you, but I don't want the content / li to wrap to the next line - it want the

  • background to extend when you scroll over. I realize my css doesn't function that well in IE. Here is a picture of the issue www.extreme-hq.com/csserror.png
  • Thanks,
    John

    woah!!! hold up! use my style, but add a :hover pseudo to the the li. when you hover it becomes z-index above the container, but when you move away, walla! if you dont want it to wrap, set the height of the li's to the size of the text, but remember, margins and padding play a big role in the way ur whole deal functions and looks.

    EsorOne
    Offline
    Regular
    Last seen: 1 year 51 weeks ago
    Timezone: GMT+2
    Joined: 2005-12-09
    Posts: 30
    Points: 9

    I'm not able to test it

    I'm not able to test it right now, but there are two errors in your code:
    I don't think this will solve your problem but you have to solve them first.

    Check out:

  • this is another short line
  • You use a double "" in your

  • .
    Maybe this solves your problem
  • And your background color isn't right.
    .code {
    background-color: fbfbfd;

    Instead of #fbfbfd; <-- maybe this will do the trick

    Greetz EsorOne