Thursday, November 29, 2007

ASP.NET Controls emiting stylesheet "inline-block"

I'm going (at least hoping) to get perfect codes to feed my little firefox and IE. Thanks for the Error Console in Firefox which let me easily spot out what's wrong that the firefox doesn't handle.

And there it comes, it says cannot parse the "display" value. and I've search up and down in my ASP.NET pages, including the MasterPages for the keyword "display", no luck, I didn't write it!

So, the easiest way is ofcourse, do a search on the source code in Firefox (the source that is after render). and I've found the culprit -- my custom server control is emitting style="display:inline-block", which is automatically being rendered by the ASP.NET base control.

It turns out to be that as long as you set the Width (or Height) of the control and you didn't overrides the Render (instead suppose you are using RenderContents), the ASP.NET Web Control base class will render the IE-friendly but non-standard "display:inline-block" in the control's style (wrapped in SPAN tag).

So the obvious and most easy way out is, to override the render function so that it doesn't emit the buggy stylesheet declaration, but the drawback is that you'll need to write some codes to handle the style sheet in that case.




Alex said...

If you're implementing a custom control that doesn't need any display declaration then you might want to override the TagKey property to tell ASP.NET what type of tag your control emits.

For example, if you're making a custom input control from scratch return HtmlTextWriterTag.Input and you won't get the erroneous display declaration.

choongseng said...

Thanks for you input alex, yes, it is exactly what I've mentioned in the last paragraph of my post, having overriding the render function, but you gonna live with all the hassle to write all the styling on your own when rendering the control.

Deepak said...

hey alex i dint get you exactly..i have created custom control and when I add that control in my asp table cell then the span tag gets automatically added which i dont want.........can you help me out how to remove that tag

Deepak said...
This comment has been removed by the author.
choongseng said...

Deepak, how does your custom control implemented? what are the overriding methods that you are implementing?