The elements aren't positioning themselves as I want them to. I want the picture to be 20px away from the left, why is the logos div so thin? :S Also why is the topuserbar div going under? There seems to be no reason.
Here is the CSS and HTML. It's not rocket science, so that's extra frustrating because it shouldn't be rendering like this.
#header
{
border:1px solid red;
background-image: url('images/headerBackground.png');
background-repeat:repeat;
width:auto;
}
#logo
{
border:1px solid red;
display:inline;
margin-left:35px;
}
#topuserbar
{
border:1px solid red;
font-family:Georgia;
font-size:large;
float:right;
margin-right:50px;
}
#topuserbar ul
{
}
#topuserbar li
{
display:inline;
margin-left:10px;
color:#fff;
}
#topuserbar .helpicon
{
margin:0;
padding:0;
position:relative;
top:5px;
left:3px;
}
#topuserbar a
{
color:#fff;
}
#topuserbar a:hover
{
color:Yellow;
}
<body>
<div id="header">
<div id="logo">
<img src="../../Content/images/cumaviLogo.png" alt="Cumavi.com - Compras y ventas online en Bolivia!" />
</div>
<div id="topuserbar">
<ul>
<li>Bienvenidos, <span class="userSalute">Sergio!</span></li>
<li><a href="#" class="someClass" title="Ver una lista compeleta de todos tus anuncios.">Mis Anuncios</a></li>
<li><a href="#" class="someClass" title="Ir a tu perfil para ver tus comentarios, tu ranking y mas!">Perfil</a></li>
<li><a href="#" class="someClass" title="Tips y consejos de como mejor usar Cumavi.com y protogerte de enganos.">Ayuda</a><img class="helpicon" src="../../Content/images/helpIcon.png" alt="Help icon." width="20" height="20"/></li>
<li><a href="#">Cerrar Sesion</a></li>
</ul>
</div>
</div>
</body>
EDIT: What the heck? Opera and Firefox render things differently. I knew there were browser inconsistencies but for thing as simple as this?! Can a pro please let me know what's causing this?
