Problemas de visualización

[soyelsapo]

buenas a todos,

estoy aca molestando para preguntar si alguno sabe, xq el sitio (www.rugbyd.com) se ve muy bien en Mozilla Firefox y muy mal en el explorer.

Esto me esta trayendo un problema con el dueño!

Les pido disculpas a todos por molestarlos y desde ya les digo q hice una busqueda muy por sobre lineas

Un saludo

[mrsorpresa]

No hay nada que disculpar, tú pregunta que aquí estamos para ayudarnos Efectivamente con IE7 se ve la columna central y el menú derechos desplazados a la altura del footer, además de que la página está alienada a la izquierda y no centrada. Como el problema principal me imagino que es el otro, yo intentaría cambiar la css en cuanto a tamaño de tablas y celdas. Prueba a modificar la instrucción width de la tabla principal y darle más ancho, o bien quitarle ancho de las otras tablas. Ayudará si transcribes aquí el css completo. Respecto a lo de alinearse a la izquierda lo mismo, pon aquí el css a ver por qué se lo salta el explorer, sino siempre puedes hacerlo a lo chapuza y alinear la tabla principal en el propio index.php ---> <table align="center">. Eso nunca falla.

[mrsorpresa]

Por cierto una pregunta: ¿qué extensión has usado aquí? Esto de que al pulsar te sale una ventana y se oscurece el fondo...

[soyelsapo]

Utilizé Rocktheme o algo asi, en este momento no estoy en mi casa, desde allí te pego el CSS (del template utilazo) y te digo bien la extensión.

Salu2!

[soyelsapo]

La aplicación:

http://www.rocketwerx.com/

El Css

body{
color:#000000;
background-color: #333333;
background-image: url(../images/bg.gif);
background-repeat: repeat-x;
margin-top: 0px;
margin-bottom: 0px;
font-family: Arial, Verdana, Helvetica, sans-serif;
font-size: 12px;
}

img{
padding: 4px 0px 4px 0px;
}

img {border:0;}

a{
color:#35446b;
text-decoration: none;
}

a:hover{
color:#35446b;
}

li{
list-style:none;
}

li a{
font: 12px Arial, Verdana, Helvetica, sans-serif;
color: #010101;
}

li a:hover{
color: #4A8797;
}

#wrapper{
background:#FFFFFF;
width: 950px;
height: 100%;
text-aling: center;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}

#header{
width: 950px;
padding-top:20px;
text-align:center;
background-color: #FFFFFF;
}

#header_logo{
text-align:center;
margin:auto;
float:left;
}

#header_banner{
width:550px;
float:right;
text.align:center;
margin:auto;
}

#navbar{
background:#000000;
clear:both;
width:910px;
padding-left:40px;
height:6px;
text-align:center;
}

.pathway{
font:normal 11px Arial, Verdana, Helvetica, sans-serif;
color:#245aa6;
padding-top: 8px;
padding-bottom: 8px;
padding-left: 10px;
}
.timedate {
font:normal 11px Arial, Verdana, Helvetica, sans-serif;
color:#245aa6;
padding-top: 8px;
padding-bottom: 8px;
padding-right: 20px;
}
ul#mainlevel-nav{
padding:0px;
margin:0px;
float:left;
}

ul#mainlevel-nav li{
float:left;
padding:10px 40px 10px 0;
}

ul#mainlevel-nav li a{
font:bold 13px Arial, Verdana, Helvetica, sans-serif;
text-transform:uppercase;
color:#666666;
}

ul#mainlevel-nav li a:hover,#active_menu-nav{
color:#245aa6;
padding-top: 10px;
padding-bottom: 10px;
}

#container{
width:870px;
height:100%;
margin:10px 40px 10px 40px;
}

#leftcolumn{
background:#fafafa;
width:191px;
padding:2px;
float:left;
border:solid 1px #CCC;
margin-top: 0;
margin-right: 0;
margin-left: 0;
margin-bottom: 10px;
}

#contentCentral{
margin:0px 0px 5px 0px;
display:inline;
float:left;
text-align:center;
line-height:175%;
}

