SitePoint Sponsor

User Tag List

Results 1 to 5 of 5

Thread: Browser Problem

  1. #1
    SitePoint Member
    Join Date
    Feb 2013
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Browser Problem

    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?

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,177
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    We would need to see your code or a link. Perhaps you have a fixed height on the container?

  3. #3
    SitePoint Member
    Join Date
    Feb 2013
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    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
    Last edited by ralph.m; Feb 23, 2013 at 21:59.

  4. #4
    SitePoint Member
    Join Date
    Feb 2013
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    you have to modify this :

    top:50%;
    left:50%;

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

  5. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,177
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •