weirdest problem with a definition list

[resplence]

Hello.
I'm new to the forum but relatively used to CSS, so it's really bumming me out that I can't get a clue on what's wrong with this:

I tried building an events calendar using a definition list, and I need to use a corresponding image to each event. Since I'm not the one who's going to update the site after it's been delivered, and I don't know if whoever's in charge has the slightest knowledge of css, I thought it was best to link the images directly from the html markup, as a list item, so it'd be safer for the general layout when updated. Here's the html markup for it:

Code: Select all

    <div id="conteudo">

        <h4>2005</h4>    
    
        <dl class="evento">
        <dt>8 de Março</dt>
        <dd><a href="080305.html" title="8 de Março - Dia Internacional da Mulher">Dia Internacional da Mulher</a></dd>
        <dd><img src="img/080305.gif" height="50" width="75"</dd>
        <dt>25 de Novembro</dt>
        <dd><a href="251105.html" title="25 de Novembro - Dia Internacional da Não-Violência Contra as Mulheres">Dia Internacional da Não-Violência Contra as Mulheres</a></dd>
        <dd><img src="img/251105.gif" height="50" width="75"</dd>
        </dl>
                
    </div>

And how it displays with no style applied:



I'm pretty content with that, and I didn't even try styling the list's layout. But when i first checked it with the css on, that's what I got:



The images totally overlap everything, and the images only. The only style I applied was a top margin, and that was for the entire list. I lost almost an entire day of work looking for the issue; looked through parent divs, concurrent rules previously stated, the whole thing; but could not find anything wrong with both the css and the html, and only made it worse, if that's possible, when trying to fix it.

So, if anyone could help me, I'd really appreciate it.

Here's the page http://magasin.letzebuerg.org/crmm/eventos.html
Here's the css http://magasin.letzebuerg.org/crmm/css/css.css

Thanks.

[edit: typos]

[herkalees]

Oooooo I want to figure this out, but I'm off to dinner with my girl. I'll be back later to take a stab at it...

[herkalees]

First, you have two code errors:
1. The two images in question aren't closed at all:

Code: Select all

<dl class="evento">
<dt>8 de Março</dt>
<dd><a href="080305.html" title="8 de Março - Dia Internacional da Mulher">Dia Internacional da Mulher</a></dd>
<dd><img src="img/080305.gif" height="50" width="75" /></dd>
<dt>25 de Novembro</dt>
<dd><a href="251105.html" title="25 de Novembro - Dia Internacional da Não-Violência Contra as Mulheres">Dia Internacional da Não-Violência Contra as Mulheres</a></dd>
<dd><img src="img/251105.gif" height="50" width="75" /></dd>
</dl>

2. One of the CSS selectors isn't closed either:

Code: Select all

dl.evento {
margin: 1em 0;
padding: 0;
}
/* cursos
*/

And suprisingly, after all that, the images still don't look how you want them. But, if you remove this selector, it works perfectly:
#conteudo img {
margin-top: -150px;
margin-right: 5px;
float: right;
}
So, remove that, hooray!

[resplence]

Wow, thank you! It's true that if you spend too much time lookin through a code it'll start looking all the same. I looked all over for some selector applied to an img tag and totally missed that.

I had set that selector temporarily to check some positioning in the index and forgot erasing it later. Amazing the time I lost because of something insignificant like that. Lazy coding anyway!

Thank you one more time