Help with CSS and PayPal

  • lplplpx3
  • Novice
  • Novice
  • lplplpx3
  • Posts: 23

Post 3+ Months Ago

I have a site, modified from a CSS template (Im a novice) and looks something like this - http://www.uniquelyyoursbathandbody.com/bath.html

The problem I am having is integrating Payal into the site.

I have generated the "Buy it Now' sales buttons and code BUT when I copy and paste the code it basically puts the drop down box and Buy it Now buttons just anywhere on the page.

I cannot get it to align horizontally or vertically...there's no rhyme or reason.

I noticed that the code generated is table based.

Any help/ suggestions would be much appreciated.

BTW the drop down box and buy it now button should be aligned with the text part of the page and even though I try to put the code within that div it just does its own thing.

Totally lost. Thanks.

Attachment example - Image
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • righteous_trespasser
  • Scuffle
  • Genius
  • User avatar
  • Posts: 6230
  • Loc: South-Africa

Post 3+ Months Ago

I don't see the dropdown or the "buy it now" button in FF or IE7 ... ??
  • lplplpx3
  • Novice
  • Novice
  • lplplpx3
  • Posts: 23

Post 3+ Months Ago

On no its not there at all, theres a screenshot above...I guess it would actually make sense to upload the page. Sorry, newbie. Ill do that.
  • lplplpx3
  • Novice
  • Novice
  • lplplpx3
  • Posts: 23

Post 3+ Months Ago

Applied PayPal code to first and second products -
http://www.uniquelyyoursbathandbody.com/bath.html
  • righteous_trespasser
  • Scuffle
  • Genius
  • User avatar
  • Posts: 6230
  • Loc: South-Africa

Post 3+ Months Ago

okay, I don't have much time, but I have seen that if you add "clear:both" to the table's CSS, it looks better already ...
  • righteous_trespasser
  • Scuffle
  • Genius
  • User avatar
  • Posts: 6230
  • Loc: South-Africa

Post 3+ Months Ago

I found the rest anyway ... give the following CSS to form aswell and it looks way better ... and remember to remove it from its original location in the CSS ...
Code: [ Select ]
form{margin:0px 0px 0px 240px}
  • lplplpx3
  • Novice
  • Novice
  • lplplpx3
  • Posts: 23

Post 3+ Months Ago

This is my first CSS site...real newbie. Please can you explain exactly where these comments go...and thanks so much for the help.
  • righteous_trespasser
  • Scuffle
  • Genius
  • User avatar
  • Posts: 6230
  • Loc: South-Africa

Post 3+ Months Ago

sweet ... all right in your CSS at the moment you have the following:
Code: [ Select ]
table{border-collapse:collapse;border-spacing:0;}

replace this with:
Code: [ Select ]
table{border-collapse:collapse;border-spacing:0;clear:both}


and then replace this:
Code: [ Select ]
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;}

with this:
Code: [ Select ]
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;}


and then add this somewhere in there:
Code: [ Select ]
form{margin:0px 0px 0px 240px}
  • lplplpx3
  • Novice
  • Novice
  • lplplpx3
  • Posts: 23

Post 3+ Months Ago

Getting there :) Now it works in firefox AND safari but, although aligned, still a little off in ie6.

See attached:
Image

Thx.
  • lplplpx3
  • Novice
  • Novice
  • lplplpx3
  • Posts: 23

Post 3+ Months Ago

I am ALLLLLL good, sorry had some bad HTML. YOU'RE A GENIUS.
  • righteous_trespasser
  • Scuffle
  • Genius
  • User avatar
  • Posts: 6230
  • Loc: South-Africa

Post 3+ Months Ago

sorry mate, I don't have IE6, haven't had it for quite some time now, I don't care for people who are still using it anymore, they are way behind ... I realize that this may not be the correct approach, but I don't see the point in keeping my site backwards compatible for something that was introduced back in 2001
  • righteous_trespasser
  • Scuffle
  • Genius
  • User avatar
  • Posts: 6230
  • Loc: South-Africa

Post 3+ Months Ago

lol, thanks ... something I think you could use and get to love is the web developer toolbar for FF ... this thing always helps me out ...
  • lplplpx3
  • Novice
  • Novice
  • lplplpx3
  • Posts: 23

Post 3+ Months Ago

OK, need a little more help...applying the exact same code in the exact same place for the other items on the page results in varying line space added above the PayPal code for no apparent reason. Tried everything I know to remove but it did not work.

You can view here:
http://www.uniquelyyoursbathandbody.com/bath.html

Tried on te other pages and it did the same thing also...fine for first few then adds the varying space.
  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8388
  • Loc: USA

Post 3+ Months Ago

What do you mean PayPal code? If I understand this correctly, than the reason those spaces are there is that they are the height of the highest table cell (<td>) in that row (<tr>). So the "Image Coming Soon" Image is bigger than the text to the right so the height would be the height of that image. And the spaces vary because the text does not take up equal amounts of space. I think that's what you meant because I can't think of anything else that you could be talking about...
  • lplplpx3
  • Novice
  • Novice
  • lplplpx3
  • Posts: 23

Post 3+ Months Ago

How can I fix this?

The "Image Coming Soon" graphic is the exact same size as the other product graphics as they are all different layers on the same photoshop file.

Any fixes anybody? I see my background gradient is also acting crazy right now. I am officially in CSS hell, lol.
  • righteous_trespasser
  • Scuffle
  • Genius
  • User avatar
  • Posts: 6230
  • Loc: South-Africa

Post 3+ Months Ago

okay to fix the background image that is making funny things, add the following CSS:
Code: [ Select ]
body
{
background-color:#d0a0ff;
}
  1. body
  2. {
  3. background-color:#d0a0ff;
  4. }

also, make the image "back_swirl.gif" 1px wide instead of 166px wide, that will already save a lot of bandwidth ....

I can't look at the rest now, I have to go ... will have a look later ...
  • lplplpx3
  • Novice
  • Novice
  • lplplpx3
  • Posts: 23

Post 3+ Months Ago

Ok I removed the table references which seems to have fixed the 'line space' problem.

The above code did not work for the background...will still try to figure out the background, then I can out this puppy to sleep. Yah!

Thanks for all your help righteous_trespasser and Bogey.
  • righteous_trespasser
  • Scuffle
  • Genius
  • User avatar
  • Posts: 6230
  • Loc: South-Africa

Post 3+ Months Ago

okay, replace this:
Code: [ Select ]
body {font:13px/1.231 arial,helvetica,clean,sans-serif;*font-size:small;*font:x-small;}

with this:
Code: [ Select ]
body {font:13px/1.231 arial,helvetica,clean,sans-serif;*font-size:small;*font:x-small;background-color:#d0a0ff;}
  • lplplpx3
  • Novice
  • Novice
  • lplplpx3
  • Posts: 23

Post 3+ Months Ago

Thanks mate, got it done...
  • righteous_trespasser
  • Scuffle
  • Genius
  • User avatar
  • Posts: 6230
  • Loc: South-Africa

Post 3+ Months Ago

awesome ... glad I could help ...

Post Information

  • Total Posts in this topic: 20 posts
  • Users browsing this forum: No registered users and 42 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.