OPC text overlapping problem 1.4.9

[TACS]

Hello All, this is my first topic here, most of my other bugs i have managed to fix just by reading through the very helpful topics here so, I am hoping that someone can come to my rescue and help me with this bug I have.

 

Basically as the topic says I have a problem with my OPC everything is overlapping and I am not sure what I need to do to fix it, I have checked that all the files are there and I have also replaced them all one by one with another download from prestas previous versions.

 

I figured the best thing I could do at this point was upload some screenshots for you guys to take a look at and hopefully someone will have a solution Thanks In advance for your much needed help!

 

 

[TACS]

>bump

 

anyone?

[vekia]

it will be much easier to say what you have to change if you will share url to your store

it looks like simple css issue, so if i will get an access to your store front -end i will inspect code and then - give you solution

[TACS]

Thank you so so much for offering to help i will activate the OPC straight after this post, my url is here

Edited October 21, 2013 by TACS (see edit history)

[vekia]

weirdy, i can't reproduce your issue:

 

what browser you use?

[vekia]

UPDATE: i see it, it appears only when customer is logged id. im working on it

[vekia]

#order-opc div.opc-main-block {
position: relative;
}

remove position:relative;

 

code above is a part of: https://theamericancandystore.co.uk/themes/justshoes/css/order-opc.css line 66

[TACS]

I think it only happens once you have registered an account, I just logged out of my account and get the same as what you just posted

 

I use a mix of 3 browsers to bug usually (IE Firefox and Chrome) but I prefer to use chrome for its speed

[TACS]

#order-opc div.opc-main-block {
position: relative;
}

remove position:relative;

 

code above is a part of: https://theamericancandystore.co.uk/themes/justshoes/css/order-opc.css line 66

 

 

so do I just delete the word relative?

 

from:

#order-opc div.opc-main-block { position: relative }

 

to:

#order-opc div.opc-main-block { position: }

[vekia]

remove whole position:relative;

 

just leave this style definition empty { }

#order-opc div.opc-main-block { }

maybe in the future you will add something there,who knows

[TACS]

Fab! thats made it look a lot better but only thing is I still have a little bit overlapping going on though =/

 

Thanks for your help with this too Vekia

[vekia]

can you share some screenshot what's goin on now? i can't reproduce it (i dont know where to check )

[TACS]

can you share some screenshot what's goin on now? i can't reproduce it (i dont know where to check )

For some strange reason I cant find where to attach pictures lol it was beneath when I made this post, can find it now though =/

[TACS]

I found it more reply options button

[vekia]

ok now it's clear

 

add:

height: 750px;

display: block;

 

to:

#lcsmainbody-inner {
color: #555;
padding: 20px;
display: block;
margin-bottom: 1em;
height: 750px;
display: block;
}

it's a part of https://www.theamericancandystore.co.uk/themes/justshoes/css/lcsglobal.css line 78

[TACS]

Hi Vekia, Iv added those two lines of code but nothing appears to have happened =/

[vekia]

where you pasted this code? i can't find it

[TACS]

#lcsmainbody-inner { color: #555; padding: 20px; margin-bottom: 1em;}

#right_column {

    ;

margin-top: 0em;

    width: 250px;

    height: 750px;

    display: block;

 

on lines 83 + 84

[vekia]

this isn't code that i suggested to use 

[TACS]

now Im really confused...

 

I went  to the link of the lcsglobalcss that you provided, I searched for  #lcsmainbody-inner and the code that was there is what iv just pasted up by there, its the same code your referring too and all iv done is add the two lines of code to the end like you suggested =/

 

should the code be exactly what you have pasted there? because if so it would be a little more than adding just the two lines..

 

this is how the code was before I adjusted it to add the two lines (as i have kept backups)

 

#lcsmainbody-inner { color: #555; padding: 20px; margin-bottom: 1em;}
#right_column {
    ;
margin-top: 0em;
    width: 250px;
}

and with the two lines added it looks like this

 

#lcsmainbody-inner { color: #555; padding: 20px; margin-bottom: 1em;}
#right_column {
    ;
margin-top: 0em;
    width: 250px;
    height: 750px;
    display: block;

Edited October 21, 2013 by TACS (see edit history)

[TACS]

was

#lcsmainbody-inner { color: #555; padding: 20px; margin-bottom: 1em;}
#right_column {
    ;
margin-top: 0em;
    width: 250px;
    height: 750px;
    display: block;

now (solved)

#lcsmainbody-inner { color: #555; padding: 20px; margin-bottom: 1em; display: block;height: 750px;}
#right_column {
    ;
margin-top: 0em;
    width: 250px;

I just put those two lines of code in those grouped styles on the one line and its fixed it, YAY!

 

 

however, I have one slight small issue now and that should be it then, the problem I have now is the large amount of whitespace at the bottom of the checkout, any idea on that? thanks in advance!

[vekia]

sorry for the confusion i was offline, but i've noticed that you solved it

 

regarding to the white space: you can decrease height value in: 

#lcsmainbody-inner {
color: #555;
padding: 20px;
margin-bottom: 1em;
display: block;
height: 710px;
}

710 is optimal value

[TACS]

Hi Vekia, Thats okay and yeah I managed to solve it Thanks for your help and the info!

 

regarding the whitespace, I have tried reducing the height but as i do this thing's begin to overlap again, where i have set it at now (as I changed the font size slightly) is where all of the address text should sit,

 

basically the address and headers are all in the right place beneath the continue shopping button however beneath the addresses where it moves onto delivery methods and payments there seems to be a large white space between them (as well as at the bottom of the page)

 

one other thing i have just noticed is when i add a number of items to the cart it it begins to overlap this 

 

1. ADDRESSES

CHOOSE A DELIVERY ADDRESS:

 USE THE DELIVERY ADDRESS AS THE BILLING ADDRESS.

 

any ideas?

Edited October 22, 2013 by TACS (see edit history)

[vekia]

if i were you i will rebuild it, and use default code for opc and default styles.

there is something wrong with both of codes (html + css)

 

youv'e got this issue all the time? or it stared to appear after some changes?

[TACS]

okay, that sounds a little technical lol.. so let me get this right, do you mean use the code provided by prestashops default theme (from prestas previous versions)?

 

it has only appeared now since we made those changes, before that the opc was overlapping so I wouldn't know for certain if its been like that all this time..

 

the 5 step seemed to work fine, I just found if anything it was just too much up and down and clicking next so i wanted to simplify it all by using the OPC

[TACS]

Vekia, I think you will be proud of me lol..

 

I fiddled about a bit with the instructions you gave me yesterday..

 

so, I changed 

display:block
height:710px 

to the following

display:inline-block
height:auto

and it appears to have done the trick.. if I can ask a small favor whats your take on these changes, and would you mind having a little look at the checkout to give me your expert opinion?

 

Thanks in advance for your help, and I really do appreciate the help and time you have given to me.. I wouldn't have got this far if it weren't for you