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">.

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; 	
	    
    } 
   #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;?

Thread: annoying issue, how to fix this

Thread Tools

Search Thread

annoying issue, how to fix this

Bookmarks

Bookmarks

Posting Permissions