Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    New Coder
    Join Date
    Jul 2011
    Posts
    45
    Thanks
    13
    Thanked 0 Times in 0 Posts

    Search and Footer Alignment Incorrect

    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.
    Last edited by brat42; 10-26-2011 at 10:49 PM.

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,744
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    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;
    }
    Last edited by venegal; 10-28-2011 at 03:23 AM. Reason: URL removed
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    brat42 (10-26-2011)

  • #3
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,744
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    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;
    }
    Last edited by venegal; 10-28-2011 at 03:24 AM. Reason: URL removed
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    brat42 (10-26-2011)

  • #4
    New Coder
    Join Date
    Jul 2011
    Posts
    45
    Thanks
    13
    Thanked 0 Times in 0 Posts
    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

  • #5
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,744
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Quote Originally Posted by brat42 View Post
    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...
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #6
    New Coder
    Join Date
    Jul 2011
    Posts
    45
    Thanks
    13
    Thanked 0 Times in 0 Posts
    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

  • #7
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,744
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    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;
    }
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #8
    New Coder
    Join Date
    Jul 2011
    Posts
    45
    Thanks
    13
    Thanked 0 Times in 0 Posts
    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

  • #9
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,744
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Quote Originally Posted by brat42 View Post
    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;
      }
    Last edited by venegal; 10-28-2011 at 03:24 AM. Reason: URL removed
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    brat42 (10-26-2011)


  •  

    Posting Permissions

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