Hell is other people's CSS rules

A significant part of the JavaScript code I wrote in the last few years is intended to run as part of HTML pages developed by other people.

Now consider the following:

Lets say your JavaScript has a function called "AddButton" that takes a background color, a text color, some text for the button itself and a callback function to call when the button is pressed. and it renders the HTML and CSS that will show this button on the client's page. (Of course in real life this is much more complicated bu this should do to make the point).

You create perfect code, test it on FF,Chrome,IE,Safari,iPhone,iPad and what not, and it looks perfect and works great.

Now your customers/clients start to use your wonderful code and it turns out that one of them has a CSS rule that says "DIV {left-margin:5px}" which causes the texts on your perfect button not to be centered on his site.

So you go and change you code to rended style tags on all your divs saying that their left-margin (and right and top and bottom) are 0px, so your good now.

But then it turns out that another client has "Div {border:1px solid white}" ....
and so on (and of course this is not limited to divs...

How "defensive" should you be "against" the CSS ruls of the hosting page? and what can you do assuming that you don't want to start adding all the possible CSS attributes to every tag you render ?

How would you go about handling this?

Oh... and IFRAMEs are not a valid solution. Well, actually some times they are but lets assume this is not one of those times - why ?

1) Performance
2) Your generated html is required "flow" as part of the hosing page.

Any JavaScript / HTML /CSS lover out there would care to share his thoughts on this ?

Eyal

about html editing, newlines, new paragraphs and the behavior of the enter key

The following was actually one of the issues that made me want to open a blog.

while working on the HTML editor of gigya.com I encountered the following issue:

The default behavior for both IE and FF is that when editing a document and the user hits "Enter" it starts a new paragraph (like in MS Word). Some (but probably very few) people might know that they have to hold down the "Shift" key while pressing "Enter" to get a new line.

Is this a reasonable behavior or not - well, its a matter of opinion, anyway I was asked to make it so that hitting "Enter" would generate a new line and not a new paragraph.

Take a few seconds and think how would you go about doing this ...

After doing some research it was my boss that found the solution - place a DIV as a wrapper on the edited area, when the cursor is inside the div, for some unknown reason it was decided that hitting Enter will behave differently - luckily for me differently meant just what I needed....

Hopefully this will save someone some R&D time.

To boldly go where no one has gone before.

During development at http://www.gigya.com my markup produced the phenomenon you can see in the screenshot to the right. A button input element has successfully climbed over the scrollbar of my IE 6.0.2900.2180.

The markup is far from trivial and efforts to recreate this with simple HTML have failed (Note that I only put about 5 minutes into this attempt.

IMHO this is a nice bug,
Anybody knows who should I report it to ?

I wander, does MS send a T-Shirt saying "I found a bug in ..." for this ?
or maybe when you discover a bug in IE its the firefox people that send you the T-Shirt :)

Anyway, I will try and reproduce this with simple markup,
Till then, think of it as a challange.