SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    Coding for Jesus LavernGingerich's Avatar
    Join Date
    Jul 2003
    Location
    Tennessee
    Posts
    607
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Absolute Positioning Ignores Padding in Parent Element

    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:

    Code:
    #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?
    Yoder's Smoky Mountain Barbecue
    High quality barbeque smokers, pig roasters, and bbq pit grills.
    Pursuing Life Ministries - Jesus has saved me and given me hope.

  2. #2
    SitePoint Addict CaryD's Avatar
    Join Date
    Nov 2006
    Location
    San Diego, CA
    Posts
    389
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #3
    Coding for Jesus LavernGingerich's Avatar
    Join Date
    Jul 2003
    Location
    Tennessee
    Posts
    607
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here is the page:

    wwwDOTnewcdesignsDOTcom/wayside
    Yoder's Smoky Mountain Barbecue
    High quality barbeque smokers, pig roasters, and bbq pit grills.
    Pursuing Life Ministries - Jesus has saved me and given me hope.

  4. #4
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    Thats what absolutes do , ignore everything else

  5. #5
    Coding for Jesus LavernGingerich's Avatar
    Join Date
    Jul 2003
    Location
    Tennessee
    Posts
    607
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Why does the padding move it to the left then?
    Yoder's Smoky Mountain Barbecue
    High quality barbeque smokers, pig roasters, and bbq pit grills.
    Pursuing Life Ministries - Jesus has saved me and given me hope.

  6. #6
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by LavernGingerich View Post
    Why does the padding move it to the left then?
    Hello

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

    wrapped
    Code:
    <!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. #7
    Coding for Jesus LavernGingerich's Avatar
    Join Date
    Jul 2003
    Location
    Tennessee
    Posts
    607
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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!
    Yoder's Smoky Mountain Barbecue
    High quality barbeque smokers, pig roasters, and bbq pit grills.
    Pursuing Life Ministries - Jesus has saved me and given me hope.


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
  •