Wednesday 7 April 2004 — This is over 20 years old. Be careful.
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:
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
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;
}
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>
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.
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
in html
day:
entry 1
entry 2
Add a comment: