Problema editando el tema Freshy

raulrosso · Miembro · noviembre 14, 2008 at 9:34 am
Copiar enlace

Añadir tema a favoritos
Saludos:

Veréis, a la hora de editar el css de mi blog tengo un pequeño problema relacionado con Internet Explorer. A la hora de visionar mi página en ese navegador (versiones 6 y 7 probadas), la barra de menú que he modificado no se visiona correctamente. En cambio, en otros navegadores como Firefox o Google Chrome no existe ese problema. Aquí os pongo los datos.

Mi blog es http://yocreoqueno.com. El tema como ya he dicho anteriormente es Freshy, y el problema radica en la barra de menú superior en la cabecera. En Internet explorer 7 no se visionan los nombres de cada sección, mientras que en Internet explorer 6 sale totalmente descuadrado. Aquí pongo la parte de código del css relacionada con dicha barra con las modificaciones realizadas, a ver dónde está el problema.

————————————————————

.menu {
list-style-type:none;
background:url(‘http://yocreoqueno.files.wordpress.com/2008/09/menu_bg2.gif’) 50% 0 #515151 repeat-x;
height:30px;
width:780px;
border-top:0 solid #FFFFFF;
overflow:hidden;
margin:0;
padding:0;
}

.menu li {
background:none;
display:table-row;
vertical-align:middle;
float:left;
height:30px;
padding:0;
}

.menu li.last_menu,.menu li.right_menu {
float:right;
}

.menu li a {
font-size:.8em;
text-transform:uppercase;
line-height:normal!important;
display:table-cell;
vertical-align:middle;
height:30px;
background:url(‘http://yocreoqueno.files.wordpress.com/2008/09/menu_triple21.gif’) top left transparent repeat-x;
color:white;
text-decoration:none;
}

.menu li a:hover,.menu li a:active {
background-position:center left;
color:#FFFFFF;
}

.menu li.current_page_item a {
background-position:bottom left!important;
color:#1F3700!important;
}

.menu li a.first_menu {
background-repeat:no-repeat;
background-image:url(‘http://yocreoqueno.files.wordpress.com/2008/09/menu_start_triple22.gif’);
}

.menu li a.last_menu,.menu li a.last_menu_off {
padding-right:35px;
background-repeat:no-repeat;
background-image:url(‘http://yocreoqueno.files.wordpress.com/2008/09/menu_end_triple2.gif’);
background-position:top right;
height:30px;
}

.menu li a.last_menu:hover,.menu li a.last_menu:active {
background-position:center right;
}

.menu li.current_page_item a.last_menu {
background-position:bottom right!important;
}

.menu li.lang_menu {
float:right;
}

.menu li.lang_menu a span {
width:19px;
height:30px;
overflow:hidden;
text-indent:100px;
display:block;
}

.menu li.lang_menu a {
display:block;
width:19px;
cursor:pointer;
}

————————————————————

Muchas gracias por adelantado.
raulrosso · Miembro · noviembre 14, 2008 at 9:42 am
Copiar enlace
Ah, un dato más que puede ser de importancia. Las nuevas imágenes anexas a la barra tienen un tamaño de 90 pixels de alto, siendo tres zonas de 30px, que son las que producen los cambios de estado al pasar el ratón por encima o cambiar de sección. Las anteriores eran más gruesas, de 240px (3 de 80), supongo que ahí está la clave del asunto, que al haber reducido el tamaño vertical de la barra no he tenido en cuenta algún parámetro para recolocarlo. Lo curioso es que el único que no lo muestra correctamente es IE. Cosas de navegadores!
espadistros · Miembro · noviembre 23, 2008 at 12:22 pm
Copiar enlace
En IE6 lo que veo es que, comparado con Firefox, los nombres de los menús aparecen arriba en vez de centrados.
Viendo el código HTML de tu página, hay una cosa que me llama la atención:
```
<link rel="stylesheet" href="http://s1.wordpress.com/wp-content/themes/pub/freshy/style.css?m=1224279302a" type="text/css" media="screen" title="Freshy"/>


```
La primera línea hace referencia a la CSS por defecto, la segunda (donde pone gte) es un condicional para detectar que si nuestro navegador es IE7 o superior (cuando salga la nueva versión de IE8) utilice esa segunda plantilla CSS y la tercera (donde pone lt) para detectar que si nuestro navegador es IE6 o inferior utilice la tercera. Mira en la wikipedia
Todo esto para que te des cuenta que IE es una pesadilla para los diseñadores web porque no respeta los estándares y necesita varias plantillas de CSS incluso para distintas versiones del mismo navegador.
Mi pregunta ahora es: ¿has modificado sólo la plantilla CSS general (la primera) o también la correspondiente a las de cada vesión para IE? Tengo la impresión de que sólo la general, por el código que pones arriba.
raulrosso · Miembro · noviembre 24, 2008 at 6:18 pm
Copiar enlace
Tenía conocimiento del tema de los condicionales para hacer alternativas para navegadores especialitos, pero no sé cómo introducirlo. Ese trozo de código que has visto en mi web lo pone el sistema de WordPress automáticamente. Cuando he adquirido la posibilidad de poder editar la hoja de estilo, lo único que me permite es añadir el archivo «http://yocreoqueno.wordpress.com/wp-content/themes/pub/freshy/style.css» nuevas líneas que suplan a las ya existentes para poder realizar modificaciones, pero no sé si existe una forma más «profunda» a la hora de gestionar wordpress para que me permita elegir la hoja que me de la gana dependiendo de la situación. Las alternativas ie6.css e ie7.css son públicas y no editables, al menos no si se alberga la web en WordPress.com, supongo que si se monta el blog en un servidor externo sí que sería posible realizar dicha modificación.

Mil gracias Espadistros por tomarte tus minutos para echar un vistazo al asunto. Seguiré indagando a ver cómo resuelvo esto.
raulrosso · Miembro · diciembre 2, 2008 at 10:56 am
Copiar enlace
Hago un último reflote para el llamamiento.
espadistros · Miembro · diciembre 2, 2008 at 12:00 pm
Copiar enlace
Raul, si sólo puedes modificar la plantilla por defecto (style.css) y la página del blog carga, a continuación de tu plantilla, otras con modificaciones exclusivas para IE, tal y como te indiqué anteriormente, nunca vas a poder conseguir que se vea el el blog como tu quieras en IE.

Fíjate, por ejemplo, en el código de la plantilla que carga para IE7:
```
.menu li a {
	display: block;
	padding-top: 32px;
	height: 48px;
}
#page {
	padding-left: 1px;
}
#footer {
	margin-left: -1px;
}
#title h1 {
	line-height: 1.2em;
	margin-top: -0.5em;
}
```
Por mucho que en tu hoja de estilos modifiques el menu (.menu, .menu li, etc) si después carga esta plantilla y sobreescribe tu plantilla modificando el «.menu li a» para IE7 con los parámetros que ves arriba, nunca vas a conseguir que quede como en tu hoja de estilos principal. Fíjate que tu le das un alto a los enlaces del menú (.menu li a) de 30 px (height:30px;) y la plantilla de IE7 lo sobreescribe y le da un alto de 48px (height: 48px;). Además, mete un espacio superior de 32px (padding-top: 32px;) que «empuja» los nombres de los enlaces hacia abajo y, seguramente, esa sea la razón por la que no se vean en el menú (se «salen» del tamaño del menú), tal y como comentabas arriba (no lo he comprobado porque yo uso Firefox)

Con el código para IE6 o inferior más de lo mismo (te copio sólo las partes donde modifica el menú):
```
.menu li a {
	display: block;
	float: left;
	height: 48px;

.menu li a.last_menu,
.menu li a.last_menu_off {
	padding-right:35px;
	height: 80px;
}
.menu li a {
	line-height:80px;
}
```
Raul, tengo la impresión de que, al ofrecer WorPress.com el extra de CSS, lo hacen pensando en que el usuario haga modificaciones básicas: los colores, tipos de letra y poco más. Si no, deberían dar acceso a todas las plantillas CSS.

De todas formas, yo no soy ningún experto en diseño web, ni mucho menos, así que puedo equivocarme. Tal vez deberías pasar esta consulta a un foro especializado en CSS, por ejemplo WebEstilo u otro similar (utiliza tu buscador de internet favorito: el mío es el metabuscador Zuula) a ver que te dicen.
Si te confirman lo que te digo, deberías hablar con soporte de WordPress.com a ver si te dan acceso a esas plantillas o, al menos, que te carguen ellos el código que necesitas en ellas. No se me ocurre otra cosa.

Suerte.
jaroche · Miembro · diciembre 2, 2008 at 6:05 pm
Copiar enlace
Hola,

Has probado usando !important ? esto lo que hace es darle la máxima prioridad a la regla no importando si hay otros selectores más abajo que interfieran.

.menu li a.first_menu { padding: 8px 8px 0px 35px !important}

El problema es que el padding-top desajusta para el resto de navegadores, tendrás que hacer vertical-align como top:
```
.menu li a {
vertical-align:top !important;
padding-top: 8px !important;
}
```
Esto lo probé sobre la marcha en IE7, en IE6 no sé como iría pero imagino que no es tan complicado.

Sobre el tema de los las hojas de estilos, me parece que es un fallo de WP.com no permitirte quitar los CSS condicionales, seguramente no se percataron de esto cuando instalaron la plantilla. Si compras Custom CSS es precisamente para jugar con todo el CSS, no solo con colores y letras.
raulrosso · Miembro · diciembre 3, 2008 at 5:07 pm
Copiar enlace
Mil gracias Jaroche y Espadistros por vuestros consejos. No acababa de entender el asunto de que el condicional de la versión hacía cargar otros parámetros de un css alternativo para las diferentes versiones del explorer. Ciertamente es una pequeña limitación de cara a la edición del estilo de la web, que la verdad limita en demasía la modificación y no compensa tanto como debería el pagar para realizar modificaciones tan pequeñas. Aun así, probaré lo del important y si no pues no me quedará más remedio que dejar la barra de menú con el tamaño que tiene Freshy por defecto y modificar tan solo lo que son las imágenes.