Foros del Web » Creando para Internet » CSS »

compatibilidad IE v/s Firefox CSS menu desplegable

 Estas en el tema de compatibilidad IE v/s Firefox CSS menu desplegable en el foro de CSS en Foros del Web. En una pagina web realizada en joomla colocamos un menu desplegado llamado jscookmenu, este tiene varios css bastante básico y feo que modificamos, pero al ...
  #1 (permalink)  
Antiguo 19/06/2008, 14:37
Avatar de fanny0  
Fecha de Ingreso: noviembre-2004
Mensajes: 438
Antigüedad: 19 años, 5 meses
Puntos: 1
compatibilidad IE v/s Firefox CSS menu desplegable
En una pagina web realizada en joomla colocamos un menu desplegado llamado jscookmenu, este tiene varios css bastante básico y feo que modificamos, pero al modificarlos,tengo muchos problemas de compatibilidad con el IE y el firefox

Este css siguiente se ve bien en el ie, pero en firefox se me desconfigura bastante...y además tampoco se ve una manito al pasar por sobre los menus..o links, inclusive es más al ser el menu vertical y no horizontal pierde de el css

Alguien puede visualizar algunos errores que me puedan ayudar a modificarlo y que quede bien!! yo intentado un montón de cosas y así es como me quedó más decente, pero se ve muy feo en firefox hasta el momento

Gracias



Cita:
.ThemeIEMenuH {
color:#FFFFFF;
}
.ThemeIEMenuV,
.ThemeIESubMenuTable {
cursor: auto;
font-family: verdana, arial, sans-serif;
font-size: 13px;
border: 0;
white-space: nowrap;
color:#FFFFFF;
padding-top:15px;

}

.ThemeIEMenuH,
.ThemeIEMenuV {
background-image: none;
background-repeat: repeat;
background-attachment: scroll;
background-x-position: 0%;
background-y-position: 0%;
}

.ThemeIEMenuV {
width: 100%;
}

.ThemeIEMenuH span {
vertical-align:bottom;
line-height: 20px;
padding-top: 4px;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 5px;

}

