Styling Input Tags on a Form

[reuber1]

I have a dilemma where I need to apply two different sets of styles to two items that are input tags...one is a text box and one is a submit button, which both are 'input' tags. I need to seperate the elements, which are normally side by side (see below). The first input tag is the text box with the number 1 inside, and that should rest next to Quantity. The other input tag is the 'Add to Cart' button, which should be on it's own line, and should not have the Quantity text-box or the Wishlist graphic by it's side.

My problem though, is that this content is database loaded, and it does not have an id or class attached to either input tag, so I can't edit the generated HTML (if I can, ASP DotNet Storefront's support isn't telling me how). If I change the styles for input, it changes both items in one group. However, I can and have applied a class to the TD tag that contains all this info (this is all done via XML Packages, and that I have control over, but the rest of this is being invoked by a metatag).

The HTML generated by the storefront does this for this specific area:


<form style="margin-top: 0px; margin-bottom: 0px;" method="post" name="AddToCartForm_302_303" id="AddToCartForm_302_303" action="addtocart.aspx?returnurl=showcategory.aspx%3fCateg oryID%3d47%26SEName%3ddrum-set&amp;productid=302&amp;variantid=303" onsubmit="return validateForm(this) && AddToCartForm_302_303_Validator(this)"><input name="IsWish" value="0" type="hidden"><input name="UpsellProducts" value="" type="hidden">
<small>Quantity:</small> <input value="1" name="Quantity" size="3" maxlength="4" type="text"><input name="Quantity_vldt" value="[req][number][blankalert=Please enter a quantity][invalidalert=Please enter a number for the quantity]" type="hidden">&nbsp;<input onclick="document.AddToCartForm_302_303.IsWish.value='0';" value="Add to Cart" name="Submit" type="submit">&nbsp;<img style="" onclick="document.AddToCartForm_302_303.IsWish.value='1';if (validateForm(document.AddToCartForm_302_303) && AddToCartForm_302_303_Validator(document.AddToCart Form_302_303)) {document.AddToCartForm_302_303.submit();}" src="skins/skin_2/images/addwish.gif" align="absmiddle" border="0"></form>


Firefox will interpret it the way I want, but Internet Explorer (version 7, specifically, I imagine 6 is doing the same or something entirely worse) stretches it wide, which is why I'm trying to style these in the first place; see what originally happened is it would automatically position the Add To Cart button and Add To Wishlist image-button side by side, which why they both aren't images or submit buttons is beyond me, and this causes extremely ugly and unneccessary table stretch, breaking many of my layouts. Setting a fixed width to the table has done nothing.

As I mentioned above I could apply a class to the TD, and I set the following style: .TDClassName img {clear:both; float:left;}

...and this is how it currently looks...

http://i4.photobucket.com/albums/y126/reuber1/wtf2.gif

Long story short, the Firefox side is right, the IE side is wrong. If someone can help that would be awesome. This is giving me a goddamn headache.

[EC]

um. have you tried adjusting margins and padding on the table?

[reuber1]

um. have you tried adjusting margins and padding on the table?
No dice.

[reuber1]

I dug around ASP's forums a bit more, and I think I might be SOL here, unless I'm willing to go into their source code of the database, change a setting that I can't find, and recompile.

****.

[EC]

can we see the full html (the table) and the css controlling the table? or is that a pain?

[reuber1]

can we see the full html (the table) and the css controlling the table? or is that a pain?
I forgot the link EC as everything is set up at the database back at work. I'll post it tomorrow, assuming I make it to work (more wintry mix coming).

[reuber1]

OK **deep breath**

http://64.198.195.247/?skinid=2
will get you to my test IP skin. You need to go there first.

Then, to get to the actual page that I'm testing, go to:
http://64.198.195.247/c-47-drum-set.aspx

www.creamcitymusic.com/?skinid=2
will get you to the same skin at the store's IP. If you go to 'Amps' on the left hand links, you can see my original problem if you're using IE7 or 6.

[EC]

Ok taking our cues from MySpace code lol ... this actually worked for me to bring that buy button down in IE7.

table table {width: 50px;}

[reuber1]

Weird, I couldn't get it. Either way, I had to ditch my XML package. I found what I need to fix in the source code and I'm getting it recompiled as we speak.