Buenas de nuevo al foro :)
Estoy haciendo mi segunda web con divs y me ha surgido un nuevo problema que no consigo solucionar.
Tengo un div llamado "line" que mide 9px de alto con una imagen de fondo (900px por 9px). en firefox, como siempre, todo ok, pero en explorer me hace esa capa más larga, y como esa imagen de fondo no puede repetirse, pues me que da un espacio en blanco.
¿alguna solución se os ocurre?
PD: el javascript es para igualar las columnas.
Os pego el código, primero el css:
y ahora el html:
Estoy haciendo mi segunda web con divs y me ha surgido un nuevo problema que no consigo solucionar.
Tengo un div llamado "line" que mide 9px de alto con una imagen de fondo (900px por 9px). en firefox, como siempre, todo ok, pero en explorer me hace esa capa más larga, y como esa imagen de fondo no puede repetirse, pues me que da un espacio en blanco.
¿alguna solución se os ocurre?
PD: el javascript es para igualar las columnas.
Os pego el código, primero el css:
body {margin-top:0px; margin-left:0px; background-image:url(../imagenes/bkg_interior.gif); background-repeat:repeat-y; background-color:#FFFFFF; text-align:center;}
#global{width:900px; text-align:left; position:absolute; left:0px; top:0px; font-family: Calibri, Arial, sans-serif; font-size:6px/10px; text-align:justify; color:#636363;}
#contenedorCabecera{ width:687px; height:130px;}
#cabecera{float:left; width: 486px; height: 96px; padding-left:22px; padding-top:13px; padding-bottom:0px;}
#cabeceraMenu{float:right; width:179px; height:130px; padding-bottom:0px; background-image:url(../imagenes/bkg_menu.gif); background-repeat:repeat-y;}
#line{clear:both; width:900px; height: 9px; padding:0px; margin:0px; background-image:url(../imagenes/separador.gif); background-repeat:no-repeat;}
#slogan{width:290px; height:17px; padding-left:218px; float:left;}
#contenido{width:448px; padding-left:29px; padding-top:34px; padding-right:31px; float:left;}
#menu{width:179px; background-image:url(../imagenes/bkg_menu.gif); background-repeat:repeat-y; float:left;}
#menu_bottom{padding-right:213px; float:right; width:179px; height:178px; background-image:url(../imagenes/menu_bottom.gif); background-repeat:no-repeat;}
#finContenido{padding: 64px;}y ahora el html:
<LINK rel="stylesheet" href="estilos/contenido.css" type="text/css" media="all">
<script type="text/javascript" src="jscript/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
if ($("div#menu").height() > $("div#contenido").height()) {
$("div#contenido").height($("div#menu").height())
}else{
$("div#menu").height($("div#contenido").height())
}
});
</script>
<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 onload="MM_preloadImages('imagenes/ojo2.gif')">
<div id="global">
<div id="contenedorCabecera">
<div id="cabeceraMenu"></div>
<div id="cabecera">
<a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image1','','imagenes/ojo2.gif',1)">
[img]imagenes/ojo1.gif[/img]</a>
[url="#"][img]imagenes/logo_interior.gif[/img][/url]</div>
<div id="slogan">[img]imagenes/slogan.gif[/img]</div>
</div>
<div id="line"></div>
<div id="contenido">
contenido</p>
contenido</p>
contenido</p>
contenido</p>
contenido</p>
contenido</p>
contenido</p>
contenido</p>
Email.-
Telf.-
Fax.</p>
</div>
<div id="menu"></div>
<div id="menu_bottom"></div>
</div>
</body>