DataAssist - Product Catalogue - page structure

Dear Jason, I’m building a shopping cart. I’m familiarising myself with the Product Catalogue built with 'Data Assist Pages'.

Firstly, I’m finding it difficult to get to get to grips with the structure of the page - ie the div and classes, the tables (what is containing what?) – to such an extent and cannot figure out why there is no margins appearing around the individual products, even though I’ve inserted margins on the CSS called ‘.WADAResultsEntry’

I’ve attached a screenshot of the results page. As I said, I’ve made a few adjustments to the CSS – a red border, 700px width, etc (see attached 'ZIP' for all the adjustments I made).

In addition, I’ve added
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
To the .WADAResultDescription. I’ve added a WADAResultDescription:hover{
text-overflow:inherit;
white-space: wrap; overflow:visible;
background-color: #C90;
width: 120px;
height: 150px;
z-index: 2000; }

After I hover over ‘description’ – the hover gives me an orange box (expected) which the overflow text is supposed to wrap into (not happening), but the text is running to the right (not expected). In addition, the overflowtext is running under the photo (not expected) in the box on the right – (see attached ZIP).

Can you advise where I’m going wrong?


Additional Problem
I'm getting errors on the page when I move to see more records by pressing the navigation arrow '>>' - see attached pdf called 'Results Page error'

Fire Bug is a good tool that you can use for digging into the design of page, see our "Streamline your web development with Firebug" road map article for details:

roadmap_10.php


can you send a link to your results page so i can see it in the browser, troubleshooting css is next to impossible without being able to see it.

as for the error you are getting, make sure you are using the new Data Bridge 1.1.0 update, i believe this is an issue that was addressed in that update.

Link: products_results.php

I'll have a look at Firebug.

I've extension 1.0.9 - I'll upgrade.

  to such an extent and cannot figure out why there is no margins appearing around the individual products,  

padding is not supported on table cells. try editing border-spacing to the #WADAResultsTable selector instead.


white-space: wrap; is not valid, try adding

white-space: normal;

instead.

Ok Jason, I've tried both of your suggestion, nut with limited results. The normal wrap is showing me all the text - I only want to see one line for each product when you land on the page and then when you hover over the line of text it unwraps. The hover bit now is working.

I've adjusted the margins around via #WADAResultsTable - but I'm not getting a margin between each of the red boxes that surrounds each product.

it doesn't look like the changes where uploaded?
it's imposible to trouble shoot css issues without being able to see the problem.

Jason, I have now uploaded the revised page with the margins adjusted in #WADAResultsTable.

you changed the whitespace attribute in the .WADAResultDescription selector, my suggestion was to change it in the .WADAResultDescription:hover selector.

in the .WADAResultDescription selector keep white-space: nowrap;

in the .WADAResultDescription:hover selector use white-space: normal;

you had been using white-space: wrap; which is not valid.

i dont seer that you have added the border-spacing the #WADAResultsTable selector that i had suggested:

#WADAResultsTable {
    margin: 5px;
    padding: 20px;
}

change that to:

#WADAResultsTable {
    margin: 5px;
    padding: 20px;
    border-spacing: 5px;
}

Jason, great, that worked. I need to review the process again to see how the page was produced - what divs controlled the various design/layout on the page. I've never seen that css element before called ' border-spacing:' - it's not part of the elements in Dreamwevers Css pop-up editor. It's a little confusing, in that the '.WADAResultsEntry' is controlling the boder style, but the '#WADAResultsTable' controlls the space on the outside each border.

There is one little issue - when I hover over the description, it expands (perfect), but the pictures in the other products move down (must be aligned centre). Can I align everything so that it align to the top (I need to know which id/class controls this?), so that the border is the only thing that moves in these other products when you hover - see attached pdf

I'm still left with the problem that I posted on my first tag:

Additional Problem
I'm getting errors on the page when I move to see more records by pressing the navigation arrow '>>' - see attached pdf called 'Results Page error'

Note: I've uploaded the new product results page

add vertical-align: top; to the .WADAResultsEntry selector

send a copy of the results page so i can look into the other problem.