Ciao, vorrei chiedere un chiarimento in merito agli ultimi 3 dubbi...
1) per quale motivo in IE vedo correttamente allineati textbox e label, mentre i FF un textbox mi va nella riga successiva??
2) per quale motivo il testo (label) non risulta allineato verticalmente rispetto al textbox (ma leggermente piu in alto)
3)... alla fine un consiglio: come posso creare una struttura gerarchica, per fare in modo che ci siamo un foglio di stile login e poi i vari fogli ad esso collegati login.textbox, login.label eccc... spesse volte vedo fogli di stile organizzati in questo modo
Uso questo HTML
<html>
<head>
<title>Box con scrollbar</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta name="generator" content="HAPedit 3.1">
<style type="text/css">
table {
font-size: 1em;
}
h1, h2, h3, h4 {
margin: 0;
font-family: tahoma, arial, helvetica, sans-serif;
}
p {
line-height: 1.4em;
}
hr {
border: 0;
border-top: 1px solid #bababa;
height: 1px;
}
a {
text-decoration: none;
color: #d32525;
}
a:visited {
color: #980000;
}
a:hover {
text-decoration: underline;
color: #e05252;
}
a:active {
color: #980000;
}
body {
background-color: #ffffff;
margin: 0;
padding: 0;
text-align: center;
font-family: verdana, arial, helvetica, sans-serif;
font-size: 0.7em;
color: #666666;
}
img {
border-width: 0;
}
/* PAGE */
.page {
background-repeat: repeat-y;
margin-left: auto;
margin-right: auto;
text-align: left;
}
.login {
width: 190px;
margin: 0px;
}
.login-column1 {
width: 70px;
height: 20px;
vertical-align: middle;
text-align: right;
float: left;
padding: 2px;
}
.login-column2 {
width: 100px;
vertical-align: top;
text-align: left;
float: left;
padding: 2px;
font: 10px Verdana, Trebuchet MS;
}
.login-messages {
width: 190px;
text-align: center;
padding: 0px;
}
.login-label {
font-family: verdana, arial, helvetica, sans-serif;
font-size: 11px;
color: #666666;
}
.login-textbox {
width: 80px;
font: 10px Verdana, Trebuchet MS;
color: #666666;
}
</style>
</head>
<body>
<table id="ctl00_Main_LoginArea_Login" class="Login" cellspacing="0" cellpadding="0" border="0" style="border-collapse:collapse;">
<tr>
<td>
<div class="login">
<div class="login-column1"><label for="ctl00_Main_LoginArea_Login_UserName" id="ctl00_Main_LoginArea_Login_UserNameLabel" class="login-label">Username: </label></div>
<div class="login-column2"><input name="ctl00$Main$LoginArea$Login$UserName" type="text" id="ctl00_Main_LoginArea_Login_UserName" accesskey="u" class="login-textbox" /></div>
<div class="login-column1"><label for="ctl00_Main_LoginArea_Login_Password" id="ctl00_Main_LoginArea_Login_PasswordLabel" class="login-label">Password: </label></div>
<div class="login-column2"><input name="ctl00$Main$LoginArea$Login$Password" type="password" id="ctl00_Main_LoginArea_Login_Password" accesskey="p" class="login-textbox" /></div>
<div class="login-column1"></div>
<div class="login-column2"><span class="login-textbox"><input id="ctl00_Main_LoginArea_Login_RememberMe" type="checkbox" name="ctl00$Main$LoginArea$Login$RememberMe" /><label for="ctl00_Main_LoginArea_Login_RememberMe">remember</label></span></div>
<div class="login-messages">
<span id="ctl00_Main_LoginArea_Login_UserNameRequired" title="User Name is required." style="color:Red;visibility:hidden;">*</span>
<span id="ctl00_Main_LoginArea_Login_PasswordRequired" title="Password is required." style="color:Red;visibility:hidden;">*</span>
</div>
<input type="image" name="ctl00$Main$LoginArea$Login$LoginButton" id="ctl00_Main_LoginArea_Login_LoginButton" src="Img/button-login.gif" alt="Login" style="border-width:0px;" />
<a class="button" href="register.aspx">
<img id="ctl00_Main_LoginArea_Login_Image1" src="Img/button-create.gif" alt="Nuovo utente" style="border-width:0px;" />
</a>
</div>
</td>
</body>
</html>
Grazie
