Estou com um problema de posicionamento em divs ou imagens, aparentemente está tudo correto porém no chrome abre bugado.
<!DOCTYPE html>
<!--
*
* Projeto Fibra do Brasil
* Version: 1.0
* URL: http://www.fibradobrasil.com.br
-->
<html>
<head>
<!-- <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> -->
<meta charset="utf-8">
<title>Fibra do Brasil</title>
<style type="text/css">
ul {
margin-top: 100;
padding: 2px;
list-style: none;
width: 150px;
position:absolute;
}
ul li {
position: relative;
}
li ul {
position: absolute;
left: 150px;
top: 0;
display: none;
}
ul li a {
display: block;
text-decoration: none;
color: #303D60;
background: #fff;
padding: 5px;
border: 1px solid #ccc;
}
li:hover ul { display: block; }
body {
background-color: #ffffff;
font-family: 'Montserrat', sans-serif;
font-weight: 600;
font-size: 14px;
color: #555;
-webkit-font-smoothing: antialiased;
-webkit-overflow-scrolling: touch;
}
p {
margin-bottom: 25px;
margin-top: 0px;
margin-left: 0px;
font-size: 11px;
font-weight: bold;
font-family: 'verdana', sans-serif;
width: 160px;
word-wrap: break-word;
text-align:center;
}
.centered {
text-align: center;
}
a {
color: #FFCC29;
word-wrap: break-word;
text-align:center;
-webkit-transition: color 0.1s ease-in, background 0.1s ease-in;
-moz-transition: color 0.1s ease-in, background 0.1s ease-in;
-ms-transition: color 0.1s ease-in, background 0.1s ease-in;
-o-transition: color 0.1s ease-in, background 0.1s ease-in;
transition: color 0.1s ease-in, background 0.1s ease-in;
}
a:hover,
a:focus {
color: #7b7b7b;
text-decoration: none;
outline: 0;
}
a:before,
a:after {
-webkit-transition: color 0.1s ease-in, background 0.1s ease-in;
-moz-transition: color 0.1s ease-in, background 0.1s ease-in;
-ms-transition: color 0.1s ease-in, background 0.1s ease-in;
-o-transition: color 0.1s ease-in, background 0.1s ease-in;
transition: color 0.1s ease-in, background 0.1s ease-in;
}
#menu
{
z-index: 1;
}
#produtos
{
width:75%;
position:absolute;
top:15%;
margin-left:20%;
float: left;
}
#p1
{
position:relative;
float: left;
padding:0px;
}
img {
width: 65%;
border: thin solid;
padding: 5px;
margin: 0px 10px 10px 0;
}
/* BUSCADOR */
.container {
width: 20%; /* define a largura do campo */
position: relative; /* cria o contexto de posicionamento do bot�o */
}
label {display:block;}
input {width: 100%; height:30px;} /* define a largura do campo igual a largura do container */
input, button {padding: 10px;}
button {
display: inline-block;
border-radius: 4px;
background-color: #1B2C55;
/* defina a cor do ok */
border: none;
color: #FFFFFF;
text-align: center;
font-size: 11px;
padding: 10px;
width: 35px;
height:30px;
position: absolute;
top: 0;
right: 0;
}
/* FIM BUSCADOR */
</style>
<script type="text/javascript">
startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("menuDropDown");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace
(" over", "");
}
}
}
}
}
window.onload=startList;
</script>
</head><body>
<!--- BUSCADOR --->
<form action=" " method="post">
<label form="busca">Buscar</label>
<div class="container">
<input type="search" id="busca" name="q">
<button class="button" style="vertical-align:middle" >
<span>OK</span></button>
</div>
</form>
<!--- BUSCADOR --->
<!--- MENU --->
<ul id="menu">
<li>
<a href="#"> Serras </a>
<ul>
<li>
<a href="http://177.67.195.21:8041/fibra/U_Menu.apw?_grp=0101"> Serra Fita Larga </a>
</li>
<li>
<a href="http://177.67.195.21:8041/fibra/U_Menu.apw?_grp=0102"> Serra Fita Estreita </a>
</li>
<li>
<a href="http://177.67.195.21:8041/fibra/U_Menu.apw?_grp=0103"> Serra para Carne </a>
</li>
<li>
<a href="http://177.67.195.21:8041/fibra/U_Menu.apw?_grp=0104"> Serra para Marcenaria </a>
</li>
<li>
<a href="http://177.67.195.21:8041/fibra/U_Menu.apw?_grp=0105"> Serra Circular </a>
</li>
</ul>
</li>
<li>
<a href="#"> Wideas </a>
<ul>
<li>
<a href="http://177.67.195.21:8041/fibra/U_Menu.apw?_grp=0201"> Dentes de Serras </a>
</li>
<li>
<a href="http://177.67.195.21:8041/fibra/U_Menu.apw?_grp=0202"> Blanks </a>
</li>
</ul>
</li>
<li>
<a href="#"> Facas </a>
<ul>
<li>
<a href="http://177.67.195.21:8041/fibra/U_Menu.apw?_grp=0301"> Facas HSS </a>
</li>
<li>
<a href="http://177.67.195.21:8041/fibra/U_Menu.apw?_grp=0302"> Facas em Widea </a>
</li>
</ul>
</li>
<li>
<a href="#"> EPI'S </a>
<ul>
<li>
<a href="http://177.67.195.21:8041/fibra/U_Menu.apw?_grp=0401"> Capacetes </a>
</li>
<li>
<a href="http://177.67.195.21:8041/fibra/U_Menu.apw?_grp=0402"> Abafador de Ruídos </a>
</li>
<li>
<a href="http://177.67.195.21:8041/fibra/U_Menu.apw?_grp=0403"> Óculos </a>
</li>
<li>
<a href="http://177.67.195.21:8041/fibra/U_Menu.apw?_grp=0404"> Respiradores </a>
</li>
<li>
<a href="http://177.67.195.21:8041/fibra/U_Menu.apw?_grp=0405"> Protetor Facial </a>
</li>
<li>
<a href="http://177.67.195.21:8041/fibra/U_Menu.apw?_grp=0406"> Luvas </a>
</li>
<li>
<a href="http://177.67.195.21:8041/fibra/U_Menu.apw?_grp=0407"> Mangotes </a>
</li>
<li>
<a href="http://177.67.195.21:8041/fibra/U_Menu.apw?_grp=0408"> Aventais </a>
</li>
<li>
<a href="http://177.67.195.21:8041/fibra/U_Menu.apw?_grp=0409"> Protetor Lombar </a>
</li>
<li>
<a href="http://177.67.195.21:8041/fibra/U_Menu.apw?_grp=0410"> Protetor Solar </a>
</li>
<li>
<a href="http://177.67.195.21:8041/fibra/U_Menu.apw?_grp=0411"> Capa de Chuva </a>
</li>
<li>
<a href="http://177.67.195.21:8041/fibra/U_Menu.apw?_grp=0412"> Perneira </a>
</li>
<li>
<a href="http://177.67.195.21:8041/fibra/U_Menu.apw?_grp=0413"> Calçados </a>
</li>
<li>
<a href="http://177.67.195.21:8041/fibra/U_Menu.apw?_grp=0414"> Linha Altura </a>
</li>
</ul>
</li>
</ul> <!--- FIM MENU --->
<!--- PRODUTOS --->
<div id="produtos">
<div id="p1">
<a href="#"><img src="http://177.67.195.21:8041/dirdoc/co01/shared/IMG_00000401.JPG " title="LUVA CONFORT LATEX - DANNY " alt="LUVA CONFORT LATEX - DANNY "></a>
<p> LUVA CONFORT LATEX - DANNY </p>
</div>
<div id="p1">
<a href="#"><img src="http://177.67.195.21:8041/dirdoc/co01/shared/IMG_00001001.JPG " title="LUVA DE RASPA - PLANALTO " alt="LUVA DE RASPA - PLANALTO "></a>
<p> LUVA DE RASPA - PLANALTO </p>
</div>
<div id="p1">
<a href="#"><img src="http://177.67.195.21:8041/dirdoc/co01/shared/IMG_00001201.JPG " title="LUVA GLADIADOR - DANNY " alt="LUVA GLADIADOR - DANNY "></a>
<p> LUVA GLADIADOR - DANNY </p>
</div>
<div id="p1">
<a href="#"><img src="http://177.67.195.21:8041/dirdoc/co01/shared/IMG_00000601.JPG " title="LUVA LONGATEX - DANNY " alt="LUVA LONGATEX - DANNY "></a>
<p> LUVA LONGATEX - DANNY </p>
</div>
<div id="p1">
<a href="#"><img src="http://177.67.195.21:8041/dirdoc/co01/shared/IMG_00000301.JPG " title="LUVA NITRILICA - YELING " alt="LUVA NITRILICA - YELING "></a>
<p> LUVA NITRILICA - YELING </p>
</div>
<div id="p1">
<a href="#"><img src="http://177.67.195.21:8041/dirdoc/co01/shared/IMG_00001101.JPG " title="LUVA PEGASUS - DANNY " alt="LUVA PEGASUS - DANNY "></a>
<p> LUVA PEGASUS - DANNY </p>
</div>
<div id="p1">
<a href="#"><img src="http://177.67.195.21:8041/dirdoc/co01/shared/IMG_00000201.JPG " title="LUVA PU FLEXTACTIL - DANNY " alt="LUVA PU FLEXTACTIL - DANNY "></a>
<p> LUVA PU FLEXTACTIL - DANNY </p>
</div>
<div id="p1">
<a href="#"><img src="http://177.67.195.21:8041/dirdoc/co01/shared/IMG_00000501.JPG " title="LUVA TRICOTADA S/ P - TSUZUKI " alt="LUVA TRICOTADA S/ P - TSUZUKI "></a>
<p> LUVA TRICOTADA S/ P - TSUZUKI </p>
</div>
<div id="p1">
<a href="#"><img src="http://177.67.195.21:8041/dirdoc/co01/shared/IMG_00001401.JPG " title="LUVA VAQUETA (MISTA) - GABI LUVAS " alt="LUVA VAQUETA (MISTA) - GABI LUVAS "></a>
<p> LUVA VAQUETA (MISTA) - GABI LUVAS </p>
</div>
<div id="p1">
<a href="#"><img src="http://177.67.195.21:8041/dirdoc/co01/shared/IMG_00001301.JPG " title="LUVA VAQUETA TOTAL " alt="LUVA VAQUETA TOTAL "></a>
<p> LUVA VAQUETA TOTAL </p>
</div>
<div id="p1">
<a href="#"><img src="http://177.67.195.21:8041/dirdoc/co01/shared/IMG_00000701.JPG " title="LUVA VINIL SEM PO TAM. M - TALGE " alt="LUVA VINIL SEM PO TAM. M - TALGE "></a>
<p> LUVA VINIL SEM PO TAM. M - TALGE </p>
</div>
</div>
<!--- FIM PRODUTOS --->
</body></html>
