CODEWITHSUNDEEP
htmlcssfirebug
alex
alex

Reputation: 490481

Text not aligning in HTML using CSS

Here is my markup

     <div class="code php">
        <div class="container">
        <div class="line-numbers">1
 2
 3
 4
 5
 6
 7
 8
 9
 10
 11
 12
 13
 14
 15 </div>
        <code>
    <?php
        $people = array('henry', 'foo', array('jeff', 'bar'), 'tom', 'barry');

        foreach($people as $person) {

            if (is_array($person) {
                  foreach($person as $innerPerson) {
                      if ($innerPerson == 'bar') {
                          break 2;
                      }              
                   }
            }
        }
    ?>
        </code>
        </div>
        </div>

UPDATE

Fixed formatting for above. Was important because it uses white-space: pre in the CSS.

And here is my CSS

.code {
    display: block;
    margin: 1em 0 1em 0.3em;
    padding: 0.8em;

}

.code .container {
    background: #efe;
    white-space: pre;
    border-left: 3px solid #6d9743;
    font-size: 1em;
    line-height: 1.1em;
    padding: 0.8em;

}

.code .caption {
    display: block;
    font-size: 90%;
    margin-top: 0.5em;
    color: #333;
}

code,
.code .line-numbers {
    font-family: Consolas, Monaco, Lucida Console, Liberation Mono, Courier New, serif;
    border: 0px solid red;
}

.code .line-numbers {
    float: left;
    padding-right: 0.8em;
    color: #ccc;
}

And here is what is happening!

damn http://alexanderdickson.com/so.png

Notice how the line numbers are not matching up? It used to work perfectly. I recently played around with it a lot, to allow myself to add a caption and I think I've buggered it. (I really do need to look into version control!)

Can anyone see what I'm doing wrong? I've tried line height, padding, etc and examined as best as I could with Firebug.

Thanks

ANOTHER UPDATE

Real live example here: http://www.alexanderdickson.com/articles/php/exiting-a-loop-early/

Note: I have tried removing all the code formatting (all the <spans> etc) but there is still a problem!

FIXED

It is now working with this CSS

.code {
    display: block;
    margin: 1em 0 1em 0.3em;
    padding: 0.8em;

}

.code .container {
    background: #efe;
    border-left: 3px solid #6d9743;
    font-size: 1em;
    line-height: 1.5em;
    padding: 0.8em;
    white-space: pre;
    font-family: Consolas, Monaco, Lucida Console, Liberation Mono, Courier New, serif;

}

.code .line-numbers {
    float: left;
    padding-right: 0;
    color: #ccc;
    width: 2em;
}

.code .caption {
    display: block;
    font-size: 90%;
    margin-top: 0.5em;
    color: #333;
}

Upvotes: 0

Views: 584

Answers (3)

Martin
Martin

Reputation: 11041

Try adding the line-height to the .line-numbers

This works for me:

.code {
    display: block;
    margin: 1em 0 1em 0.3em;
    padding: 0.8em;

}

.code .container {
    background: #efe;
    white-space: pre;
    border-left: 3px solid #6d9743;
    font-size: 1em;
    line-height: 1.5em;
    padding: 0.8em;

}

code {
margin: 0;
padding: 0;
}

.code .caption {
    display: block;
    font-size: 90%;
    margin-top: 0.5em;
    color: #333;
}

code, .code .line-numbers {
    font-family: Consolas, Monaco, Lucida Console, Liberation Mono, Courier New, serif;
    border: 0px solid red;
}

.code .line-numbers {
    float: left;
    padding-right: 0;
    color: #ccc;
    line-height:1.5em;
    padding-top: 2px;
    width: 20px;
}

I will try to post a screenshot.

Here is my HTML:

<html>
<head>
    <link rel="stylesheet" href="test.css" type="text/css" />
</head>
<body>    
 <div class="code php">
        <div class="container">
        <div class="line-numbers">
 1
 2
 3
 4
 5
 6
 7
 8
 9
 10
 11
 12
 13
 14
 15 </div>
        <code>
    &lt;?php
        $people = array('henry', 'foo', array('jeff', 'bar'), 'tom', 'barry');

        foreach($people as $person) {

            if (is_array($person) {
                  foreach($person as $innerPerson) {
                      if ($innerPerson == 'bar') {
                          break 2;
                      }              
                   }
            }
        }
    ?&gt;
        </code>
        </div>
    </div>
</div>
</body>

alt text

Upvotes: 2

Elizabeth Buckwalter
Elizabeth Buckwalter

Reputation: 968

You have a space in your class: "code php"

[edit: no coffee]

Remove complexity. What is in your code class definition? In your php class definition? If php comes comes second and you're changing code, your changes won't show. Side note: use something more descriptive than code, since code is an element name. I'm pretty sure it doesn't matter, but it helps readability and prevents simple errors like the difference between code and .code not to mention #code.

Upvotes: 0

Wayne Austin
Wayne Austin

Reputation: 2989

your calling a class ".code" in your css, but code is a tag not a class, so it'd be just "code" in your css

Upvotes: 1

Related Questions