Foros del Web » Creando para Internet » CSS »

menu css e IE 7

Estas en el tema de menu css e IE 7 en el foro de CSS en Foros del Web. Tengo un problema con ie 7 y un menu css. Esta linea (width:150px; <----------) del css es la que lo fastidia. Si la quito funciona ...
  #1 (permalink)  
Antiguo 24/11/2008, 11:48
 
Fecha de Ingreso: mayo-2008
Mensajes: 105
Antigüedad: 9 años, 7 meses
Puntos: 0
menu css e IE 7

Tengo un problema con ie 7 y un menu css. Esta linea (width:150px; <----------) del css es la que lo fastidia. Si la quito funciona en ie 7 pero no en ie6, y si la pongo al reves. Me esta volviendo loco. ¿Me podeis ayudar?

Menu:

Código:
echo __('My Account') . '</a>';
		echo '<ul>';
		
		/* Loop through each navigation item */
		foreach( $bp['bp_nav'] as $nav_item ) {
			echo '<li>';
			echo '<a id="' . $nav_item['id'] . '" href="' . $nav_item['link'] . '">' . $nav_item['name'] . '</a>';

			if ( is_array( $bp['bp_options_nav'][$nav_item['id']] ) ) {
				echo '<ul>';
				foreach( $bp['bp_options_nav'][$nav_item['id']] as $subnav_item ) {
					echo '<li><a id="' . $subnav_item['id'] . '" href="' . $subnav_item['link'] . '">' . $subnav_item['name'] . '</a></li>';				
				}
				echo '</ul>';
			}
			
			echo '</li>';
		}
		echo '<li><a id="logout" href="' . get_option('siteurl') . '/wp-login.php?action=logout">' . __('Log Out') . '</a></li>';
		echo '</ul>';
		echo '</li>';
		
		/* List out the blogs for the user */
		
		if ( function_exists('bp_blogs_install') ) {
			$blogs = BP_Blogs_Blog::get_blogs_for_user( $bp['loggedin_userid'] );

			echo '<li><a href="' . $bp['loggedin_domain'] . $bp['blogs']['slug'] . '/my-blogs">';
			_e('My Blogs');
			echo '</a>';

			echo '<ul>';			
			if ( is_array( $blogs['blogs'] ) ) {

				foreach( $blogs['blogs'] as $blog ) {
					echo '<li>';
					echo '<div class="admin-bar-clear"><a href="' . $blog['siteurl'] . '">' . $blog['title'] . '</a>';
					echo '</div>';
					
					echo '<ul style="border:15px">';//quitar
					echo '<li><a href="' . $blog['siteurl']  . '/wp-admin/">' . __('Dashboard') . '</a></li>';
					echo '<li><a href="' . $blog['siteurl']  . '/wp-admin/post-new.php">' . __('New Post') . '</a></li>';
					echo '<li><a href="' . $blog['siteurl']  . '/wp-admin/post-new.php">' . __('Manage Posts') . '</a></li>';
					echo '<li><a href="' . $blog['siteurl']  . '/wp-admin/themes.php">' . __('Switch Theme') . '</a></li>';					
					echo '<li><a href="' . $blog['siteurl']  . '/wp-admin/edit-comments.php">' . __('Manage Comments') . '</a></li>';					
					echo '</ul>';
					
					echo '</li>';
				}
			} else {
				echo '<li>';
				echo '<a href="' . $bp['loggedin_domain'] . $bp['blogs']['slug'] . '/create-a-blog">' . __('Create a Blog!') . '</a>';
				echo '</li>';
			}
			echo '</ul>';
			echo '</li>';
		}

		if ( bp_core_is_home_base( $wpdb->blogid ) ) {
			// TODO: possible menu for current group/user/photo etc
		} else {
			$authors = get_users_of_blog(); 
			
			if ( is_array( $authors ) ) {
				/* This is a blog, render a menu with links to all authors */
				echo '<li><a href="/">';
				_e('Blog Authors');
				echo '</a>';
				
				echo '<ul class="author-list">';
				foreach( $authors as $author ) {
					$author = new BP_Core_User( $author->user_id );
					echo '<li>';

					echo '<div class="admin-bar-clear"><a href="' . $author->user_url . '">';
					echo $author->avatar_mini;
					echo ' ' . $author->fullname;
					echo '<span class="activity">' . $author->last_active . '</span>';
					echo '</a>';
					echo '</div>';
					echo '</li>';
				}
				echo '</ul>';
				echo '</li>';
			}
		}
				
		echo '</ul>';
		echo '</div>';
		echo '</div>';
echo '</div>';
CSS:

