Need to overwrite theme CSS - css

Question

I have been working on this problem for days now and I just can't seem to find the answer.
I am using Drupal 7 and I am trying to use E-junkie's shopping cart in one of my blocks on the frontpage. The pop-up overlay and etc. are fine but apparently my Drupal theme's CSS Styles is overwriting that of my shopping so it comes out wrong.
This is the website that I am working on: http://eastwestcards.com - Under the big View Cart button there is an Add to Cart button that you can use to add a free product for the sake of being able to see what I mean by the shopping cart coming out all wrong. My checkout button is all the way to the left and if you click an empty space at the bottom it actually sends you to checkout, the item lists and the rest of the tables have no borders or cell spacing/padding and a few other things.
Now this site on the other hand is how my shopping cart should like: http://pixilate.com/fonts/gardenia-px - Just click Add to Cart for the product and you will see the different between my cart and that sites'.
I have been looking for help all over and I've tried everything that has been suggested to me, I have tried exempting the cart's design from my CSS stylesheet, I have tried overwriting my drupal theme's CSS and etc, I've even tried using the View Source Chart plugin for firefox to try and determine which tags and etc. I should be trying to fix in order to change the appearance of the shopping cart on the site. I used the View Source Chart plugin because viewing my page's source normally doesn't show the HTML code for the shopping cart pop up because it is a javascript code that is provided by e-junkie that I simply put on my site. I am fairly new to all of this but I have really tried my best to fix this problem and I hope someone will be kind enough to help me! Thank you in advance!
I made this change "border-collapse: separate" and "border-spacing: 2px" and i also added this stuff at the end of my css stylesheet, some of it works, some of it doesn't but it seems to look okay now:
#EJEJC_window table {
background-color: white;
!important;
}
div#EJEJC_iframeContent td
#EJEJC_iframeContent div {
border-width: 3px;
border-spacing: 20px;
border-style: solid;
border-color: green;
border-collapse: collapse;
background-color: white;
!important;
}
#EJEJC_iframeContent th {
border-width: 3px;
border-spacing: 20px;
border-style: solid;
border-color: green;
border-collapse: collapse;
background-color: white;
!important;
}
#ejejctable table {
font-family: arial;
font-size: 12pt;
background-color: white;
border-style: solid;
border-color: white;
padding: 4 px;
!important;
}
#ejejctable th {
border-width: 4px;
border-style: solid;
border-color: white;
padding: 4px;
!important;
}
#ejejctable td {
border-width: 4px;
border-style: solid;
border-color: white;
padding: 4px;
!important;
}
#ejejctable tr {
border-width: 4px;
border-style: solid;
border-color: white;
padding: 4px;
!important;
}
#ejejctable tbody {
border-width: 4px;
border-style: solid;
border-color: white;
padding: 4px;
!important;
}
#tdHeader { padding: 25px; !important; }
td#tdPmntOptions tr { float:right; !imporant; }
#tdPmntOptions tr { float:right; !imporant; }
img#btnEJ { float:right; !imporant; }
#btnEJ { float:right; !imporant; }

Answer 1

If you look at this screenshot, you'll see what the problem is. The blue area is your link tag, and the checkout button is actually just an image that's rattling around in all that empty space. Clicking the white area takes you to checkout because as far as the computer's concerned, you are, in fact, clicking the on the link tag (just not on the image that a human user would expect to click on).
The quick and easy solution is to just give that link tag "float:right". Apart from positioning elements, the float property also makes containers "shrink wrap" around their contents. In this case, your link tag will shrink down to the size of the button image.
You could also give the link tag a fixed width and height, but the float solution is more flexible.
Hope that helps!
EDIT: Just spotted that element.style.css is setting a tags to "display: block". There's your problem. Change that to "display: inline" and it should behave normally.
As for the line spacing on the table, style.css is setting border-collapse to collapse and setting border-spacing to 0. Changing those to "border-collapse: separate" and "border-spacing: 2px" should fix it.