[Webinar] Streamline your web hosting managementRegister Today

x
?
Solved

Square div?

Posted on 2008-02-10
3
Medium Priority
?
1,580 Views
Last Modified: 2012-06-27
Why is the red div not more square?
I would really like a 1x1 pixel div

Thanks
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <title></title>
  </head>
  <body>
<div id="container" style="width:200px;height:200px; border:1px solid green"></div>
<script>
var newDiv = document.createElement('DIV');
  newDiv.style.position =  'absolute';
  newDiv.style.width =  '3px';
  newDiv.style.height = '3px';
	newDiv.style.left = '50px';   
	newDiv.style.top = '50px';   
	newDiv.style.border = "1px solid red";   
	newDiv.style.zIndex = 100;   
  document.getElementById('container').appendChild(newDiv)
</script>
  </body>
</html>

Open in new window

0
Comment
Question by:Michel Plungjan
  • 2
3 Comments
 
LVL 10

Accepted Solution

by:
Phatzer earned 2000 total points
ID: 20860667
Have you tried making a 1x1px transparent gif image and putting that inside the div?
0
 
LVL 75

Author Comment

by:Michel Plungjan
ID: 20861075
Hmm, that works - but why?
0
 
LVL 10

Expert Comment

by:Phatzer
ID: 20861114
Because otherwise the browser classes nothing as text, and as the text size will be bigger than 1px, so is the DIV, as is my understanding. The transparent GIF is your friend!
0

Featured Post

Receive 1:1 tech help

Solve your biggest tech problems alongside global tech experts with 1:1 help.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

CSS3 Custom checkboxes This article shows how to style the checkbox form element using only CSS. Works in: Chrome, FF, Safari, Opera, IE9+ Uses modernizr.js to check for :checked pseudo class, falling back to plain old checkboxes (IE8 and bel…
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
Suggested Courses
Course of the Month10 days, 1 hour left to enroll

591 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question