Notas al pie de una imagen

[sjam7]

Hola, estoy creando un portal y estoy empezando a maquetar todo con CSS dejando a un lado las tablas, ahora lo que quiero hacer es en el area de noticias poner una nota al pie de una foto dentro del texto del articulo.

El CSS de la "tabla" esta asi:

Código HTML:

<div style="margin-top:5px; margin-bottom:10px">
<div align="left" style="background-image:url(images/fondopestana.jpg); background-repeat:repeat-x; border:1px solid #f96; width:360px; margin-top:10px; padding:3px; color:#006; border:1px solid #f63; font-weight:bold">
<div style="background-image:url(images/listaiconos4.gif);<%=icono%> ; background-repeat:no-repeat; padding-left:25px; height:18px"> TITULO DE LA NOTICIA</div></div>
    <div align="left" style="width:360px; padding:3px; border:1px solid #f93; border-top:0">

<div align="right" style="float:right"><img src="<%=imagen%>" align="left" style="margin:5px; border: 2px solid #ccc" alt="<%=rs("titulo")%>"><br clear="left">
<span style="font-size:9px"><%=rs("notaimagen")%></span>
</div>


 <div style="font-family:Tahoma, Arial, Verdana; font-weight:bold; font-size:11px; color:#666"><%=comentario%></div>


<%if id<>"" then%>
    <div style="font-family:Tahoma, Arial, Verdana; font-weight:normal; font-size:11px; color:#575757; margin-top:10px"><%=contenido%></div>

<%if rs("origen")<>"" then%>
<br clear="all">
<div style="font-size:11px">Fuente: <a href="<%if instr(rs("enlaceorigen"),"http://") then response.write rs("enlaceorigen") else response.write "http://"&rs("enlaceorigen")%>" target="_blank"><%=rs("origen")%></a></div><%end if%>

<%else%>
<p align="right" style="font-size:11px">
<%if rs("videourl")<>"" then%>
    <a href="videos.asp?id=<%=rs("id")%>" class="video">Ver video</a>
<%end if%>

<a href="noticias.asp?id=<%=rs("id")%>&amp;cat=<%=rs("categoria")%>" class="search">Ver nota completa</a>
</p><br clear="all">

<%end if%>
    </div>
</div> 

Perdon el codigo ASP que va pero solo es para mostrar o no algunas cosas, lo que esta en negritas es la parte de la foto, quiero que se vea la foto y una nota de esa imagen abajo de ella en un recuadro sin marcos

Actualmente esta asi: www.ajalas.com/noticias.asp?id=514

Y lo que quiero es esto:
http://www.mx.terra.com/ligaseuropea...EI4270,00.html

Pueden ver que incluso en el ejemplo hay texto arriba y abajo de la foto, en la mia el texto se alarga en una sola linea y se recorre la foto, por lo menos en Firefox.

¿Como podria hacer lo que quiero?
¿Tengo divitis?

[tunait]

Buenas,

en mi firefox me sale el texto bajo la imagen en dos líneas

[sjam7]

si, hice unos cambios y parece que se acerca a lo que deseo, lo voy a probar en IE y pongo los cambios que le hice, a ver si es la forma correcta de hacerlo

[sjam7]

Como siempre IE haciendo la diferencia y como casi siempre para mal

En el IE me muestra el texto en una sola linea y me recorre la imagen, lo tengo asi:

Código HTML:

<div style="float:right">
<img src="imagen.gif" align="left" style="margin:5px; border: 2px solid #ccc">
<br clear="all">
        <div style="margin-top:-5px; margin-left:5px; font-size:9px; max-width:150px; text-align:left; color:#666; font-style:italic">
NOTA AL PIE
</div>
    </div> 

[tunait]

sjam7, no veo nota al pie de imagen ... ¿estas haciendo cambios ahora?


Agrego: IE no reconoce el atributo min-width ni max-width, debes aplicarle el width directamente

[sjam7]

si, por ahora lo quite por que me descompuso el diseño de la pagina, estoy haciendo pruebas en local pero no encuentro como

[tunait]

¿Has probado cómo se comporta IE usando width en luegar de max-width?

[sjam7]

voy a problarlo pero como todo es dinamico, las fotos no son siempre del mismo tamaño por eso habia intentado hacerlo con valores relativos pero intentare eso que dices y te comento