Ajax search affecting my footer

437 Posts

distant_smile Reply #1, 16 years ago

Hi,
I am hoping someone can help with my Ajax search. I run it in non-ajax mode and it returns pagetitle, longtitle and an image.
The problem is that on every page my footer is positioned correctly, even on my search results page. But when I run a search the results pull my footer inline with them. As the results are in the centre column of the page, this means my footer is pulled across to the right.

I have checked all the template code and all <div> tags are correct. The template code works on every other page, it is only when the results appear that I get the problem. Any ideas?

www.PawsForWildlife.co.uk
www.Borntobrick.co.uk

1,717 Posts

coroico Reply #2, 16 years ago

Without the html code and the css tags definition, we can’t help you. is your page published ?

437 Posts

distant_smile Reply #3, 16 years ago

Yes the page is published. My html is[table][tr][td]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>[*pagetitle*] - [(site_name)]</title>

<base href="[(site_url)]" />
<link href="assets/templates/11_swansong/style.css" rel="stylesheet" type="text/css" />
<meta http-equiv="Content-Type" content="text/html; charset=[(modx_charset)]" />

<link href="assets/templates/11_swansong/style.css" rel="stylesheet" type="text/css" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

</head>

<body>

<div id="container">

<div id="banner">

<img src="titles/pawsforwildlifelogo.gif" />

</div>

<div id="bannerb">

<h1>’Preserve the Beauty’</h1>
</div>

<div id="navcontainer">
[[Wayfinder? &startId=`0` &level=`1`]]</div>

<div id="sidebar">

<h2><u>Navigation</u></h2>

<div id="menu">

<ul>
<li><a href="">Hybrids</a></li>
<li><a href="">Mutations</a></li>
<li><a href="">Animal Cruelty</a></li>
<li><a href="">Hunting Techniques</a> </li>
<li><a href="">Wildlife videos</a></li>
<li><a href="" title="PawsForWildlife Kids">PWF Kids</a></li>
<li><a href="">Unidentifieds</a></li></ul>

</div> 

<img src="assets/images/sidebarimage.png"/>

<ul>
<li><h5><a href="#">Acknowledgements</h5></a></li>
<li><h5><a href="#">External Links</a></h5></li>
<li><h5><a href="[~76~]">Glossary</h5></a></li> </ul>
</div>

<div id="sidebar-b">

<div id="container3">
<h3><b><u>UK Wildlife Search</b></u></h3>
[!AjaxSearch? &ajaxSearch=`0` &showIntro=`0` &showResults=`0` &landingPage=`60` &advSearch=`allwords`!]
</div>

<div id="container4">
<h3><b><u>Global Wildlife Search</b></u></h3>
[!AjaxSearch? &asId=`as2` &ajaxSearch=`0` &showIntro=`0` &showResults=`0` &landingPage=`79` &advSearch=`allwords`!]
</div>

<div class="scroll">

<p><b><u>New A-Z search</u></b>
Searching for animals is now even easier with our new A-Z search</p>

<p><b><u>New Animal search</u></b>
Using our new Global or UK search, you can now search by the description of the animal (i.e, brown striped caterpillar). Give it a whirl!</p>

</div>

<ul>
<li><a href="http://www.uk-active.co.uk"><img src="assets/images/tris_header.png"/></a></li>
<li><a href="">Link 2</a></li>
<li><a href="">Link 3</a></li> </ul>

<p> </p>

<h5>Help save the animals</h5>

</div>

<div id="content">

[*content*]

</div>

<div style="clear:both">

<div id="footer">
<h5><a href="#">Home</a> | <a href="">Contact us</a> | <a href="">About us</a> | <a href="">Link to us</a> | © 2010 www.PawsForWildlife.co.uk | Design by <a href="http://www.mitchinson.net"> www.mitchinson.net</a>
This work is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by/3.0/">Creative Commons Attribution 3.0 License</a></h5>
</div>
</div>

</body>

</html>

[/td][/tr][/table]

And my css is

[table][tr][td]body {
margin: 0px;
height : 100%;
padding: 0;
font: 90% "Trebuchet MS", verdana, arial, sans-serif;
color: #000000;
background: white url(img/bg.png) repeat;
}
#container {
width: 750px;
border: 20px solid #fff;
margin-left: auto;
margin-right: auto;
margin-top: auto;
padding: 10px;
color: #666;
background: #ffdc87;
}
#container2 {
width: 350px;
border: 0px solid #666;
margin-left: auto;
margin-right: auto;
text-align: center;
padding: 0px;
color: #666;
background: url(img/bannercopy.png) repeat;
}
/*TOP BANNERs*/
#banner {
float: left;
width: 600px;
height: 96px;
padding: 0px;
margin-bottom: 15px;
color: #666;
background: inherit;
}
#bannerb {
float: right;
width: 110px;
margin: 0px 0px 15px 10px;
padding: 0px;
color: #666;
background: #dadada;
}
/*TOP MENU*/
#navcontainer {
clear: both;
width: 100%;
}
#navcontainer ul {
float: left;
width: 100%;
padding-left: 0px;
margin-left: 0px;
background: url(img/navbarbg.png) no-repeat;
color: #fff;
}
#navcontainer ul li {
display: inline;
}
#navcontainer ul li a {
float: left;
padding: 0.2em 1em;
text-decoration: none;
border-right: 1px solid #fff;
background: url(img/contentbg.png) no-repeat;
color: #fff;
}
#navcontainer ul li a:hover {
background: #a1aac9;
color: #fff;
}
#navMenu ul li a:hover span {
display: block;
width: auto;
cursor: pointer;
}
#active a:link, #active a:visited, #active a:hover {
background: #a1aac9;
color: #fff;
}
/*CENTRE CONTENT*/
#content {
padding: 10px;
margin-left: 190px;
margin-right: 190px;
background: inherit;
color: #000000;
}

/*LEFT CONTENT*/
#sidebar {
float: left;
width: 170px;
margin: 0px 0px 0px 0px;
padding : 10px;
color : #666;
background : url(img/rightscrollbar.png);
}
#container5 {
width : 170px;
border : 2px solid #000000;
margin-left : auto;
margin-right : auto;
text-align : center;
padding-bottom : 10px;
color : #000000;
background : url(img/rightscrollbar2.png);
}
#container10 {
width : 170px;
border : 2px solid #000000;
margin-left : auto;
margin-right : auto;
text-align : center;
padding-bottom : 10px;
color : #000000;
background : url(img/castes.png);
}
#container11 {
width : 170px;
border : 2px solid #000000;
margin-left : auto;
margin-right : auto;
text-align : center;
padding-bottom : 10px;
color : #000000;
background : url(img/status.png);
}
/*LEFT MENU*/
#menu {
width : 160px;
padding : 10px 0 0 0;
}
#menu ul {
margin : 0;
padding : 0;
list-style-type : none;
}
#menu li {
margin : 0 0 0.1em 0;
}
#menu a {
display : block;
width : 140px;
padding : 0.1em 0.8em;
text-decoration : none;
color : #fff;
background : url(img/contentbg.png) no-repeat;
}
#menu a:hover {
background : #a1aac9;
color : #fff;
}
/*RIGHT CONTENT*/
#sidebar-b {
float : right;
width : 170px;
margin : 0;
padding : 10px;
border-left : 1px solid #999;
background : url(img/rightscrollbar2.png);
color : #666;
}
#container3 {
width : 170px;
border : 2px solid #000000;
margin-left : auto;
margin-right : auto;
text-align : center;
padding : 0px;
color : #666;
background : url(img/Ajaxsearch.png) repeat;
}
#container4 {
width : 170px;
border : 2px solid #000000;
margin-left : auto;
margin-right : auto;
text-align : center;
padding : 0px;
color : #666;
background : url(img/Ajaxsearch.png) repeat;
}
#container7 {
width : 170px;
border : 2px solid #000000;
margin-left : auto;
margin-right : auto;
text-align : center;
padding-bottom : 10px;
color : #000000;
background : url(img/mutations.png);
}

#container8 {
width : 170px;
border : 2px solid #000000;
margin-left : auto;
margin-right : auto;
text-align : center;
padding-bottom : 10px;
color : #000000;
background : url(img/hybrids.png);
}
#container9 {
width : 170px;
border : 2px solid #000000;
margin-left : auto;
margin-right : auto;
text-align : center;
padding-bottom : 10px;
color : #000000;
background : url(img/subspecies.png);
}
/*RIGHT SCROLLBAR*/
div.scroll {
overflow : auto;
height : 15em;
width : 140px;
padding : 1ex;
color : #000000;
background : url(img/scrollbarbg.png) repeat;
border : 2px solid #eee;
margin : 20px 0 25px 10px;
}
/*FOOTER*/

#footer {
clear : both;
width: 715px;
padding : 5px;
margin : 5px;
color : #ffffff;
background : url(img/footerbg.png) no-repeat;
}

#footer a:link, #footer a:visited {
background : inherit;
color : #eee;
text-decoration : none;
}
#footer a:hover {
border-bottom : 1px dashed #e5fee4;
background : inherit;
color : #ffffff;
}
/*TYPOGRAPHY*/
h1, h2 {
margin : 0 0 10px 5px;
letter-spacing : 3px;
font-size : 120%;
color : #033301;
background : inherit;
}
h3 {
font-size : 110%;
color : #000000;
background : inherit;
}
/*LINKS*/
a {
color : #0000ff;
text-decoration : none;
background : inherit;
}
a:hover {
color : #666;
background : inherit;
}
/*CLASSES*/
.news {
font-size : 100%;
background : inherit;
color : #333;
}
.sitename {
font-size : 180%;
margin : 0 0 10px 0;
color : #826c45;
background : inherit;
}
blockquote {
font-weight : bold;
font-style : italic;
color : #b29b35;
}[/table]

Hope this is what you are after

www.PawsForWildlife.co.uk
www.Borntobrick.co.uk

1,717 Posts

coroico Reply #4, 16 years ago

I don’t see any css tags for the ajaxSearch html elements. May be you could look at the css file used on the demo site.
Look at this file to find some usefull css tags to style the ajaxSearch elements.

437 Posts

distant_smile Reply #5, 16 years ago

I am still quite new to css, can I add the css tags on the link to my style.css (template css)?

www.PawsForWildlife.co.uk
www.Borntobrick.co.uk

437 Posts

distant_smile Reply #6, 16 years ago

Finally...Played with my css and managed to create a container for my AjaxSearch to sit in, and now my footer is correct!!!!

www.PawsForWildlife.co.uk
www.Borntobrick.co.uk