0

Hoping someone can see my error. Probably easiest if you take a look at my test page

Notice the shifting of the contents within <div id="ajax" style="background-color:red">
when clicking on a .menu {position:fixed;} element.

Strange that only one (Home) shifts not the others (Prog, Jet, Wind, Mesonet, Disc,Rad/Sat)

The PHP that the ajax calls is of similar format on all pages as follows: 

<?php  
// do php stuff
echo <<<HTML
<div class="content">
<!-- html stuff -->
</div>
HTML;

Don't know if its a PHP or css issue nothing I've tried has given any indication.
Appreciate your ideas... thanks

EDIT: added ajax 

var options = {
        success: function(result) { $("#ajax").html(result); }, 
        beforeSend: function() {},
        url: file,  
        type: "post"
            };  
$.ajax(options);

Edit: Resolved
The answer to my question is "something is inserting some whitespace before the content div" as given by Explosion Pills. Strangely that something is caused by PHP's include "file.php"; being called inside home.php
Another question is appropriate I think so I'll post the link here later.
Thanks All
follow up question here

Community
  • 1
  • 1
ron
  • 95
  • 1
  • 7
  • 1
    I can't tell what's shifting; can you bee more specific? – Explosion Pills Apr 21 '13 at 23:12
  • Should have mentioned I'm running firefox and android mobile. Not checked others. Notice when the page opens large red area. Click on PROG and the red area is gone....hope that explains – ron Apr 21 '13 at 23:19
  • You mean the red margin at the top? – Explosion Pills Apr 21 '13 at 23:20
  • yes. the red defines the
    its contents should be at the top just like all the others prog, jet,wind...etc
     – ron Apr 21 '13 at 23:26
  • I think it has to do with your JS, but something is inserting some whitespace before the `content` div on the home page – Explosion Pills Apr 21 '13 at 23:31
  • Thanks, useful comment but still no solution http://stackoverflow.com/questions/5477187/strange-thing-ajax-response-includes-whitespace – ron Apr 22 '13 at 02:00

1 Answers1

1

Your success function is replacing your content:

<div id="ajax" style="background-color:red"><div class="content"></div></div>

with:

<div id="ajax" style="background-color:red">Ajax Content</div>

The class 'content' has CSS: .content {margin:auto; background-color:#eee; border-radius:15px; border:3px solid black; padding:.5em;} that is removed with the ajax success.

Just remove <div class="content"></div> from your page or modify the success function to replace the content of the first div using something like: success: function(result) { $("#ajax div:first").html(result); },...