Verifica foglio di stile con problemi in FF

**Valeria75_bis** · 06-10-2006, 12:01

Ciao, vorrei chiedere un chiarimento in merito agli ultimi 2 dubbi...

1) per quale motivo in IE vedo correttamente allineati textbox e label, mentre in 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)

Uso questo HTML

Codice PHP:




<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">rememb er</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]Img/button-create.gif[/img]

</a>



</div>

</td>

</body>

</html>

Grazie

**Valeria75_bis** · 08-10-2006, 20:24

Un piccolo aiutino :-(((

**Mich_** · 09-10-2006, 10:08

Un piccolo linkino
(oppure uno screenshot).

Scusa ma analizzare tutto un codice complesso (tra l'altro non indentato), per cercare una sfumatura descritta molto sommariamente, non credo porti ad un risultato.
Quindi non mi sto a guardare il codice per cercare di capire cosa stai chiedendo (e magari non lo copisco lo stesso).

Devi cercare di fare uno sforzo in piu`:
- mettere il link (o almeno uno screenshot)
- individuare nel tuo codice HTML/CSS il pezzo che ritieni sia coinvolto nell'errore.

**Valeria75_bis** · 09-10-2006, 21:19

Eccoti i links

Pagina

Immagine

Il problema si verifica solo con FF

Grazie

**Mich_** · 10-10-2006, 09:44

C'e` una discordanza tra link e immagine.

Il link punta ad una pagina con le tabelle, che viene visualizzata correttamente in FF, mentre l'immagine mostra chiaramente l'errore.

A me serve riprodurre l'errore, ed avere il codice HTML e CSS della pagina con errore.

(ma puo` darsi che non abbia capito quanto vai chiedendo)

**Valeria75_bis** · 10-10-2006, 20:40

Come fai a dire che con FF viene visualizzato correttamente??

a me con FF il textbox della password va a capo, invece dovrebbe essere sulla stessa riga della label password

**floyd46** · 10-10-2006, 20:44

comincia ad usare una DTD nella pagina e non cominciare subito con il tag html e poi cerca, nella sezione CSS di html.it, un articolo che spiega come fare ad ottenere un form come se fosse su 2 colonne. Attenta che non devi usare le tabelle ma i tag label + campotesto, formattati con i CSS.
Floyd

**Valeria75_bis** · 10-10-2006, 20:47

Cosa intendi per DTD ??

In ogni caso ho seguito proprio un articolo trovato su HTML e in altri siti per realizzare quanto ho postato che in IE viene visualizzato correttamente, mentre in FF da il problema che ho già indicato... cosa c'è di sbagliato nella mia pagina?

Grazie

**Al_katraz984** · 11-10-2006, 00:32

a guardare bene nella tua pagina ci sono un bel pò di cose errate...

Codice PHP:


<table id="ctl00_Main_LoginArea_Login" class="Login" cellspacing="0" cellpadding="0" border="0" style="border-collapse:collapse;">

<tr>

<td>

<div class="login">

Apri una tabella.. ed usi commenti addizionali.. quando hai un bel foglio di stile..
In una cella della tabella mi metti un <div> che mi dovrà contenere poi tutta un'altra serie di <div> che a vedere ti servono per ricreare delle colonne(di una tabella) :master:

Non comincia bene la pagina..

Io farei cosi il form:

Codice PHP:


<div id="login">



<form name="modulo" action="#" method="post" id="log"> 

<label for="ctl00_Main_LoginArea_Login_UserName" id="ctl00_Main_LoginArea_Login_UserNameLabel">Username: </label>

<input name="ctl00$Main$LoginArea$Login$UserName" type="text" id="ctl00_Main_LoginArea_Login_UserName" accesskey="u"/>


<label for="ctl00_Main_LoginArea_Login_Password" id="ctl00_Main_LoginArea_Login_PasswordLabel">Password: </label>

<input name="ctl00$Main$LoginArea$Login$Password" type="password" accesskey="p"/>


<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">rememb er</label></span>



<span id="ctl00_Main_LoginArea_Login_UserNameRequired" title="User Name is required.">*</span>

<span id="ctl00_Main_LoginArea_Login_PasswordRequired" title="Password is required.">*</span>



<input type="image" name="ctl00$Main$LoginArea$Login$LoginButton"  src="Img/button-login.gif" alt="Login" style="border-width:0px;" />

[url="register.aspx"][img]Img/button-create.gif[/img][/url]

</form>

</div>

adesso con un delle proprietà nel CSS puoi gestire i vari tag..

CSS:

Codice PHP:


div#login {

  padding: ....;

  border: 1px solid #000000;

  ect

}



form#log {

  border:....

  background: ....

 ect

}



form#log label { }

form#log input { }

form#log img { }

form#log a { }

.login-textbox { }

Prova a fare qualcosa partendo da qui.. e ricorda ke se c'è qualche errore nella visualizzazione della pagina è IE che interpreta male mentre FF interpreta meno peggio.. Quindi è piu corretto FF.. Se hai dubbioli chiedi..

Discussione: Verifica foglio di stile con problemi in FF

Strumenti discussione

Ricerca discussione

Visualizza

Verifica foglio di stile con problemi in FF

Permessi di invio