Código:
body { padding-top: 28px !important; }

#wp-admin-bar {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 1001;
	height: 28px;
	color: #fff;
	text-align: left;
	background:url(../images/admin_bar_back.gif) #818181 repeat-x;

}

	#wp-admin-bar img#admin-bar-logo {
		position: absolute;
		top: 8px;
		left: 10px;
	}

#wp-admin-bar a img {
	border: none !important;
}

#wp-admin-bar li * {
	font: 12px normal "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Tahoma, Verdana, Arial, sans-serif !important;
	font-weight: normal !important;
	background-image: none !important;
}

#wp-admin-bar li a {
	padding: 6px 15px 7px 15px !important;
}

/*******************/

#wp-admin-bar ul { /* all lists */
	margin: 0;
	list-style: none;
	line-height: 1;
	cursor: pointer;
	height: 30px;
	padding: 0;
}
	#wp-admin-bar ul {
		/*margin-left: 80px;*/
	}
		#wp-admin-bar ul li { /* all list items */
			padding: 0;
			/*height: 25px;*/
			float: left;
		}
			#wp-admin-bar ul li a {
				display: block;/*prodria ser aqui*/
				/*display:list-item;*/
				font-size: 1.1em;
				text-decoration: none !important;
				color: #fff !important;
			}
			
			#wp-admin-bar ul.main-nav li a:hover, #wp-admin-bar ul.main-nav li:hover {
				/*background: #777;*/
				color: #1600ff !important;
			}

/* second-level lists */

#wp-admin-bar ul li ul { 
	position: absolute;
	width: 185px;
	left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
	height: auto;
	margin-left: 0;
}
	#wp-admin-bar ul li ul li {
		float:none;/*prodria ser aqui*/
		margin: 0px;
		border:none;
		/*background: #eee !important;*/
		background-color:#eee;
	} 
	/*quitar*/
	#wp-admin-bar ul.main-nav li ul li a:hover, #wp-admin-bar ul.main-nav li.sfhover ul li a:hover {
		color: #fff;
		}
	
	#wp-admin-bar ul li ul a {
		color: #666 !important;
	}
	
	#wp-admin-bar ul.main-nav li ul li a:hover {
		/*background: #888;*/
	}
	
	#wp-admin-bar ul li div.admin-bar-clear {
		clear: both;
		background-color:#eee;
		border-bottom: 3px solid #eee;
	}

/* third-and-above-level lists */

#wp-admin-bar ul li ul ul { 
	margin: -28px 0 0 185px;
}

#wp-admin-bar ul li:hover ul ul, #wp-admin-bar li.sfhover ul ul {
	left: -999em;
}

#wp-admin-bar ul li:hover ul, #wp-admin-bar ul li li:hover ul, #wp-admin-bar ul li.sfhover ul, #wp-admin-bar ul li li.sfhover ul { /* lists nested under hovered list items */
	left: auto;
}

#wp-admin-bar ul.main-nav li ul li:hover {
	/*background: #555;*/
}

/* Menu item css */

#wp-admin-bar img.avatar {
	float: left;
	border: 2px solid #fff !important;
	margin-right: 8px;
}

#wp-admin-bar span.activity {
	display: block;/*prodria ser aqui*/
/*	color: #888;*/
	margin-left: 34px;
	font-size: 10px !important;
	background: none !important;
	border: none !important;
	padding: 0 !important;
}

#wp-admin-bar li a:hover span.activity {
	color: #ccc;
}

#wp-admin-bar ul.author-list li {
	height: 55px;
}


/*nuevo menu*/

/* Begin CSS Drop Down Menu */

#menuh-container
	{
	position: absolute;		
	top: 0;
	left: 6em;
width:100%;
	}

#menuh
	{
	font-size: small;
	font-family: arial, helvetica, sans-serif;
	width:100%;
	float:left;
	margin:0;
	margin-top: 0;

	}
		
#menuh a
	{
	text-align: left;
	display:block;
	border: none;
	white-space:nowrap;
	margin:0;
	padding: 0;
width:150px;	 <----------

	}
	
#menuh a:link, #menuh a:visited, #menuh a:active	/* menu at rest */
	{
	color: white;
	background-color: none;/**/
	text-decoration:none;
	}
	
#menuh a:hover	/* menu at mouse-over  */
	{
	color: white;
	background-color: none;
	text-decoration:none;
/*height: 12px;revisar*/
	}	
	
#menuh a.top_parent, #menuh a.top_parent:hover  /* attaches down-arrow to all top-parents */
	{
	background-image: url(navdown_white.gif);
	background-position: right center;
	background-repeat: no-repeat;
	}
	
