Topic: Using empty divs as spacers

I need to create spacers using

<div style="display:inline;height:1px;width:10px"><!-- --></div>

This works perfectly in IE6 and Opera 7 but Mozilla will not honor the styles of an empty div. Any workarounds to this? I know I can use a scaled image but I am trying to avoid that if possible.

"width" and "height" does not apply to elements displayed inline.
Describe what you're trying to achieve, there might be better ways.

I'm trying to align complex tables using divs as shims rather than scaled transparent gifs but if the css is invalid then I'll have to find another way. :-(

Using a div as a placeholder is no better than using a transparent gif as a placeholder. You're missing the spirit of CSS-based design.

1. Should you really be using a table in the first place?
2. If so, shouldn't you simply be using CSS to set the width of the table cell?

It's my boss who is missing the spirit of css among other things. If it were up to me I would do away with the tables altogether. Anyway I had used this idea previously in Proxomitron as a replacement for web bugs and I thought it might work here but I'll stick with the shims because that's what he wants.

Eesh, what sort of project are you doing where your boss actually tells you how to write your HTML?

My boss is an MD who thinks he's a geek. I actually contracted with him to migrate his network to Windows. While I was at it he asked if I could help him clean up his web site but he has thus far vetoed my every suggestion. I've had it with him so as soon as I have finished training his employees how to use SOAPware I am getting out.

ack

Sorry, I had a bad day.

Just today? Everday sounds like a bad day, with that kinda boss...


So if he wants tables, and you want CSS, maybe go for hybrid solution.
Instead of a complex table, simplify it as much as your boss will allow, then handle the rest with CSS.

I've seen Zeldman do that kinda thing with some sites.

And as for spacers...

In any case, if you're required to use a table, I strongly recommend using the table-layout:fixed CSS property on it, which will cause it to behave much more intuitively than the default table-layout:auto. (Columns will take the width you give them, and remaining columns will divide the remaining space up evenly, provided you set a width for the table.)

You might also want to look at border-collapse:collapse, which can provide greater control in some ways.

Wow, I've never even heard of those properties. Border-collapse? Table-layout? And I thought I knew CSS...


Mind pointing me to some resources on that?

http://www.w3.org/TR/CSS2/tables.html =)

Ah, yes, the spec. Should've thought of that. Thanks.

Try using

<div style="display:inline;height:1px;width:10px">&nbsp;</div>

-- not necessarily stoned... just beautiful.

*sigh*

I just love selective readers...