Advanced Search

Results 1 to 6 of 6

Thread: Dynamic AJAX content Problem

  1. #1
    Join Date
    Apr 2007
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Dynamic AJAX content Problem

    1) Script Title: Dynamic AJAX content

    2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...jaxcontent.htm

    3) Describe problem:
    I have a two columed fluid layout which uses this script to load HTML files into the main div from the left hand side menu div. However, whenever the content of the main div fills 100% of the area some problems occur the entire content of the HTML file (after the element which fills 100% of the div) is forced to below left column

    I noticed that in IE6 this happens to the Dynamic Drive Script example when you resize the window.

    I am not sure how to go about stopping this, but any help is appreciated!
    Last edited by Snookerman; 05-13-2009 at 05:29 AM. Reason: added “Resolved” prefix

  2. #2
    Join Date
    Sep 2006
    Location
    St. George, UT
    Posts
    2,769
    Thanks
    3
    Thanked 157 Times in 155 Posts

    Default

    When viewing the demo in your problem browser, do you experience the same issue? If not, then a link to your problem page would be useful.
    "Computer games don't affect kids; I mean if Pac-Man affected us as kids, we'd all be running around in darkened rooms, munching magic pills and listening to repetitive electronic music." - Kristian Wilson, Nintendo, Inc, 1989
    TheUnlimitedHost | The Testing Site | Southern Utah Web Hosting and Design

  3. #3
    Join Date
    Apr 2007
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Well the problem code is just a generic 2 column plus header fluid layout. I have deleted the javascript which drives the AJAX as it is DD code anyway. Also scaled the menu down to one example link. In reality it has more.

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    
    <head>
    <title>Welcome to the Conferencing HK Internal Site</title>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> 
    
    <style type="text/css" media="screen">
    html, body {
    margin:0;
    padding:0;
    border:0;
    height:100%;
    }
    
    /* Link Formatting */
    a:link {color: #666666; text-decoration: underline; }
    a:active {color: #CC0000; text-decoration: underline; }
    a:visited {color: #222222; text-decoration: underline; }
    a:hover {color: #CC0000; text-decoration: none; }
    /* Text Formatting*/
    h2           { color: #CC0000; font-size: 13pt; font-weight: bold }
    body         { font-size: 9pt; font-family:Arial }
    h1           { font-size: 14pt; text-decoration: underline; font-weight: bold }
    a            { font-size: 10pt; color: #666666; text-decoration: underline }
    
    #header {
    	background: #000000;
    }
    #header2 {
    	background: #CC0000;
    }
    
    #wrapper {
    	background: #000000;
    }
    
    #main {
    	margin-left: 210px;
    	margin-top: 5px;
    	margin-right: 5px;
    }
    #left {
    	width: 150px;
    	float: left;
    	border: 1px solid #c0c0c0;
    	margin-top: 5px;
    	margin-left: 3px;
    }
    
    
    }
    h1 {
    	margin-top: 0;
    }
    .last {
    	margin-bottom: 0;
    }
    .clearing {
    	height: 0;
    	clear: both;
    }
    </style>
    </head>
    
    <body>
    
    <div id="wrapper"></div>
    
    <div id="header">&nbsp;<p>&nbsp;</p>
    	<p>&nbsp;</div>
    
    <div id="header2">&nbsp;</div>
    
    <div id="content" style="width: 100%; height: 100%">
    
    <div id="left" style="width: 200px; height: 476px">
      <table border="0" width="200" align="center">
        <tr>
        <td width="80%" bgcolor="#E6E6E6" align="left"><b>
            <p><font face="Arial" size="2">Main Menu</font></td>
            <tr>
            <td width="79%" align="left">
               <b><a href="javascript:ajaxpage
                    ('home.htm','main');">Home</a>
               </b>
            </td>
            </tr>
        </td>
        </tr>
    </table>
    </div>
    
    <div id="main">
    
    </div>
    </div>
    </div>
    </body>
    </html>
    Last edited by Snookerman; 05-13-2009 at 05:21 AM. Reason: added [html] tags

  4. #4
    Join Date
    Sep 2006
    Location
    St. George, UT
    Posts
    2,769
    Thanks
    3
    Thanked 157 Times in 155 Posts

    Default

    The only thing that I could see it to be is the CSS styling for #main. Try commenting this out and see if it fixes it.
    Hope this helps.
    "Computer games don't affect kids; I mean if Pac-Man affected us as kids, we'd all be running around in darkened rooms, munching magic pills and listening to repetitive electronic music." - Kristian Wilson, Nintendo, Inc, 1989
    TheUnlimitedHost | The Testing Site | Southern Utah Web Hosting and Design

  5. #5
    Join Date
    Apr 2007
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Hrm, commenting it out just led to the entire page appearing below the left hand column and aligned left (as opposed to below the left column but . It seems that an object that fills the entire home.html page triggers this to happen. In the full version I have pages without content which fills the page and those pages don't have this problem. However, pages with, say, a table set at 100% width, or even text that requires wrapping all of the content gets forced to the bottom. I am certain it is a CSS issue but I just noticed it happen with the Dynamic Drive example as well hence posting the question here.

  6. #6
    Join Date
    Apr 2007
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Okay...I'm an idiot. I had not set the main div to float.

    Thanks for pointing out the CSS of the main element though, turned out to be the key in the end!

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •