Amigos
Estaba creando un header el cual ocupe todo el ancho de la pantalla (asi como el de foros de web)y cuando pense que todo iba bien al probarlo en mi universidad este no actuaba de la forma que deberia hacerlo en el iexplorer7 (Al hacer zoom a la pagina el background no redimensiona como lo hacen los demas objetos). Yo tengo en mi computadora el ie8, opera y mozilla y no tengo ese problema.
Por favor no se que codigo poner para que se vea bien en todo los navegadores???.
aqui un ejemplo del error pero solo se ve cuando se ve con iexplore7(No lo probe con iexplorer 6 pero me imagino que debe pasar lo mismo)
http://www.theozsolutions.com.au/test/ . si aplican zoom in or zoom out se deforma todo!!!
el codigo es:
<!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=iso-8859-1" />
<title>Webe |</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<!--[if lte IE 7] lo use a ver si ayudaba con el error pero nada!!>
<script src="ie7/IE8.js" type="text/javascript"></script>
<script src="ie7/ie7-squish.js" type="text/javascript"></script>
<![endif]-->
<script src="Scripts/swfobject_modified.js" type="text/javascript"></script>
</head>
<body>
<!-- topPan-->
<div id="topPan">
<h1>Web</h1>
<a href="index.html"><img src="images/logo.gif" title="Wn" alt="Web design" width="372" height="91" border="0" /></a>
<ul>
<li><a href="index.html">Home </a> </li>
<li><a href="about.html">About us</a> </li>
<li><a href="services.html">Services </a> </li>
<li><a href="portfolio.html">Clients</a> </li>
<li><a href="contact.html">Contact </a> </li>
</ul>
</div>
el css es:
/* CSS Document */
body{
padding:0px;
background: url(images/header-bg.jpg) 0 0 repeat-x #EFEFEF;
color:#CCC;
font:14px/20px Arial, Helvetica, sans-serif;
font-weight:normal;
height:100%;
}
div, p, h1, h2, h3, h4, ul, a, img{
padding:0;
margin:0;
border: thin none #999;
text-align: left;
background-repeat: repeat-x;
}
ul{
list-style-type:circle;
font-size: 12px;
padding:10px;
}
title{
font-family:"Times New Roman", Times, serif;
font-size: 20px;
color:#960;
font-weight: bold;
}
b{ color:#FC6;
font-weight:bold;
font:10px verdana, arial;
}
/* TOP PANEL */
#topPan{width:700px; height:252px; position:relative; margin:0 auto; padding:0;}
#topPan h1{
width:371px;
height:195px;
background:url(images/header-img1.jpg) 0 0 no-repeat #FEEBB0;
color:#fff;
text-indent:-2000px;
}
#topPan img{
width:372px;
height:91px;
position:absolute;
top:109px;
right:-2px;
margin:0px;
padding:0px;
}
#topPan ul{
width:376px;
height:32px;
display:block;
position:absolute;
top:206px;
right:-2px;
margin:0px;
padding:0px;
background:url(images/menu-bg.gif) 0 0 repeat-x #FF8714;
color:#fff;
}
#topPan ul li{float:left; display:block; width:75px; height:32px; background:url(images/menu-devider.gif) right top no-repeat;}
#topPan ul li span{display:block; width:73px; height:32px; background:url(images/menu-hover.gif) 50% 0 no-repeat; font:13px/32px "Trebuchet MS",Arial, Helvetica, sans-serif; font-weight:bold; text-align:center; text-decoration:none;}
#topPan ul li a{display:block; width:73px; height:32px; background:url(images/menu-bg.gif) 0 0 repeat-x #FF8714; color:#fff; font:13px/32px "Trebuchet MS",Arial, Helvetica, sans-serif; font-weight:bold; text-align:center; text-decoration:none;}
#topPan ul li a:hover{display:block; width:73px; background:url(images/menu-hover.gif) 50% 0 no-repeat;text-decoration:none; /*position:fixed;*/ margin:0; padding:0px;}
#topPan ul li.contact{display:block; width:75px; height:32px; background:url(images/menu-bg.gif) 0 0 repeat-x #FF8714; color:#fff; font:13px/32px "Trebuchet MS",Arial, Helvetica, sans-serif; font-weight:bold; text-align:center; text-decoration:none;}
#topPan ul li.contact:hover{display:block; width:75px; background:url(images/menu-hover.gif) 50% 0 no-repeat;text-decoration:none; /*position:fixed;*/ margin:0; padding:0px;}