problemas con estilos en firefox para hacer una lista

fedxs · #1 (**permalink**) 16/04/2010, 13:01

Hola quisiera saber si me podrian ayudar a resolver una lista que cuando la abro en firefox me trae problemas cuando le coloco un link.

Este es el link donde tengo esta pagina y si lo ven en firefox podran observar que se mueve toda la lista.

Gracias!

http://www.f3ndesign.com/profexor/list.html

Este es el ejemplo de mi boton:

<div id="course_name">
<a href="#">
<div id="course_icon">
<div class="css_icon">
</div>
</div>
<div id="course_text">
<div class="course_title">CSS</div>
<div class="course_description">
Aqui va la casa que desarrolla el programa
</div>
<div class="course_author">
Author: Aqui va la casa que desarrolla el programa
</div>
</div>
<div id="course_info">
<div class="course_time">
12h:15m
</div>
<div class="course_chapter_number">
21 Capítulos
</div>
</div>
</a>
</div>

Estos son los estilos que le estoy dando en el css:

#main_content #list_content {
float: left;
height: auto;
width: 960px;
background-image: url(../images/bg/bg_list_content.png);
background-repeat: repeat-y;
}

#coming_soon_title {
font-family: Arial, Helvetica, sans-serif;
color: #0bbccc;
font-weight: normal;
font-size: 12px;
text-decoration: none;
margin-top: 30px;
float: left;
width: 680px;
}

#letter_alphabetic_title {
font-family: Arial, Helvetica, sans-serif;
color: #0bbccc;
font-weight: normal;
font-size: 12px;
text-decoration: none;
margin-top: 10px;
float: left;
width: 630px;
margin-bottom: 10px;
background-color: #333834;
margin-right: 40px;
padding-left: 10px;
}

/*course*/

#course_name {
float: left;
height: 70px;
width: 680px;
margin-right: 0px;
background-image: url(../images/bg/bg_course_name_link.png);
background-repeat: no-repeat;
margin-bottom: 0px;
text-decoration: none;
}

#course_icon {
float: left;
height: 70px;
width: 60px;
margin: 0px;
}

#course_text {
float: left;
width: 400px;
height: 70px;
font-family: Arial, Helvetica, sans-serif;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 10px;
text-decoration: none;
}

#course_info {
float: left;
height: 70px;
width: 160px;
padding: 0px;
margin-top: 0px;
margin-right: 40px;
margin-bottom: 0px;
margin-left: 10px;
text-decoration: none;
}

.course_title {
font-family: Arial, Helvetica, sans-serif;
color: #0bbccc;
font-weight: normal;
font-size: 12px;
text-decoration: none;
margin-top: 10px;
float: left;
height: auto;
width: 400px;
}

.course_description {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #999f94;
margin-top: 5px;
float: left;
height: auto;
width: 400px;
text-decoration: none;
}

.course_author {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
color: #999f94;
margin-top: 5px;
width: 400px;
float: left;
height: auto;
text-decoration: none;
}

.course_time {
font-family: Arial, Helvetica, sans-serif;
color: #0bbccc;
font-weight: normal;
font-size: 12px;
text-decoration: none;
margin-top: 10px;
text-align: right;
margin-right: 10px;
float: left;
width: 150px;
height: auto;
}

.course_chapter_number {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #999f94;
margin-top: 5px;
text-align: right;
margin-right: 10px;
float: left;
width: 150px;
height: auto;
text-decoration: none;
}
/*/course*/

/*course a*/

/*bg don't change*/
#course_name a {
float: left;
height: 70px;
width: 680px;
background-image: url(../images/bg/bg_course_name_link.png);
background-repeat: no-repeat;
text-decoration: none;
}
/*/bg don't change*/

#course_icon a {
float: left;
height: 70px;
width: 60px;
margin: 0px;
}

#course_text a {
float: left;
width: 400px;
height: 70px;
font-family: Arial, Helvetica, sans-serif;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 10px;
text-decoration: none;
}

#course_info a {
float: left;
height: 70px;
width: 160px;
margin-left: 10px;
margin-right: 40px;
}

.course_title a {
font-family: Arial, Helvetica, sans-serif;
color: #0bbccc;
font-weight: normal;
font-size: 12px;
text-decoration: none;
margin-top: 10px;
float: left;
width: 400px;
}

.course_description a {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #999f94;
margin-top: 5px;
float: left;
width: 400px;
text-decoration: none;
}

.course_author a {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
color: #999f94;
margin-top: 5px;
float: left;
width: 400px;
text-decoration: none;
}

.course_time a {
font-family: Arial, Helvetica, sans-serif;
color: #0bbccc;
font-weight: normal;
font-size: 12px;
text-decoration: none;
margin-top: 10px;
text-align: right;
margin-right: 10px;
float: left;
width: 150px;
}

.course_chapter_number a {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #999f94;
margin-top: 5px;
text-align: right;
margin-right: 10px;
float: left;
width: 150px;
text-decoration: none;
}

