20 Replies Latest reply on May 25, 2010 8:20 PM by luckykarma

    Can't keep div in position across browsers

    phrarod Level 1

      I'm not sure if its because different browsers are rendering the type slightly differently or what the issue is. The logo/text ( on the bottom of the page) on the page linked below works fine on Firefox but too high on Safari. I've tried changing the positioning code to no effect.

       

      http://classicsmiles.com/newsite/sedation.html

        • 1. Re: Can't keep div in position across browsers
          SugnaShane Level 2
          No reason for this:

          height:85px;
          position:inherit;

          Try using padding or margin
          • 2. Re: Can't keep div in position across browsers
            phrarod Level 1

            I was flailing around with those setting. I originally did it with padding and margin and still have the same result. But I'll change it again for viewing. I've tried top margin and then thought bottom margin would be better. Couldn't get it to render in the same place.

             

            But let me change it to margins and re-upload. Just made a top padding and the same result. You can see it on the link.

            • 3. Re: Can't keep div in position across browsers
              SugnaShane Level 2

              It also depends on if anything is influencing the div. IE 6 (If you care) is seeing it different as well

               

              If you use Firefox (you should) then get Firebug

               

              https://addons.mozilla.org/en-US/firefox/addon/1843/

              • 4. Re: Can't keep div in position across browsers
                phrarod Level 1

                I found some small errors and its rendering a little better but there's still 10 px difference between Firefox and Safari. I've yet to delve into the troubled waters of IE 6.

                 

                Thanks for the tip on Firebug. I have the validation toolkit and everything validates ok. I thought putting the two elements into a div would fix it and it doesn't.

                • 5. Re: Can't keep div in position across browsers
                  SugnaShane Level 2

                  You also have this code that should be removed.

                   

                  <a href="services.html">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a>

                  Never any need for &nbsp;

                   

                   

                  Also no need for tables either

                   

                  This also may be an issue

                   

                  <div id="serviceFooter">

                  <div class="pankeylogo"></div>
                  <div class="pankeyText">Pankey Institute Certified</div>

                  </div>

                  </div> // This is not needed
                  • 6. Re: Can't keep div in position across browsers
                    SugnaShane Level 2

                    Never mind on the last post.

                     

                    Updated content code for you. There are other things but here's a start. You also had this in your code

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

                    Here's updated code:

                     

                    <table width="850"  border="0" cellspacing="0" cellpadding="0">
                      <tr>

                     

                        <td>

                     

                    <div id="sedation">

                        <p class="servicedetailcopybk">  <br>
                          <br>
                          Why dread dentistry, when you can snore through? Monitored conscious oral sedation (following the DOCS protocol) transforms the dread of dentistry into a pleasurable experience. You will be sedated just enough so that you will be unaware of treatment. In complete comfort for you, we can safely do years of postponed treatment, often in a single visit. <br>
                         
                          <br>
                          If you have any of the following:
                          <br>
                          Fear or dread of dentistry<br>

                     

                        
                          Bad dental experiences<br>
                      
                          Sensitive teeth or gums
                          <br>
                          Hard to get numb
                          <br>
                          Fear shots and needles
                          <br>
                          Gagging problems  
                        Embarrassed about your teeth
                             <br>
                          Worried about your dental or systemic health <br>

                     

                          Hate the smell, noise and taste of dentistry<br>
                         
                          Hate the smell, noise and taste of dentistry<br>
                          Know that you have extensive dental needs<br>
                          Have limited time for dental work<br>
                         
                          Have limited time for dental work<br>
                          <br>

                     

                    Then you could benefit from Sedation Dentistry.    <br>
                         
                        <br>
                    <p align="center"><span class="linktext"><a href="services.html">return to complete list of services</a></span></p>

                     

                    </div> <!-- / End Sedation / -->

                     

                    <!-- Begin Footer -->

                     

                    <div id="serviceFooter">

                     

                    <div class="pankeylogo"></div>
                    <div class="pankeyText">Pankey Institute Certified</div>

                     

                    </div>

                    </td>

                    </tr>
                    </table>
                    </body>
                    </html>

                     

                     




                    • 7. Re: Can't keep div in position across browsers
                      phrarod Level 1

                      I just deleted the duplicate services reference. The reason for the other div's was for positioning. I wrapped them in another trying to contain it.

                       

                      That last div is for the background image set for the #sedation page div

                       

                      Anyway, I commented out the footer div and removed the table code. Still no change.

                      • 8. Re: Can't keep div in position across browsers
                        SugnaShane Level 2

                        <table width="850"  border="0" cellspacing="0" cellpadding="0">
                           <tr>

                         

                             <td>

                         

                        <div  id="sedation">

                            <p class="servicedetailcopybk">   <br>
                              <br>
                              Why dread dentistry, when you  can snore through? Monitored conscious oral sedation (following the DOCS  protocol) transforms the dread of dentistry into a pleasurable  experience. You will be sedated just enough so that you will be unaware  of treatment. In complete comfort for you, we can safely do years of  postponed treatment, often in a single visit. <br>
                             
                               <br>
                              If you have any of the following:
                               <br>
                              Fear or dread of dentistry<br>

                         

                            
                               Bad dental experiences<br>
                          
                              Sensitive teeth or  gums
                              <br>
                              Hard to get numb
                              <br>
                               Fear shots and needles
                              <br>
                              Gagging problems  
                             Embarrassed about your teeth
                                 <br>
                              Worried  about your dental or systemic health <br>

                         

                              Hate the smell, noise  and taste of dentistry<br>
                             
                              Hate the smell,  noise and taste of dentistry<br>
                              Know that you have  extensive dental needs<br>
                              Have limited time for dental  work<br>
                             
                              Have limited time for dental  work<br>
                              <br>

                         

                        Then you could benefit from Sedation  Dentistry.    <br>
                             
                            <br>
                        <p  align="center"><span class="linktext"><a  href="services.html">return to complete list of  services</a></span></p>

                         

                        </div> <!-- / End Sedation /  -->

                         

                        <!--  Begin Footer -->

                         

                        <div id="serviceFooter">

                         

                        <div  class="pankeylogo"></div>
                        <div  class="pankeyText">Pankey Institute Certified</div>

                         

                        </div>

                        </td>

                        </tr>
                        </table>
                        </body>
                        </html>

                        • 9. Re: Can't keep div in position across browsers
                          SugnaShane Level 2

                          Check out the end 2 lines of you code

                           

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

                           

                           

                          Also remove the footer from the services div and place it below as shown in the ocde I sent back

                          • 10. Re: Can't keep div in position across browsers
                            SugnaShane Level 2

                            Also this is incorrect

                             

                             &bull; Sensitive teeth or gums 

                            You should do this:

                            This is the correct way to do a Bulleted list

                            <ul>
                            <li>Hard to get numb</li>
                            <li>Fear or dread of dentistry</li>

                            </ul>
                            • 11. Re: Can't keep div in position across browsers
                              phrarod Level 1

                              Here's what it looks like with your code.  http://classicsmiles.com/newsite/sedation1.html

                               

                              I think I have to put what I'm calling the footer back inside the #sedation div

                               

                              But even doing that (which I did offline) it still ends up with  the same result. 10px higher on the page in Safari.

                              • 12. Re: Can't keep div in position across browsers
                                SugnaShane Level 2

                                Well ok this is due to the way your are designing the site. So you will probally have these issues.

                                 

                                The background should be developed differently.

                                 

                                You should cut up the background and have the footer contain the most bottom part of the background

                                 

                                and the header be the top part then use a 1 px horizontal graphic for the content Container div

                                 

                                If you need to add the ghosted image then that could be put as a background of the Content div

                                 

                                Shane

                                • 13. Re: Can't keep div in position across browsers
                                  phrarod Level 1

                                  Thanks Shane. That would probably fix it. I'll have to look at that. When I tried to do that previous I couldn't get the middle to tile down. I had asked in another thread about this. I basically chopped the bg after the ghosted image and then did a 1px between that and the footer which would expand dynamically for main content text. But it would always create a space between it and the footer.

                                  • 14. Re: Can't keep div in position across browsers
                                    phrarod Level 1

                                    I'll do a test.

                                     

                                    I'll make a header div that contains the image just above where the type starts with the header as the bg

                                    Then I'll make a main content div with with 1px repeating bg

                                    Within that div I'll make a text div that calls out the font and uses the transparent ghosted background. OR I could make the above div have the transparent background and the text div the repeating background

                                    Then I'll make the footer and place the logo, text within that div.

                                     

                                    Does that sound right?

                                    • 15. Re: Can't keep div in position across browsers
                                      SugnaShane Level 2

                                      It's sounds right. If I had time I would work it out here's a quick go at the html

                                       

                                      Header gets top header image

                                       

                                      content container gets 1px background

                                       

                                      content hold the text and faded background image

                                       

                                      footer holds footer image

                                       

                                       

                                      <div id="wrap">

                                       

                                      <div id="header">Header image Image</div> <!-- / end header /  -->

                                       

                                      <div id="content-container">

                                      <div  class="content">

                                      Copy goes here

                                      </div><!-- /  end content/ -->

                                      </div><!-- / end content container /  -->

                                       

                                      <div id="footer">Image</div> <!-- / end footer/ -->

                                       

                                      </div> <!-- / end wrap/ -->

                                       

                                      You want to make the design as fluid as possiable so incase you need to add more copy then you can without breaking the design.

                                       

                                      Shane

                                      • 16. Re: Can't keep div in position across browsers
                                        phrarod Level 1

                                        Thanks again. I'll give it a go now and let you know.

                                        • 17. Re: Can't keep div in position across browsers
                                          phrarod Level 1

                                          Almost there. The second div is being pushed down. Obviously design issues if the text is not long enough to push the middle down to reveal the whole ghosted image.

                                           

                                          http://classicsmiles.com/newsite/Hospital-oral-surgery1.html

                                          • 18. Re: Can't keep div in position across browsers
                                            phrarod Level 1

                                            Got it all figured out. Thanks for all your help.

                                            • 19. Re: Can't keep div in position across browsers
                                              SugnaShane Level 2

                                              Looks good in Safari 4.0.5

                                              IE 8

                                               

                                              I can check IE 6 tomorrow

                                               

                                              If you haven't already done so ign up for https://browserlab.adobe.com/en-us/index.html

                                              • 20. Re: Can't keep div in position across browsers
                                                luckykarma

                                                Thanks! I'll check out the link. btw, I'm on my laptop and for some reason it logs me in under a different name.

                                                 

                                                I just tried the link and everything looks ok but for some bizarre reason Firefox on Windows isn't rendering the text. Its all bitmapped. What's the fix for that? I tried pages that I have style a em and as px and both are rendering the text in this bizarre fashion.