Problema elemento posizione sbagliata (absolute)
Salve, nella creazione di un sito ho riscontrato questo odioso problema di cui non vengo a capo.. Ho (per il momento) un header con un div con position absolute (l' header ha come position relative) e come bottom 4px, per distanziarlo dal basso di soli 4 px, questo avviene per due input text ma per due input image successivi no, ovvero i due image non stanno a 4px dal basso.. Questa è la pagina: http://mybeatnews.altervista.org/beateaters/index.php
CSS:
Codice:
body {
text-align: center; /* Fix for IE */
margin: auto;
}
#container {
display: none;
width: 984px;
margin: auto;
text-align: center;
}
#header {
background: url(images/header.png);
width: 964px;
height: 169px;
position: relative;
margin: auto;
}
#rapid_log {
position: absolute;
bottom: 4px;
left: 274px;
}
#banner {
position: absolute;
margin-top: 11px;
right: 12px;
}
input, #log, #reg {
filter:alpha(opacity=60);
-moz-opacity: 0.6;
-webkit-opacity: 0.6;
opacity: 0.6;
font-weight: bold;
border: none;
color: white;
}
input:hover, #log:hover, #reg:hover {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
-webkit-opacity: 1.0;
opacity: 1.0;
}
#rapid_log a:link, a:visited, a:hover {
text-decoration: none;
}
.i_txt {
width: 144px;
height: 26px;
background: #949494;
}
HTML:
Codice PHP:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="it" xml:lang="it">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta http-equiv="Content-Language" content="it" />
<meta name="Description" content="BeatEaters - World of Music!" />
<meta name="Keywords" content="beateaters, beat, eaters, world, music, world of music, music world" />
<meta name="Owner" content="Danix Dj" />
<meta name="Author" content="0-c00l" />
<meta name="Copyright" content="BeatEaters" />
<link href="style.css" rel="stylesheet" type="text/css" />
<link href="http://forum.it.altervista.org/images/favicon.png" rel="icon" type="image/png" />
<title>BeatEaters - World of Music!</title>
<script src="js/banner.js" type="text/javascript"></script>
<script src="js/a.js" type="text/javascript"></script>
<script src="js/b.js" type="text/javascript"></script>
<script type="text/javascript">
animatedcollapse.addDiv('container', 'fade=0','speed=275')
animatedcollapse.init()
</script>
</head>
<body onLoad="banner_site(); animatedcollapse.toggle('container');">
<div id="container"><div id="header">
<div id="banner"></div>
<div id="rapid_log">
<form action="forum/member.php" method="POST">
<input type="text" id="username" name="username" class="i_txt" style="margin-right: 10px;" /> <input type="password" name="password" class="i_txt" /> <input type="image" value="" src="http://forum.it.altervista.org/images/accedi.png" height="30" width="61" /> <a href="forum/member.php?action=register"><input type="image" value="" src="http://forum.it.altervista.org/images/registrati.png" height="30" width="61" /></a>
</form>
</div>
</div></div>
</body>
</html>
EDIT: Risolto settando vertical-align a bottom
