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