TECH how is this happening? v.WTF CSS

White Stormy

Take that, subspace!
Sep 17, 2002
85,544
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;
}
 

95vr4

OT Supporter
Oct 6, 2004
2,503
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
 
TS
TS
White Stormy

White Stormy

Take that, subspace!
Sep 17, 2002
85,544
Sparkopolis
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

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.
 
TS
TS
White Stormy

White Stormy

Take that, subspace!
Sep 17, 2002
85,544
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.
 
TS
TS
White Stormy

White Stormy

Take that, subspace!
Sep 17, 2002
85,544
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:
TS
TS
White Stormy

White Stormy

Take that, subspace!
Sep 17, 2002
85,544
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.
 
TS
TS
White Stormy

White Stormy

Take that, subspace!
Sep 17, 2002
85,544
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?
 

Users who are viewing this thread

About Us

  • Please do not post anything that violates any Local, State, Federal or International Laws. Your privacy is protected. You have the right to be forgotten. Site funded by advertising, link monetization and member support.
OT v15.8.1 Copyright © 2000-2022 Offtopic.com
Served by fu.offtopic.com

Online statistics

Members online
445
Guests online
41
Total visitors
486

Forum statistics

Threads
369,481
Messages
16,888,404
Members
86,873
Latest member
vitalesan