Browser Problem

**aziz09** · Feb 23, 2013 15:47

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:

problem.jpg

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?

**ralph.m** · Feb 23, 2013 17:05

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

**aziz09** · Feb 23, 2013 17:39

Originally Posted by ralph.m

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

Code:

<!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

**fshderri** · Feb 23, 2013 18:02

you have to modify this :

top:50%;
left:50%;

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

**ralph.m** · Feb 23, 2013 22:01

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/...d-columns.html

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

User Tag List

Thread: Browser Problem

Thread Tools

Display

Browser Problem

Bookmarks

Bookmarks

Posting Permissions