#users{
background:#245aa6;
text-align:left;
clear: both;
margin-top: 10px;
margin-right: 43px;
margin-left: 40px;
border:solid 1px #CCC;
background:#fafafa;
}


#content{
text-align:left;
float:left;
}

#rightcolumn{
background:#fafafa;
width:191px;
margin:0;
padding:2px;
float:right;
border:solid 1px #ccc;
}

#footer{
clear: both;
width: 867px;
padding-top:8px;
padding-bottom:8px;
font:normal 11px Arial, Verdana, Helvetica, sans-serif;
border:solid 1px #CCC;
background:#fafafa;
margin-top: 10px;
margin-right: 43px;
margin-left: 40px;
margin-bottom: 10px;

}

a.footer{
color:#A2A2A2;
text-decoration:underline;
}

.inputbox{
font: 11px Arial, Verdana, Helvetica, sans-serif;
border: solid 1px #C3C3C3;
padding:2px;
}

.button{
background: #E3E3E3;
font: 11px Arial, Verdana, Helvetica, sans-serif;
border: solid 1px #C3C3C3;
padding:2px;
}
.contentheading,.componentheading{
text-align:left;
font:bold 17px Arial, Verdana, Helvetica, sans-serif;
color:#000000;
padding-bottom: 10px;
text-transform:uppercase;
border:none;
}

.contentheading a{
color: #000000;
}

.contentheading a:hover{
color: #000000;
}

.contentpaneopen{
text-align:justify;
line-height: 150%;
}
.contentpaneopen li{
padding: 0 30px 0 10px;
list-style:none;
}

.contenttoc{
text-align:justify;
line-height: 150%;
}

.contenttoc li{
padding: 0 30px 0 10px;
list-style:none;
}

.contenttoc a{
font-weight: bold;
color: #504D59;
text-decoration: none;
}

.contenttoc a:hover{
font-weight: bold;
color: #9f9d36;
text-decoration: none;
}


.contentpane a{
line-height: 150%;
font-weight: bold;
font-size: 14px;
color: #504D59;
text-decoration: none;
}

.contentpane a:hover{
line-height: 150%;
font-weight: bold;
font-size:14px;
color: #9f9d36;
text-decoration: none;
}


a.category{
font:bold 12px Arial, Verdana, Helvetica, sans-serif;
color: #35446b;
text-decoration: none;
}

a.category:hover{
font:bold 12px Arial, Verdana, Helvetica, sans-serif;
color: #35446b;
text-decoration:underline;
}

tr.sectiontableentry1 td a,tr.sectiontableentry2 td a{
font:bold 12px Arial, Verdana, Helvetica, sans-serif;
color: #35446b;
text-decoration: none;
}


td.sectiontableentry1,td.sectiontableentry2{
text-align:left;
}


tr.sectiontableentry1 td a:hover,tr.sectiontableentry2 td a:hover{
font:bold 12px Arial, Verdana, Helvetica, sans-serif;
color: #35446b;
text-decoration:underline;
}

.pagenav_next, .pagenav_prev, .back_button a{
font-weight: bold;
color: #35446b;
text-decoration: none;
}

.pagenav_next, .pagenav_prev, .back_button a:hover{
font-weight: bold;
color: #35446b;
text-decoration:underline;
}

.pagenavbar a{
font-weight: bold;
color: #35446b;
text-decoration: none;
}

.pagenavbar a:hover{
font-weight: bold;
color: #35446b;
text-decoration:underline;
}


.createdate, .modifydate{
font-family: Arial, Verdana, Helvetica, sans-serif;
font-size: 10px;
color: #C3C3C3;
}
.readon, .readon:hover{
color: #35446b;
text-decoration: underline;
}

.pagenav_next, .pagenav_next:hover{
color: #35446b;
text-decoration: underline;
}

.pagenav_prev, .pagenav_prev:hover{
color: #35446b;
text-decoration: underline;
}

.back_button, .back_button:hover{
color: #35446b;
text-decoration: underline;
}

.moduletable{
text-decoration:none;
color: #504D59;
font-size: 12px;
}

a.mainlevel{
display: block;
font-size: 12px;
font-weight: bold;
color: #666666;
text-align: left;
padding-top: 5px;
padding-left:10px;
height: 22px !important;
height: 27px;
width: 100%;
text-decoration: none;
vertical-align: middle;
}

a.mainlevel:hover{
text-decoration:underline;
background-image: url(../images/menu_hover_bg.gif);
}
a.mainlevel:active{
text-decoration:underline;
background-image: url(../images/menu_hover_bg.gif);
}

.moduletable, .moduletable_menu{
margin:0;
padding:0 0 20px 0;
line-height:175%;
}

.moduletable_menu td{
height:25px;
color: #4C4854;
padding-left:20px;
}

.latestnews ul{
text-align:left;
padding:0;
margin:0;
}

.moduletable h3, .moduletable_menu h3{
background:#245aa6;
font:bold 12px Arial, Verdana, Helvetica, sans-serif;
text-align:left;
text-transform:uppercase;
color:#fff;
margin-bottom:10px;
margin-top:0px;
padding: 7px 0px 7px 10px;;
}

.mosimage_caption{
font:normal 11px Arial, Verdana, Helvetica, sans-serif;
color:#999999;
}
#timedate {
float: right;
}
#main_image {
margin-top: -4px;
padding-top: -4px;
}

[mrsorpresa]

Primero de nada haz una cosa: prueba a disminuir el ancho de la imagen que tienes puesta en la cabecera. Me da la sensación que es muy grande y puede provocar ese "salto de carro".

Si eso no funciona, prueba a cambiar los siguiente valores (ojo! te aviso que no soy experto en css, haz copia de seguridad primero):

#container{
width:890px;
height:100%;
margin:10px 40px 10px 40px;
}

#leftcolumn{
background:#fafafa;
width:171px;
padding:2px;
float:left;
border:solid 1px #CCC;
margin-top: 0;
margin-right: 0;
margin-left: 0;
margin-bottom: 10px;
}

#contentCentral{
margin:0px 0px 5px 0px;
display:inline;
float:left;
text-align:center;
line-height:175%;
}

#users{
background:#245aa6;
text-align:left;
clear: both;
margin-top: 10px;
margin-right: 43px;
margin-left: 40px;
border:solid 1px #CCC;
background:#fafafa;
}


#content{
text-align:left;
float:left;
}

#rightcolumn{
background:#fafafa;
width:171px;
margin:0;
padding:2px;
float:right;
border:solid 1px #ccc;
}

... es decir, quitaría 20 px del width de las tablas laterales, y sumaría 20 px al container principal.

Por si acaso, cuelga el index.php para comprobar los estilos que se aplican a cada tabla.

[soyelsapo]

No ha dado resultado:

La imagen no es, probe cambiar de alto, ancho y demas y no paso nada.

Estuve jugando un poco con las medidas (en un momento le puse columnas de 50 px y el centro de 300) y nada... el cambio de tamaño en las columnas solo genera lo siguiente:



Como veras el punto B es el q cambia, pero ami no me modifica las medidas de ese marco A por asi llamarlo (no se como decirlo)

El index.php (del template), aquí va:

