• Sign in to Neowin Faster!

    Create an account on Neowin to contribute and support the site.

  • 0
Sign in to follow this  

Changing table rows from vertical to horizontal with CSS

Question

Nick Brunt    2

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?

Share this post


Link to post
Share on other sites

11 answers to this question

Recommended Posts

  • 0
Tanoru    1

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;}

Share this post


Link to post
Share on other sites
  • 0
Nick Brunt    2

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!

Share this post


Link to post
Share on other sites
  • 0
Nick Brunt    2

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.

Share this post


Link to post
Share on other sites
  • 0
team_NOOB    17

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

Share this post


Link to post
Share on other sites
  • 0
Nick Brunt    2

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.

Share this post


Link to post
Share on other sites
  • 0
team_NOOB    17

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?

Share this post


Link to post
Share on other sites
  • 0
Nick Brunt    2

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.

Share this post


Link to post
Share on other sites
  • 0
team_NOOB    17

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.

Share this post


Link to post
Share on other sites
  • 0
Ryoken    1,004

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

Share this post


Link to post
Share on other sites
  • 0
Nick Brunt    2

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.

Share this post


Link to post
Share on other sites
  • 0
Ryoken    1,004

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;}

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.