PDA

View Full Version : annoying issue, how to fix this



san_crazy
10-31-2008, 04:53 PM
I have been having these 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">.



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

}
#personalhead input#query{
border:solid; position:relative;left:20px;top:16px;
width:300px;border-width:1px;height:22px;
background-color:#63E5FF;font-size:12px;font-family: verdana, sans-serif;
}
#personalhead input#button{
border:solid;position:relative;left:30px;height:20px;
top:15px;width:108px;border:none;font-size:11px;font-family: verdana, sans-serif;
background-image:url(http://www.stripathi.110mb.com/external/images/butt.jpg);
}
#leftpane{
position:relative;
}
#toppane{
position:relative;
}
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>
<script type="text/javascript" language="javascript">
function verifyMe(element)
{
if(document.getElementsByTagName("input")[0].value!=""){
element.action ="http://www.google.com/search";
element.submit();
}
else alert("Please enter a quary");
}
</script>
</head>
<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">
<ul>
<li></li>
<li></li>
</ul>
</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>
</html>




its not a new one, I often find this annoying issue at many occasions.

is there any way to fix this?

bluewalrus
11-02-2008, 10:53 PM
<ul>
<li></li>
<li></li>
</ul>
Are these set to display:inline;?