Firefox shifting div downward

  • Carl
  • Beginner
  • Beginner
  • User avatar
  • Posts: 50

Post 3+ Months Ago

Ok, this is driving me crazy. For some reason, one of my divs keeps getting shifted downward on my page. This error never occurs on my local test server but seems to happen relatively consistently on my remote server.

I can only get it to occur in Firefox. Internet Explorer and Opera appear to be unaffected. The problem is it doesn't always shift the div downward. Sometimes it'll render the page properly. So it's very inconsistent. I've tried resizing the divs in question but that doesn't seem to have any effect. I've gone over the style sheets several times but can't seem to find a problem, though clearly something isn't right.

Basically, this is what it's (randomly) doing on the remote server:
[img removed]

And here's how it looks locally (the way it's supposed to look):
[img removed]

Here's a link to a live test version of the site (requires cookies and JavaScript):
[link removed]

The error seems to show up most consistently on this page:
[link removed]

However, it will show up on pretty much every page except the main one.

I'm at a complete loss with this so any help would be greatly appreciated! Thanks in advance!
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • jameson5555
  • Bronze Robot
  • Bronze Member
  • User avatar
  • Posts: 575
  • Loc: Phoenix, AZ

Post 3+ Months Ago

It looks like that div is shifting down because it's clearing the left navigation there. Do you have "clear:left;" anywhere in your CSS that might be causing it?
  • Carl
  • Beginner
  • Beginner
  • User avatar
  • Posts: 50

Post 3+ Months Ago

jameson5555 wrote:
It looks like that div is shifting down because it's clearing the left navigation there. Do you have "clear:left;" anywhere in your CSS that might be causing it?

First of all, thank you for your reply. :)

I do have a "clear: left;" in one of my form styles but that's only used on a few pages (login page and 1 or 2 others) and shouldn't be affecting the divs I use for layout.

Here's the CSS for the main containers on the page (I think this is all of them):
Code: [ Select ]
html {
    padding: 0px; margin: 0px;
}

body {
    font-family: Verdana, Arial, Helvetica, sans-serif; color: #000000;
    background: #FFFFFF;
    padding: 0px; margin: 0px;
}

html, body, #site {
    margin: 0px; padding: 0px;
    width: 100%; height: 100%;
    overflow: hidden;
}

#site {
    overflow: auto;
    margin: 0px; padding: 0px;
    position: absolute;
    top: 0px;
    left: 0px;
}

#outer-container {
    margin-left: auto; margin-right: auto;
    overflow: auto;
    width: 830px;
}

#content-container {
    border-left: 2px solid #000000; border-right: 2px solid #000000;
    background: #FFFFFF url(../images/grayback-wide.gif) repeat-y left top;
    width: 826px;
    display: table;
}

#main-nav {
    background: #111111;
    width: 140px;
    height: 100%;
    vertical-align: top;
    display: table-cell;
    float: left;
}

#main-menu {
    background: #000000;
}

#content {
    font-size: 12px;
    padding-left: 10px; padding-right: 20px; padding-top: 10px; padding-bottom: 10px;
    /*vertical-align: top;*/
    width: 656px;
    display: table-cell;
    float: right;
}

#top-content {
    background: url(../images/FlamesLogo.jpg) no-repeat top left;
    padding-left: 5px; padding-right: 5px; padding-top: 0px; padding-bottom: 0px;
    margin: 0px;
    height: 75px;
    width: 646px;
    vertical-align: top;
    float: left;
    overflow: hidden;
    display: table-cell;
}

#main-content {
    border-bottom: 1px solid #D0D0D0;
    /*vertical-align: top;*/
    padding-left: 5px; padding-right: 10px; padding-top: 0px; padding-bottom: 15px;
    margin: 0px;
    width: 636px;
    float: left;
    display: table-cell;
}

.hspacer {
    width: 10px; height: 10px;
    margin: 0px;
    padding: 0px;
}
  1. html {
  2.     padding: 0px; margin: 0px;
  3. }
  4. body {
  5.     font-family: Verdana, Arial, Helvetica, sans-serif; color: #000000;
  6.     background: #FFFFFF;
  7.     padding: 0px; margin: 0px;
  8. }
  9. html, body, #site {
  10.     margin: 0px; padding: 0px;
  11.     width: 100%; height: 100%;
  12.     overflow: hidden;
  13. }
  14. #site {
  15.     overflow: auto;
  16.     margin: 0px; padding: 0px;
  17.     position: absolute;
  18.     top: 0px;
  19.     left: 0px;
  20. }
  21. #outer-container {
  22.     margin-left: auto; margin-right: auto;
  23.     overflow: auto;
  24.     width: 830px;
  25. }
  26. #content-container {
  27.     border-left: 2px solid #000000; border-right: 2px solid #000000;
  28.     background: #FFFFFF url(../images/grayback-wide.gif) repeat-y left top;
  29.     width: 826px;
  30.     display: table;
  31. }
  32. #main-nav {
  33.     background: #111111;
  34.     width: 140px;
  35.     height: 100%;
  36.     vertical-align: top;
  37.     display: table-cell;
  38.     float: left;
  39. }
  40. #main-menu {
  41.     background: #000000;
  42. }
  43. #content {
  44.     font-size: 12px;
  45.     padding-left: 10px; padding-right: 20px; padding-top: 10px; padding-bottom: 10px;
  46.     /*vertical-align: top;*/
  47.     width: 656px;
  48.     display: table-cell;
  49.     float: right;
  50. }
  51. #top-content {
  52.     background: url(../images/FlamesLogo.jpg) no-repeat top left;
  53.     padding-left: 5px; padding-right: 5px; padding-top: 0px; padding-bottom: 0px;
  54.     margin: 0px;
  55.     height: 75px;
  56.     width: 646px;
  57.     vertical-align: top;
  58.     float: left;
  59.     overflow: hidden;
  60.     display: table-cell;
  61. }
  62. #main-content {
  63.     border-bottom: 1px solid #D0D0D0;
  64.     /*vertical-align: top;*/
  65.     padding-left: 5px; padding-right: 10px; padding-top: 0px; padding-bottom: 15px;
  66.     margin: 0px;
  67.     width: 636px;
  68.     float: left;
  69.     display: table-cell;
  70. }
  71. .hspacer {
  72.     width: 10px; height: 10px;
  73.     margin: 0px;
  74.     padding: 0px;
  75. }


And here's the basic layout of a typical page:
Code: [ Select ]
<div id="site">
    <div id="outer-container">
        <div id="control-panel">
            <!-- control panel -->
        </div>
        <div id="header">
            <!-- header image, etc. -->
        </div>

        <div id="content-container">
            <div id="main-nav">
                <!-- menu template -->
            </div>
            <div id="content">
                <div id="top-content">
                    <!-- content nav template -->
                </div>
                <div class="hspacer">&nbsp;</div>
                <div id="main-content">
                    <!-- page content goes here -->
                </div>
            </div>
        </div>

     <div id="footer">
         <!-- footer info -->
     </div>
     <div id="powered-by">
         <!-- engine info -->
     </div>
    </div>
</div>
  1. <div id="site">
  2.     <div id="outer-container">
  3.         <div id="control-panel">
  4.             <!-- control panel -->
  5.         </div>
  6.         <div id="header">
  7.             <!-- header image, etc. -->
  8.         </div>
  9.         <div id="content-container">
  10.             <div id="main-nav">
  11.                 <!-- menu template -->
  12.             </div>
  13.             <div id="content">
  14.                 <div id="top-content">
  15.                     <!-- content nav template -->
  16.                 </div>
  17.                 <div class="hspacer">&nbsp;</div>
  18.                 <div id="main-content">
  19.                     <!-- page content goes here -->
  20.                 </div>
  21.             </div>
  22.         </div>
  23.      <div id="footer">
  24.          <!-- footer info -->
  25.      </div>
  26.      <div id="powered-by">
  27.          <!-- engine info -->
  28.      </div>
  29.     </div>
  30. </div>

The outer "site" container will likely be removed since it's no longer needed for what I want to do.
  • jameson5555
  • Bronze Robot
  • Bronze Member
  • User avatar
  • Posts: 575
  • Loc: Phoenix, AZ

Post 3+ Months Ago

I wonder if this has anything to do with it:
Code: [ Select ]
display: table-cell;

I've never used that display property before, but it looks like it's designed to make your CSS mimic the old fashioned tables-for-layouts way of displaying your page. Is it possible that there's some error there that is forcing that top-content div down to another 'row'? Have you tried just designing the page normal, without forcing everything to act like nested tables?
  • Carl
  • Beginner
  • Beginner
  • User avatar
  • Posts: 50

Post 3+ Months Ago

Hmm, that's possible. I'll give it a try.
  • Carl
  • Beginner
  • Beginner
  • User avatar
  • Posts: 50

Post 3+ Months Ago

Well, I'm officially a moron. ;) That appears to have done the trick. I've refreshed multiple pages about 10-15 times each and it appears to be rendering properly now. Can anyone else confirm this?

Thanks for your help, jameson. 8)
  • jameson5555
  • Bronze Robot
  • Bronze Member
  • User avatar
  • Posts: 575
  • Loc: Phoenix, AZ

Post 3+ Months Ago

Awesome if it worked!

I just checked that link in Firefox and IE7 and it looks ok in both..
  • Carl
  • Beginner
  • Beginner
  • User avatar
  • Posts: 50

Post 3+ Months Ago

Excellent! :D I've had a few other people try it and it's working for them too. So, it looks like the problem has definitely been solved.

Thanks again!
  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8388
  • Loc: USA

Post 3+ Months Ago

Nothing looks bad and I have refreshed the page numerous times.
  • Carl
  • Beginner
  • Beginner
  • User avatar
  • Posts: 50

Post 3+ Months Ago

Thanks, Bogey! :)
  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8388
  • Loc: USA

Post 3+ Months Ago

Carl wrote:
Thanks, Bogey! :)

Yeah, no problem :) Glad I can confirm it :D

Post Information

  • Total Posts in this topic: 11 posts
  • Users browsing this forum: No registered users and 91 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.