#1
  1. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2003
    Posts
    1
    Rep Power
    0

    css padding inside absolute div


    PHP Code:
    <html>
    <
    head>
    <
    style type="text/css">
    body {
        
    margin0px;
    }
    #leftbox {
        
    border1px dashed;
        
    positionabsolute;
        
    width150px;
        
    /*padding: 10px;*/
    }
    #rightbox {
        
    border1px dashed;
        
    positionabsolute;
        
    left151px;
        
    /*padding: 10px;*/
    }
    </
    style>
    </
    head>

    <
    body>
    <
    div id="leftbox">
      
    Lorem ipsum dolor sit ametconsectetuer adipiscing elitSuspendisse potentiSed hendrerit purus sed elitDuis vitae nuncIn tempor fermentum leoFusce dapibus.
    </
    div>
    <
    div id="rightbox">
      
    Lorem ipsum dolor sit ametconsectetuer adipiscing elitSuspendisse potentiSed hendrerit purus sed elitDuis vitae nuncIn tempor fermentum leoFusce dapibus.
      
    Quisque orciCurabitur in sapienNullam in pedeAenean lacinia augue ac massaMaecenas ut risus et lectus tempor egestasNulla tellus tellusposuere sedbibendum
      vitae
    mattis euodioMorbi sagittis pede vel tortorFusce vestibulum congue nislUt vel diam sit amet felis iaculis aliquamNulla wisi tortormollis sedpellentesque
      quis
    facilisis nonduiUt massaDuis egestas purus vel anteNam condimentum pulvinar purusMorbi tempus dolor id anteMaecenas nibh enimvulputate vitaeultrices
      non
    pulvinar eumetusSed sit amet tortorCurabitur at lacus sit amet lorem porttitor commodoProin justoAliquam erat volutpatFusce sit amet tortorCurabitur quis
      sem et metus posuere tempus
    Curabitur lobortis est nec massa.
    </
    div>
    </
    body>
    </
    html
    When I use that code as it currently is, everything loooks fine in IE and netscape, as soon as I uncomment the padding, IE will preserve the positions and the div's will be padded accordingly, in netscape and Firebird, the rightbox and leftbox divs overlap? How can I add padding to the div without the overlap?
  2. #2
  3. Thanks Johnny Hart (BC) R.I.P.

    Join Date
    May 2003
    Location
    Dallas
    Posts
    5,268
    Rep Power
    1956
    This is IE5.x's buggy rendering. The proper way to do things is for the padding and border to be added to the width. Modern browsers such as NS6+, Mozilla, Opera, and others do this correctly. This seems to be the only CSS bug that got fixed in IE6.

    As an example, the box should be 100+20+2=122px wide if width:100px; padding:10px; border: 1px;

    IE5.x will render the same box as 100px wide. IE subtracts the padding and border from the width.

    For a hack, check this site .

    Now that you can make IE5x work correctly, you can adjust your positioning appropriately.
    Last edited by kk5st; July 18th, 2003 at 03:38 AM.
    There are those who manage to build a web site without knowing what they're doing; thereby proving to themselves they do, indeed, know what they're doing.

    My html and css workshop, demos and tutorials.
    Ask a better question, get a better answer.

IMN logo majestic logo threadwatch logo seochat tools logo