#menuh a.parent, #menuh a.parent:hover 	/* attaches side-arrow to all parents */
	{
	background-image: url(nav_white.gif);
	background-position: right center;
	background-repeat: no-repeat;
	}

#menuh ul
	{
	list-style:none;
	margin:0;
	padding:0;
	float:left;
	width:50px;
	/*width:9em;	 width of all menu boxes */
	}

#menuh li
	{
	position:relative;
 	min-height: 1px; 			/* Sophie Dennis contribution for IE7 */
 	vertical-align: bottom; /* Sophie Dennis contribution for IE7 */
	}

#menuh ul ul
	{
	position:absolute;
	z-index:500;
	top:auto;
	display:none;
	padding: 0em;
	margin:-1em 0 0 -1em;
	}

#menuh ul ul ul
	{
	top:0;
	left:100%;

	}

div#menuh li:hover
	{
	cursor:pointer;
	z-index:100;
	}

div#menuh li:hover ul ul,
div#menuh li li:hover ul ul,
div#menuh li li li:hover ul ul,
div#menuh li li li li:hover ul ul
{display:none;}

div#menuh li:hover ul,
div#menuh li li:hover ul,
div#menuh li li li:hover ul,
div#menuh li li li li:hover ul
{display:block;}

/* End CSS Drop Down Menu */
  #2 (permalink)  
Antiguo 24/11/2008, 11:59
 
Fecha de Ingreso: mayo-2008
Mensajes: 105
Antigüedad: 9 años, 7 meses
Puntos: 0
Respuesta: menu css e IE 7

Os adjunto una imagen del problema en ie 7

  #3 (permalink)  
Antiguo 24/11/2008, 12:07
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: menu css e IE 7

Siempre que vayas a poner una consulta en el foro de css o html te recomiendo que pongas el código html generado en el navegador en lugar del código fuente, porque con el fuente es costoso entender cada elementos, qué clse tiene, qué selector le afecta, etc.
__________________
Visita mi nueva web idplus.org
  #4 (permalink)  
Antiguo 24/11/2008, 12:15
 
Fecha de Ingreso: mayo-2008
Mensajes: 105
Antigüedad: 9 años, 7 meses
Puntos: 0
Respuesta: menu css e IE 7

Aqui pongo el codigo generado por firefox

codigo:

Código:
<!--[if lt IE 7]>
<style type="text/css" media="screen">
#menuh{float:none;}
body{behavior:url(/wp-content/mu-plugins/bp-core/csshover.htc); font-size:100%;}
#menuh ul li{float:left; width: 100%;}
#menuh a{height:1%;font:bold 0.7em/1.4em arial, sans-serif;}
</style>
<![endif]-->
	
</head>

<body>

<div id="header">
	<h1><a href="http://url.com/usuario/">BuddyPress</a></h1>
	
	<div class="search">

			</div>
</div>

<div id="userbar">
	<h3>Ni</h3>
			
				<p class="avatar">
			<img src="http://url.com/usuario/wp-content/blogs.dir/84/files//2008/11/luna-avatar1.jpg" alt="" class="avatar" width="50" height="" />		</p>
				
		<ul id="bp-nav">
			<li class="current"><a id="profile" href="http://url.com/usuario/profile">Profila</a></li><li><a id="blogs" href="http://url.com/usuario/blogs">Blogak</a></li><li><a id="messages" href="http://url.com/usuario/messages/">Mezuak</a></li><li><a id="friends" href="http://url.com/usuario/friends/">Lagunak</a></li><li><a id="groups" href="http://url.com/usuario/groups/">Taldeak</a></li><li><a id="wp-logout" href="http://url.com/usuario/wp-login.php?action=logout">Amaitu saioa</a><li>		</ul>

	
	
</div>
<div id="optionsbar">
	<h3>Nire profila</h3>

	
	<ul id="options-nav">
		<li class="current"><a id="" href="http://url.com/usuario/profile/">Publikoa</a></li><li><a id="" href="http://url.com/usuario/profile/edit">Profila editatu</a></li><li><a id="" href="http://url.com/usuario/profile/change-avatar">Avatar-a aldatu</a></li>	</ul>
</div>
<div id="main">

<div class="content-header">
	Goiburuaren edukia</div>

<div id="content">

	<div class="left-menu">
		<img src="http://url.com/usuario/wp-content/blogs.dir/84/files//2008/11/luna-avatar2.jpg" alt="" class="avatar" width="150" height="" />		
									
			</div>

	<div class="main-column">
			<div id="profile-name">

			<h1><a href="">Rubén Moreno Beazqua</a></h1>
			<p class="status"></p>
		</div>
		
		
							<div class="info-group">
					<h4>Oinarrizkoa</h4>
					
					<table class="profile-fields">
					
												<tr>
							<td class="label">

								Izena							</td>
							<td class="data">
								Rubén							</td>
						</tr>
						
					
												<tr>
							<td class="label">
								Abizena							</td>

							<td class="data">
								Moreno Beazqua							</td>
						</tr>
						
										</table>
				</div>
				
			
				
		</div>

</div>
</div> <!-- end #main -->

<div id="footer">
	<p>
		usuario bb -k egin du: <a href="http://wordpress.org/">WordPress</a> | <a href="http://url.com/usuario/feed/">Post-en (RSS)</a> eta <a href="http://url.com/usuario/comments/feed/">Iruzkinak (RSS)</a>.
	</p>

	<div id="wp-admin-bar"><ul class="main-nav"><div id="menuh-container"><div id="menuh"><li><a href=""><ul></ul>Nire kontua</a><ul><li><a id="profile" href="http://url.com/usuario/profile">Profila</a><ul><li><a id="" href="http://url.com/usuario/profile/">Publikoa</a></li><li><a id="" href="http://url.com/usuario/profile/edit">Profila editatu</a></li><li><a id="" href="http://url.com/usuario/profile/change-avatar">Avatar-a aldatu</a></li></ul></li><li><a id="blogs" href="http://url.com/usuario/blogs">Blogak</a><ul><li><a id="" href="http://url.com/usuario/blogs/my-blogs/">Nire blogak</a></li><li><a id="" href="http://url.com/usuario/blogs/recent-posts/">Azken bidalketak</a></li><li><a id="" href="http://url.com/usuario/blogs/recent-comments/">Iruzkin berriak</a></li><li><a id="" href="http://url.com/usuario/blogs/create-a-blog/">Blog bat sortu</a></li></ul></li><li><a id="messages" href="http://url.com/usuario/messages/">Mezuak</a><ul><li><a id="" href="http://url.com/usuario/messages/">Sarrera ontzia</a></li><li><a id="" href="http://url.com/usuario/messages/sentbox">Bidalitako mezuak</a></li><li><a id="" href="http://url.com/usuario/messages/compose">Sortu</a></li></ul></li><li><a id="friends" href="http://url.com/usuario/friends/">Lagunak</a><ul><li><a id="" href="http://url.com/usuario/friends/my-friends">Nire Lagunak</a></li><li><a id="" href="http://url.com/usuario/friends/requests">Eskakizunak</a></li><li><a id="" href="http://url.com/usuario/friends/friend-finder">Lagun bilatzailea</a></li><li><a id="" href="http://url.com/usuario/friends/invite-friend">Lagunak gonbidatu</a></li></ul></li><li><a id="groups" href="http://url.com/usuario/groups/">Taldeak</a><ul><li><a id="" href="http://url.com/usuario/groups/my-groups">Nire taldeak</a></li><li><a id="" href="http://url.com/usuario/groups/group-finder">Talde bilatzailea</a></li><li><a id="" href="http://url.com/usuario/groups/create">Talde bat sortu</a></li><li><a id="" href="http://url.com/usuario/groups/invites">Gonbidapenak</a></li></ul></li><li><a id="logout" href="http://url.com/usuario/wp-login.php?action=logout">Amaitu saioa</a></li></ul></li><li><a href="http://url.com/usuario/blogs/my-blogs">Nire blogak</a><ul><li><div class="admin-bar-clear"><a href="http://url.com/mascomentarios">mascomentarios</a></div><ul style="border:15px"><li><a href="http://url.com/mascomentarios/wp-admin/">Arbela</a></li><li><a href="http://url.com/mascomentarios/wp-admin/post-new.php">Post berria</a></li><li><a href="http://url.com/mascomentarios/wp-admin/post-new.php">Post-ak kudeatu</a></li><li><a href="http://url.com/mascomentarios/wp-admin/themes.php">Itxura aldatu</a></li><li><a href="http://url.com/mascomentarios/wp-admin/edit-comments.php">Kudeatu iruzkinak</a></li></ul></li><li><div class="admin-bar-clear"><a href="http://url.com/comentarios">comentarios</a></div><ul style="border:15px"><li><a href="http://url.com/comentarios/wp-admin/">Arbela</a></li><li><a href="http://url.com/comentarios/wp-admin/post-new.php">Post berria</a></li><li><a href="http://url.com/comentarios/wp-admin/post-new.php">Post-ak kudeatu</a></li><li><a href="http://url.com/comentarios/wp-admin/themes.php">Itxura aldatu</a></li><li><a href="http://url.com/comentarios/wp-admin/edit-comments.php">Kudeatu iruzkinak</a></li></ul></li><li><div class="admin-bar-clear"><a href="http://url.com/cuarto">cuarto</a></div><ul style="border:15px"><li><a href="http://url.com/cuarto/wp-admin/">Arbela</a></li><li><a href="http://url.com/cuarto/wp-admin/post-new.php">Post berria</a></li><li><a href="http://url.com/cuarto/wp-admin/post-new.php">Post-ak kudeatu</a></li><li><a href="http://url.com/cuarto/wp-admin/themes.php">Itxura aldatu</a></li><li><a href="http://url.com/cuarto/wp-admin/edit-comments.php">Kudeatu iruzkinak</a></li></ul></li><li><div class="admin-bar-clear"><a href="http://url.com/eltercero">tercero</a></div><ul style="border:15px"><li><a href="http://url.com/eltercero/wp-admin/">Arbela</a></li><li><a href="http://url.com/eltercero/wp-admin/post-new.php">Post berria</a></li><li><a href="http://url.com/eltercero/wp-admin/post-new.php">Post-ak kudeatu</a></li><li><a href="http://url.com/eltercero/wp-admin/themes.php">Itxura aldatu</a></li><li><a href="http://url.com/eltercero/wp-admin/edit-comments.php">Kudeatu iruzkinak</a></li></ul></li><li><div class="admin-bar-clear"><a href="http://url.com/usuariocin">usuario</a></div><ul style="border:15px"><li><a href="http://url.com/usuariocin/wp-admin/">Arbela</a></li><li><a href="http://url.com/usuariocin/wp-admin/post-new.php">Post berria</a></li><li><a href="http://url.com/usuariocin/wp-admin/post-new.php">Post-ak kudeatu</a></li><li><a href="http://url.com/usuariocin/wp-admin/themes.php">Itxura aldatu</a></li><li><a href="http://url.com/usuariocin/wp-admin/edit-comments.php">Kudeatu iruzkinak</a></li></ul></li><li><div class="admin-bar-clear"><a href="http://url.com/otro">otro</a></div><ul style="border:15px"><li><a href="http://url.com/otro/wp-admin/">Arbela</a></li><li><a href="http://url.com/otro/wp-admin/post-new.php">Post berria</a></li><li><a href="http://url.com/otro/wp-admin/post-new.php">Post-ak kudeatu</a></li><li><a href="http://url.com/otro/wp-admin/themes.php">Itxura aldatu</a></li><li><a href="http://url.com/otro/wp-admin/edit-comments.php">Kudeatu iruzkinak</a></li></ul></li></ul></li></ul></div></div></div>	
	<br />

	<!-- 50 queries / 0.281 seconds.-->
</div>

</body>

</html>

¿Cambia el codigo si lo genera ie?
  #5 (permalink)  
Antiguo 24/11/2008, 12:33
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: menu css e IE 7

No, no cambia, pero no veo el problema: ¿te refieres al menú superior?
__________________
Visita mi nueva web idplus.org
  #6 (permalink)  
Antiguo 24/11/2008, 16:28
 
Fecha de Ingreso: febrero-2008
Mensajes: 294
Antigüedad: 9 años, 9 meses
Puntos: 2
Respuesta: menu css e IE 7

hola
hablando de incompatibilidad entre navegadores, me gustaria que alguien explicara mas a fondo los hacks de css, por ejemplo este:
Cita:
div {
width: 100px;
}
div {
\width: 140px;
w\idth: 100px;
}
para que se usa, etc.
Como puedo hacer para que todo sea compatible con IE5,6,7 etc. El IE es lo que nos rompe la cabeza.

saludos
__________________
Aprende a Crear un blog en Wordpress desde cero. Mejores5.com
  #7 (permalink)  
Antiguo 25/11/2008, 02:12
 
Fecha de Ingreso: mayo-2008
Mensajes: 105
Antigüedad: 9 años, 7 meses
Puntos: 0
Respuesta: menu css e IE 7

el problema es que cuando te pones en profila el menu te sale muy lejos, es solo con el primer menu.
  #8 (permalink)  
Antiguo 25/11/2008, 03:08
 
Fecha de Ingreso: mayo-2008
Mensajes: 105
Antigüedad: 9 años, 7 meses
Puntos: 0
Respuesta: menu css e IE 7

Solucionado, faltaba apliacar un clear: both solo para la primera parte del menu. Gracias por las respuestas.

¡¡¡¡¡¡¡Todos unidos contra explorer!!!!!!!!
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




La zona horaria es GMT -6. Ahora son las 17:16.