Foros del Web » Creando para Internet » CSS »

problema con menu css con imagenes de reemplazo

Estas en el tema de problema con menu css con imagenes de reemplazo en el foro de CSS en Foros del Web. Hola, Voy a tratar de explicar mejor mi problema a ver si alguien me puede dar una mano. Cree un espacio para una imagen 'banner' ...
  #1 (permalink)  
Antiguo 17/06/2008, 03:17
 
Fecha de Ingreso: abril-2005
Mensajes: 5
Antigüedad: 18 años, 11 meses
Puntos: 0
Exclamación problema con menu css con imagenes de reemplazo

Hola,

Voy a tratar de explicar mejor mi problema a ver si alguien me puede dar una mano.

Cree un espacio para una imagen 'banner' con 4 botones a la izquierda. Al tocar el boton correspodiente la imagen cambia (dentro del mismo lugar).
Los botones estan hechos con css y el rollover para que cambie el banner de acuerdo al boton que se toque esta hecho con javascript, simplemente con los behaviours/comportamientos del dreamweaver.

Mi problema es que con IE6 de PC a los botones se les genera un margen o un padding de 1 pixel abajo a cada uno lo que hace que la botonera crezca verticalmente unos 4 pixels y me quede desalineada del la imagen banner. En los demas browsers que lo he probado funciona perfectamente.

codigo aca:
(no es nada con el javascript creo pero lo pongo asi se ve el funcionamiento.)
Código:
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<link href="style/style_alternative.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
<!--
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head>

<body bgcolor="#008DA8" onload="MM_preloadImages('images/contacts_o.gif','images/banner_a1.jpg','images/banner_a2.jpg','images/banner_a3.jpg','images/banner_a4.jpg')">
<div id="divContainer">
    <div id="divBannerButtons">
   	  <div id="divButtons">
      <ul>
        <li><a href="features/a1.htm" class="current" id="a1" onmouseover="MM_swapImage('banner','','images/banner_a1.jpg',1)" onmouseout="MM_swapImgRestore()">Feature 1<br />
        2008<br />
        </a></li>
        <li><a href="features/a2.htm" id="a2" onmouseover="MM_swapImage('banner','','images/banner_a2.jpg',1)" onmouseout="MM_swapImgRestore()">Feature 2<br />
        2008</a></li>
        <li><a href="features/a3.htm" id="a3" onmouseover="MM_swapImage('banner','','images/banner_a3.jpg',1)" onmouseout="MM_swapImgRestore()">Feature 3<br />
        2008</a></li>
        <li><a href="features/a4.htm" id="a4" onmouseover="MM_swapImage('banner','','images/banner_a4.jpg',1)" onmouseout="MM_swapImgRestore()">Feature 4<br />
        2008</a></li>
      </ul>
    </div>
    	<div id="divBanners"><img src="images/banner_a1.jpg" name="banner" width="675" height="208" id="banner" /></div>
  </div>
</div>
</div>
</body>
</html>

el css es este:
Código:
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
}
a img {
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
}
#divBannerButtons {
width: 774px;
background-color: #FFFFFF;
float: left;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
padding-top: 0px;
padding-right: 13px;
padding-bottom: 5px;
padding-left: 13px;
}
#divBanners {
float: right;
width: 675px;
margin: 0px;
padding: 0px;
}
#divButtons {
width: 99px;
margin: 0px;
padding: 0px;
float: left;
display: inline;
height: 208px;
}
#divButtons ul {
list-style-type: none;
margin: 0px;
padding: 0px;
}
#divButtons ul li#a4 {
background-image: url(../images/backg_button_1.gif);
background-repeat: no-repeat;
}
#divButtons ul li {
text-decoration: none;
height: 52px;
padding: 0px;
margin: 0px;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
}
#divButtons a {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #FFFFFF;
text-decoration: none;
text-align: left;
display: block;
margin: 0px;
height: 40px;
padding: 6px;
background-image: url(../images/backg_button_2.gif);
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
}
#divButtons a:hover {
background-image: url(../images/backg_button_2_o.gif);
margin: 0px;
padding: 6px;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
}
#divButtons ul li a#a1 {
background-image: url(../images/backg_button_1.gif);
background-repeat: no-repeat;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
}
#divButtons ul li a:hover#a1 {
background-image: url(../images/backg_button_1_o.gif);
background-repeat: no-repeat;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
}
#divButtons ul li a.current#a1 {
background-image: url(../images/backg_button_1_o.gif);
background-repeat: no-repeat;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
}
#divButtons ul li a.current#a2, #divButtons ul li a.current#a3 {
background-image: url(../images/backg_button_3_o.gif);
background-repeat: no-repeat;
}
#divButtons ul li a#a4 {
background-image: url(../images/backg_button_4.gif);
background-repeat: no-repeat;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
}
#divButtons ul li a:hover#a4 {
background-image: url(../images/backg_button_4_o.gif);
background-repeat: no-repeat;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
}
#divButtons ul li a.current#a4 {
background-image: url(../images/backg_button_4_o.gif);
background-repeat: no-repeat;
}
espero que alguien me pueda dar una mano, que me estoy volviendo loca!
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 01:45.