School Assignment? Project Due Tomorrow? Chat LIVE With A Programming Expert!

Welcome to Dream.In.Code
Become an Expert!

Join 300,455 Programmers for FREE! Get instant access to thousands of experts, tutorials, code snippets, and more! There are 1,599 people online right now. Registration is fast and FREE... Join Now!




Div positioning problem in FF (not IE).

 

Div positioning problem in FF (not IE).

livium

4 Jul, 2009 - 02:04 AM
Post #1

D.I.C Regular
***

Joined: 21 Dec, 2008
Posts: 294


My Contributions
I have this div called apDiv46 which doesn't position where I want in FF, but it does in IE.

This is how it is shown in Dreamweaver and in IE (the first picture), and in FF (the second one). The div in question is that in which i wrote 'This is a test'. The problem is that in FF it puts on top of page, not where you see it in DW.

This is the CSS for apDiv45:
CODE

#apDiv45 {
    position:absolute;
    background-color:#CCC;
    font-family:monospace;
    font-size:14px;
    top:226px;
    left:18px;
    width:141px;
    height: 3px;
}


and this is the entire code for my page:

CODE


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="stilul.css" rel="stylesheet" type="text/css" />


<style type="text/css">
<!--
#apDiv10 {
    position:absolute;
    left:167px;
    top:25px;
    width:10px;
    height:1400px;
    z-index:3;
}
#apDiv11 {
    position:absolute;
    width:10px;
    height:1400px;
    z-index:4;
    left: 1046px;
    top: 24px;
}
#apDiv12 {
    position:absolute;
    width:889px;
    height:12px;
    z-index:5;
    left: 167px;
    top: 13px;
}
#apDiv13 {
    position:absolute;
    width:889px;
    height:10px;
    z-index:6;
    left: 167px;
    top: 1415px;
}
#apDiv14 {
    position:absolute;
    left:179px;
    top:266px;
    width:869px;
    height:1158px;
    z-index:7;
}
#apDiv15 {
    position:absolute;
    width:838px;
    height:81px;
    z-index:8;
    left: 13px;
    top: -152px;
}
#apDiv16 {
    position:absolute;
    width:96px;
    height:78px;
    z-index:8;
    left: 352px;
    top: -46px;
}
#apDiv17 {
    position:absolute;
    width:71px;
    height:20px;
    z-index:8;
    left: 616px;
    top: 21px;
}
#apDiv18 {
    position:absolute;
    width:50px;
    height:20px;
    z-index:8;
    left: 717px;
    top: 20px;
}
#apDiv19 {
    position:absolute;
    width:79px;
    height:21px;
    z-index:9;
    left: 536px;
    top: 49px;
}
#apDiv20 {
    position:absolute;
    width:74px;
    height:21px;
    z-index:10;
    left: 616px;
    top: 49px;
}
#apDiv21 {
    position:absolute;
    width:126px;
    height:55px;
    z-index:11;
    left: 459px;
    top: 49px;
}
#apDiv22 {
    position:absolute;
    width:62px;
    height:63px;
    z-index:11;
    left: 498px;
    top: 43px;
}
#apDiv23 {
    position:absolute;
    width:53px;
    height:51px;
    z-index:11;
    left: 594px;
    top: 24px;
}
#apDiv24 {
    position:absolute;
    width:236px;
    height:115px;
    z-index:12;
    left: 97px;
    top: 10px;
}
#apDiv25 {
    position:absolute;
    width:57px;
    height:24px;
    z-index:12;
    left: 9px;
    top: 19px;
}
#apDiv26 {
    position:absolute;
    width:457px;
    height:22px;
    z-index:13;
    left: 77px;
    top: 23px;
}
#apDiv27 {
    position:absolute;
    width:50px;
    height:20px;
    z-index:8;
    left: 535px;
    top: 24px;
}
#apDiv28 {
    position:absolute;
    width:52px;
    height:24px;
    z-index:14;
    left: 713px;
    top: 51px;
}
#apDiv29 {
    position:absolute;
    width:862px;
    height:948px;
    z-index:9;
    left: 0px;
    top: 149px;
}
#apDiv30 {
    position:absolute;
    width:39px;
    height:47px;
    z-index:10;
    left: 464px;
    top: 1000px;
}
#apDiv31 {
    position:absolute;
    width:47px;
    height:47px;
    z-index:11;
    left: 325px;
    top: 1000px;
}
#apDiv32 {
    position:absolute;
    width:58px;
    height:24px;
    z-index:12;
    left: 391px;
    top: 1091px;
    font-weight: bold;
    font-size: 18px;
}
-->
</style>
<script src="about.js"></script>
<title> Free Code </title>
<script type="text/javascript">

