...

View Full Version : child nodes going outside of its parent node



san_crazy
10-31-2008, 11:59 AM
hi friends,

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




<!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?

abduraooft
10-31-2008, 12:34 PM
Put position:relative; to div#personalhead

san_crazy
10-31-2008, 12:44 PM
thanks a lot!

i got it solved

san_crazy
10-31-2008, 01:52 PM
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">.



<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?

san_crazy
10-31-2008, 04:56 PM
please some one review the above post



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum