FRIHOSTFORUMSSEARCHFAQTOSBLOGSDIRECTORY
You are invited to Log in or Register a Frihost Account!

[New Problem] Opera and absolute Div's

 


rohan2kool
This is the same thread with a different yet related problem, so i didn't want to create a new thread for that.. Very Happy

Basically, i'm creating a main <div> called mholder, with two <div>s inside it (with id's 'slide1' and 'slide2'), which are to be shown/hidden on the click of a button. But what is happening is that in Opera, when I click the button, it doesn't display the 2nd <div>. But when i make a selection around the text there or do something silly sort of, the <div> beneath shows up. It happens only in Opera and it works fine in IE, FF, Mozilla and NN.

The code is here: http://pastebin.com/794061

Here are the screenshots of what is happening: Click here for screenshot

=====The old Problem (Resolved)=====

Basically, i'm creating a main <div> called mholder, with two <div>s inside it (with id's 'slide1' and 'slide2'), which are to be shown/hidden on the click of a button. The problem is that when i set the 'slide1' to hidden (using style="display: none") even 'slide2' dissapears. This is not a JS problem, I think mostly it is a case of mismatched/wrongly nested <div>s.

Please help. Here is the code:

Code:

http://pastebin.com/794053


thanks a lot Very Happy


Last edited by rohan2kool on Mon Sep 25, 2006 4:55 pm; edited 2 times in total
Esch
You seem to be missing closing </div> tags on lines 82 and 86 -- here's the source with those fixed and some added formatting for clarity:

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" lang="en" xml:lang="en">
 <head>
  <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
  <title>Flash Feedback</title>
  <script type="text/javascript">
  <!--
   function swap(imgObject, fname) {
      imgObject.src = fname;
   }

   function moveto(slideNum, cObject) {
      document.getElementById(cObject).style.display = "none";
      document.getElementById('slide2').style.display = "";
   }
  //-->
  </script>
  <style type="text/css">
  <!--
   body {
      font-family: Verdana, Arial, Helvetica, sans-serif;
      font-size: 12px;
   }

   #headt {
      font-size: 19px;
   }

   .lines {
      margin-bottom: 3px;
      margin-top: 3px;
   }

   #mholder {
      position: absolute;
      bottom: 3px;
      right: 5px;
      width: 200px;
   }

   input {
      font-family: Verdana, Arial, Helvetica, sans-serif;
      font-size: 10px;
      border: 1px solid #808080;
   }

   input:hover {
      border: 1px solid #00000;
   }

   .cell2 {
      margin-left: 5px;
      float: left;
      margin-bottom: 2px;
      margin-top: 2px;
   }

   .cell3 {
      clear: left;
   }

   .cell1 {
      float: left;
      clear: left;
      width: 60px;
      margin-bottom: 2px;
      margin-top: 2px;
   }
  -->
  </style>
 </head>

 <body>

   <div id="mholder">

      <div id="header"><p id="headt">Flash Feedback</p></div>

      <div id="slide1" style="display: none">
         <div id="content">
            <div id="line1" class="lines">
               <div class="cell1">Name:</div>
               <div class="cell2"><input name="uname" size="26" type="text" /></div>
            </div>

            <div id="line2" class="lines">
               <div class="cell1">E-mail:</div>
               <div class="cell2"><input name="email" size="26" type="text" /></div>
            </div>

            <div id="line3" class="lines">
               <div class="cell1">&nbsp;</div>
               <div class="cell2" style="float: right"><img src="images/ffd/nxt.gif" onmouseover="javascript:swap(this, 'images/ffd/nxt-hover.gif')" onmouseout="javascript:swap(this, 'images/ffd/nxt.gif')" onclick="javascript:moveto(2, 'slide1')" /></div>
            </div>
         </div>
      </div>

      <div id="slide2">
         <div id="content2">
            <div class="lines">
               <div class="cell3">How would you rate this site based on it's content?</div>
            </div>

            <div id="line2" class="lines">
               <div class="cell1">E-mail:</div>
               <div class="cell2"><input name="email" size="26" type="text" /></div>
            </div>

            <div id="line3" class="lines">
               <div class="cell1">&nbsp;</div>
               <div class="cell2" style="float: right"><img src="images/ffd/nxt.gif" onmouseover="javascript:swap(this, 'images/ffd/nxt-hover.gif')" onmouseout="javascript:swap(this, 'images/ffd/nxt.gif')" /></div>
            </div>
         </div>
      </div>

   </div>

 </body>
</html>
bnbrown
Is your broblem solved?
rohan2kool
yep.. it's working properly and looks damn kool now.. thanks a lot Very Happy
Related topics

CSS absolute+margin problem
Cookie Problem *Please Close*
HELP problem in Svchost.exe
New Problem (thx Gushe for all the Help)
[request][html+js]please find the error in this code

Making an image on the bottom of a "box"
extra line from css in drop down menu
The sixes problem
Using TinyMCE with ASP.NET
Can anyone make a script like top 100/200 sites/servers?

taskbar gone
Pixels???
PHPBB MYSQL Database Question.
form submit
Need help with restoring phpBB!
Reply to topic    Frihost Forum Index -> Scripting -> Html, CSS and Javascript

FRIHOST HOME | FAQ | TOS | ABOUT US | CONTACT US | SITE MAP
© 2005-2007 Frihost, forums powered by phpBB.