HTML and CSS alignment issues with different browsers
Question
I have a HTML page with css. That page is loading with proper alignment in Chrome but if I load the same page in IE 11 or Mozilla its showing alignment issues. I want to display the alignment as same as in Chrome in all browsers. If Chrome is following any particular resolution then how to set that same resolution of the page in HTML code.
HTML Page:
<!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 Code:
/* 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;
}
1 answers
solution1
0 ACCPTED 2014-08-27 17:20:56
Here is a fiddle for the code you posted.
Your "house logo" image is pushing the menu items to the right in Chrome, but the placeholder image is not the same height in IE so the menu items appear left-aligned.
If this is the issue you're talking about, you could scoot the first item of the menu to the right by adding this to your css file:
#menuDiv li:first-child {
margin-left: 200px;
}
If this is not the alignment issue you're referring to, please be more specific.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
CSS issues with different browsers
Css And Different Browsers Issues
Text and Picture Spacing/Alignment Issues in Different Browsers
html form content and css alignment issues
Play Button Alignment Issues in HTML/CSS
Alignment Issues in html plus css for android devices
html/css edits not updating in different browsers
CSS alignment across all browsers
CSS alignment and margin issues
More CSS alignment issues
Related Tags