index.html:
<!DOCTYPE> <html> <head> <link href='http://fonts.googleapis.com/css?family=Lobster&subset=latin,cyrillic' rel='stylesheet' type='text/css'> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title> Сайт находится в разработке.</title> <link rel="stylesheet" type="text/css" href="style.css"/> </head> <body> <div id="stripe"> <div id="logo" >bla<img src="img/reddot.png"/>bla</div> </div> <div id="construct"> <p>Сайт находится в разработке.</p> </div> </body> </html> css:
/* CSS Document */ *{margin:0;padding:0;} html { background: url(img/back_gray.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } body{ overflow:hidden; } p{ font-family: 'Lobster', 'cursive'; color:#000; font-size:1.8em; text-shadow:1px 1px 1px #fff; } #stripe{ position:relative; top:50%; margin-top:-25px; width:100%; height:50px; background-color:black; } #logo{ height:40px; width:140px; position:relative; left:50%; margin-left:-70px; font-size:2.5em; color:#fff; font-family:"MS Serif", "New York", serif; text-align:center; } #logo img{ height:7px; width:7px; margin-bottom:4px; padding:2px; } #construct{ height:100px; width:100%; position:relative; top:50%; text-align:center; } The problem is that in Opera and Fox, the middle band and the text do not use positioning; they hang at the very top of the page, catching only the margin.
screenshots:
How it should be and how it is in the webkit
Question: what to do with it, how to adjust the layout for all browsers? "I want everything to be like in the second photo"
