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>
<!--[if IE]>
<style type="text/css">
#principal{
margin-left: 150px;
}
</style>
<![endif]-->
<?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