opera layout problem works in fiddle but not in live web site -- how
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Look Around You</title>
</head>
<body>
<div id="fade"></div>
<div id="wrapper">
<div id="header">
<div id="logo">
<h1><a href="http://lookaroundyou.net">Look Around You</a></h1>
</div>
<div id="search">
<input type="text"/>
<input type="button" value="search"/>
</div>
<p class="clear"/>
<div id="horNav">
<ul class="horNav">
<li><a class="home" href="#">HOME</a></li>
<li><a class="submit" href="#">SUBMIT</a></li>
</ul>
<ul class="horLeft">
<li><a class="tags" href="#">TAGS</a></li>
</ul>
<ul class="advertisment">
<li ><a class="contact" href="#">CONTACT</a></li>
</ul>
<ul class="horRight">
<li><a class="hello" href="#">HELLO</a></li>
</ul>
</div>
</div>
<div id="posts">
<p></p>
</div>
<div id="verNav">
<p></p>
<div id="category">
<ul></ul>
</div>
<div id="country">
<ul></ul>
</div>
</div>
<div id="adverts">
<p>adverts</p>
</div>
<div id="footer">
<ul class="horNav">
<li class="horNav"><a href="#">TOP</a></li>
</ul>
</div>
</div>
</body>
</html>
@font-face {
font-family: 'QuicksandBook';
src: url('Quicksand_Book-webfont.eot');
src: url('Quicksand_Book-webfont.eot?#iefix') format('eot'),
url('Quicksand_Book-webfont.woff') format('woff'),
url('Quicksand_Book-webfont.ttf') format('truetype'),
url('Quicksand_Book-webfont.svg#webfontQNKLE8Me') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'QuicksandBold';
src: url('Quicksand_Bold-webfont.eot');
src: url('Quicksand_Bold-webfont.eot?#iefix') format('eot'),
url('Quicksand_Bold-webfont.woff') format('woff'),
url('Quicksand_Bold-webfont.ttf') format('truetype'),
url('Quicksand_Bold-webfont.svg#webfont41HQJ7Rv') format('svg');
font-weight: normal;
font-style: normal;
}
*{
margin:0;
padding:0;
font: 12px arial,helvetica,verdana,sans-serif;
color:black;
list-style: none;
text-decoration: none;
text-align: left;
}
body{
text-align: center;
}
html{
overflow-y: scroll;
}
#wrapper{
width:85%;
margin:0 auto;
min-width:720px;
max-width:1000px;
}
/* #header, #logo, #category,#country{
width: 100%;
float:left;
}*/
#header{
margin-top: 15px;
width: 100%;
}
#logo{
max-width: 400px;
float: left;
}
#search{
float: right;
max-width: 200px;
}
#horNav{
border-bottom: 2px solid #d5d5d5;
border-top: 2px solid #d5d5d5;
padding: 2px 0;
overflow: hidden;
display: block;
width: 100%;
}
input{
display: inline;
}
#posts{
width:50%;
max-width: 522px;
z-index: 200;
}
div.post{
position: relative;
}
#verNav{
width:20%;
margin:0 2%;
max-width: 130px;
}
#adverts{
width:25%;
}
#posts,#verNav,#adverts{
float:left;
}
#posts div.post,#verNav div, #adverts div{
margin-top:25px;
}
#posts embed, #posts object{
width: 100%;
max-width: 512px;
height: 288px;
}
#pages{
display: block;
overflow: hidden;
width: 100%;
}
#footer{
width:100%;
border-bottom: 2px solid #d5d5d5;
border-top: 2px solid #d5d5d5;
padding: 2px 0;
clear:both;
display: block;
overflow: hidden;
margin-bottom: 20px;
}
#mysql{
margin-top: 20px;
}
#mysql label{
float: left;
width: 100px;
}
#mysql label,#mysql input{
font-size: 14px;
margin-bottom: 4px;
}
#mysql input{
border:1px solid black;
}
#mysql input:textarea{
width: 150px;
}
.clear{
clear: both;
}
#logo h1 a{
font-style:italic;
text-decoration: none;
font-size: 44px;
}
#horNav a{
/* background: black;*/
}
#category{
display: none;
}
#verNav p{
font-weight: bold;
font-style: italic;
margin-bottom: 10px;
}
#verNav li{
/*padding: 1px 0;
border-top: 1px #b8baba solid;*/
}
#verNav ul{
/* margin-right: 75px;*/
/* border-bottom: 1px #b8baba solid;*/
}
#verNav a, #verNav li{
font-family: 'QuicksandBook';
font-size: 13px;
color:#6b6f70;
}
#verNav li{
margin-bottom:1px;
}
#verNav p{
font-family: 'QuicksandBook';
font-size: 13px;
color:#14b2c3;
}
.horNav li{
float:left;
border-right:2px solid #e6e6dc;
}
.horLeft{
float: left;
}
.horRight{
float: right;
}
.advertisment li{
float:right;
border-left:2px solid #e6e6dc;
}
#horNav a,#footer a{
display:block;
padding:3px 3px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 20px;
/* color:white;*/
font-family: HELVETICA NEUE;
font-size: 18px;
/* height: 37px;*/
}
#horNav li, #footer li{
padding: 0 2px;
}
#horNav a:hover, #footer a:hover{
background:#e6e6dc;
}
.home{
color: #e23598;
}
.submit{
color: #ffd236;
}
.tags{
color: #a5c43a;
}
.hello{
color: #ffd236;
}
.contact{
color: #a5c43a;
}
#verNav a:hover{
background: #e6e6dc;
}
iframe{
border: none;
font-size: 14px;
}
#posts div{
border-bottom: 2px black solid;
margin-bottom: 20px;
}
#posts iframe{
border: none;
width:100%;
height:288px;
max-width: 512px;
}
.title{
font-size: 20px;
font-family: 'QuicksandBold';
color: #6b6f70;
}
.description{
font-family: HELVETICA NEUE;
font-size: 14px;
border-bottom: 1px grey dotted;
margin-top: 14px;
padding-bottom: 5px;
text-align: justify;
}
.info{
font-family: HELVETICA NEUE;
font-size: 14px;
color: #6b6f70;
padding: 5px 0;
}
.category,.country{
font-family:helevetica neue;
font-size:14px;
color: #6b6f70;
}
#fade{
position: fixed;
top: 0;
left: 0;
background: #5f5f5f;
z-index: -1开发者_如何学运维00;
width: 100%;
height: 100%;
opacity:0;
}
FIDDLE VERSION
LIVE VERSIONP.S. I'm talking about div#search being positioned under div#logo in my live version, but works properly in jsfiddle? browser in question OPERA.
many thanks
JSFiddle ignores your Doctype and uses the HTML 5 Doctype. This triggers standards mode.
Your Doctype (HTML 4 Transitional with no URI) triggers Quirks mode.
If you want to use Transitional, use the Doctype specified in the specification and not your abbreviated one.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
加载中,请稍侯......
精彩评论