Need help asap PLEASE! Product.css Buy Block is messed up

[generalexperts]

My buy_block is messed up in my store. What works for one page doesn't work for the other. I need help asap as this is effecting every product page.

 

This one works and looks generally how I want it (except the user can't select the size, Something is covering it)!

http://www.savvymarina.com/winches/11-harken-radial-self-tailing-winch.html

 

Here are some other variations of my details not working: (im sure there are more variations of this problem)...

 

http://www.savvymarina.com/big-boat-blocks/34-harken-block-57mm-swivel-becket.html

http://www.savvymarina.com/paint/10-pettit-paint-ultima-antifouling.html (can't select color)

http://www.savvymarina.com/paint/14-pettit-trinidad-hard-antifouling-paint.html (messed up and can't select color)

http://www.savvymarina.com/furler-pre-feeders-fairleads/23-stanchion-mount-lead-block-kit.html

 

Please help, I'd really appreciate it! I can't have this looking the way it is!

 

Thank you!!

[dioniz]

You have a lot of problems there with your css. Have you made those changes to theme? Like this one:

#add_to_cart {

    float: right;
    margin-right: 233px;
    margin-top: -65px;
    padding: 0;
    position: relative;
}

[generalexperts]

Yes I made the changes. Need help fixing what I've done to make it look like the one in the top link of my original post...

[generalexperts]

Can anyone please help me? Or at least lead me in the right direction. When certain things change the whole thing is messed up. ie when one product has color to chose from, the product that doesn't have color will look all messed up. How do I set them in their place for when they are used and not used?

[dioniz]

Why don't you reset css to what was before you made changes. Sorry to say that but there is real mess in that css

[generalexperts]

Yeah I could go find the original css file, but it looks terrible the 'out-of-the-box' way. I want all the stuff in the buy_block to be moved up and so it's tighter rather than spread out and pushing my tabs further down the page. It just doesn't have any style. Can you help me with this? Would it help if I gave the original css? or can you help me from here?

[generalexperts]

Still need help! Losing people on my site fast!

[generalexperts]

Can anyone help? Or is there a module that automatically does this? Looking for some responses here as my product pages are fairly dysfunctional. Thanks!

[generalexperts]

Still looking for help here? Since I'm not getting any responses and a lot of views, is there a better place for this post?

[danr87]

Hi

 

The only way to show it ok on all pages, is if you take in consideration that the #product_attributes DIV is modifying from page to page, and the ADD to cart button and the price MUST stay under this DIV.

 

Like in the picture below:

 

And this is because you can't know the exact position of the price, because the page is changing, and you can't know.

[generalexperts]

Thanks for the reply! Would you be able to help me with the changes you are referring to so it will look like that? Thanks!

[danr87]

Yes, when i go home tonight i'll paste the code here.

[danr87]

.content_prices {

position: relative;

float: left;

padding: 0;

}

 

 

#add_to_cart {

position: relative;

float: right;

padding: 0;

margin-top: -85px;

margin-right: -339px;

}

 

.our_price_display {

font-weight: 700;

font-size: 35px;

line-height: 39px;

color: #25aae1;

}

 

This are the three styles you need to change. (all in product.css)

 

 

 

Also i found a duplicate and you need to delete that:

 

 

.content_prices {

margin-top: 10px;

padding-top: 10px;

border-top: 1px solid #ccc;

text-align: right;

}

 

 

 

I also found that you availability text is a bit bigger than the layout, so i made the font smaller:

 

#availability_statut span#availability_label, #availability_date_label {

font-weight: 700;

font-size: 10px;

margin-left: 160px;

margin-right: 45px;

margin-top: 222px;

position: relative;

text-transform: uppercase;

}

 

#availability_statut #availability_value {

background-color: green;

color: #ffffff;

text-shadow: none;

padding: 0 0px;

text-transform: uppercase;

font-size: 9px;

font-weight: bold;

display: inline;

}

 

#pb-left-column #buy_block label {

font-weight: 700;

font-size: 10px;

font-family: Helvetica,arial;

text-transform: uppercase;

}

Edited May 14, 2014 by danr87 (see edit history)