Help with CSS alignment? Please?

Wednesday 7 April 2004

I’ve managed alright with the CSS for this site, but I’m still just a Salieri-like beginner (“Why give me the desire, but not the skill?!?”). There’s one bug on this site that I have not been able to squash. If there is a kind-hearted CSS guru out there who can help, I would be very grateful, and would be glad to trade services for the answer.

My archive page is organized by date, with the day of the month hanging in the left margin. When a number of entries occur on a single day, only the upper-most entry has the day, with the others below it with nothing in the margin. This works well, but the alignment of the entries is off in IE.

Here’s a screenshot, with Firefox on the left (perfect alignment), and IE 6 on the right (imperfect alignment). The pink rectangles are to highlight the misalignment at the left edge of the titles:

Side-by-side alignment comparison

The HTML looks like this:

<div class="archive">
<h1 id="h_January_2004">
<a href="blog/200401.html" class="s">January 2004</a>
</h1>
<p>
<span class="date">Sat 31: </span>
</p>
<p>
<a href="/blog/200401/ultrageeky_life_amusement.html" class="s">Ultra-geeky Life amusement</a>
</p>
<p>
<a href="/blog/200401/mars_scorecard.html" class="s">Mars scorecard</a>
</p>
</div>

and the CSS like this:

/* Archive page: make the dates hang left to align all the titles. */
.archive .date {
    float: left;
    width: 5em;
    text-align: right;
    padding: 0 .5em 0 0;
    margin-left: -5.5em;
    color: gray;
}

.archive p {
    margin: 0 0 0 5.5em;
    line-height: 1.45em;
}

I had a certain idea about the structure of the HTML code, but I don’t remember what it was. If the solution involves changing it, so be it. Someone, please help! How do I make the blog titles line up perfectly in both browsers?

Comments

[gravatar]
Will 9:27 PM on 7 Apr 2004

See andy budd's article on margin collapsing

I think you have a case of something collapsing somewhere.
Anyway I used the following to get it to 'fix'

body
{
background-color: blue;
}

.archive .date
{
float: left;
width: 5em;
text-align: right;
padding-left: 0em;
padding-right: 0em;
padding-top: 0em
padding-bottom: 0em;
margin-left: -5.5em;
margin-right: 0em;
margin-top: 0em;
margin-bottom: 0em;
border-top: 0px;
border-bottom: 1px;
border-left: 0px;
border-right: 0px;
border-color: black;
border-style: solid;
color: white;
background-color: red;
}

.archive p
{
padding-left: 0em;
padding-right: 0em;
padding-top: 0em
padding-bottom: 0em;
margin-left: 5.5em;
margin-right: 0em;
margin-top: 0em;
margin-bottom: 0em;
line-height: 1.45em;
background-color: green;
color: white;
}

[gravatar]
Simon Willison 9:29 PM on 7 Apr 2004

That's the IE three-pixel-gap bug. Check out the rest of Position is Everything for lots of great info on obscure browser bugs.

[gravatar]
Will 11:12 PM on 7 Apr 2004

How about this which uses positioning rather than floats.... because I dislike the hack solutions to the 3px problem.

body
{
background-color: blue;
}

.archive div.blogdategroup
{
position: relative;
background-color: yellow;
margin-left: 5.5em;
margin-top: 0em;
margin-right: 0em;
margin-bottom: 0em;
left: 0em;
top: 0em;
}

.archive .blogdategroup .blogentries
{
padding-left: 0em;
padding-right: 0em;
padding-top: 0em
padding-bottom: 0em;
margin-left: 0em;
margin-right: 0em;
margin-top: 0em;
margin-bottom: 0em;
line-height: 1.45em;
background-color: green;
color: white;
list-style-type: none;
}

.archive .blogdategroup .blogdate
{
position: absolute;
left: -5.5em;
top: 0em;
width: 5em;
text-align: right;
padding-left: 0em;
padding-right: 0em;
padding-top: 0em
padding-bottom: 0em;
margin-left: 0em;
margin-right: 0em;
margin-top: 0em;
margin-bottom: 0em;
color: white;
background-color: red;
}

<div class="archive">

<h1 id="h_January_2004">
<a href="blog/200401.html" class="s">January 2004</a>
</h1>

<div class="blogdategroup">
<p class="blogdate">Sat 31:</p>
<ul class="blogentries">
<li><a href="blog/200401.html#e20040131T172516" class="s">Ultra-geeky Life amusement</a></li>
<li><a href="blog/200401.html#e20040131T082234" class="s">Mars scorecard</a></li>
<li><a href="blog/200401.html#e20040131T082234" class="s">More Text</a></li>
</ul>
</div>

<div class="blogdategroup">
<p class="blogdate">Sat 31:</p>
<ul class="blogentries">
<li><a href="blog/200401.html#e20040131T172516" class="s">Ultra-geeky Life amusement</a></li>
<li><a href="blog/200401.html#e20040131T082234" class="s">Mars scorecard</a></li>
<li><a href="blog/200401.html#e20040131T082234" class="s">More Text</a></li>
</ul>
</div>

</div>

[gravatar]
No' 6:39 AM on 8 Apr 2004

Yep, already seen that 3px bug somewhere. I can even remember a CSS style sheet where you it read "IE hack - may it burn in hell" in the comments.

[gravatar]
Ned Batchelder 6:44 AM on 9 Apr 2004

It was definitely the 3px bug, and it was definitely beyond my ability to fix it.

Will, I appreciate your efforts, and the second sample you posted looked good, but when applied to the whole page, there were some irksome vertical misalignments that I couldn't deal with.

In the end, I took advantage of the fact that my float is always one line high. I faked the float by giving it a negative bottom margin, and now it looks good in both browsers. Thanks all.

[gravatar]
Peter Damoc 2:52 AM on 10 Apr 2004

I'm no css guru but you can try this:

in css file

dl.archive dt{
float:left;
width:80px;
text-align:right;
}

dl.archive dd{
margin-left:100px;
}

in html


Sat 31:
bla bla
bla bla2
Wed 28:
bla bla
bla bla2


after all, it is a definition list :D your entries defining that day :D

[gravatar]
Peter Damoc 2:56 AM on 10 Apr 2004

correction

in html


day:


entry 1


entry 2


Add a comment:

Ignore this:
Leave this empty:
Name is required. Either email or web are required. Email won't be displayed and I won't spam you. Your web site won't be indexed by search engines.
Don't put anything here:
Leave this empty:
URLs auto-link and some tags are allowed: <a><b><i><p><br><pre>.