6 replies [Last post]
Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 3 years 4 days ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

As the title says, FireFox doesn't let you do the immensley useful position: relative on tables or anything tabley within a table (for the purpose of having absolutely positioned children for, example, tooltips).

Frustrating, since every other browser, even IE can deal with this just fine. Apparently tables get some sort of exception in the specs or something so Firefox doesn't have to do this?? So anyway, the typical answer is to set a div inside the table and use that.

Since that bloats and destroys my lovely tables, does anyone know of another, better way?

On my first foray into tables with tooltips, I was unaware of the FF problem and accidentally got around it by making the floated div containing the tables the relatively positioned box-- http://stommepoes.nl/Homeselling/secondhome/beschikbaar.html
which worked fine.

Now I'm working on some ordering forms, half of which belong in data tables and the other half can just be normal forms. This time, it seems I'd need to use the wrapping form as the relatively positioned box. This kinda works, be severely limits my options when I plop these forms into the page (esp since the page is ambiguous right now as far as design).
(this is subject to change since this is my testing page, but I'm working with this: http://stommepoes.nl/Tables/tabletest.html which may or may not currently have the position: relative sitting on the form or the table, depending).

So, any way to trick FF2 or 3 into accepting tables and table elements as parent containers? I haven't seen anything other than the extra-divs answer on teh googlies. I did see more than once people claiming FF3 doesn't have this problem, but I can assure everyone that it does (as well as some absolute positioning bugs still in play).

Thx in advance,
poes

I'm no expert, but I fake one on teh Internets

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 2 hours 23 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9236
Points: 3242

A moot subject; one for

A moot subject; one for which even the rule makers don't have a definitive answer other than to say they don't have the answer. Smile

w3.org wrote:

The effect of 'position:relative' on table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell, and table-caption elements is undefined. [css2.1]

Instead of asking how to do what you think is the solution, state the actual problem; let us find the solution. Laughing out loud

Put {position: relative;} on the input element.

cheers,

gary

Unplanned code results in a tangled wad of brain-cramping confusion.

There are enough html & css demos and tutorials to be interesting. Please visit.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 2 hours 23 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9236
Points: 3242

We-ell, that was

We-ell, that was particularly wrong advice. Sad

Do this instead:

<td class="aantal">
  <p style="position: relative;">
    <input id="aantal1" type="text" value="2" name="aantal1"/>
    <label for="aantal1">Change number of items</label>
  </p>
</td>

cheers,

gary

Unplanned code results in a tangled wad of brain-cramping confusion.

There are enough html & css demos and tutorials to be interesting. Please visit.

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 3 years 4 days ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

Thanks

Hmmm, very similar to the "div answer" (basically does the same thing).

OK, I know what my options are... I'm going to play around with sticking div/p/holding elements all around the table... I have to keep the labels from appearing anywhere near the checkboxes because of IE's problems.

because get this: I'm supposed to be building a webshop (never done that before) to sell an item, of which
I don't have any pictures of (actually I got one today)
I don't know what all it does or how it comes
I don't know what options it will have specifically, what packages it will be sold in, or anything else I could use to set my parameters in the form...
and it's due 1 oktober, a full, running site.
so I'm building blind and deaf, and guessing what I will need. That's why I was hoping to know all my possibilities in getting around FF's issues because I'll need maximum flexibility until I know what I need to do.

Even if I had a PSD to start with it would be easier : (

I'm no expert, but I fake one on teh Internets

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 2 hours 23 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9236
Points: 3242

Why are you re-inventing the

Why are you re-inventing the wheel? There are any number of ready to use shopping cart apps out there for the taking.

Aside from that—it's kinda fun to roll your own—I'm more concerned about your user interface. The usability and clarity factors seem to be on the low side. Keep user decisions to a well-directed minimum*. If they're viewing the cart's content and want to edit something, give them a single option to edit a single item. Then show them an edit form that will let them delete the item or alter values. (You could have both edit and delete buttons for each item on the cart page.)

The gist of it is the user should not be able to alter values on the cart page. It should be read only. Edits always belong on their own page.

Take a long look at sites such as Amazon, and the ways they handle carts. Look, too, at this little shopping cart tutorial, for some UI basics. Never mind that the tutor intermixes logic and structure in the mid-tier. This would have been an excellent place to use a templating engine.

cheers,

gary

* Make your forms as foolproof as possible, but just as artillery will always defeat armor in the end, so will the fool defeat your best efforts—eventually. Sad

Unplanned code results in a tangled wad of brain-cramping confusion.

There are enough html & css demos and tutorials to be interesting. Please visit.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 1 week 1 day ago
London
Timezone: GMT+1
Joined: 2004-06-06
Posts: 15664
Points: 2802

I wouldn't look at Amazon

I wouldn't look at Amazon from what I recall it was a ghastly experience!

Have a look at dabs.com who do the whole cart experience pretty well and a lot of the site in general strives to be standards compliment which is extremely rare in these sorts of sites.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 3 years 4 days ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

Gary: what you saw was

Gary: what you saw was formpage 2.

Page one has the initial selection, and is in a table because it's almost more informative than anything else. It lists all possible products (all like, 4 of them). The only form controls are a checkbox selecting them from the list and submit.

Page two looks like page one in setup except it only shows which packages were selected by the user on page 1, with the ability to change number of items, colour, or remove them, as well as show total pricing. This page IS the single edit page.
It's loosely based on what a colleague has already built for a sister site (which is a full retail site and needs all that complicated crapola the apps come with, but the guy had already built it in PHP). It's also based on my experiences with frustration at cafepress-- somehow, when I'm trying to choose an item, I always get more than one in the cart. So when I'm looking at the stuff in my cart, I almost always have to change number of items, so here I've made it always an option on form 2 to change the number. In fact I usually end up changing everything at that phase, from sizing to colour to number of items, so I figure, there's only one page to do that in, Form 2.

Page three assumes they have definitely decided on what they want, and asks for payment options. While I know the boss wants three options (iDeal, credit card and the Dutch version of COD), it will only have one to begin with: iDeal. Of which I know absolutely nothing. I do not use such things to buy online, ever. I have no clue how to deal with this part, and hope the back end guy can figure it out.

Page four completes transaction, says thank you, repeats all the actions the customer has done so they can see what exactly happened, and get an email repeating this along with any Tracking avaliable.

The table is not complete as far as either content or styling. I intend to make it cleaner and more clear as I incorporate it into the actual pages.

Why am I building this? because the boss is having a (img of compromising positions/pr0n) love affair with teh googles right now and since the guy working on the Back End has chosen osCommerce (which he knows nothing about and I think just chose it based on name alone), I looked at the book he got with it and read about the HTML.

The HTML is crap, garbage, and horrid to edit, nested crap tables in a loose XHTML doctype : ( I checked out ZenCart-- same thing, to the point where the only business on their site I found who were actually able to style the site nicely (at least for FF3) forgot to remove the name ZenCart from the tags.

You are stuck with their garbage php chunks (which we're planning on weeding out since for this single product we don't need 90% of the includes, the reason why I wonder if something much simpler than OsCommerce would've been a better idea) with their garbage tabled layout difficult to style and SEOptimise HTML, which I hate. So I was hoping I could write the basics of the site. I'm not sure why these web shop thingies don't have versions which take into account businesses who have no shop but already an existing web site.

Editing the existing web shop part of oscommerce or zencart would be just as bad, since you still need to know about the product!! It's actually pissing me off.

I'll take a look at dabs, but like I said someone has already arbitratily and randomly chosen a shopping cart thing : (

I should keep a list of everything we're doing and stuff it in a list on Stommepoes called How Not To Build A Web Shop.

I'm no expert, but I fake one on teh Internets