/*/course a*/

/*course a:hover*/

/*bg change*/
#course_name a:hover {
float: left;
height: 70px;
width: 680px;
background-image: url(../images/bg/bg_course_name_hover.png);
background-repeat: no-repeat;
text-decoration: none;
}
/*/bg change*/

#course_icon a:hover {
float: left;
height: 70px;
width: 60px;
margin: 0px;
}

#course_text a:hover {
float: left;
width: 400px;
height: 70px;
font-family: Arial, Helvetica, sans-serif;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 10px;
text-decoration: none;
}

#course_info a:hover {
float: left;
height: 70px;
width: 160px;
margin-left: 10px;
margin-right: 40px;
text-decoration: none;
}

.course_title a:hover {
font-family: Arial, Helvetica, sans-serif;
color: #0bbccc;
font-weight: normal;
font-size: 12px;
text-decoration: none;
margin-top: 10px;
float: left;
width: 400px;
}

.course_description a:hover {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #999f94;
margin-top: 5px;
float: left;
width: 400px;
text-decoration: none;
}

.course_author a:hover {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
color: #999f94;
margin-top: 5px;
float: left;
width: 400px;
text-decoration: none;
}

.course_time a:hover {
font-family: Arial, Helvetica, sans-serif;
color: #0bbccc;
font-weight: normal;
font-size: 12px;
text-decoration: none;
margin-top: 10px;
text-align: right;
margin-right: 10px;
float: left;
width: 150px;
}

.course_chapter_number a:hover {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #999f94;
margin-top: 5px;
text-align: right;
margin-right: 10px;
float: left;
width: 150px;
text-decoration: none;
}

/*/course a:hover*/

/*carrers*/
#career_name {
float: left;
height: 100px;
width: 680px;
background-image: url(../images/bg/bg_career_name_link.png);
margin: 0px;
clear: left;
}

#career_icon {
float: left;
height: 100px;
width: 130px;
margin-top: 0px;
margin-right: 10px;
margin-bottom: 0px;
margin-left: 0px;
}
#career_text {
margin: 0px;
float: left;
width: 330px;
height: 100px;
font-family: Arial, Helvetica, sans-serif;
text-decoration: none;
}
#career_info {
float: left;
height: 100px;
width: 160px;
margin-right: 0px;
margin-left: 10px;
text-decoration: none;
}

.career_title {
font-family: Arial, Helvetica, sans-serif;
color: #0bbccc;
font-weight: normal;
font-size: 12px;
text-decoration: none;
margin-top: 10px;
float: left;
width: 330px;
}
.career_description {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #999f94;
margin-top: 5px;
float: left;
width: 330px;
text-decoration: none;
}
.career_author {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
color: #999f94;
margin-top: 5px;
float: left;
width: 330px;
text-decoration: none;
}
.career_time {
font-family: Arial, Helvetica, sans-serif;
color: #0bbccc;
font-weight: normal;
font-size: 12px;
text-decoration: none;
margin-top: 10px;
text-align: right;
margin-right: 10px;
width: 150px;
}
.career_chapter_number {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #999f94;
margin-top: 5px;
text-align: right;
margin-right: 10px;
width: 150px;
text-decoration: none;
}

.course_title_coming_soon {
font-family: Arial, Helvetica, sans-serif;
color: #999f94;
font-weight: normal;
font-size: 12px;
text-decoration: none;
margin-top: 10px;
}

.course_launch {
font-family: Arial, Helvetica, sans-serif;
color: #0bbccc;
font-weight: normal;
font-size: 12px;
text-decoration: none;
margin-top: 10px;
text-align: right;
margin-right: 10px;
}

/*-----------ICONS--------------------------------------*/
/*Adobe Softwares*/

.css_icon {
height: 40px;
width: 40px;
margin-top: 15px;
margin-right: auto;
margin-bottom: 15px;
margin-left: auto;
background-image: url(../images/course_icons/web/css.png);
background-repeat: no-repeat;
}

/*-----------END ICONS--------------------------------------*/

emprear · #2 (**permalink**) 16/04/2010, 16:05

FedXs

El código css y html es demasiado extenso para analizarlo a fondo y que no se pase por alto algun detalle. He visto tu página con IE/7/8 Firefox 3.6 y Opera 10, te cuento algunos detalles, en IE tu background aparece al tope de la página lo que le da un buen efecto, pero en Firefox y Opera solo empieza a visualizarse a mitad de página.
en Opera el menú lateral se vé algo distorsionado en el link "Cambiar tarjeta de crédito e información de facturación" En cuanto a la lista central, la que comienza con 3D Studio Max, se ve bien en todos, bueno, aunque tampoco encontré en esa lista ningún vínculo. Así que tu

Cita:

cuando la abro en firefox me trae problemas cuando le coloco un link.

no se bien a que se refiere.
saludos