simple div arrangement is displaced by 1px

Forum Moderators: not2easy

Message Too Old, No Replies

simple div arrangement is displaced by 1px

only depending on which colors are used, no other variables involved!

BobDobbs

12:52 am on Sep 14, 2010 (gmt 0)

Hello, and thanks in advance for any assistance you could offer.

I've been making a website recently and come across the most unfathomable problem. I've set up a test page to demonstrate the problem, here [lhpmetal.transcix.com]. Ignore the first row of three squares, as the first square absolutely refuses to show up.

The problem is demonstrated in the bottom set of three squares--clearly visible is a white line going down the left side of the red square, and a black line going down the right side. And the most astounding thing is that the problem only arises when certain colors are put next to each other and for other colors it works just fine.

The CSS and HTML on this test website is extremely simple, and I'm hoping there is a solution to this problem, that it's not just a deficiency of the internet. I've tried everything and nothing works.

Thank you very much for any assistance you can offer on this mysterious problem.

birdbrain

12:23 pm on Sep 14, 2010 (gmt 0)

Hi there BobDobbs,

and a warm welcome to these forums. ;)

Your problems are caused by typing errors, a miscalculation and spelling mistakes

typing errors:- 6 div tags missing the closing ">"
miscalculation:- left:250px for the first blue square should be left:50px;
spelling mistakes:- English "grey" should be U.S. "gray"

The code of course will fail validation and should really be coded more like this...


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
 "http://www.w3.org/TR/html4/strict.dtd"> 
<html lang="en"> 
<head> 
 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 
<meta name="language" content="english">  
<meta http-equiv="Content-Style-Type" content="text/css"> 
 
<title>little boxes</title> 
 
<style type="text/css"> 
#container { 
 position:relative; 
 width:1000px; 
 height:1000px; 
 background-color:black; 
 } 
#container div { 
 position:absolute; 
 width:100px; 
 height:100px; 
 } 
#box1 { 
 top:50px;  
 left:50px; 
 background-color:blue; 
 } 
#box2 { 
 top:50px;  
 left:150px; 
 background-color:white; 
 } 
#box3 { 
 top:50px;  
 left:250px; 
 background-color:blue; 
 } 
#box4 { 
 top:300px;  
 left:50px; 
 background-color:gray; 
 } 
#box5 { 
 top:300px;  
 left:150px; 
 background-color:red; 
 } 
#box6 { 
 top:300px;  
 left:250px; 
 background-color:gray; 
 } 
</style> 
 
</head> 
<body> 
 
<div id="container"> 
 <div id="box1"></div> 
 <div id="box2"></div> 
 <div id="box3"></div> 
 <div id="box4"></div> 
 <div id="box5"></div> 
 <div id="box6"></div> 
</div> 
 
</body> 
</html>

birdbrain