WEB how is this happening? v.WTF CSS

Discussion in 'OT Technology' started by White Stormy, Oct 18, 2008.

  1. White Stormy

    White Stormy Take that, subspace!

    Joined:
    Sep 17, 2002
    Messages:
    85,489
    Likes Received:
    70
    Location:
    Sparkopolis
    http://halefx.com/temp/temp.html

    in the middle column, the KingToad text is in the same div with all the same CSS properties as the ordered list beneath it..

    so how the hell is the ordered list positioned where it is? I mean, it's awesome that it's somehow lining up with the text of the list.. if I didn't want a style-type, that's perfect. But I do want a style-type... so this is just aggravating.

    Although I guess if I added my own character or image or something inside each list item, this would be ideal. So I'm not 100% sure I do want to change the positioning for lists.. but I definitely want to understand why it's doing this.

    Any ideas?

    xhtml
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
      <head>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
        <link href="style.css" rel="stylesheet" type="text/css" />
        <!--[if IE 6]>
          <style media="all" type="text/css">@import "fix-ie-6.css";</style>
        <![endif]-->
        <title>Hale Multi-Column v1</title>
      </head>
      <body>
        <div id="container">
          <div id="header" class="pad section">
            <a href="/" title="Home">
              <img alt="logo" src="logo.png"/>
            </a>
            <h1><a href="/" title="Home">Site Name</a></h1>
          </div>
          <div id="nav-top" class="section">
            <ul>
              <li><a>Nav</a></li>
              <li><a>Nav</a></li>
              <li><a>Nav</a></li>
              <li><a>Nav</a></li>
              <li><a>Nav</a></li>
            </ul>
          </div>
          <div class="section">
            <div id="side-left" class="tidy">
              <div class="pad">
                Left Left Left<br />
                Left Left Left<br />
                Left Left Left<br />
                Left Left Left<br />
                Left Left Left<br />
                Left Left Left<br />
                Left Left Left<br />
                Left Left Left<br />
                Left Left Left<br />
              </div>
            </div>
            <div id="main" class="cols-3 tidy">
              <div class="pad">
                KingToad<br />
                KingToad<br />
                KingToad<br />
                KingToad<br />
                KingToad<br />
                KingToad<br />
                <ol>
                  <li>TEST</li>
                  <li>TEST</li>
                  <li>TEST</li>
                  <li>TEST</li>
                  <li>TEST</li>
                  <li>TEST</li>
                  <li>TEST</li>
                  <li>TEST</li>
                  <li>TEST</li>
                  <li>TEST</li>
                  <li>TEST</li>
                  <li>TEST</li>
                  <li>TEST</li>
                  <li>TEST</li>
                  <li>TEST</li>
                  <li>TEST</li>
                  <li>TEST</li>
                  <li>TEST</li>
                  <li>TEST</li>
                  <li>TEST</li>
                  <li>TEST</li>
                  <li>TEST</li>
                  <li>TEST</li>
                  <li>TEST</li>
                  <li>TEST</li>
                  <li>TEST</li>
                  <li>TEST</li>
                  <li>TEST</li>
                  <li>TEST</li>
                  <li>TEST</li>
                  <li>TEST</li>
                  <li>TEST</li>
                  <li>TEST</li>
                  <li>TEST</li>
                  <li>TEST</li>
                  <li>TEST</li>
                  <li>TEST</li>
                  <li>TEST</li>
                  <li>TEST</li>
                  <li>TEST</li>
                </ol>
              </div>
            </div>
            <div id="side-right" class="tidy">
              <div class="pad">
                Right Right Right<br />
                Right Right Right<br />
                Right Right Right<br />
                Right Right Right<br />
                Right Right Right<br />
                Right Right Right<br />
                Right Right Right<br />
                Right Right Right<br />
                Right Right Right<br />
                Right Right Right<br />
                Right Right Right<br />
                Right Right Right<br />
                Right Right Right<br />
                Right Right Right<br />
                Right Right Right<br />
                Right Right Right<br />
                Right Right Right<br />
                Right Right Right<br />
                Right Right Right<br />
              </div>
            </div>
          </div>
          <div id="footer" class="center pad section">
            <a href="/" title="Home">&copy; 2008</a>
          </div>
        </div>
      </body>
    </html>
    
    css
    Code:
    /**
     * style.css for Hale Multi-Column v1
     * last modified: 17 October 2008
     * -Jonathan Hale
     */
    
    /**
     * CSS properties to apply to all elements
     */
    
    * {
      background: transparent;
      margin: 0;
      padding: 0;
    }
    
    /**
     * CSS properties to apply to standard XHTML tags. Tags listed in alphabetical order.
     */
    
    a {
      cursor: pointer;
      text-decoration: none;
    }
    a:hover {
      text-decoration: underline;
    }
    
    body {
      background-color: #333333;
      color: #000000;
      font: x-small arial, helvetica, clean, sans-serif;
    }
    
    ol, ul {
      list-style: none;
    }
    
    /**
     * CSS properties to apply to custom classes. Classes listed in alphabetical order by parent.
     */
    
    .center {
      text-align: center;
    }
    
    .pad {
      padding: 0.5em;
    }
    
    .section {
      background: #ffffff;
      clear: both;
      overflow: hidden;
    }
    
    .spacer {
      margin-top: 0.5em;
      margin-bottom: 0.5em;
    }
    
    .tidy {
      margin-bottom: -100% ! important;
      padding-bottom: 100% ! important;
    }
    
    /**
     * CSS properties to apply to custom IDs and their child elements. IDs listed in alphabetical order.
     */
    
    #container {
      margin: 0 auto;
      width: 76em;
    }
    
    #footer {
      border-top: thick solid #e8e8e8;
    }
    
    #header img {
      float: left;
    }
    #header h1 {
      float: left;
    }
    
    #main {
      float: left;
    }
    #main .pad {
      border-left: thick solid #e8e8e8;
      border-right: thick solid #e8e8e8;
      margin-bottom: -100% ! important;
      padding-bottom: 100% ! important;
    }
    #main .pad ol {
      list-style-type: decimal;
    }
    
    #nav-top {
      border-bottom: thick solid #e8e8e8;
      border-top: thick solid #e8e8e8;
    }
    #nav-top a {
      color: red;
      border-right: thin solid #333333;
      display: block;
      padding: 0.5em 2em;
      text-align: center;
    }
    #nav-top a:hover {
      background-color: red;
      color: #ffffff;
    }
    #nav-top ul li {
      float: left;
    }
    
    #side-left {
      float: left;
      text-align: center;
      width: 18em;
    }
    
    #side-right {
      float: left;
      text-align: center;
      width: 18em;
    }
    
    /**
     * CSS properties for column variables.
     */
    
    .cols-2 {
      width: 58em;
    }
    
    .cols-3 {
      width: 40em;
    }
    
     
  2. 95vr4

    95vr4 OT Supporter

    Joined:
    Oct 6, 2004
    Messages:
    2,513
    Likes Received:
    0
    Location:
    Weddington, NC
    Code:
    <br/>
    KingToad
    <br/>
    <ol>
    <li>KingToad</li>
    <li>KingToad</li>
    <li>KingToad</li>
    <li>KingToad</li>
    <li>KingToad</li>
    <li>KingToad</li>
    <li>TEST</li>
    <li>TEST</li>
    
    Not sure exactly what the problem you're trying to describe is, but did you mean to have Kingtoads as part of the ordered list? It's not in the code you posted
     
  3. White Stormy

    White Stormy Take that, subspace!

    Joined:
    Sep 17, 2002
    Messages:
    85,489
    Likes Received:
    70
    Location:
    Sparkopolis
    no. I changed the html on the link to further demonstrate what's going on. to show that regular text and list item text are lining up together.

    normally when you use a list.. the list item marker is the left side of each list item row.. and the marker lines up where text would be if you weren't using a list.

    for some reason, my list item text is lining up where normal text would be.. and the marker is just flying off to the left. this is bad when I'm trying to contain everything inside a div.

    if that still isn't clear.. I would have expected the list text to be to the right of where it is. I'm not applying any positioning properties, so I'm just trying to determine why it's not where I thought it would be.
     
  4. White Stormy

    White Stormy Take that, subspace!

    Joined:
    Sep 17, 2002
    Messages:
    85,489
    Likes Received:
    70
    Location:
    Sparkopolis
    this is what I'm talking about..
    Code:
                KingToad<br />
                KingToad<br />
                KingToad<br />
                <ol>
                  <li>KingToad</li>
                  <li>KingToad</li>
                  <li>KingToad</li>
    
    The "KingToad"s above the list should not be lined up with the "KingToad"s inside the list, because the list item marker should push the list "KingToad"s out to the right.

    I already tried removing every class applied to #main or to the list, but it still lines up. is it a glitch in the CSS matrix?

    it lines up in FF3, Chrome, and IE7 (those are the only 3 I've tested), though in IE7 the list item markers (numbers) are not displayed.
     
  5. White Stormy

    White Stormy Take that, subspace!

    Joined:
    Sep 17, 2002
    Messages:
    85,489
    Likes Received:
    70
    Location:
    Sparkopolis
  6. White Stormy

    White Stormy Take that, subspace!

    Joined:
    Sep 17, 2002
    Messages:
    85,489
    Likes Received:
    70
    Location:
    Sparkopolis
    I got it.

    apparently padding: 0; on the ol does it, and since I have
    Code:
    * {
      background: transparent;
      margin: 0;
      padding: 0;
    }
    
    at the beginning, that was getting applied.

    I had no idea that padding-left: 0; on a list would have that effect. good to know.
     
    Last edited: Oct 18, 2008
  7. White Stormy

    White Stormy Take that, subspace!

    Joined:
    Sep 17, 2002
    Messages:
    85,489
    Likes Received:
    70
    Location:
    Sparkopolis
    tutorials I've seen before on using vertical lists for menus and stuff always say to put left: -20px; or something on each li

    this is WAY better.
     
  8. White Stormy

    White Stormy Take that, subspace!

    Joined:
    Sep 17, 2002
    Messages:
    85,489
    Likes Received:
    70
    Location:
    Sparkopolis
    minus whale lock the thread
     
  9. White Stormy

    White Stormy Take that, subspace!

    Joined:
    Sep 17, 2002
    Messages:
    85,489
    Likes Received:
    70
    Location:
    Sparkopolis
    so if a padding-left:0; got inherited by a list.. to what would you set the list padding to return it to normal? just make up a number? or is there a set default value?
     
  10. 95vr4

    95vr4 OT Supporter

    Joined:
    Oct 6, 2004
    Messages:
    2,513
    Likes Received:
    0
    Location:
    Weddington, NC
    ahh...yea mozilla uses padding to create the indent on a list. IE uses left-margin.
     
  11. kingtoad

    kingtoad OT Supporter

    Joined:
    Sep 2, 2003
    Messages:
    55,919
    Likes Received:
    10
    Location:
    Los Angeles
    Nice list :rofl:

    Just saw this.
     

Share This Page