.ThemeIESubMenu {
position: absolute;
visibility: hidden;

/*
Netscape/Mozilla renders borders by increasing
their z-index. The following line is necessary
to cover any borders underneath
*/
z-index: 100px;
border: 0px;
padding: 0px;

filter:progid:DXImageTransform.Microsoft.Shadow(co lor=#848A84, Direction=135, Strength=4);
}

.ThemeIESubMenuTable {
margin-top:10px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
background-image: url(../../../templates/rhuk_solarflare_ii/images/headerBG.png);
border: 1px solid #b3e3ff;
}

.ThemeIESubMenuTable td {
white-space: nowrap;
background-color: #0066a6;
background-repeat: repeat;
background-attachment: scroll;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #b3e3ff;
border-right-color: #b3e3ff;
border-bottom-color: #b3e3ff;
border-left-color: #b3e3ff;
}



.ThemeIEMainItem,
.ThemeIEMainItemHover,
.ThemeIEMainItemActive,
.ThemeIEMenuItem,
.ThemeIEMenuItemHover,
.ThemeIEMenuItemActive {
padding-left: 0px;
padding-right: 0px;
white-space: nowrap;

}

.ThemeIEMainItemHover,
.ThemeIEMainItemActive,
.ThemeIEMenuItemHover,
.ThemeIEMenuItemActive {
background-color: #0066a6;
background-image: url(../../../templates/rhuk_solarflare_ii/images/headerBG.png);
background-repeat: repeat;
background-attachment: scroll;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #b3e3ff;
border-right-color: #b3e3ff;
border-bottom-color: #b3e3ff;
border-left-color: #b3e3ff;
}

.ThemeIEMenuSplit {
height: 0px;
margin-top: 0px;
margin-bottom: 0px;
overflow: hidden;
background-color: inherit;
border-top: 0px solid #ADAA9C;
}

.ThemeIEMenuVSplit {
width: 0px;
margin: 0px;
overflow: hidden;
background-color: inherit;
border-right: 0px solid #ADAA9C;
}

/* image shadow animation */

/*
seq1: image for normal
seq2: image for hover and active

To use, in the icon field, input the following:
<img class="seq1" src="normal.gif" /><img class="seq2" src="hover.gif" />
*/

.ThemeIEMainItem img.seq1,
.ThemeIEMenuItem img.seq1 {
display: inline;
}

.ThemeIEMainItemHover img.seq2,
.ThemeIEMainItemActive img.seq2,
.ThemeIEMenuItemHover img.seq2,
.ThemeIEMenuItemActive img.seq2 {
display: inline;
}

.ThemeIEMainItem img.seq2,
.ThemeIEMainItemHover img.seq1,
.ThemeIEMainItemActive img.seq1,
.ThemeIEMenuItem img.seq2,
.ThemeIEMenuItemHover img.seq1,
.ThemeIEMenuItemActive img.seq1 {
display: none;
}

ThemePanelMenuV tr.ThemePanelMainItem td.ThemePanelMainItemText

{
padding-top: 3px;
padding-bottom: 3px;
padding-left: 10px;
padding-right: 10px;
}
  #2 (permalink)  
Antiguo 20/06/2008, 11:52
 
Fecha de Ingreso: febrero-2008
Mensajes: 578
Antigüedad: 16 años, 2 meses
Puntos: 3
Respuesta: compatibilidad IE v/s Firefox CSS menu desplegable
Hola fanny0:

antes de poder visualizar errores, te recomiendo que simplifiques el archivo de CSS, ya que en primer lugar se hace inentendible, y en segundo lugar te ocupa mucho más espacio.
  #3 (permalink)  
Antiguo 20/06/2008, 12:54
Avatar de fanny0  
Fecha de Ingreso: noviembre-2004
Mensajes: 438
Antigüedad: 19 años, 5 meses
Puntos: 1
Respuesta: compatibilidad IE v/s Firefox CSS menu desplegable
no, es que sabe que no se puede achicar, el template lo pesca así y no de otra manera...lo que cambié yo fueron los css, pero está así...por ello a mi igual me costó modificarlo...de todas maneras al parecer ya me ha resultado en los dos navegadores pero cambié el template por uno que viene también por defecto, pero arreglandolo igualmente

y este por lo menos se ve igual en los dos navegadores, lo que no...es la manito...

Cita:
/* ThemeOfficeMenu Style Sheet */

.ThemeOfficeMenuH{
color:#FFFFFF;
}
.ThemeOfficeMenuV,
.ThemeOfficeSubMenuTable {
font-family: verdana, arial, sans-serif;
font-size: 11px;
padding: 0;
white-space: nowrap;
cursor: default;
color:#FFFFFF;

}

.ThemeOfficeMenuV {
width: 100%;
}

.ThemeOfficeMenuH span {
vertical-align:bottom;
}

.ThemeOfficeSubMenu {
margin-top:10px;
position: absolute;
visibility: hidden;

/*
Netscape/Mozilla renders borders by increasing
their z-index. The following line is necessary
to cover any borders underneath
*/
z-index: 100;
border: 0;
padding: 1px;


overflow: visible;


filter:progid:DXImageTransform.Microsoft.Shadow(co lor=#BDC3BD, Direction=135, Strength=4);
}

.ThemeOfficeSubMenuTable {
overflow: visible;
}

.ThemeOfficeMainItem,
.ThemeOfficeMainItemHover,
.ThemeOfficeMainItemActive,
.ThemeOfficeMenuItem,
.ThemeOfficeMenuItemHover,
.ThemeOfficeMenuItemActive {
border: 0;
cursor: default;
white-space: nowrap;
}

.ThemeOfficeMainItem {
background-color: ;
}

.ThemeOfficeMainItemHover,
.ThemeOfficeMainItemActive {
background-image: url(../../../templates/rhuk_solarflare_ii/images/botton_off.jpg);
}

.ThemeOfficeMenuItem {
background-color: #0066a6;
}

.ThemeOfficeMenuItemHover,
.ThemeOfficeMenuItemActive {
background-image: url(../../../templates/rhuk_solarflare_ii/images/botton_off.jpg);
}


/* horizontal main menu */

.ThemeOfficeMenuH .ThemeOfficeMainItem {
padding: 8px 8px 5px 5px;
border: 0;
}

.ThemeOfficeMenuH td.ThemeOfficeMainItemHover,
.ThemeOfficeMenuH td.ThemeOfficeMainItemActive {
padding: 8px 8px 5px 5px;
border: 1px solid #b3e3ff;
}

.ThemeOfficeMainFolderLeft,
.ThemeOfficeMainItemLeft,
.ThemeOfficeMainFolderText,
.ThemeOfficeMainItemText,
.ThemeOfficeMainFolderRight,
.ThemeOfficeMainItemRight {
background-color: inherit;
}

/* vertical main menu sub components */

.ThemeOfficeMenuV td.ThemeOfficeMainFolderLeft,
.ThemeOfficeMenuV td.ThemeOfficeMainItemLeft {
padding-top: 10px;
padding-bottom: 5px;
padding-left: 0px;
padding-right: 2px;

border-top: 1px solid #b3e3ff;
border-bottom: 1px solid #b3e3ff;
border-left: 1px solid #b3e3ff;


background-color: inherit;
}

.ThemeOfficeMenuV td.ThemeOfficeMainFolderText,
.ThemeOfficeMenuV td.ThemeOfficeMainItemText {
padding-top: 10px;
padding-bottom: 5px;
padding-left: 5px;
padding-right: 5px;

border-top: 1px solid #b3e3ff;
border-bottom: 1px solid #b3e3ff;

background-color: inherit;
white-space: nowrap;
}

.ThemeOfficeMenuV td.ThemeOfficeMainFolderRight,
.ThemeOfficeMenuV td.ThemeOfficeMainItemRight {
padding-top: 10px;
padding-bottom: 5px;
padding-left: 0px;
padding-right: 0px;

border-top: 1px solid ##b3e3ff;
border-bottom: 1px solid #b3e3ff;
border-right: 1px solid #b3e3ff;

background-color: inherit;
}

.ThemeOfficeMenuV tr.ThemeOfficeMainItem td.ThemeOfficeMainFolderLeft,
.ThemeOfficeMenuV tr.ThemeOfficeMainItem td.ThemeOfficeMainItemLeft {
padding-top: 10px;
padding-bottom: 5px;
padding-left: 1px;
padding-right: 2px;

white-space: nowrap;

border: 0;
background-color: inherit;
}

.ThemeOfficeMenuV tr.ThemeOfficeMainItem td.ThemeOfficeMainFolderText,
.ThemeOfficeMenuV tr.ThemeOfficeMainItem td.ThemeOfficeMainItemText {
padding-top: 10px;
padding-bottom: 5px;
padding-left: 5px;
padding-right: 5px;

border: 0;
background-color: inherit;
}

.ThemeOfficeMenuV tr.ThemeOfficeMainItem td.ThemeOfficeMainItemRight,
.ThemeOfficeMenuV tr.ThemeOfficeMainItem td.ThemeOfficeMainFolderRight {
padding-top: 10px;
padding-bottom: 4px;
padding-left: 0px;
padding-right: 1px;

border: 0;
background-color: inherit;
}

/* sub menu sub components */

.ThemeOfficeSubMenu .ThemeOfficeMenuFolderLeft,
.ThemeOfficeSubMenu .ThemeOfficeMenuItemLeft {
padding-top: 2px;
padding-bottom: 2px;
padding-left: 1px;
padding-right: 3px;

border-top: 1px solid #b3e3ff;
border-bottom: 1px solid #b3e3ff;
border-left: 1px solid #b3e3ff;

background-color: inherit;
white-space: nowrap;

}

.ThemeOfficeSubMenu .ThemeOfficeMenuFolderText,
.ThemeOfficeSubMenu .ThemeOfficeMenuItemText {
padding-top: 2px;
padding-bottom: 2px;
padding-left: 5px;
padding-right: 5px;

border-top: 1px solid #b3e3ff;
border-bottom: 1px solid #b3e3ff;

background-color: inherit;
white-space: nowrap;
}

.ThemeOfficeSubMenu .ThemeOfficeMenuFolderRight,
.ThemeOfficeSubMenu .ThemeOfficeMenuItemRight {
padding-top: 2px;
padding-bottom: 2px;
padding-left: 0px;
padding-right: 0px;

border-top: 1px solid #b3e3ff;
border-bottom: 1px solid #b3e3ff;
border-right: 1px solid #b3e3ff;

background-color: inherit;
white-space: nowrap;
}

.ThemeOfficeMenuItem .ThemeOfficeMenuFolderLeft,
.ThemeOfficeMenuItem .ThemeOfficeMenuItemLeft {
padding-top: 3px;
padding-bottom: 3px;
padding-left: 0px;
padding-right: 3px;

white-space: nowrap;

border: 0;
background-color: #0066a6;
}

.ThemeOfficeMenuItem .ThemeOfficeMenuFolderText,
.ThemeOfficeMenuItem .ThemeOfficeMenuItemText {
padding-top: 3px;
padding-bottom: 3px;
padding-left: 5px;
padding-right: 5px;

border: 0;
background-color: inherit;
}

.ThemeOfficeMenuItem .ThemeOfficeMenuFolderRight,
.ThemeOfficeMenuItem .ThemeOfficeMenuItemRight {
padding-top: 3px;
padding-bottom: 3px;
padding-left: 0px;
padding-right: 1px;

border: 0;
background-color: inherit;
}

/* menu splits */

.ThemeOfficeMenuSplit {
margin: 0px;
height: 0px;
overflow: hidden;
background-color: inherit;
border-top: 0px solid #b3e3ff;
}

/* image shadow animation */

/*
seq1: image for normal
seq2: image for hover and active

To use, in the icon field, input the following:
<img class="seq1" src="normal.gif" /><img class="seq2" src="hover.gif" />
*/
/*
.ThemeOfficeMainItem img.seq1,
.ThemeOfficeMenuItem img.seq1 {
display: inline;
}

.ThemeOfficeMainItemHover img.seq2,
.ThemeOfficeMainItemActive img.seq2,
.ThemeOfficeMenuItemHover img.seq2,
.ThemeOfficeMenuItemActive img.seq2 {
display: inline;
}

.ThemeOfficeMainItem img.seq2,
.ThemeOfficeMainItemHover img.seq1,
.ThemeOfficeMainItemActive img.seq1,
.ThemeOfficeMenuItem img.seq2,
.ThemeOfficeMenuItemHover img.seq1,
.ThemeOfficeMenuItemActive img.seq1 {
display: none;
}
*/
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 15:21.