Flexible product listing CSS Issue

[niccol]

To put this another way that is perhaps easier.

kdb04d is quite right in that what is being centered is the whole of that block. Because of what is in the block it is almost impossible to align the price with the center of the next <div> ( which contains the quantity and add to cart ) all of which are inside the <td>

This is what I was saying about emulating a vertical align center with css.

Yes it would be a solution to put the next div ( which contains the quantity and add to cart ) in its own table cell. Unfortunately this is going to mean rewriting a good chunk of flexible_product_listing as far as I can see.

My solution is to get rid of the center align. Set the part number 16px (or 1em) down from the top of the cell. Set the Item name 16px down from the top of the cell. Set the price 16px down from the top of the cell. They may not be in the center but they will align with each other and you will find a spacing that makes it look just great. (16px is just a guess.)

[niccol]

Sorry, I have had a drink and am full of words

Another way of saying it is to forget about the table for a moment. In that table cell you have two things.

div #listingPrice
div #listingButtonGroup

To solve it perfectly you want to align the two divs vertically so their centers line up. This is well nigh impossible with css and html. ( I believe it is a recommendation in the next version of css which is due out eventually. )

So the best solution is to align product number, product name and the price. You can only do that if you set the vertical align of the cells to valign = top .

You could fudge it by bumping the price down with a blank graphic but that is going to break down if the font size changes and different browsers and operating systems use different default font sizes - let alone people who zoom the font size for accessibility reasons.

[Empire]

I would like to thank everyone for all the help. Niccol I will give your suggestion a try and update this thread with how it has worked. thanks again.

[niccol]

Oh I hate it when this happens. I may be about to eat my words.

In normal circumstances I stand by everything I said!

However, in the world of what is practical rather than what is right I think I may have a bit of a hack for you.

We can't add another <td> to the table because it would involve too much coding. BUT we can add another table inside the last cell of this table. It will be a mini-table of one row and two columns.

We have two divs
div #listingPrice
div #listingButtonGroup
We'll put one in each of the mini-table cells.

Then they will , hopefully be able to center align.

Empire - all the work happens in product_listing.php. I have edited a default version of this file and will attach it. It seems like you have enough skill to work out how to apply the changes to your version of the file! I have commented clearly the 3 lines I have edited or inserted and I am sure that you will understand what they do. I can't test this at the moment (my server is down for the first time in five years which is why I am still awake ) and it is late and I think the code will work but I am tired and may have made typos.

Back-up, please.

This definitely breaks the 'thou shalt not use tables for layout positioning' commandment. So strike me down. It also breaks all kinds of guidelines. So, if your site is government funded AND you tell them AND they bother to look then it might, maybe possibly be a problem unless you apologise and make them a cup of coffee. Just don't say I didn't tell you when the XHTML police break your door down in the middle of the night with some well formed code.

[niccol]

Just was curious to see how you got on so had a look.

First, I was an engineer and I love the concept of the site. I have spent to much time with dog eared parts manuals trying to work out parts numbers. Particularly when the previous user has had grease on there hands and decided that some of their lunch would also look nice on the page. Also they get photocopied so much that they become useless. So, I think the site and the diagrams looks great.

Looks like you are getting somewhere with the table. Two points both meant constructively. You seem to have an extra <td> tag in there. Is that my code? If so I'll have a look at it. Without seeing your product_listing.php I can't tell.

It turns up in the source looking like:

<table>
<tr>
<td>$263.89</td>
<td><td><form name="cart_quantity" acti

Secondly, it is a shame about the 1px grey line above the mini-table <td>s.

The line is inherited from the formatting of the parent table.

.productListing-even td {height:42px; padding: 0px 5px; background-color: #e9e9e9; border-top: 1px solid #999999;}
.productListing-odd td {height:42px; padding: 0px 5px; border-top: 1px solid #999999;} /*control all listing elements with this*/

To get rid of it you need to add a class to the <td>s in the mini table and set border-top to 0px. The <td>s might read <td class="minitable"> instead of just <td>. Then you can stlye the class .minitable to get rid of the line.

[Empire]

Thanks for all the help Niccol. I am getting close, I am not sure where the extra <td> is coming from as I can not find it in the code. I have removed the 1px line and opted for alternating colors for the odd/even rows so that solved that problem.

The other issue I am having is with the way the discounted price is displayed for products on sale. I would like it to show the reg price on one line and the sale price below (seems to display that way in FF but not IE) and think I need to add a <br /> in there somewhere but am still trying to locate the correct file. The larger price is displayed correctly just because it won't fit in the table on 1 line.

Once again thanks for all the help Niccol.

[niccol]

If you attach your version of product_listing.php and post it then I will track down that pesky extra <td>. Hope I haven't made an error in the code.

As a thought, I edited three lines.

You could change it so the second line it doesn't have the <td> any more and the first line reads something like:

<table><tr><td>The Div </td><td>

So the second <td> gets opened there instead. I am doing this without the code in front of me so excuse the roughness!

Nick

[Empire]

Here is the product_listing.php file.

[niccol]

OK. Well first of all there was a typo in my late night coding. One of the <td> tags should have been a </td>.

But that isn't the end of the issues. I was confused about why we were getting some of the things that we were. For instance, some of the classes. For instance,

<td class="listingQty">

I can only guess that you may have done some other edits that I do not know about yet. Anyway it inspired me to return to basics. I started with the default version of the product_listing.php and a fairly new installation of zen cart that I test things on. I installed flexible_product_listing and went to work.

I think that I have the "mini-table" we discussed working fine. Attached is a screen shot. Yes, I know it isn't a work of art! But the elements all align centrally.

So that works great. Also attached is the php file I have used. So, the minitable approach works just fine. Attached is a copy of the 'clean' product_listing.php file which only has my most recent edits.

I have added classes to the minitable row and to the three <td>s. They are called nick0 nick1 nick2 and nick3 but I am sure that you will be able to change the names if you want. Apart from anything else the classes help you see what is what more easily in the source code.

I suspect that you have some 'legacy code' somewhere else that is creating the classes that I don't recognise but you may be able to tell me the answer to that one!

I would back track a bit to a clean version of the files and then try the modifications in my file. But back up back up back up.

Regarding the prices. Yes, they are in <span> tags so are inline. An easy way of fudging the display so that they always appear on separate lines in all browsers might be to set their width to 100%. You could also edit the function function zen_get_products_display_price($products_id) which is in functions_prices.php and turn the spans into <p> tags with classes assosciated to them so you can style to your hearts content. Or you could put the <br/> in there too. Or you could make them block and make the top one float right and the bottom one clearboth and floatright. Or, there are a few ways of doing it actually. I don't have IE handy at the moment so let me know how you get on.

Hope this helps

Nick

[Empire]

The classes that you found and did not recognize I had added just so I could style the cells. I had a look through your revised product_listing.php file and made a couple of changes to the one I had already edited and am happy with the results. The mini-table was a great idea!

I will take a look at the functions_prices.php file and see if can implement the suggested changes.

Thanks again for all the help!