0
У меня есть HTML-страница с css. Эта страница загружается с правильным выравниванием в Chrome, но если я загружаю одну и ту же страницу в IE 11 или Mozilla, она покажет проблемы выравнивания. Я хочу показать выравнивание так же, как в Chrome во всех браузерах. Если Chrome выполняет какое-либо конкретное разрешение, то как установить такое же разрешение страницы в HTML-коде.Проблемы с выравниванием HTML и CSS с разными браузерами
HTML страницы:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<link rel="stylesheet" type="text/css" href="CSS/styles.css" media="screen"/>
<title>Welcome</title>
</head>
<body>
<div id="mainDiv">
<div id="logoDiv">
<div id="logo">
<img src="images/houseLogo.png" alt="House logo" />
</div>
<div id="headingDiv">
<h1>My sweet home</h1>
<h3>We will search for you</h3>
</div>
</div>
<div id="menuDiv">
<ul>
<li><a id="homeRound" href="index.html">Home</a></li>
<li><a id="selectedMenu" href="#">Register</a></li>
<li><a href="postHouse.html">Post property</a></li>
<li><a href="postRequirements.html">Post requirements</a></li>
<li><a href="help.html">Help</a></li>
</ul>
</div>
<!--<div id="validationMessages">
<div id="validationHeading">
<p>Correct the following:</p>
</div>
<div id="errors">
<ul>
<li>Select country.</li>
<li>Select state.</li>
<li>Select city.</li>
<li>Enter area name.</li>
</ul>
</div>
</div>
<div id="validationmessageArrow">
<div id="arrowSymbol"></div>
</div>-->
<form id="registerForm" action="#">
<div id="registerTag">
<ul>
<li><label id="register">Register personal details:</label></li>
<li>
<label id="firstName">First name:</label>
<input type="text" name="firstName"/>
</li>
<li>
<label id="lastName">Last name:</label>
<input type="text" name="lastName"/>
</li>
<li>
<label id="email">E-Mail:</label>
<input type="text" name="email"/>
</li>
<li>
<label id="mobileNumber">Mobile number:</label>
<input type="text" name="mobileNumber"/>
</li>
<li><a id="registerButton" href="#" onclick="document.forms['registerForm'].submit();">Register</a> <a id="clearButton" href="#" onclick="document.forms['registerForm'].reset();">Clear</a></li>
</ul>
</div>
</form>
</div>
<div id="copyRight">
<center><p>Copyright © 2014 My sweet home All Rights Reserved</p></center>
</div>
</body>
</html>
CSS код:
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
body {
background-image:url('../images/background.jpg');
background-attachment:fixed;
}
#mainDiv {
margin:0px auto;
width:1000px;
height:auto;
background-color:white;
border-radius:0px 0px 10px 10px;
}
#logoDiv {
padding-top:10px;
padding-left:10px;
padding-bottom:10px;
}
#logo {
float:left;
}
#logo img {
width:200px;
}
#headingDiv {
font-family:Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
}
#headingDiv h1{
padding-top:20px;
padding-left:250px;
font-weight:bold;
font-size:30px;
}
#headingDiv h3{
padding-top:5px;
padding-left:289px;
font-style:italic;
font-size:15px;
}
#menuDiv {
padding-top:40px;
width:980px;
margin:0px auto;
}
#menuDiv ul {
height:35px;
background-color:black;
border-radius:5px;
}
#menuDiv li {
display:inline;
float:left;
padding-top:10px;
padding-bottom:10px;
border-right:1px gray solid;
}
#menuDiv li a {
font-family:Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
font-size:15px;
font-weight:bold;
text-decoration:none;
color:white;
padding:10px;
}
#menuDiv ul li a#selectedMenuHome {
font-family:Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
font-size:15px;
font-weight:bold;
text-decoration:none;
color:black;
background-color:orange;
padding-top:9px;
padding-bottom:9px;
border-radius:5px 0px 0px 5px;
}
#menuDiv ul li a#selectedMenu {
font-family:Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
font-size:15px;
font-weight:bold;
text-decoration:none;
color:black;
background-color:orange;
padding-top:9px;
padding-bottom:9px;
}
#menuDiv li a:hover {
font-family:Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
font-size:15px;
font-weight:bold;
text-decoration:none;
color:black;
background-color:orange;
padding-top:9px;
padding-bottom:9px;
}
#menuDiv li a#homeRound:hover {
font-family:Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
font-size:15px;
font-weight:bold;
text-decoration:none;
color:black;
background-color:orange;
padding-top:9px;
padding-bottom:9px;
border-radius:5px 0px 0px 5px;
}
#informationDiv {
width:980px;
margin:0px auto;
padding-top:10px;
}
#informationDiv ul {
padding:2px;
background-color:silver;
border-radius:5px;
}
#informationDiv ul li {
font-family:Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
font-size:15px;
display:inline;
color:black;
padding-right:20px;
}
#validationMessages {
width:490px;
margin-left:10px;
margin-top:10px;
padding-bottom:10px;
background-color:#f2dede;
border-radius:5px;
}
#validationMessages #validationHeading p {
font-family:Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
font-size:15px;
padding-top:20px;
padding-left:30px;
color:#b94a48;
text-decoration:underline;
}
#validationMessages #errors ul {
padding-left:48px;
padding-top:10px;
}
#validationMessages #errors ul li {
font-family:Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
color:#b94a48;
font-size:15px;
list-style:decimal;
}
#validationmessageArrow {
padding-left:30px;
}
#arrowSymbol {
width:0;
height:0;
padding-left:5px;
border-left:15px solid transparent;
border-right:15px solid transparent;
border-top:15px solid #f2dede;
margin-top:-1px;
}
#searchDiv {
width:980px;
margin:0px auto;
padding-top:10px;
}
#searchInnerDiv {
height:auto;
border:1px black solid;
border-radius:5px;
background-image:url('../images/searchBackground.jpg');
background-size:1920px 350px;
background-attachment:scroll;
background-repeat:no-repeat;
}
#searchLocality ul {
padding:5px;
}
#searchLocality ul li {
display:inline;
}
#searchLocality ul li label {
font-family:Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
font-size:15px;
padding-left:20px;
}
#searchLocality ul li input#autocomplete {
font-family:Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
font-size:15px;
border:1px black solid;
width:337px;
}
#searchLocality ul li label#exampleLightColor {
font-family:Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
font-size:15px;
color:#999999;
padding-left:5px;
}
#searchLocality ul li label#area {
font-family:Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
font-size:15px;
color:black;
padding-left:23px;
}
#searchLocality ul li input#sublocality_level_2 {
font-family:Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
font-size:15px;
border:1px black solid;
width:150px;
}
#localityDiv ul {
padding:5px;
}
#localityDiv ul li {
display:inline;
padding-left:20px;
}
#localityDiv ul li label {
padding-right:17px;
font-family:Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
font-size:15px;
}
#localityDiv ul li select {
font-family:Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
font-size:15px;
width:150px;
border:1px black solid;
}
#localityDiv ul li input {
font-family:Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
font-size:15px;
width:150px;
border:1px black solid;
}
#propertySearch ul {
padding:5px;
}
#propertySearch ul li {
display:inline;
padding-left:20px;
}
#propertySearch ul li label {
font-family:Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
font-size:15px;
padding-right:20px;
}
#propertySearch ul li select {
font-family:Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
font-size:15px;
width:150px;
border:1px black solid;
}
#propertySearch ul li input {
font-family:Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
font-size:15px;
width:92px;
border:1px black solid;
}
#searchButtons {
padding-top:10px;
padding-left:25px;
width:980px;
}
#advancedSearch {
float:left;
}
#advancedSearch a {
font-family:Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
font-size:15px;
width:200px;
text-decoration:underline;
color:white;
padding:2px;
background-color:black;
border-radius:5px;
padding-left:10px;
padding-right:10px;
}
#advancedSearch a:hover {
background-color:orange;
padding-bottom:2px;
padding-top:2px;
color:black;
border-radius:5px;
padding-left:10px;
padding-right:10px;
}
#searchButton {
padding-right:50px;
float:none;
padding-bottom:10px;
}
#searchButton a {
font-family:Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
font-size:15px;
text-decoration:underline;
color:white;
padding:2px;
background-color:black;
border-radius:5px;
padding-left:20px;
padding-right:20px;
margin-left:718px;
text-decoration:none;
}
#searchButton a:hover {
background-color:orange;
padding-bottom:2px;
padding-top:2px;
color:black;
border-radius:5px;
padding-left:20px;
padding-right:20px;
text-decoration:none;
}
#bodyTag {
width:980px;
margin:0px auto;
padding-top:10px;
padding-bottom:15px;
}
#bodyTag ul {
height:auto;
border:1px black solid;
padding-left:317px;
padding-right:317px;
padding-top:80px;
padding-bottom:70px;
border-radius:5px;
background-image:url('../images/formsBackground.jpg');
background-size:980px 600px;
background-attachment:scroll;
background-repeat:no-repeat;
}
#bodyTag ul li {
display:block;
padding-bottom:10px;
}
#bodyTag ul li input {
font-family:Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
font-size:15px;
border:1px black solid;
width:250px;
}
#bodyTag ul li label#login {
font-family:Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
font-size:15px;
padding-right:41px;
width:10px;
text-decoration:underline;
}
#bodyTag ul li label#email {
font-family:Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
font-size:15px;
padding-right:41px;
width:10px;
}
#bodyTag ul li label#password {
font-family:Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
font-size:15px;
padding-right:20px;
width:10px;
}
#bodyTag ul li a#loginButton {
font-family:Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
font-size:15px;
border-radius:5px;
background-color:black;
color:white;
padding:2px 25px 2px 25px;
border:1px black solid;
text-decoration:none;
}
#bodyTag ul li a#loginButton:hover {
font-family:Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
font-size:15px;
background-color:orange;
color:black;
border:1px orange solid;
border-radius:5px;
padding:2px 25px 2px 25px;
text-decoration:none;
}
#bodyTag ul li a#clearButton {
font-family:Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
font-size:15px;
border-radius:5px;
background-color:black;
color:white;
padding:2px 25px 2px 25px;
border:1px black solid;
text-decoration:none;
}
#bodyTag ul li a#clearButton:hover {
font-family:Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
font-size:15px;
background-color:orange;
color:black;
border:1px orange solid;
padding:2px 25px 2px 25px;
border-radius:5px;
text-decoration:none;
}
#registerTag {
width:980px;
margin:0px auto;
padding-top:10px;
padding-bottom:15px;
}
#registerTag ul {
padding:50px 300px;
height:auto;
border:1px black solid;
border-radius:5px;
background-image:url('../images/formsBackground.jpg');
background-size:980px 600px;
background-attachment:scroll;
background-repeat:no-repeat;
}
#registerTag ul li {
display:block;
padding-bottom:10px;
}
#registerTag ul li input {
font-family:Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
font-size:15px;
border:1px black solid;
width:248px;
}
#registerTag ul li select {
font-family:Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
font-size:15px;
border:1px black solid;
width:250px;
}
#registerTag ul li label#register {
font-family:Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
font-size:15px;
width:10px;
text-decoration:underline;
}
#registerTag ul li label#firstName {
font-family:Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
font-size:15px;
padding-right:29px;
width:10px;
}
#registerTag ul li label#lastName {
font-family:Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
font-size:15px;
padding-right:32px;
width:10px;
}
#registerTag ul li label#email {
font-family:Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
font-size:15px;
padding-right:54px;
width:10px;
}
#registerTag ul li label#mobileNumber {
font-family:Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
font-size:15px;
padding-right:0px;
width:10px;
}
#registerTag ul li a#registerButton {
font-family:Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
font-size:15px;
border-radius:5px;
background-color:black;
color:white;
padding:2px 25px 2px 25px;
border:1px black solid;
text-decoration:none;
}
#registerTag ul li a#registerButton:hover {
font-family:Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
font-size:15px;
background-color:orange;
color:black;
border:1px orange solid;
padding:2px 25px 2px 25px;
border-radius:5px;
text-decoration:none;
}
#registerTag ul li a#clearButton {
font-family:Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
font-size:15px;
border-radius:5px;
background-color:black;
color:white;
padding:2px 25px 2px 25px;
border:1px black solid;
text-decoration:none;
}
#registerTag ul li a#clearButton:hover {
font-family:Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
font-size:15px;
background-color:orange;
color:black;
border:1px orange solid;
padding:2px 25px 2px 25px;
border-radius:5px;
text-decoration:none;
}
#copyRight {
padding-top:10px;
padding-bottom:10px;
}
#copyRight p {
font-family:Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
font-size:15px;
color:black;
}
#helpContentTag {
width:980px;
margin:0px auto;
padding-top:10px;
padding-bottom:15px;
}
#helpContentTag ul {
height:auto;
border: 1px black solid;
padding-left:200px;
padding-right:200px;
padding-top:80px;
padding-bottom:70px;
border-radius:5px;
background-image:url('../images/formsBackground.jpg');
background-size:980px 900px;
background-attachment:scroll;
background-repeat:no-repeat;
}
#helpContentTag ul li {
display:block;
padding-bottom:10px;
}
#helpContentTag ul li p {
font-family:Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
font-size:15px;
text-align:justify;
}
Никто не сможет вам помочь, не добавляя по крайней мере фрагмент HTML и CSS. – nirazul
добавьте скрипку и код – Riskbreaker
Нельзя сказать ничего без кода. Скорее всего, решение будет включать сброс CSS. – MLeFevre