PDA

View Full Version : Resolved Dynamic AJAX content Problem



jjahastings
04-11-2007, 02:49 AM
1) Script Title: Dynamic AJAX content

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex17/ajaxcontent.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!

thetestingsite
04-11-2007, 02:53 AM
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.

jjahastings
04-11-2007, 03:08 AM
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.


<!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>

thetestingsite
04-11-2007, 03:14 AM
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.

jjahastings
04-11-2007, 03:23 AM
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.

jjahastings
04-11-2007, 03:29 AM
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! ;)