cuadrar imagenes

raid_ · #1 (**permalink**) 25/09/2011, 20:00

hola, tengo un menu que al pasar el raton sobre la imagen, se sombrea todo el contenido, podeis verla aqui, brossa.eshost.es, se ve bien en todos los navegadores menos en internet explorer, que se descuadran todos los cuadrados y no se como solucionarlo, pongo el codigo php y el css, si es necesario pego el script

Código PHP:

  <?php  
/* 
Template Name: principal*/ 
?> 
 
<title>Aliter | Cocktail and vip events </title> 
<script type="text/javascript" src="http://localhost/aliter/wp-content/themes/eNews/files/jquery.js"></script> 
<script type="text/javascript" src="http://localhost/aliter/wp-content/themes/eNews/files/akscript.js"></script> 
 
<meta name="generator" content="WordPress 3.2"> 
 
<link rel="stylesheet" type="text/css" media="all" href="http://localhost/aliter/wp-content/themes/eNews/files/style.css"> 
 
<body class="home blog" onclick="if(stWidget.buttonClicked==false){stWidget.stopClosing=false;stWidget.openDuration=0;stWidget.stClose(100);}"> 
 
<style type="text/css"> 
 
    body {background: url(http://localhost/aliter/wp-content/themes/eNews/files/background_img.png) repeat-x left top;} 
 
</style> 
 
 
 
 
    <div id="body-wrapper"> 
     
    <div id="container">             <script type="text/javascript"> 
    $j(document).ready(function(){ 
                                
        var fwItems = new Array(); 
        var boxs = new Array(); 
        var boxActive = new Array(); 
        for($n=0;$n<13;$n++){ 
            boxs[$n] = $j("#lp-rollover-box-"+$n); 
            boxs[$n].css({ opacity: 0 }); 
        } 
        for($a=0;$a<7;$a++){ 
            boxActive[$a] = $j("#lp-rollover-boxactive-"+$a); 
            boxActive[$a].css({ opacity: 0 }); 
        } 
         
         
        $j(".lp-rollover-boxactive").hover( 
                           
            function(){     
                for(var i in boxs) { 
                    boxs[i].stop(true, false).fadeTo(250, 0.7) 
                } 
                for(var i in boxActive) { 
                    if(boxActive[i].attr('id')!=$j(this).attr('id')){ 
                        boxActive[i].stop(true, false).fadeTo(250, 0.7) 
                    } 
                } 
            }, 
            function(){     
                for(var i in boxs) { 
                    boxs[i].stop(true, false).fadeTo(250, 0) 
                }     
                for(var i in boxActive) { 
                    boxActive[i].stop(true, false).fadeTo(250, 0) 
                }             
            } 
        ) 
        boxActive[0].delay(1000).fadeTo(500, .7).fadeTo(1000, 0); 
        boxActive[1].delay(1300).fadeTo(500, .7).fadeTo(1000, 0); 
        boxActive[2].delay(1600).fadeTo(500, .7).fadeTo(1000, 0); 
         
        boxActive[4].delay(2200).fadeTo(500, .7).fadeTo(1000, 0); 
        boxActive[5].delay(2500).fadeTo(500, .7).fadeTo(1000, 0); 
        boxActive[6].delay(2800).fadeTo(500, .7).fadeTo(1000, 0); 
    }) 
     
    </script> 
    <ul id="lp-rollover"> 
         
        <a href="http://localhost/aliter/?page_id=7/"> 
            <li id="lp-rollover-boxactive-0" class="lp-rollover-boxVert lp-rollover-boxactive" style="opacity: 0; "> 
                <ul class="lp-rollover-inner"> 
                    <li class="lp-rollover-box row-end"></li> 
                    <li class="lp-rollover-box row-end"></li> 
                </ul> 
            </li> 
        </a> 
         
        <li id="lp-rollover-box-0" class="lp-rollover-box" style="opacity: 0; "></li> 
        <li id="lp-rollover-box-1" class="lp-rollover-box" style="opacity: 0; "></li> 
        <li id="lp-rollover-box-2" class="lp-rollover-box" style="opacity: 0; "></li> 
         
        <a href="http://localhost/aliter/?page_id=10/"> 
            <li id="lp-rollover-boxactive-1" class="lp-rollover-box lp-rollover-boxactive" style="opacity: 0; "></li> 
        </a> 
         
        <li id="lp-rollover-box-logo" class="lp-rollover-boxLogo"></li> 
        <li id="lp-rollover-box-3" class="lp-rollover-box" style="opacity: 0; "></li> 
         
        <a href="http://localhost/aliter/?page_id=2/"> 
            <li id="lp-rollover-boxactive-2" class="lp-rollover-boxHoriz lp-rollover-boxactive" style="opacity: 0; "> 
                <ul class="lp-rollover-inner"> 
                    <li class="lp-rollover-box"></li> 
                    <li class="lp-rollover-box row-end"></li> 
                </ul> 
            </li> 
        </a> 
         
        <li id="lp-rollover-box-4" class="lp-rollover-box" style="opacity: 0; "></li> 
        <li id="lp-rollover-box-5" class="lp-rollover-box" style="opacity: 0; "></li> 
        <li id="lp-rollover-box-6" class="lp-rollover-box row-end" style="opacity: 0; "></li> 
        <li id="lp-rollover-box-7" class="lp-rollover-box" style="opacity: 0; "></li> 
        <li id="lp-rollover-box-8" class="lp-rollover-box" style="opacity: 0; "></li> 
         
        <a href="http://localhost/aliter/?page_id=2222/"> 
            <li id="lp-rollover-boxactive-3" class="lp-rollover-boxVert lp-rollover-boxactive" style="opacity: 1; "> 
                <ul class="lp-rollover-inner"> 
                    <li class="lp-rollover-box row-end"></li> 
                    <li class="lp-rollover-box row-end"></li> 
                </ul> 
            </li> 
        </a> 
         
        <a href="http://localhost/aliter/?page_id=7/" id="btn-menu06"> 
            <li id="lp-rollover-boxactive-4" class="lp-rollover-boxHoriz lp-rollover-boxactive" style="opacity: 0; "> 
                <ul class="lp-rollover-inner"> 
                    <li class="lp-rollover-box"></li> 
                    <li class="lp-rollover-box row-end"></li> 
                </ul> 
            </li> 
        </a> 
         
        <li id="lp-rollover-box-9" class="lp-rollover-box" style="opacity: 0; "></li> 
        <li id="lp-rollover-box-10" class="lp-rollover-box" style="opacity: 0; "></li> 
         
        <a href="http://localhost/aliter/?page_id=10/" id="btn-menu05"> 
            <li id="lp-rollover-boxactive-5" class="lp-rollover-boxHoriz row-end lp-rollover-boxactive" style="opacity: 0; "> 
                <ul class="lp-rollover-inner"> 
                    <li class="lp-rollover-box"></li> 
                    <li class="lp-rollover-box row-end"></li> 
                </ul> 
            </li> 
        </a> 
         
        <li id="lp-rollover-box-11" class="lp-rollover-box" style="opacity: 0; "></li> 
         
        <a href="http://localhost/aliter/?page_id=13/" id="btn-menu07"> 
            <li id="lp-rollover-boxactive-6" class="lp-rollover-boxHoriz lp-rollover-boxactive" style="opacity: 0; "> 
                <ul class="lp-rollover-inner"> 
                    <li class="lp-rollover-box"></li> 
                    <li class="lp-rollover-box row-end"></li> 
                </ul> 
            </li> 
        </a> 
         
        <li id="lp-rollover-box-12" class="lp-rollover-box row-end" style="opacity: 0; "></li> 
    </ul> 
     
    <ul id="bucket-list"> 
        <img src="http://localhost/aliter/wp-content/themes/eNews/files/lp_image.jpg"> 
     
     
    </ul> 
    <div id="lp-mainnav-area"> 
        <ul id="main-nav"> 
             
<li class="page_item page-item-136"><a href="http://localhost/aliter/?page_id=29/" title="vip events">Vip Events</a></li> 
<li class="page_item page-item-26"><a href="http://localhost/aliter/?page_id=23/" title="Celebraciones">Celebraciones</a></li> 
<li class="page_item page-item-28"><a href="http://localhost/aliter/?page_id=21/" title="Cocktail">Cocktail</a></li> 
<li class="page_item page-item-30"><a href="http://localhost/aliter/?page_id=19/" title="Espacio">Espacio</a></li> 
<li class="page_item page-item-32"><a href="http://localhost/aliter/?page_id=25/" title="Nuestra Cocina">Nuestra Cocina</a></li> 
<li class="page_item page-item-2"><a href="http://localhost/aliter/?page_id=9/" title="Conocenos">Conocenos</a></li> 
         
    </ul></div> 
     
 
   </div></div> 
   </body> 
   </html>

raid_ · #2 (**permalink**) 25/09/2011, 20:01

y este el css

Código PHP:

  /* 
Theme Name: Aliter | Cocktail and vip events 
Theme URI: http://brossa.eshost.es 
Description: Aliter | Cocktail and vip events 
Author: Estudio Brossa 
Version: 1.0 
Tags: 
*/ 
 
 
 
@font-face { 
    font-family: HelveticaNeue; 
    src: url('HelveticaNeue.ttf'); 
} 
 
a img{ 
    border:none;     
} 
 
* {margin: 0px; padding: 0px;} 
a {text-decoration: none; color: #689bb5;} 
a:hover {color: #343434;} 
a:focus, a:active, input {outline: 0; -moz-outline: none;}  
.cloaker {display: none;} 
p, h1, h2, h3, li {font-family: Arial, Helvetica, sans-serif;} 
 
/* layouts and frames */ 
#body-wrapper {margin: 0px auto; padding: 40px 0px 0px 45px; width: 1056px;} 
#container {background: url http://brossa.eshost.es/wp-content/themes/eNews/files/container_bg_img.png no-repeat left top; } 
 
#bucket-list {  
    width: 1026px;  
    height:585px; 
    list-style: none;  
    float: left; 
    background-color:#FFF; 
    z-index:1000; 
    position:absolute; 
    -moz-box-shadow: 0px 0px 5px #5c6b72; 
    box-shadow: 0px 0px 3px 3px #b4bfc5; 
    -webkit-box-shadow: 0px 0px 5px #5c6b72; 
} 
 
 
#subnav-area {margin-top:90px;} 
.subnav-area-contact{float:right;font-size:12px;} 
#subnav-area a{height:20px !important; color:#FFF !important; text-align:right;margin-right:10px;} 
#subnav-area div{} 
 
 
 
 
 
 
 
 
/* styles and cosmetics */ 
 
 
.row-end {margin-right: 0px !important;} 
.col-end {margin-bottom: 0px !important;} 
.row-top {height:143px !important;} 
 
 
 
 
 
 
#lp-mainnav-area{     
    float:right; 
    position:relative; 
    top:585px; 
    margin-right: 250px; 
} 
#lp-mainnav-area #main-nav{ 
    margin-left: 10px; margin-top: 5px; list-style: none; 
    display:inline-block; 
} 
 
 
 
.lp-latest-news-jpg{ 
    width:144px !important;     
} 
#lp-rollover{ 
    width: 1026px;  
    list-style: none;  
    float: left; 
    z-index:1001; 
    position:absolute; 
    height:585px; 
} 
.lp-rollover-inner{ 
    list-style: none;  
} 
.lp-rollover-boxVert{ 
    margin-right: 3px; margin-bottom: 3px; height: 291px; width: 144px; float: left; 
} 
.lp-rollover-boxHoriz{ 
    margin-right: 3px; margin-bottom: 3px; height: 144px; width: 291px; float: left; 
} 
.lp-rollover-box{ 
    margin-right: 3px; margin-bottom: 3px; height: 144px; width: 144px; float: left;background:#000; 
} 
.lp-rollover-boxLogo{ 
    margin-bottom: 3px; height: 144px; width: 291px; float: left; 
} 
.lp-rollover-boxactive{ 
    cursor:pointer;     
} 
#lp-rollover-boxactive-4{ 
    position:absolute;top:441px; 
} 
 
 
 
#main-menu-list {width: 100%; list-style: none; text-align: right;} 
#main-menu-list li {margin: 0px; width: 100%; height: 18px; text-align: right;} 
#main-menu-list li a {margin: 0px; width: 100%; height: 18px; font-size:20px; text-align: right; text-decoration: none; color: #fff; text-transform: uppercase;} 
 
#btn-active-area {width: 291px !important; height: 122px !important; float: right;}  
 
#main-nav {margin-left: 10px; margin-top: 10px; list-style: none; float: left;} 
#main-nav li {margin-right: 10px; padding-left: 10px;  float: left; border-left: 1px solid #b42f32; line-height: 8px; vertical-align: middle;display:inline-block;} 
#main-nav li {line-height: normal\9;} 
#main-nav li:first-child{border-left:none;margin-left:5px;padding-left:0;} 
#main-nav li a {font-family: Arial, Helvetica, sans-serif; font-size: 12px; font-weight: bold; text-transform: uppercase; text-decoration: none; color: #756477; vertical-align: middle;} 
#main-nav li a:hover {color: #343434;}

gracias