Il codice è questo:
E viene visualizzato in questo modo in Chrome solo quando la finestra non è massimizzata:codice:<body> [img]SiteBackground.jpg[/img] [img]SiteBackground.jpg[/img] <div id="mainContainer"> <div id="mainLogo" class="center"> [img]logo.png[/img] </div> <div id="mainMenuContainer" class="center"> [img]MenuEndLeft.png[/img] [img]MenuEndRight.png[/img] <div id="mainMenu"> Getting Started Features Integration Login </div> </div> [img]Arrow.png[/img] <div id="content"> <table style="padding: 5px;"> <tr> <td></td> <td> <div class="article"> <div class="elegantTitle">Lorem ipsum dolor sit amet</div> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus laoreet est eget orci blandit vel adipiscing quam fermentum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras a risus eu enim vestibulum laoreet a sed nisl. Pellentesque sapien sem, adipiscing vel auctor non, gravida sed quam. Nulla condimentum mollis massa eu semper. Phasellus ullamcorper tristique sem, posuere mollis elit fermentum ac. Suspendisse eu ullamcorper arcu. Maecenas tellus turpis, laoreet sed pulvinar ac, auctor at magna. Sed accumsan dictum risus vitae feugiat. Sed eget justo id ipsum pulvinar molestie. Nam sit amet enim sit amet enim vulputate ullamcorper pretium convallis est. Praesent id porttitor justo. Sed tempor nisi eu odio tempor adipiscing. Vestibulum semper turpis gravida arcu porta porta. Curabitur feugiat tincidunt quam vitae elementum. In hac habitasse platea dictumst. Nunc iaculis luctus massa, sed pretium nisi bibendum tempor. Pellentesque eleifend purus non turpis pretium mollis. Proin quis ante dui, nec commodo tortor. </div> </td> </tr> </table> <div id="loginContainer" class="center"> <div id="normalLoginContainer" class="floatLeft box"> <div class="centerText elegantTitle">Login normally</div> <form id="login" method="POST" action=""> <div style="padding: 0px 10px 0px 10px;"> Enter your Username: <input type="text" name="username"> </input> Enter your Password: <input type="password" name="password"> </input> <input type="submit" value="Login" style="margin-left: 5px;"> </input> </div> </form> </div> <div id="openIDContainer" class="floatRight box"> <div class="centerText elegantTitle">Login with OpenID</div> <form id="openIDLogin" method="post" action=""> <ul> <li class="openid" title="OpenID"> [img]images/openidW.png[/img] <span class="url">http://{your-openid-url}</span> <li class="direct" title="Google"> [img]images/googleW.png[/img] <span class="url">https://www.google.com/accounts/o8/id</span> <li class="direct" title="Yahoo"> [img]images/yahooW.png[/img] <span class="url">http://yahoo.com/</span> <li class="username" title="AOL Screen Name"> [img]images/aolW.png[/img] <span class="url">http://openid.aol.com/username</span> <li class="username" title="MyOpenID Username"> [img]images/myopenid.png[/img] <span class="url">http://username.myopenid.com/</span> <li class="username" title="Flickr Username"> [img]images/flickr.png[/img] <span class="url">http://flickr.com/username/</span> [/list] <fieldset id="openIDUsername"> <label>Enter your <span class="providerName">Provider user name</span></label> <div> <span class="before"></span> <input type="text" name="openid_username"> </input> <span class="after"></span> <input type="submit" value="Login"> </input> </div> </fieldset> <fieldset id="openIDIdentifier"> <label>Enter your OpenID</label> <div> <input type="text" name="openid_identifier"> </input> <input type="submit" value="Login"> </input> </div> </fieldset> </form> </div> </div> </div> </div> </body>
Il contenitore con sfondo bianco e bordi neri è mainContainer.
Il foglio di stile è questo:
Forse deriva dal fatto che mainContainer ha altezza 100%? Usando il tool integrato di Chrome ho verificato che html, body e mainContainer sono alti circa 900px, mentre content è più alto del suo contenitore, pur non essendo flottante.codice:@font-face { font-family: 'MintElegance'; src: url('formintelegance.eot'); src: local('MintElegance'), url('formintelegance.ttf') format('truetype'); } html { width: 100%; height: 100%; padding: 0px; } body { width: 100%; height: 100%; /*background-color: #fff;*/ padding: 0px; margin: 0px; font-family: arial, verdana, tahoma, sans-serif; /*background-image: url(SiteBackground.jpg); background-repeat: no-repeat;*/ } img#BodyOverlayLeft { position: fixed; left: 0px; top: 0px; z-index: -999; } img#bodyOverlayRight { position: fixed; right: 0px; top: 0px; z-index: -1000; } #mainContainer { max-width: 800px; min-width: 600px; width: 80%; height: 100%; margin-top: 0px; margin-right: auto; margin-left: auto; /*box-shadow: 0px 0px 8px 8px #999;*/ background-color: #fff; border-style: solid; border-width: 0px 1px 0px 1px; border-color: black; padding: 15px; } #mainLogo { width: 280px; } #mainMenuContainer { width: 100%; height: 37px; } #mainMenu { height: 37px; vertical-align: middle; line-height: 35px; background-image: url(MenuBackground.png); background-repeat: repeat-x; margin-left: 8px; margin-right: 8px; text-align: center; } #mainMenu a { color: #555; text-decoration: none; margin-left: 10px; margin-right: 10px; } #content { margin-top: 40px; padding: 15px; } #loginContainer { display: block; width: 85%; height: 236px; padding: 10px; } .article { text-align: justify; } .box { border: solid 1px black; border-radius: 5px; -moz-border-radius: 5px 5px; -webkit-border-radius: 5px 5px; padding: 10px; } .center { margin-left: auto; margin-right: auto; } .elegantTitle { font-family: MintElegance, Arial; font-size: 2em; } .floatRight { float: right; } .floatLeft { float: left; } .mirror { -moz-transform: scaleX(-1); -o-transform: scaleX(-1); -webkit-transform: scaleX(-1); transform: scaleX(-1); filter: FlipH; -ms-filter: "FlipH"; } .centerText { text-align: center; } form input[type="text"], form input[type="password"] { border: 1px solid rgb(48, 131, 255); border-radius: 2px; -moz-border-radius: 2px 2px; -webkit-border-radius: 2px 2px; box-shadow: 0px 0px 3px rgb(48, 131, 255); -moz-box-shadow: 0px 0px 3px rgb(48, 131, 255); -webkit-box-shadow: 0px 0px 3px rgb(48, 131, 255); } form input[type="text"]:focus, form input[type="password"]:focus { border-color: rgb(45, 226, 32); box-shadow: 0px 0px 5px rgb(45, 226, 32); -moz-box-shadow: 0px 0px 5px rgb(45, 226, 32); -webkit-box-shadow: 0px 0px 5px rgb(45, 226, 32); } form fieldset { border-width: 0px; border-width: 0px; } form#openIDLogin ul { list-style-type: none; display: inline; } form#openIDLogin li { padding: 2px; float: left; border-radius: 2px; -moz-border-radius: 2px 2px; -webkit-border-radius: 2px 2px; } form#openIDLogin li.selected { background-color: rgb(45, 226, 32); }

</td>
<td>
<div class="article">
<div class="elegantTitle">Lorem ipsum dolor sit amet</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus laoreet est eget orci blandit vel adipiscing quam fermentum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras a risus eu enim vestibulum laoreet a sed nisl. Pellentesque sapien sem, adipiscing vel auctor non, gravida sed quam. Nulla condimentum mollis massa eu semper. Phasellus ullamcorper tristique sem, posuere mollis elit fermentum ac. Suspendisse eu ullamcorper arcu. Maecenas tellus turpis, laoreet sed pulvinar ac, auctor at magna. Sed accumsan dictum risus vitae feugiat. Sed eget justo id ipsum pulvinar molestie. Nam sit amet enim sit amet enim vulputate ullamcorper pretium convallis est. Praesent id porttitor justo. Sed tempor nisi eu odio tempor adipiscing. Vestibulum semper turpis gravida arcu porta porta. Curabitur feugiat tincidunt quam vitae elementum. In hac habitasse platea dictumst. Nunc iaculis luctus massa, sed pretium nisi bibendum tempor. Pellentesque eleifend purus non turpis pretium mollis. Proin quis ante dui, nec commodo tortor.
</div>
</td>
</tr>
</table>
<div id="loginContainer" class="center">
<div id="normalLoginContainer" class="floatLeft box">
<div class="centerText elegantTitle">Login normally</div>
<form id="login" method="POST" action="">
<div style="padding: 0px 10px 0px 10px;">
Enter your Username:
<input type="text" name="username"> </input>
Enter your Password:
<input type="password" name="password"> </input>
<input type="submit" value="Login" style="margin-left: 5px;"> </input>
</div>
</form>
</div>
<div id="openIDContainer" class="floatRight box">
<div class="centerText elegantTitle">Login with OpenID</div>
<form id="openIDLogin" method="post" action="">
<ul>
<li class="openid" title="OpenID"> [img]images/openidW.png[/img] <span class="url">
Rispondi quotando