Dudas y problemas con [if IE]

rodriguezricardo00 · #1 (**permalink**) 22/06/2012, 20:47

Tengo una pagina ya terminada, con una galeria basada en php y mysql y un menu en javascript, en chrome y firefox y los demas exploradores funciona al 100, pero en Internet explorer el menu aparece todo dispersado ya que esta hecho en <li> y el body completo me sale ajustado a la izquierda, y no puedo centrarlo con [if IE] ya que si coloco margin: 0 auto 0 auto; o margin-left: auto; no sucede nada porque ya esta en uso en el css, entonces le coloco algo como margin-left: 150px; pero si usan pantallas pequeñas se sobre pasa, y asi sucesivamente

Entonces tengo en mente usar un [if IE] para que cuando entren a la parte de "Galeria" en vez del menu me aparesca un boton que ya tengo hecho, entonces esto lo logro hacer con el if IE pero no logro desaparecer el menu, logro hacerlo, pero desaparece en todas las paginas y todos los navegadores, es decir tengo el problema solucionado al 50%

Asi tengo los archivos:

Galeria:

Cita:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<?php require('plogger-folder/plogger.php'); ?>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>PromoSJ - Galeria</title>
<script type="text/javascript" src="js/global.js"></script>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/showcase.js"></script>
<script type="text/javascript" src="js/menu.js"></script>

<style type="text/css">
@import url("css/estilos.css");
@import url("css/menu.css");

body {
background-image: url(imagenes/bg.png);
background-color: #000000;
background-repeat: repeat;
}
a:link {
text-decoration: none;
color: #00aeff;
}
a:visited {
text-decoration: none;
color: #00aeff;
}
a:hover {
text-decoration: none;
}
a:active {
text-decoration: none;
color: #00aeff;
}
</style>

<?php the_plogger_head(); ?>
</head>

<body>
<div id="body">
<div id="principal">
<?php include("menu.php"); ?>
<?php include("banner.php"); ?>
<div id="contenido">
<div id="textogaleria">

<div class="s_fill">
<div class="s_t">
<div class="s_b">
<div class="s_l">
<div class="s_r">
<div class="s_bl">
<div class="s_br">
<div class="s_tl">
<div class="s_tr"><div style="padding-bottom:30px; padding-top:30px">

<?php the_plogger_gallery(); ?>

</div>

</div></div></div></div></div></div></div></div></div>
</div>
</div>
<div id="footer">> <?php include("footer.php"); ?></div>

</div>

</div>
</body>
</html>

menu

Cita:

<div style="width:500px">
<div id="sse1">
<div id="sses1">
<ul>
<li><a href="index.php">Inicio</a></li>
<li><a href="galeria.php">Galeria</a></li>
<li><a href="directorio.php">Directorio</a></li>
<li><a href="log.php">Nosotros</a></li>
<li><a href="contactenos.php">Contactenos</a></li>
</ul>
</div>
</div>

</div>
<div style="margin-top:-60px; margin-bottom:10px; margin-left:700px; widht:32px">
<img src="imagenes/logo.png" alt="facebook" width="120" height="50" /></div>

<div style="margin-top:-50px; margin-bottom:10px; margin-left:825px; widht:32px">
<img src="imagenes/facebook.gif" alt="facebook" width="32" height="32"/>
<img src="imagenes/twitter.gif" alt="twitter" width="32"height="32" />
</div>

menu.css

Cita:

#sse1
{
/*You can decorate the menu's container, such as adding background images through this block*/

height: 30px;
padding: 15px;
border-radius: 3px;

}
#sses1
{
/*margin:0 auto; This will make the menu center-aligned. Removing this line will make the menu align left.*/
}
#sses1 ul
{
position: relative;
list-style-type: none;
float:left;
padding:0;margin:0;
border-bottom:solid 1px #00aeff;
}
#sses1 li
{
float:left;
list-style-type: none;
padding:0;margin:0;background-image:none;
}
/*CSS for background bubble*/
#sses1 li.highlight
{
background-color:#00aeff;
top:25px;
height:2px;
border-bottom:solid 1px #00aeff;
z-index: 1;
position: absolute;
overflow:hidden;
}
#sses1 li a
{
height:28px;
padding-top: 0px;
margin: 0 10px;/*used to adjust the distance between each menu item. Now the distance is 20+20=40px.*/
color: #fff;
font: normal 16px arial;
* * text-align: center;
text-decoration: none;
* * float: left;
display: block;
position: relative;
font-weight: bold;
z-index: 2;
a:hover: #FF00FF;
}

y los estilos.css

Cita:

