Absolute Positioning Ignores Padding in Parent Element

HTML & CSS
1

Hello,

I am using absolute positioning to lay some text on top of an image.

The parent element of my box1 div (which holds the text) has left and right padding. The absolute positioning ignores the padding in IE 5.01, 5.5, and 6. It looks fine in my other browsers.

Here is my CSS:


#main {
  clear: both;
  text-align: center;
  padding: 20px 0;
  position: relative;
}
.box1 {
  width: 163px;
  height: 246px;
  position: absolute;
  top: 61px;
  right: 37px;
}

Can you help me to make this look the same in earlier versions of Internet Explorer and in Firefox?

2

Can you provide a url for the page so we can look at it with text, images and everything else? Unfortunately, there isn’t enough to go on here to solve the problem.

Short of seeing the actual page I can only suggest either removing the padding from the parent element or avoid using absolute positioning.

3

Here is the page:

wwwDOTnewcdesignsDOTcom/wayside

4

Hello

Thats what absolutes do , ignore everything else

5

Why does the padding move it to the left then?

6

Hello

? the only difference i get is when i wrap or not wrap the absolute

wrapped


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>12345 12345 12345 12345 12345</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<!-- saved from url=(0022)http://www.domain.com/ -->
<style type="text/css">
#main {
clear: both;
text-align: center;
padding:20px 0;
position:relative;
background:#ffffcc;
}
.box1 {
width: 163px;
height: 246px;
position: absolute;
top: 61px;
right: 37px;
background:#ccffcc;
}
</style>
<script type="text/javascript">

</script>
</head>
<body>

<div id="main">main

<div class="box1">box1</div>

</div>

</body>
</html>
7

I am sorry! It’s actually box1’s “grandparent” element that has padding.

I applied a width: 756px to #main. Now it looks great.

Thanks for your input, guys!