Checkout Delivery/Shipping Information alignment issues

[Richard.Tung]

I kinda having problems with the alignment of the 'Delivery/Shipping Information' section in my Step 3 of 3 of the checkout. Its seems that is positioned to right side of the screen as shown here:

I don't know why it suddenly moved to the right but I would like it aligned back to the left like the rest of the text.
I've looked through the checkout templates and I could not find anything in relation to align =' ' so I don't know where else to look...
Help!!!

[niccol]

This is because the element that contains that text block (#checkoutShipto) has a class associated to it which is .forward. This means that it is floated right. The text above it is floated left.

So in the perfect world on would sit on the left of the block and the other would sit on the right of the block, side by side. This is the intention.

However, if both elements can't fit in the available space then one will go below the other. This is what has happened in your case.

The reasons for this could be all kind of things. Adding margins, padding and borders is one thing that can push the total width over what is possible.


Get rid of the classes and that will put them under each other. Or adjust the widths so that they sit side by side.

[niccol]

The rather nasty fix that covers all the possibilities is putting the following at the bottom of your stylesheet:

#checkoutShipto.forward{clear:both;float:none;}

I had to set up an account on your site to have a look. I'd be grateful if you could delete it

If you want to look at what the code is intended to create have a look at http://www.nick collie.co.uk/catalog/index.php?main_page=checkout_confirmation. Just take the spaces out of the URL

[Richard.Tung]

Thanks Nick
Boy do I love quick fixes and easy ones too..
I've added the line to my stylesheet and voila... its done... the only issue is the payment method section above it, its shifted 1 space to the right... weird... if you know of a easy fix that would be great... if not, its not a big issue for now...
Thanks again...
I'll leave your account there for now just incase you need it to look, I can delete it later...we are not really on live yet...

[Richard.Tung]

one other thing I wanted to ask you.. how did you get your icon on the address bar??? Do you modify the stylesheet and added the LINK REL= in there? or was it somewhere else?
Thanks
Richard

[niccol]

just waiting to get my password reminder from your site. No idea what I used as i didn't think I was going back!

The icon in the menu bar is called a favicon. It is basically a 16px square icon. It needs to be called favicon.ico and is put in the root folder of your site. Browsers will pick it up from there and use it.

You can specify it in the head section of the page too but usually this isn't necessary.

Search for favicon and you'll find a bit more information.

[niccol]

Didn't get a password reminder so set up another account. ou'll guess it by the name I used

In the stylesheet you have a rule:

.important {
font-weight: bold;
margin:5px;
}

It is the 5px margin that is causing that space.

[Richard.Tung]

Thanks for the info Nick, I will try it today.
The webhosting that we are currently using has all outbound email turned off... We are using slicehost for our host... bad thing is that the company got it before I started working here and I do know too much command prompt commands for Apache so I don't know how setup our email server. Yes bad excuse but thats the truth...hehehe
I'm slowly trying to learn everything but its taking a lot of time and brain cells

Richard