@charset "utf-8";
#principal {
width: 895px;
margin-left: auto;
margin-right: auto;
}
#principal #banner {
width: 895px;
margin-top: 10px;
margin-bottom: 10px;
}
#contenido #lateral {
float: left;
width: 221px;
margin-right: 5px;

}
#contenido #lateral #eventos {
float: left;
width: 221px;
}
#contenido #lateral #noticias {
float: left;
width: 221px;
margin-top: 10px;
margin-bottom: 10px;
}
#contenido #lateral #publicidad2 {
float: left;
width: 221px;
}
#principal #contenido {
float: left;
width: 895px;
}
#contenido #texto {
float: right;
width: 665px;
}

#principal #footer {
width: 895px;
float: left;
color: #FFF;
text-align: center;
background: url(../imagenes/footer_bg.png) no-repeat;
height: 70px;
margin-top: 15px;
}
#footer a {
font-weight: normal;
color: #00aeff;
}

#footer a:hover {
color: #CCCCCC;
text-decoration: none;
}

#footer .footer_menu {
margin: 0 0 10px 0;
padding: 0px;
list-style: none;
}

.footer_menu li {
margin: 0px;
padding: 0 20px;
display: inline;
border-right: 1px solid #555555;
}
#contenido #login {
width: 220px;
float: left;
background-image: url(../imagenes/fondo.png);
margin-right: 8px;
}

/* begin scroll border corners*/
.s_fill {background:url(../imagenes/s_fill.png) repeat}
.s_t {background:url(../imagenes/s_t.png) 0 0 repeat-x;}
.s_b {background:url(../imagenes/s_b.png) 0 100% repeat-x}
.s_l {background:url(../imagenes/s_l.png) 0 0 repeat-y}
.s_r {background:url(../imagenes/s_r.png) 100% 0 repeat-y}
.s_bl {background:url(../imagenes/s_bl.png) 0 100% no-repeat}
.s_br {background:url(../imagenes/s_br.png) 100% 100% no-repeat}
.s_tl {background:url(../imagenes/s_tl.png) 0 0 no-repeat}
.s_tr {background:url(../imagenes/s_tr.png) 100% 0 no-repeat; padding:1px 20px}
/* end scroll border corners*/

#publicidad {
float: left;
margin-top: 20px;
margin-left: 50px;
}
#textogaleria {
float: right;
width: 895px;
margin-top: 10px;
}
#principal #contenidogaleria {
float: left;
width: 895px;

}
/* and now the form formatting itself */
label {
display: block;
float: left;
clear: left;
Width: 150px;
line-height: 20px;
margin-bottom: 10px;
margin: 5px 0;
}
input:focus, textarea:focus, select:focus {
border: 1px solid #999;
background-color: #FFFFFF;
}
input.button {
cursor: pointer;
border: none;
font-weight: bold;
background: url(imagenes/enviar.jpg) no-repeat left top;
width: 120px;
height: 40px;
margin-left: 150px;
}
span.required{
font-size: 13px !important;
color: 00aeff !important;
}
.errormsg {
display: block;
width: 50%;
height: 22px;
line-height: 22px;
color: #00aeff;
font-weight: bold;
background: cfcfcf ;
padding: 3px 10px 3px 200px;
margin: 10px 0;
font-family: "arial", serif;
}
.msgSent {
font-size: 20px;
text-align: center;
}

Si lo desean pueden entrar a la pagina ntroroser.herobo.com y verla en internet explorer.

Espero me puedan ayudar! Gracias

furoya · #2 (**permalink**) 23/06/2012, 10:03

Puedes usar un "comentario condicional" para todos los otros navegadores. Así ocultas lo que funciona en todos menos en IE con un comentario para IE; y lo que se ve bien en IE con uno que lo oculte al resto.

También puedes usar un solo condicional para IE, incluyendo ahí un CSS que ponga en display: none; lo que no quieres que se vea.

comentarios condicionales

rodriguezricardo00 · #3 (**permalink**) 23/06/2012, 12:49

Cita:

Iniciado por furoya

Puedes usar un "comentario condicional" para todos los otros navegadores. Así ocultas lo que funciona en todos menos en IE con un comentario para IE; y lo que se ve bien en IE con uno que lo oculte al resto.

También puedes usar un solo condicional para IE, incluyendo ahí un CSS que ponga en display: none; lo que no quieres que se vea.

[URL="http://www.forosdelweb.com/f53/comentarios-condicionales-999557/#post4215096"]comentarios condicionales[/URL]

eso del display none + el CC me funciono al 100% pero el [if !IE] no funciona para nada, asi que aun no logro como centrar el body en internet explorer :S

rodriguezricardo00 · #4 (**permalink**) 23/06/2012, 14:20

Ya solucione el problema, lo que hice fue colocar un text-align: center; en el body y un text-align en el div que contiene toda la pagina, y para lo del menu use [if IE] gracias por la ayuda!

Exitos y que DLB