Databases
StackOverflow2013
Postsdbo
POsolve layout difference between browsers
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POsolve layout difference between browsers
    text
    copied!<p><img src="https://i.stack.imgur.com/NhT70.png" alt="enter image description here"></p> <p>I've created this little menu for a search/login form... There's this lenguage selector that doesn't work correctly, is there something i do wrong in the CSS or in the HTML? I've set the menù with the flags using a position:absolute; and the margin-top (i also tried with the "top" attribute) to position it over the flag, but the layout on mozilla firefox is still offset.</p> <p>Is there an attribute that i can give to the CSS that is read in the same way in every Browser? Or i've to use some javascript to get the browser of the user?</p> <p>This is the HTML</p> <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;&lt;head&gt;&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;&lt;title&gt;ZapPeers&lt;/title&gt;&lt;link rel="stylesheet" type="text/css" href="reset.css"/&gt;&lt;link rel="stylesheet" type="text/css" href="/index_tmp.css"/&gt;&lt;link rel="image_src" href="/favlogo.png"/&gt;&lt;script type="text/javascript" src="/index_tmp.js"&gt;&lt;/script&gt;&lt;/head&gt; &lt;body onload="textfocus()"&gt;&lt;div id="head"&gt;&lt;div id="noise"&gt;&lt;/div&gt;&lt;div id="body"&gt;&lt;img src="src.png" alt="" name="logo" width="1" height="1" border="0" class="ind" id="logo"/&gt;&lt;div class="ind" id="win"&gt;&lt;form id="formzap" name="form" method="post" action="" autocomplete="off"&gt;&lt;input type="text" name="textfield" class="ind" id="textzap" onkeypress="fadefx.init('noise', 1)" onblur="fadefx.init('noise', 0)" autocomplete="off" autofocus/&gt;&lt;button type="submit" name="button" class="ind" id="buttonzap" value=""&gt;&lt;/button&gt;&lt;/form&gt;&lt;div id="user"&gt;&lt;form id="formlog" name="form" method="post" action="" autocomplete="off"&gt;&lt;input type="text" name="textfield" class="ind textlog" placeholder="e-mail address" autocomplete="off"/&gt;&lt;input type="password" name="textfield" class="ind textlog" placeholder="password" autocomplete="off"/&gt;&lt;button type="submit" name="button" class="ind" id="buttonlog" value=""&gt;&lt;/button&gt;&lt;/form&gt;&lt;ul id="flag"&gt;&lt;li&gt;&lt;img src="src.png" alt="" name="" width="1" height="1" border="0" class="flag" id="eng" /&gt;&lt;ul id="list"&gt;&lt;li&gt;&lt;a href="willkommen.html"&gt;&lt;img title="Deutsch" src="src.png" alt="" name="" width="1" height="1" border="0" class="flag" id="ger" /&gt;&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href="bienvenido.html"&gt;&lt;img title="Español" src="src.png" alt="" name="" width="1" height="1" border="0" class="flag" id="spa" /&gt;&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href="bienvenue.html"&gt;&lt;img title="Français" src="src.png" alt="" name="" width="1" height="1" border="0" class="flag" id="fra" /&gt;&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href="benvenuto.html"&gt;&lt;img title="Italiano" src="src.png" alt="" name="" width="1" height="1" border="0" class="flag" id="ita" /&gt;&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href="yokoso.html"&gt;&lt;img title="日本人" src="src.png" alt="" name="" width="1" height="1" border="0" class="flag" id="jpn" /&gt;&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href="huanying.html"&gt;&lt;img title="中国的" src="src.png" alt="" name="" width="1" height="1" border="0" class="flag" id="chi" /&gt;&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;Sign Up • Forgot User/Pass? • About&lt;/p&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt; </code></pre> <p>This is the CSS</p> <pre><code>body{background:url(/background.png);font:13px bold Verdana,Geneva,sans-serif;color: #071c28;} .ind{background:url(/index_tmp.png);} img#logo{width:630px;height:225px;background-position:0 -126px;margin-top:8px;} div#head{width:640px;height:360px;margin:10% auto 0 auto;text-align:center;} div#win{width:392px;height:81px;margin-left:114px;margin-right:114px;margin-top:1px;background-position:-126px 0;padding:10px;} div#user{width:392px;margin:0px;padding:0px;} div#flags{width:16px;height:16px;margin-left:10px;margin-top:6px;float:right;} div#body{position:relative;width:640px;height:360px;z-index:10;} div#noise{position:absolute;width:640px;height:360px;background-image:url(./noise.gif);z-index:1;opacity:0;filter:alpha(opacity='0');} form{padding-top:3px;} input{border:0px;vertical-align:top;padding:4px;opacity:0.75;filter:alpha(opacity=75);margin-right:4px;}input:hover{opacity:0.9;filter:alpha(opacity=90);}input:focus{opacity:1;filter:alpha(opacity=100);outline:none;} button{border:0px;margin-right:1px;}button:focus{outline:none;} input#textzap{background-position:0 -105px;width:310px;height:12px;} input.textlog{background-position: -336px -105px;width:149px;height:12px;} button#buttonzap{background-position:0 0;width:58px;height:21px;} button#buttonzap:hover,button#buttonzap:focus{background-position:0 -21px;} button#buttonzap:active{background-position:0 -42px;} button#buttonlog{background-position:-63px 0;width:58px;height:21px;} button#buttonlog:hover,button#buttonlog:focus{background-position:-63px -21px;} button#buttonlog:active{background-position:-63px -42px;} p{display:block;margin:0;margin-top:6px;font-weight: bold;text-align:left;} a:link{text-decoration:none;}a:visited{text-decoration:none;}a:hover{text-decoration:none;}a:active{text-decoration:none;} ul,li,li a{margin:0;padding:0;list-style:none;position:relative;display:inline;width:16px;height:16px;float:inherit;} ul#flag{width:20px;height:20px;margin-top:5px;margin-right:10px;margin-left:6px;float:left;} ul#list{left:-3px;float:left;display:none;width:120px;height:22px;background:url(./flag_tmp.png);padding:1px;padding-top:20px;margin-top:-18px;} ul li{margin:2px;} li:hover ul#list{display:block;} img.flag{background:url(/flag_tmp.png);width:16px;height:16px;} #ita{background-position:0 -43px;} #spa{background-position:-16px -43px;} #fra{background-position:-32px -43px;} #eng{background-position:-48px -43px;} #ger{background-position:-64px -43px;} #jpn{background-position:-80px -43px;} #chi{background-position:-96px -43px;} input::-webkit-input-placeholder{color:#1b3b4d;}input:hover::-webkit-input-placeholder,input:focus::-webkit-input-placeholder{color:#315e77;} input:-moz-placeholder{color:#1b3b4d;}input:hover:-moz-placeholder,input:focus:-moz-placeholder{color:#315e77;} input:-ms-input-placeholder{color:#1b3b4d;}input:hover:-ms-input-placeholder,input:focus:-ms-input-placeholder{color:#315e77;} </code></pre> <p>I didn't add this before 'cause i deleted every space in the HTML, i saw that also that are interpreted in different ways between the browsers.</p> <p>-------------------------[EDIT]-------------------------</p> <pre><code>var BrowserDetect = { init: function () { if (/Firefox[\/\s](\d+\.\d+)/.test(navigator.userAgent))alert("firefox") if (/MSIE (\d+\.\d+);/.test(navigator.userAgent))alert("MSIE") if (/Opera[\/\s](\d+\.\d+)/.test(navigator.userAgent))alert("Opera") if (/Chrome[\/\s](\d+\.\d+)/.test(navigator.userAgent))alert("Chrome") if (/Apple[\/\s](\d+\.\d+)/.test(navigator.userAgent))alert("Safari") } } </code></pre> <p>I've tried this to detect in few lines the browser (from the most used). But it doesn't seems to work... I can use this to change the layout difference as latest solution.</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload