CODEWITHSUNDEEP
html
ePhelan
ePhelan

Reputation: 5

Div moves down on one page

My page links(nav_btns), inside of my nav div, move down only on the contact page. The problem occurs upon page load, in 3 different browsers (Chrome, Firefox, IE9) and is not dependent upon page scroll or resize. I can't seem to find my solution on stack or google, which makes me think it's a silly oversight. If so, I apologize in advance, but I'm about to face-plant my keyboard.

I'm learning from this site and others, so I hope the code is legible. I've made the site live for now: http://ephelan.com

Tried: merging style sheets, adjusting iframe & contactbox size, begging a web instructor/student

Upvotes: 0

Views: 456

Answers (3)

Dave
Dave

Reputation: 6179

The problem is the total height of elements which are siblings of your div with id footer is different. So, more specifically....

From here: http://ephelan.com/index.html

<div id="content">

  <!-- TOTAL HEIGHT OF 391 PIXELS -->
  <ul id="accordion-slider" style="width: 806px; height: 261px; ">
    <!-- some more stuff -->
  </ul>
  <div id="quote">
    <!-- some stuff -->
  </div>

  <div id="footer">
    <!-- contents of footer element -->
  </div>
</div>

Now compare this to your contact page: http://ephelan.com/contact.html

<div id="content">

  <!-- TOTAL HEIGHT OF 396 PIXELS -->
  <div id="contactbox">
    <!-- Some other content -->
  </div>

  <div id="footer"> 
    <!-- Footer content... -->
  </div>
</div>

Notice the difference in calculated (total) height. Because the content above the footer div is 5 pixels higher, it pushes the footer 5 pixels lower than the other pages.

To fix this, all of the pages should be structured something like this...

<div id="content">
  <div class="crap-above-footer-or-whatever-you-want-to-call-it">
    <!-- All of your crap -->
  </div>
  <div class="footer">
    <!-- Footer contents -->
  </div>
</div>

Then, in the "crap-above-footer-or-whatever-you-want-to-call-it" class, make sure to set a height, and that this height is sufficiently large to hold all of its contents, regardless of which page you're viewing.

Upvotes: 0

Khan
Khan

Reputation: 516

The doctype in contact.html is

<!DOCTYPE HTML>

vs

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

in the others.

Upvotes: 0

weir
weir

Reputation: 4761

The doctype and HTML declarations are different on your contacts page versus all of your other pages. Silly oversight perhaps, but it could happen to anyone. :)

Upvotes: 1

Related Questions