function user_is_signed_in()
{
document.getElementById("apDiv7").style.visibility="visible";
document.getElementById("apDiv9").style.visibility="hidden";
document.getElementById("apDiv8").style.visibility="visible";

}

function user_is_not_signed_in()
{
document.getElementById("apDiv7").style.visibility="hidden";
document.getElementById("apDiv9").style.visibility="visible";
document.getElementById("apDiv8").style.visibility="visible";

}

function upload()
{
document.getElementById("apDiv14").innerHTML="";    
document.getElementById("apDiv35").style.visibility="visible";

    
}


</script>
<style type="text/css">
tr.table_body:hover {
background : LightBlue;
}
#apDiv33 {
    position:absolute;
    width:123px;
    height:21px;
    z-index:5;
    left: 918px;
    top: 226px;
    text-align:right;
    font-weight: bold;
    color:#00F;
}
#apDiv33:hover
{
color:#FFF;
}
#apDiv34 {
    position:absolute;
    left:262px;
    top:275px;
    width:58px;
    height:32px;
    z-index:9;
}
#apDiv35 {
    position:absolute;
    left:221px;
    top:360px;
    width:700px;
    height:351px;
    z-index:15;
}
#apDiv36 {
    position:absolute;
    width:215px;
    height:25px;
    z-index:1;
    left: 231px;
    top: 47px;
}
#apDiv37 {
    position:absolute;
    width:76px;
    height:20px;
    z-index:2;
    left: 149px;
    top: 50px;
}
#apDiv38 {
    position:absolute;
    width:75px;
    height:20px;
    z-index:3;
    left: 149px;
    top: 80px;
}
#apDiv39 {
    position:absolute;
    width:215px;
    height:26px;
    z-index:4;
    left: 231px;
    top: 76px;
}
#apDiv40 {
    position:absolute;
    width:53px;
    height:24px;
    z-index:5;
    left: 233px;
    top: 307px;
}
#apDiv41 {
    position:absolute;
    width:438px;
    height:165px;
    z-index:6;
    left: 234px;
    top: 117px;
}
#apDiv42 {
    position:absolute;
    width:75px;
    height:18px;
    z-index:7;
    left: 149px;
    top: 123px;
}
#apDiv43 {
    position:absolute;
    width:200px;
    height:115px;
    z-index:8;
    left: 121px;
    top: 151px;
}
#apDiv44 {
    position:absolute;
    width:87px;
    height:19px;
    z-index:12;
    left: 771px;
    top: -186px;
    font-size: 18px;
    font-weight: bold;
    color:#009;
}
a {
text-decoration: none;
}

}
#apDiv45 {
    position:absolute;
    background-color:#CCC;
    font-family:monospace;
    font-size:14px;
    top:226px;
    left:18px;
    width:141px;
    height: 3px;
}
</style>

</head>

<body
<?php
session_start();
if (!isset($_SESSION['page_string'])) $_SESSION['page_string']="one";
if (isset($_SESSION['buton_sign_in'])) echo ' onload="user_is_signed_in()"';
else echo ' onload="user_is_not_signed_in()"';

?>
>
<div id="apDiv45" >This is a test</div>
<div id="apDiv1">
  <div id="apDiv4">
  
   <p id="titlu">Free Code</p>
   <p id="descriere_titlu">Find and download informatics projects</p>

  </div>
  <img src="images/header.jpg" width="870" height="200" />
<div id="apDiv9"> <a href="signup.php">Sign Up</a> </div>
  
  <div id="apDiv8">
  
  <?php

if (!isset($_SESSION['user']))  
          echo "<a href="."signin.php".">Sign In </a>";
      else echo '<a href="userprofile.php?user='.$_SESSION['user'].'">'. $_SESSION['user'].'</a>';
  ?>

</div>

<div id="apDiv7"> <a href="logout.php">Sign Out</a> </div>
</div>



<div id="apDivb script:aboutClick()" > About </a> </li>
</ul>
</div>
<div id="apDiv10">
</div>
<div id="apDiv11"></div>
<div id="apDiv12"></div>
<div id="apDiv13"></div>
<div id="apDiv14">

<div id="apDiv32">Page 1</div>


<div id="apDiv29">
  
  <?php
        
     if (isset($_SESSION['page_string']) || isset($_POST['search']))  include("incarcare_lista.php");
  ?>
  <div id="apDiv44">
  <a href="upload_page.php">Upload file</a>
  </div>



  <form id="form1" name="form1" method="post" action="index.php">
    <div id="apDiv15">
      
      <div id="apDiv17">Language:</div>
      <div id="apDiv18">Picture:</div>
      <div id="apDiv27">Code:</div>
      <p>   </p>
    
    
      <div id="apDiv20">
      
      
<select name="lang" id="lang" >
<?php
       $lang = array("Any","English","Romanian","Deutsch","French");
         for($i=0;$i<=(count($lang)-1);$i++)
       {
      
         echo  '<option value="'.$lang[$i].'"';
      
      if($_SESSION['language']==$lang[$i])
        {
         echo ' selected="selected"';
        
        }
    echo   '>';
   echo $lang[$i];
   echo '</option>';
   }

?>
</select>
        
      </div>
      <div id="apDiv19">
        <select name="prog_lang" id="prog_lang">
         <?php
       $code = array("Any","C++","Java","C#","VB");
         for($i=0;$i<=(count($code)-1);$i++)
       {
      
         echo  '<option value="'.$code[$i].'"';
      
      if($_SESSION['code']==$code[$i])
        {
         echo ' selected="selected"';
        
        }
    echo   '>';
   echo $code[$i];
   echo '</option>';
   }

?>
        </select>
      </div>
      <div id="apDiv25">
        <input type="submit" " name="search" id="search" value="Search" />
      </div>
      <div id="apDiv26">
        <?php
    
     echo '<input type="text" size="45" style="font-size:16px" style="font-family:monospace" name="search2" id="search2" onkeyup="showHint(this.value)" value="'.$_SESSION['search_text'].'" />';
     ?>
        
        </div>
      <div id="apDiv28">
        <select name="poza" id="poza">
          <?php
       function pict_01($pict)
{
if ($pict=="Yes") return "1";
else if($pict=="No") return "0";
else if($pict=="Any") return "-1";
    
}
    
    $pict = array("Any","Yes","No");
         for($i=0;$i<=(count($pict)-1);$i++)
       {
      
         echo  '<option value="'.pict_01($pict[$i]).'"';
      
      if($_SESSION['picture']==pict_01($pict[$i]))
        {
         echo ' selected="selected"';
        
        }
    echo   '>';
   echo $pict[$i];
   echo '</option>';
   }

?>
        </select>
      </div>
    </div>
  </form>
  
<div id="apDiv30"> <a href="next.php"><img src="nextbutton.jpg" width="45" height="45" /> </a> </div>
<div id="apDiv31"> <a href="previous.php">
<img src="backbutton.jpg" width="45" height="45" /> </a>
</div>

</div>
  
</div>
</body>
</html>




Can you help me please? I really don't know what to do.

This post has been edited by livium: 4 Jul, 2009 - 02:06 AM


Attached thumbnail(s)
Attached Image Attached Image
User is offlineProfile CardPM
+Quote Post


Slice

RE: Div Positioning Problem In FF (not IE).

4 Jul, 2009 - 02:21 AM
Post #2

New D.I.C Head
*

Joined: 24 Nov, 2008
Posts: 21


My Contributions
QUOTE(livium @ 4 Jul, 2009 - 02:04 AM) *


This is the CSS for apDiv45:
CODE

#apDiv45 {
    position:absolute;
    background-color:#CCC;
    font-family:monospace;
    font-size:14px;
    top:226px;
    left:18px;
    width:141px;
    height: 3px;
}




Have you tried not setting the position to absolute? I've had some problems in Firefox with absolute positions. Try using either static or relative. Hope that helps.
User is offlineProfile CardPM
+Quote Post

livium

RE: Div Positioning Problem In FF (not IE).

4 Jul, 2009 - 02:38 AM
Post #3

D.I.C Regular
***

Joined: 21 Dec, 2008
Posts: 294


My Contributions
Yes i've tried whith both. And it doesn't work.
User is offlineProfile CardPM
+Quote Post

livium

RE: Div Positioning Problem In FF (not IE).

4 Jul, 2009 - 05:21 AM
Post #4

D.I.C Regular
***

Joined: 21 Dec, 2008
Posts: 294


My Contributions
I solved it. I cannot believe this. I have put another div and now it works. If I put a div named apDiv45 it doesn't work although i've deleted all data about it. This defies logic.


User is offlineProfile CardPM
+Quote Post

Fast ReplyReply to this topicStart new topic

Time is now: 11/8/09 01:59AM

Live Help!

Be Social

Dream.In.Code RSS Feed Dream.In.Code LinkedIn Group Follow Us On Twitter Fan Us On Facebook

Tutorials

Programming

Web Development

Reference Sheets

Code Snippets

DIC Chatroom

Bye Bye Ads

Monthly Drawing

Thumb Drive

Top Contributors

Top 10 Kudos This Month