Browser Problem

HTML & CSS
1

Hello. I discovered a problem in my html/css code. When I open my website with chrome and the zoom is set to 100% the border moves out of the black box: look in picture:

but on IE browser on 100% it does not move out of the box. Can someone help so that I can fix it? what is the problem?

2

We would need to see your code or a link. Perhaps you have a fixed height on the container?

3 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Homepage</title>
<style type="text/css">

html, body {height:100%;margin:0;padding:0;}
body  {
	background:#fff;
	color:#000;
	font-size:13px;
	font-family: Arial, Helvetica, sans-serif;
    background-image:url('backgtround.jpg');
     background-repeat: no-repeat;
     background-position:50% 0px;
	 background-color:#969696;
	
	

	
	
}
.myDiv {
	position:absolute;
     width:600px;
     height:300px;
     z-index:15;
     top:50%;
     left:50%;
     margin:-230px 0 0 -280px; /* Half the dimensions of the box */
     border:3px solid #DEDEDE; 
	 background-color:white;
}
.myform {
	margin:50px 100px;

	
	
	}
	
	
	A href { align-right; 
	
	}
	      
		  #menu {
    background: #5a5a5a;

    left: 360px;
	
    position: fixed;
    top: 2px;
    width: 52.7%;
}

#menu ul {
    list-style: none;
    margin: 0px;
}

#menu li {
    border-right: 1px solid #c6c6c6;
    height: 80px;
    float: left;
}

#menu ul li a {
    color:#fff;
    padding: 0 30px;
    height: px;
    display: block;
    text-decoration:none;

    /* Height * 2 - font size */
    line-height: 80px;
    font-size: 12px;

</style>
</head>

<body>

<div id="menu">
   <ul>
      <li id="logo"></li>
      <li><a href="index.html" class="first">Home</a></li>
      <li><a href="Contact Us.html">Contact Us</a></li>
      
      
     
   </ul>
</div>




	
	<div class="myDiv">
		<div class="myform">
			<form id="form1" name="form1" method="post" action="">
			  <label>Your Full Name*:<br />
	
   

				<input type="text" name="name" id="name" />
				  </label><br />
				  <label>E-mail*<br />
			    <input type="text" name="email" id="email" />
				  </label> </br>
				  <label>Phone Number*:<br /> 
			    <input type="text" name="Phone Number" id="name" /> 
				  </label>
				  <label> </br>
				  Country* </br>
				  </label>
				  <select name="mydropdown"> 
 <option value="US">USA</option>
 <option value="UK">United Kingdom </option>
 <option value="CB ">Cuba</option>
  <option value="DK ">Denmark</option>
   <option value="DA ">Dominica</option>
    <option value="ET">Egypt</option>
	 <option value="FE ">France </option>
	  <option value="JA ">Jamaica</option>
	   <option value="KA ">Kenya</option>
	    <option value="LA ">Liberia</option>
		 <option value="PN ">Pakistan</option>
		  <option value="SN ">Sweden</option>
		   <option value="RA ">Russia</option>
		    <option value="VM ">Vietnam</option>
			 <option value="ZE ">Zimbabwe</option>S
			  <option value="PD ">Poland</option>
			   <option value="GE ">Greece</option>
			    <option value="SA ">Syria</option>
				 <option value="HD ">Holland</option>
				  <option value="TD ">Thailand</option>
			</form> </br>
			 <div class="line submit"><input type="submit" value="Sign Up" /></div> 
 
               
		</div>
	</div>
</body>
</html>

please help

4

you have to modify this :

top:50%;
left:50%;

try to change top from 50% to 45% or 40%

5

Placing a background image on the body element and hoping that the rest of the content will line up with that is doomed to failure. It’s better to break your content up into sections and place bg images on those sections, so that everything remaiins flexible. Here’s a demo of what I mean:

http://pageaffairs.com/code-archive/full-width-bands/floated-columns.html

(It doesn’t include bg images, but the principle is the same.