Search and Footer Alignment Incorrect

brat42 · 10-26-2011, 04:30 PM

Hi all,

On our website, Link removed by user, the "Search" button and the search text box are not immediately next to each other. What do I need to change to make this happen? There is a few pixels in between - I know for sure there isn't white space in the images used, so it is a CSS problem.

Secondly, the top footer background is not aligned with the bottom footer background. Both the widths are slightly different, as well as the position. What do I need to change in the CSS document exactly for this to align exactly?

Finally, in the attached image on checkout the attached happens where the footer background aligns upwards for some reason. Why is this? This happens on multi page checkout only. I have single page checkout on my site but if the user is on an iPhone or iPad, it defaults to multi page checkout, hence the reason you can't replicate it on the site.

Thanks for any help to the above.

Excavator · 10-26-2011, 04:41 PM

Hello brat42,
There is some extra padding that is causing the gap in your search box/button. Try these changes highlighted in red.

Code:

input {padding: 2px 2px 2px 0;}
#SearchForm .Textbox {
background:url("https://www.xxxxxxxxxxxxx.co.uk/home/images/search-box.jpg") no-repeat scroll 0 0 transparent;
border:medium none;
float:left;
font-size:14px;
font-weight:bold;
height:18px;
padding: 5px 0 5px 5px;
width:216px;
margin-top:2px;
}

Excavator · 10-26-2011, 04:54 PM

The footer sections work better if they are styled the same. Try something like this -

Code:

#contact { 
	/*margin:17px 0 10px 5px; 
	margin:0 auto; 
	width:935px;*/
	height:234px; 
/*	background:url(https://www.xxxxxxxxxxxx.co.uk/home/images/contact.png) center bottom no-repeat;*/
	margin: 0 20px 10px 10px;
	background-image:url(../images/left_img/footer_top.jpg);
	background-repeat:repeat-x;
  }
#Footer {
/*background: url("https://www.xxxxxxxxxxxxx.co.uk/templates/Garden/images/green/footer.gif") no-repeat scroll 0 0 transparent;*/
background:url(../images/left_img/footer_bottom.jpg);
	background-repeat:repeat-x;
	height:71px;
clear:both;
font-size:11px;
margin: 0 20px 10px 10px; 
padding: 05px 0 30px 15px;
text-align:left;
/*width:951px;*/
font-family:Arial, Helvetica, sans-serif;
color:#000000;
}

brat42 · 10-26-2011, 06:25 PM

Thank you. You have solved the first two problems but not the last. Do you have any ideas on the photo I attached above?

Thanks

Excavator · 10-26-2011, 06:30 PM

Quote:

Originally Posted by brat42

Thank you. You have solved the first two problems but not the last. Do you have any ideas on the photo I attached above?

Thanks

You have no way to reproduce the problem on a PC? I don't know how I'd go about debugging that...

brat42 · 10-26-2011, 06:31 PM

Okay I have changed the checkout to multi page, so if you add something to the cart and go to checkout, you will see what I mean.

Thanks

Excavator · 10-26-2011, 06:59 PM

What happens if .Content is not floated?
Like this -

Code:

.Content {
	/*float: left;*/
	width: 580px;
	min-height: 500px;
	margin: 0;
	padding: 0 0 10px 0;
	font-size: 11px;
}

brat42 · 10-26-2011, 07:13 PM

Not floating the content fixes the problem but wrecks the rest of the site with the content alignment.

Is there any fix we can do directly on the footer?

Thanks

Excavator · 10-26-2011, 07:20 PM

Quote:

Originally Posted by brat42

Not floating the content fixes the problem but wrecks the rest of the site with the content alignment.

Is there any fix we can do directly on the footer?

Thanks

#contact can clear your float for you.

Code:

#contact { 
	/*margin:17px 0 10px 5px; */
	margin:0 auto; 
	width:935px;
	height:234px; 
/*	background:url(https://www.xxxxxxxxxxxxxx.co.uk/home/images/contact.png) center bottom no-repeat;*/
	padding:0 20px 10px 10px;
	background-image:url(../images/left_img/footer_top.jpg);
	background-repeat:repeat-x;
clear: both;
  }