10 Replies Latest reply on Jan 29, 2010 5:29 PM by Hollywoodstarrs

    1parent <div> w/4 nested child <div>  last 2 move in fire fox not IE7

    Hollywoodstarrs

      I have done the unspeakable; I sliced images in ps4 transported to DW4 cut out images inserted parent div tags for editable areas like, flash file, and text. Everthing for the flash worked fine.  Everything for the following code worked fine:  <div id="title">Welcome</div><div id="body_txt">Thanks for coming</div>.   I tested this in fire fox and explorer7 and everything looked great.  I thought I was in charge!  Then I inserted two more child <div> tags with seperate CSS rules in the same parent div.  Then I tested in IE7..everything was great....then tested in Fire Fox (FF) and the last 2 moved up.  It looks like there is a space between the child divs, which may get compromised with firefox or there is some unknown padding going on in FF.   I have attached screen shots of IE7, FF and DW4......My basic code below:

       

      Parent <div>

          .background {

               background-image:url(images/index2_04.jpg);

               width: 427px;

                height: 413px;

                 margin: 0px;

      }

       

       

      Child <div>                                                                                          

            #text {

                  text-align: left;

                  font-family: tahoma;

                  font-size: 24px;

                  font-style: normal;

                   line-height: normal;

                   font-weight: bolder;

                  font-variant: normal;

                  padding-left: 90px;                                                                    ;

                  padding-top: 10px;                                                                                         ;

      }

       

       

      Child <div>

              #text_body {

                   text-align: left;

                   font-family: tahoma;

                   font-size: 13px;

                   font-weight: bold;

                   color: #000; 

                   padding-right: 10px;

                    padding-top: 0px;

                    padding-bottom:0px;

                    top: auto;

                    margin-top: -10px;

      }    

       

       

      Child <div>

             #small_title {

                  font-family:  tahoma;

                  font-size:18px;

                  font-weight: bold;

                 color: #FFF;

                 text-align: right;

                 margin-top: 28px;

                 padding-right: 80px;

      }

       

      Child <div>

            #smallbody_text {

                 font-size: 13px;

                 font-weight: bold;

                 text-align: right;

                 font-family: tahoma;

                 color: #000;

                 top: auto;

                 padding-right: 20px;

                 padding-top: 0px;

                 padding-bottom: 0px;

                  margin-top: 0px;

      }

       

       

      <td><div class="background">

                     <div id="big_title">Welcome to our site</d>

                     <div id="text_body"><p>jkl;klj;jklj;j</p>

                                         <p>jkl;;j;ljljkl; .  &snsp; &nbs; &gt;&gt; <a href="index1.html">More</a></p>

                     </div>

                     <div id="small_title">5 easy steps</div><div id="smallbody_text">jkljkl;jkl;jklkl;jkljkl<br>jkl;jkl; </div>

           </div></td>