Buongiorno a tutti,
Sono una neofita della scrittura di siti web e autodidatta. Sto incontrando un piccolo problema nella costruzione di un questionario per i miei studenti: volevo una pagina colorata con una parte bianca su cui scrivere il testo, il problema è che ho notato che se imposto la dimensione della box bianca in modo che contenga il testo su IE/Chrome, questa risulta più corta su FF/Safari. Viceversa, se la imposto che vada bene su FF/Safari, risulta troppo lunga su IE/Chrome.
Inoltre ho notato che sul pc di mio marito, che ha uno schermo più piccolo, il testo non viene riscalato, per cui domande che sul mio pc sono su due righe, sul suo sono di tre/quattro, aumentando ancora di più l'effetto di lunghezza non sufficiente.
Qualcuno sa spiegarmi perché e soprattutto cosa fare per ovviare a questo problema?
Grazie mille a chiunque vorrà aiutarmi!
Questo il codice:
FILE HTML:
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”>
<html>
<head>
<link rel="stylesheet" href="normalize.css" type="text/css">
<link rel="shortcut icon" href="/../iconx.png" type="image/x-icon">
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=10; chrome=1;">
<meta name="fragment" content="!">
<meta name="viewport" content="width=device-width">
<base target="_blank">
<title>Pre event Survey</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<div class="box-white">
<div class="box-logo">
<img src="/../logoex.png" width="220px" height="150px" alt="alt">
</div>
<div class="box-text">
<form name="test" action="">
<hr>
<h1 class="ss-title" >test</h1>
<div class="ss-subtitle">Testo <br />
Testo</div>
<hr>
<br>
<div class="ss-mandatory"><br>*Domanda obbligatoria</br></div>
<br>
<div class="ss-question">Prima domanda
<span class="ss-mandatory">*</span></div>
<div class="ss-answer">
<p>
<table class="table-four">
<tr>
<td class="ss-rad"><input type="radio" id="a" name="answ5" value="A"></td>
<td class="ss-answer"><label for="a">A</label></td>
</tr>
<tr>
<td class="ss-rad"><input type="radio" id="b" name="answ5" value="B"></td>
<td class="ss-answer"><label for="b">B</label></td>
</tr>
<tr>
<td class="ss-rad"><input type="radio" id="c" name="answ5" value="C"></td>
<td class="ss-answer"><label for="c">C</label></td>
</tr>
<tr>
<td class="ss-rad"><input type="radio" id="d" name="answ5" value="D"></td>
<td class="ss-answer"><label for="d">D</label></td>
</tr>
</table>
</p></div>
<br>
<div class="ss-question">Seconda domanda <br> Altro testo
<span class="ss-mandatory">*</span></div>
<div class="ss-answer">
<p>
<table class="table-four">
<tr>
<td class="ss-rad"><input type="radio" id="a" name="answ6" value="A">
<td class="ss-answer"><label for="a">A</label>
</tr>
<tr>
<td class="ss-rad"><input type="radio" id="b" name="answ6" value="B">
<td class="ss-answer"><label for="b">B</label>
</tr>
<tr>
<td class="ss-rad"><input type="radio" id="c" name="answ6" value="C">
<td class="ss-answer"><label for="c">C</label>
</tr>
<tr>
<td class="ss-rad"><input type="radio" id="d" name="answ6" value="D">
<td class="ss-answer"><label for="d">D</label>
</tr>
</table>
</p></div>
<br>
<table class="table-button">
<tr>
<td class="ss-butt"><input type="button" value="Previous page" onclick=""/></td>
<td class="ss-butt"><input type="submit" value="Submit survey" onclick=""/></td>
<td><progress id="progressbar" value="6" max="6"></progress></td>
</tr>
</table>
</form>
</div>
</div>
<div class="box-space"> </div>
</body>
</html>
FILE CSS
body {
background-color: rgb(231,238,247);
background-image: url(/../righepersfondo.png);
background-repeat: repeat;
background-position: left top;
font-family: Dinbek, Verdana, Arial, serif;
}
.box-white {
width: 850px;
height: 861px;
padding: 10px;
border: 1px solid rgb(69,129,142);
background: rgb(255,255,255);
position: relative;
top: 15px;
left: 17%;
}
.box-logo {
width: 220px;
position: relative;
top:0px;
left: 315px;
right: 315px;
}
.box-text {
position: absolute;
top: 165px;
left: 30px;
right: 30px;
}
.box-space {
width: 320px;
height: 15px;
position: relative;
top: 14px;
}
hr {
align: left;
color: rgb(15,95,135);
size: 1px;
width: 805px;
}
.ss-title {
text-align: left;
color: rgb(15,95,135);
font-weight: 400;
font-size: 2.00rem;
font-style: normal;
line-height: 0.8;
}
.ss-subtitle {
text-align: left;
color: rgb(15,95,135);
font-weight: 400;
font-size: 1.20rem;
font-style: normal;
}
.ss-mandatory {
text-align: left;
color: rgb(145,10,50);
font-weight: 400;
font-size: 0.90rem;
font-style: normal;
}
.ss-question {
color: rgb(15,95,135);
font-weight: 700;
font-size: 1.00rem;
font-style: normal;
}
.ss-subquestion {
color: rgb(15,95,135);
font-weight: 400;
font-size: 0.850rem;
font-style: normal;
line-height: 2.0;
}
.ss-answer {
color: rgb(15,95,135);
font-weight: 400;
font-size: 1.00rem;
font-style: normal;
line-height: 1.0;
padding: 0px;
}
.ss-rad {
padding: 5px;
font-size: 16px;
color: rgb(255,255,255);
width: 30px;
}
.ss-butt {
padding: 5px;
font-size: 16px;
color: rgb(255,255,255);
width: 60px;
}
form {
margin: 0;
padding: 0;
height: 100%;
}
input.radio {
display: block;
float: left;
clear: left;
padding: 0;
margin-left: 5;
margin-right: 10;
font-size: 16px;
}
.table-four {
width: 810px;
height: 120px;
}
.table-three {
width: 810px;
height: 90px;
}
.table-button {
width: 810px;
height: 30px;
}
progress {
background-color: rgb(210,210,210);
color: rgb(15,95,135);
border: 0;
width: 200px;
height: 14px;
border-radius: 7px;
float: right;
}
.radio {
position: relative;
left: 35%;
}
Rispondi quotando
