CSS tables are giving me the colspan rowspan blues

Yesterday this forum gave me the confidence to keep pushing along with CSS. I downloaded some Sitepoint books that I’ll read as soon as I get this site presentable.

Short story is I’m building a site for my family business. Our e-commerce hosting provider only lets us make changes in CSS. I hired a CSS pro and he got us far, but the big boss wants the site to look better than what the pro is willing to do. Thus, I’m learning this stuff myself to make up for it.

We can upload content images through CMS with basic HTML, but most alignment issues are solved through styles.css. If it can’t be done it in *.css, it’s probably not allowed through our host.

I’ve spent the past few hours trying to unpile the “Pricing per case” shown here:

Actual page is here:

I’ve figured out how to clean it up by hiding some of the info using display:none, which would work in a pinch. Maybe customers can guess that our wine bottles are 750ml. But can’t I put something into styles.css to stretch the information into the adjacent column?

Thank you everybody.

It’s not really clear what you are trying to do. Could you clarify?

Sorry, I think I see what you mean.

You could try this at the bottom of you style sheet:

#Prices table tr td span div {display:inline;}
Off Topic:

Sweet Jesus, what a terrible lot of code to have to work with! Nesting divs inside spans is totally invalid. Is there any chance you could change carts? :frowning:

Thank you! That was exactly what I needed. I’ll look up display:inline and figure out just why that worked.

In response to your other comment. I know, I know. It’s messy, huh? I often regret the cart choice, but we’re four months into a one year contract. The strength of this cart is in the back-end API connectivity. For example, they can link to a compliance checking company to make sure can legally ship to a buyer’s address. Then once the product is shipped, they link up to the shipping company’s API to collect the data we need to stay legal.

If I had to figure all that out on my own, I’d have bigger problems. But trust me, I’d love to get pages that validate someday.

Divs by default display as a block (meaning, effectively, that they sit on their own line). Display:inline tells them to sit alongside other elements, like images and links do.

Yes, sorry about my comments re the cart. I know these things are not easy to design. I am surprised the cart generates the code it does, but I couldn’t begin to design something like this myself, so I guess I can’t criticize. :slight_smile: