Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    Regular Coder
    Join Date
    Sep 2008
    Posts
    116
    Thanks
    2
    Thanked 0 Times in 0 Posts

    child nodes going outside of its parent node

    hi friends,

    there are two <input> elements inside a <div> block as below, the problem is in the bold block


    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <!--  Created with the CoffeeCup HTML Editor 2008  -->
    <!--           http://www.coffeecup.com/           -->
    <!--        Brewed on 10/30/2008 6:53:15 AM        -->
    <head>
      <title></title>
      <meta http-equiv="content-type" content="text/html;charset=UTF-8" />
      <link rel="stylesheet" type="text/css" href="http://localhost/WebSite/external/stylesheets/header_menu.css"></link>
      
      <style type="text/css">
        div#personalhead
        {
    	  background-image:url(http://localhost/WebSite/external/images/resourcehead.png);
    	  margin-left: 96px;margin-top:155px; width:804px;height:59px;
    	  background-position:center; 	  
        }  
    	
       div#mainbg
        {    
    	  
    	  background-image:url(http://www.stripathi.110mb.com/external/images/resmiddbg.png);
          background-position:right;background-repeat:repeat-y;    
    	  position: absolute; left:105px; top: 239px;
    	  width: 807px;height: 790px;	  
    	  
        }   	
    	
      </style>
    </head>
    <body style="background-color: #EFFFFB;">
       <div id="personalhead">
         <input type="text" style=" border:solid; position:absolute;left:20px;top:20px;width:300px;border-width:1px;"></input>
    	 <input type="button" style="border:solid;position:absolute;left:330px;top:20px;width:100px;"></input>
       </div>
       <div id="header"></div>
       <div id="mainbg"></div>
       <a style="position:absolute;left:106px;top:211px"><img  src="http://www.stripathi.110mb.com/external/images/resuppbg.png" /></a>
       <a style="position:absolute;left:105px;top:1029px"><img  src="http://www.stripathi.110mb.com/external/images/reslowbg.png" /></a>
      
       
    </body>
    </html>
    what I get is, the input elements doesn't seems to be inside its parent node however, it rather goes at the position relative to the whole page. I mean, these two elements as according to its position, goes top left of the page not inside its parent node.

    why there is so?
    Last edited by san_crazy; 10-31-2008 at 12:02 PM.

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,851
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Put position:relative; to div#personalhead
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    Regular Coder
    Join Date
    Sep 2008
    Posts
    116
    Thanks
    2
    Thanked 0 Times in 0 Posts
    thanks a lot!

    i got it solved

  • #4
    Regular Coder
    Join Date
    Sep 2008
    Posts
    116
    Thanks
    2
    Thanked 0 Times in 0 Posts
    there few other problems indeed, I have been having this problem far many days;

    1--one of these two <input> elements takes dissimilar position in IE and FF. actually the problem is with <input type="submit"> button.
    I have assigned a value = 15px; as its top relative position, but it resides inside its parent node little upper in FF2.0.0.x than what in case of IE7.0;

    2-- when I add two <div> elements inside <div id="mainbg">, the two <a> nodes below this get displaced from their original positions. the likely got the position relative to <div id="mainbg">.

    Code:
      <body style="background-color: #EFFFFB;">  
       <div id="personalhead">
        <form action="" name=f" onSubmit="return verifyMe(this)">
          <input id="query" type="text" maxlength="2048" size="55" name="q"></input>
    	  <input id="button" type="submit" name="btnG" value="Google Search"></input>
    	</form> 
       </div>
        <div id="header"></div>
       <div id="mainbg">
          <div id="leftpane">
    	  </div>
    	  <div id="toppane">
    	 </div>
       </div>
       <a style="position:relative;left:106px;top:211px"><img  src="http://www.stripathi.110mb.com/external/images/resuppbg.png" /></a>
       <a style="position:relative;left:105px;top:1029px"><img  src="http://www.stripathi.110mb.com/external/images/reslowbg.png" /></a>
       
       
    </body>
    its not a new one, I often find this annoying issue at many occasions.

    is there any way to fix this?
    Last edited by san_crazy; 10-31-2008 at 02:56 PM.

  • #5
    Regular Coder
    Join Date
    Sep 2008
    Posts
    116
    Thanks
    2
    Thanked 0 Times in 0 Posts
    please some one review the above post


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •