I have been developing this site and find that when a new result is added it layers it as it should but then indents it more than the previous result. The following result is even more indented. Here's the link if you want to see what I'm talking about: http://blog-directory.gardeningtipsnideas.com/php/display_blogs.php?action=display&id=Austin and here's the css code I have for this .div element; #displayBlog-inner { display: block; width: 700px; padding: 0; margin: 25px 0 15px; text-align: left; }
It appears that this, <div id="bodyarea" class="mapbground"> Code (markup): is not closed and every iteration nests deeper. Assuming a template, either you've got that within a loop section or, it's just not closed each iteration. I suspect the former, as you have an id on it indicating it's a one-off. Not to mention it seems more logical. If you'll run a copy of your server output through Tidy[1], to pretty print it, nesting levels become more obvious. cheers, gary [1] I just use the Tidy/validation extension for Firefox in Windows. In Linux, I just use the Tidy utility from the cli.
Cheers guys. Thanks for your help. I hate to push the friendship but is there any reason why I need to know what's stopping these results from just listing below each other. They seem to have a large are of space between them. I've played with the max-height, margin and padding properties but to no avail. Here's the link of what I'm talking about: http://blog-directory.gardeningtipsnideas.com/php/display_blogs.php?action=display&id=Austin
I think its from: #bodyarea { padding: 10px; min-height: 300px; } Each of your 3 blog descriptions is in its own <div id="bodyarea" class="mapbground"></div> which is unnecessary and semantically incorrect (there should only be one instance of a block with a given id per page, if there is more than one you should use class to describe). Any ways, I think you only need one <div id="bodyarea" class="mapbground">, move one "<script language="JavaScript" src="http://blog-directory.gardeningtipsnideas.com/javascript/localBlog.js"> </script>" into the bodyarea div and delete the rest, and move the "displayBlog-inner" divs into the bodyarea div. The bodyarea div is meant to be a container for all of the main content and does not need to be repeated.
Because you've told it to be that tall. #bodyarea { /*(line 58)*/ padding: 20px; min-height: 300px; } Code (markup): If you're trying to ensure the float is enclosed, do #bodyarea { padding: 20px; overflow: hidden; } Code (markup): See Enclosing Float Elements for an explanation and a fix or two for IE. Your DTD is long obsolete. The current standard is html 4.01. Use this DTD; <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> Code (markup): The proper, complete DTD will trigger standards mode in IE. It will try, to its limited ability, to follow the rules. //edit: crossed with Anduril66 //note to self: must type faster cheers, gary
Anduril66 is right. You closed the bodyarea, but you left it inside the loop. Your tpl file probably looks something like this (Smarty templating syntax): {section name=entry loop=$entries} <div id="bodyarea> <div id="displayBlog-inner" {section name=pic loop=$pics} <div id="displayBlog-pic"> <img src="{$pics[entry]}"> </div> {/section} <p>{$entries[entry]}</p> </div> </div> {/section} Code (markup): The bodyarea needs to be outside the loops. <div id="bodyarea> {section name=entry loop=$entries} <div id="displayBlog-inner" {section name=pic loop=$pics} <div id="displayBlog-pic"> <img src="{$pics[entry]"> </div> {/section} <p>{$entries[entry]}</p> </div> {/section} </div> Code (markup): The float enclosing then belongs on "displayBlog-inner" since it is the parent of the float image. cheers, gary
Thanks both of you for your awesome help. Not only has your suggestions worked but I learnt something new as well. Cheers...