Changing table rows from vertical to horizontal with CSS

[Nick Brunt]

I'm formatting PayPal code on a client's website and it's in the form of a table:

<form target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="hosted_button_id" value="XXXXXXXXXX">
<table>
<tr><td><input type="hidden" name="on0" value="Size">Size</td></tr><tr><td><select name="os0">
	<option value="Small">Small </option>
	<option value="Medium">Medium </option>
	<option value="Large">Large </option>
	<option value="Extra large">Extra large </option>
</select> </td></tr>
<tr><td><input type="hidden" name="on1" value="Colour">Colour</td></tr><tr><td><select name="os1">
	<option value="White">White </option>
	<option value="Black">Black </option>
</select> </td></tr>
</table>
<input type="image" src="https://www.paypal.com/en_GB/i/btn/btn_cart_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online.">
<img alt="" border="0" src="https://www.paypal.com/en_GB/i/scr/pixel.gif" width="1" height="1">
</form>

I've been trying to find a way of using CSS to display the drop-down boxes next to each other rather than one on top of the other. I know this goes against the whole point of table rows, but unfortunately I can't modify the code itself, I can only add styles to it.

Any ideas?

[Tanoru]

Is this what you are after?

<form target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="hosted_button_id" value="XXXXXXXXXX">
<table>
<tr><td><input type="hidden" name="on0" value="Size">Size<br /><select name="os0">
        <option value="Small">Small </option>
        <option value="Medium">Medium </option>
        <option value="Large">Large </option>
        <option value="Extra large">Extra large </option>
</select> </td></tr>
<tr><td><input type="hidden" name="on1" value="Colour">Colour<br /><select name="os1">
        <option value="White">White </option>
        <option value="Black">Black </option>
</select> </td></tr>
</table>
<input type="image" src="https://www.paypal.com/en_GB/i/btn/btn_cart_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online.">
<img alt="" border="0" src="https://www.paypal.com/en_GB/i/scr/pixel.gif" width="1" height="1">
</form>

add this to your stylesheet

tr {float:left;}

[Nick Brunt]

Is this what you are after?

add this to your stylesheet

tr {float:left;}

Ok I'm actually really annoyed that I didn't think of that... Thanks!

[Nick Brunt]

Well using

float: left

works in every browser except (yes, you guessed it) IE7 (I don't care about IE6 any more).

Is there any way I can get the table to display horizontally in IE7? Remember I can't edit the html, just the css.

I've looked all over the net trying to find solutions but everyone just goes on about how it's a table row and should therefore be displayed vertically. I know that, but I have no other option. I'd even settle (grudgingly) for a JavaScript hack.

[team_NOOB]

Well using

float: left

works in every browser except (yes, you guessed it) IE7 (I don't care about IE6 any more).

Is there any way I can get the table to display horizontally in IE7? Remember I can't edit the html, just the css.

I've looked all over the net trying to find solutions but everyone just goes on about how it's a table row and should therefore be displayed vertically. I know that, but I have no other option. I'd even settle (grudgingly) for a JavaScript hack.

Without testing it on your code - can you try the clear:both method just before your last div.

And in your css it should be

.clear { clear:both }

Html should be

<div class="clear"></div>

Also add

display:block;

to your css float.

Do that for me first - and if it doesn't work I'll recreate the issue for you.. I'm just lazy this morning so I'm hoping it works :p

[Nick Brunt]

Using float automatically makes the display block anyway so that won't change anything unfortunately.

Unfortunately I can't edit the html, so I can't add the clear div.

[team_NOOB]

This is going to be a lot harder seeing as though you can't edit the html (sorry I missed that in your first post).

I was thinking position:absolute but even still I don't think that will solve your problem without touching the html.

But even if you find a bit of JS that corrects the issue you're still going to need to add the javascript link to the head section of the page - so if you can access that - u can access the rest of the page?

[Nick Brunt]

This is going to be a lot harder seeing as though you can't edit the html (sorry I missed that in your first post).

I was thinking position:absolute but even still I don't think that will solve your problem without touching the html.

But even if you find a bit of JS that corrects the issue you're still going to need to add the javascript link to the head section of the page - so if you can access that - u can access the rest of the page?

Yep, I can access the rest of the page. It's just this bit of code because it will be pasted in by the customer straight from PayPal and then stored in a database. I COULD modify it as it's put into the database, but I really don't want to have to. If there's a way with JavaScript or preferably css, I'd much rather do that.

[team_NOOB]

Ah I see.. Sorry dude JS is not my forte :( wish I could help.

As far as the css option - I am yet to find a solution.

Sorry dude - hope you find a solution! I would be interested to see a fix aslo.

[Ryoken]

You could try making the table position:relative; and then making the select tags position:absolute ..

[Nick Brunt]

I've decided to just make room for it... Not happy really but nothing works so I've added a couple of styles in an IE7 and lower stylesheet which move other objects around to make room.

Making the position absolute doesn't work because there's no way of distinguishing between different rows so they just sit on top of each other.

Making them relative doesn't work either because they just stay vertical. Obviously fixed is out of the question so as far as I can see, the position property is out the window.

Specifying the width and height of the rows or cells makes no difference either... Ah well, I tried.

[Ryoken]

I've decided to just make room for it... Not happy really but nothing works so I've added a couple of styles in an IE7 and lower stylesheet which move other objects around to make room.

Making the position absolute doesn't work because there's no way of distinguishing between different rows so they just sit on top of each other.

Making them relative doesn't work either because they just stay vertical. Obviously fixed is out of the question so as far as I can see, the position property is out the window.

Specifying the width and height of the rows or cells makes no difference either... Ah well, I tried.

What you do is make the table relative, and specify a height.

Now the fun part.

select[name=os0]{ position:absolute; top:0; left:0; width:100px;}

select[name=os1]{ position:absolute; top:0; left:110px; width:100px;}