<?php defined( "_VALID_MOS" ) or die( "Direct Access to this location is not allowed." );?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<?php if ( $my->id ) { initEditor(); } ?>
<meta http-equiv="Content-Type" content="text/html; <?php echo _ISO; ?>" />
<?php mosShowHead(); ?>
<?php echo "<link rel=\"stylesheet\" href=\"$GLOBALS[mosConfig_live_site]/templates/$GLOBALS[cur_template]/css/template_css.css\" type=\"text/css\"/>" ; ?><?php echo "<link rel=\"shortcut icon\" href=\"$GLOBALS[mosConfig_live_site]/images/favicon.ico\" />" ; ?>
<!--[if lt IE 7.]>
<script defer type="text/javascript" src="<?php echo $mosConfig_live_site;?>/templates/<?php echo $mainframe->getTemplate(); ?>/pngfix.js"></script>
<![endif]-->
</head>
<body>
<div id="wrapper">
<table width="100%" border="0" cellpadding="0" cellspacing="0" >
<tr>
<td align="left" class="pathway"><?php mosPathWay(); ?></td>
<td align="right" class="timedate"><?php echo mosCurrentDate(); ?></td>
</tr>
</table>
<div id="header">
<div id="header_logo">
<img src="<?=$mosConfig_live_site?>/templates/<? echo $mainframe->getTemplate(); ?>/images/logo.gif" alt="" border="0" />
</div>
<div id="header_banner"><? mosLoadModules("banner",-2); ?></div>
</div>
<? if(mosCountModules("user3")) {?>
<div id="navbar"><? mosLoadModules("user3",-2); ?> </div>
<? } ?>
<div id="container">
<? if(mosCountModules("left")) {?>
<div id="leftcolumn"><? mosLoadModules("left",-2) ?></div>
<?
$styleCC="width:670px";
if(moscountModules("right"))$styleC="width:455px;m argin:0 5px 0 5px;";
else $styleC="width:650px;margin:0 0 0 10px;";
}
else{
$styleCC = "width:100%";
if(mosCountModules("right"))$styleC="width:660px;m argin:0 10px 0 0;";
else $styleC="width:100%";
}
?>
<div id="contentCentral" style="<?=$styleCC?>">
<div id="main_image"><img src="<?=$mosConfig_live_site?>/templates/<? echo $mainframe->getTemplate(); ?>/images/main_image.jpg" width="660" alt="<?php echo $mosConfig_sitename; ?>" /></div>
<div id="content" style="<?=$styleC?>"><? mosMainBody() ?></div><!-- end of div="content" -->
<? if(mosCountModules("right")) { ?>
<div id="rightcolumn"><? mosLoadModules("right",-2) ?></div><!-- end of div="rightcolumn" -->
<? } ?>
</div>
</div>

<?
if(mosCountModules('user1') || mosCountModules('user2')) {
$width = "50%";
?>
<div id="users">
<table width="100%" cellpadding="0" cellspacing="2" border="0">
<tr>
<?
if(mosCountModules('user1')) {
?>
<td width="<?=$width?>"><? mosLoadModules('user1',-2); ?></td>
<? }
if(mosCountModules('user2')) {
?>
<td><? mosLoadModules('user2', -2); ?></td>
<? } ?>
</tr>
</table>
</div>
<? } ?>
<div id="footer"><?php include_once('includes/footer.php'); ?></div>
<table id="Table_01" width="950" border="0" cellpadding="0" cellspacing="0" style="height:5px;">
<tr>
<td>
<a href="http://ww.webmedie.dk/" target="_blank"><img src="<?=$mosConfig_live_site?>/templates/<? echo $mainframe->getTemplate(); ?>/images/spacer_01.gif" width="240" height="5" alt="Webmedie.dk" border="0" /></a></td>
<td>
<a href="http://www.webmedie.dk/webdesign.html" target="_blank"><img src="<?=$mosConfig_live_site?>/templates/<? echo $mainframe->getTemplate(); ?>/images/spacer_02.gif" width="279" height="5" alt="Webdesign" border="0" /></a></td>
<td>
<a href="http://www.webmedie.dk/cms.html" target="_blank"><img src="<?=$mosConfig_live_site?>/templates/<? echo $mainframe->getTemplate(); ?>/images/spacer_03.gif" width="273" height="5" alt="Joomla CMS" border="0" /></a></td>
<td>
<a href="http://www.webmedie.dk/hjemmeside.html" target="_blank"><img src="<?=$mosConfig_live_site?>/templates/<? echo $mainframe->getTemplate(); ?>/images/spacer_04.gif" width="158" height="5" alt="Hjemmeside" border="0" /></a></td>
</tr>
</table>
</div>
</body>
</html>

Muchas gracias! te ha servido lo que te envie?

Edito: Cuando coloque las medidas que me dijiste en Mozilla se empezó a ver como en explorer.

[soyelsapo]

El problema fue resuelto, desinstalando el JOOMLASTATS