Hello,

I'm familiar with the ability to create borders and boxes in CSS, but I have a client that has requested diagonal rule to cross through table cells. That is, no matter the dimensions of the table cell, it would contain an X of a specified color.

Any advice on creating this? Thanks!

Can't you just create a css class with a background image of the X in question,set it to repeat and assign that class to the necessary td tag?

Well... I'd go with something similar to ...TommyBS...

You can put in an image and tell it to be 100% 100%... that would get the result you are after... sort of.
I suppose if oyu really want to have content on top of it, you could use relative positioning and z-index.


The problem is diagonal lines aren't really done with CSS.
So you have to find a way to make it "look" like it.
Css BG images won't likely work as you cannot tell them to take u pa certain dimension (it's tile or not, thats it as far as I know). (thus why I said an inline image).


I suppose it could be done.... 3 or 4 spans... a different image in each (triangle), and then nest them, positioning the image partling off... could work (but is that much extra markup worth the result?)

unless you know the fixed size of the table cell you will never get an exact fit which is why I still believe that a background image is the best idea. If you want to PM i don't mind sending you an example. Just to be even more controversal I'm going to ask why you are using tables at all and not just CSS!

Just to be even more controversal I'm going to ask why you are using tables at all and not just CSS!

It's a Federal Govt. contract and they have people who aren't developers trying to make design requests. I'm the only real developer in my group, so people come to me with ideas in odd contexts (such as an 'X' from CSS in a table). I wasn't sure about this one, so I thought I'd ask.

Thanks for all the advice guys! I'm going to advise them to go with the image or a sold background-color table cell instead. You've been a big help!

"they have people who aren't developers trying to make design requests"

Developers shouldn't be making design decisions either, unless they are skilled in that trade. Designers and developers use 2 completely different skill sets.

Sorry... going to disagree on that one.

If you let designers design, with no input from developers or users, then you are running the risk of getting a website that will fail.

You need input from all angles, through every step, from conception of ideas through to final coding.


Otherwise you end up with a site that is like 95% of those out there... inaccessible, poor usability and killing conversions as soon as people look a the site.


Plan, research, conceive, test, refine, develop.
Then repeat several times over.

This is a case where computer rules overrule the federal government.

Javascript might be useful here. But they are asking for things that are generally not supplied.

Sorry, but what you're describing - accessibility, usability, etc. - are all skills that the design team need. A development team needs to know HOW to code it. A good design shouldn't be compromised by a coder. That's Programming 101.

ANd thats why so many Programmers have to use skills from other people!

Please, think logicially.
If you have a TEAM, then it needs to work as one.
Therefore everyone in volved has to have input and contribute.

Far to often I've seen professionals with amazing knowledge and prowess in their profession screw a project up by not listening to the input of others.

How many Designers are aware of Browser inconsistencies, the limitations of space and the various alterantions that a user can force onto a design?

Not many - thats why everyone needs the input.

Saying it's down to the 'coder' to make up for there lack of knowledge wastes time, as that person as t ospend a lot longer going over the variou problems the design has caused, and fix them.

Instead, with a little common sense and communicaiton, you can get a fantastic design (even complicated, convulated and highly attractive!), and still get it working in every damend browser, still have the text resize and have it work with assistive/alternative technologies without additional programming.

And Comprimise is the key.
Without comprimise, you get stubborn people ruining the end result.