Rounded Corners

I was asked to put some content inside a box shaped element which had rounded corners. Not square corners, it had to have rounded corners.

Unfortunately, since HTML is so 'boxy' this behaviour does not come naturally. It's not just a setting on your table or div element, and there's no particularly easy way to achieve this effect.

Until CSS3 and its border-radius property comes into play in all of the next generation browsers, creating a screen element with rounded corners needs to be done another way. More info on border-radius and browser support is available on CSS3.info.

I found that the effect can be achieved using images and divs. There's a nice article on the Webcredible site which gives you a step by step tutorial on exactly how to do it.

N.B: Being honest, you can actually use browser specific properties such as '-moz-border-radius' to display rounded corners, but I couldn't find the equivalent for IE which is no good since a large chunk of users will be using IE.

CSS: RadioButtonList Layout

For the most part, I love web development, but there are some things that I absolutely detest about it.

For example, something that should be straightforward such as getting horizontal radio buttons to appear in a neat and tidy way can be tough. Obviously your radiobutton labels will have different values and will therefore cause the list to have different widths - this can be messy if you have a few rows of radiobuttons.

In addition, the radiobutton label will by default wrap down to underneath the radiobutton itself which is hideous. That needs to be fixed.

You could try laying the controls out with a table or a series of fixed size divs, but you shouldn't need to. And using tables could be nasty.

CSS to the rescue! Create a class to use for your RadioButton controls and assign it.

.radioButtons {
    border:none;
    border-collapse:separate ;
}
.radioButtons input {
    float:left;
}
.radioButtons label {
    margin-left: 25px; 
    display: block; 
}
.radioButtons td{
    min-width:175px;
}

Then just lay out your control like this (an ASP RadioButtonList control is used here but you could use HTML literals too I guess):

<asp:RadioButtonList ID="rblYesNoMaybe" runat="server" RepeatDirection="Horizontal" 
CssClass="radioButtons" >
    <asp:ListItem>Yes</asp:ListItem>
    <asp:ListItem>No</asp:ListItem>
    <asp:ListItem>Maybe</asp:ListItem>
</asp:RadioButtonList>

Using this, you should find that your RadioButtons look better and that your label text doesn't wrap underneath the radiobutton input. You'll probably need to set the min-width property of the td to an arbitrary value to suit your page or site.

CSS min-height and IE6

I've been working on a new application which has to be fully compatible with IE6 and IE8. Being quite a fan of using min-height to avoid nasty squished pages, I noticed that the min-height CSS property is rendered properly in IE8, but NOT in IE6 (shock).

A nice, easy workaround I found is this:

content {
min-height: 630px;
height: auto !important;
height: 630px;
}

This works in IE6, without messing up the formatting in IE8 and other browsers.

ASP.NET Error: System.Web.HttpException: Maximum request length exceeded

On several applications I have developed, the users need to be able to upload binary documents (discussed in other posts).

After a while, I kept getting the error:

System.Web.HttpException: Maximum request length exceeded

Easy fix. The problem is that by default, the maximum request size is 4mb. So when a user tries to upload a file which is larger than that, an exception occurs. The resolution is to increase the maximum size of the request, so add the attribute below to web.config (you can use a maxRequestLength up to "2097151" (2 GB) for the .NET Framework 2.0):

<configuration>

<system.web>
<httpruntime maxrequestlength="10240">

This is also explained quite nicely but without much background in a Knowledge Base article on the Microsoft Support site.

Remember, if you are imposing a maximum file size for upload you should notify the user of this restriction and handle any attempt to upload a larger file, or they might see errors again.

ASP.NET: Maintain Browser Scroll Position After Postback

In many applications, the screen can have many controls which cause postback events. And if the screen has any vertical scrollbars, users will typically object if the scroll position is not maintained (fair enough) and they have to scroll back down to find where they were and also to spot which changes the postback caused.

I had been mucking about with JavaScript solutions to this, which actually did work. But the easiest way is to follow one of these methods:

1. Set it programmatically

Page.MaintainScrollPositionOnPostBack = true;

2. In the page declaration:

<%@ Page MaintainScrollPositionOnPostback="true" %>

3. Or as a global setting in the web.config file, modify the pages section to add the property:

<pages maintainScrollPositionOnPostBack="true" >

Done!

ASP.NET Error: Databinding methods such as Eval(), XPath(), and Bind() can only be used in the context of a databound control

If you are using controls which are bound in a cascading parent-child relationship, you might see the error:

Databinding methods such as Eval(), XPath(), and Bind() can only be used in the context of a databound control

I kept getting this, but then after reading this tutorial, I realised that I had been sorting a GridView in my Page_Load event, regardless of whether the page request was a PostBack or not.

This was causing the databinding events to get borked up, and hence the error. So I added a simple IF statement around the sorting command to only do so if the page request was not a postback. Et Voila! Success!

Lesson: If you see the above error, check that you are not attempting to bind to a dependent dropdown list a value from its container’s data context when the latter was not bound to the container.

In English: check where in the page lifecycle your binding/sorting takes place otherwise you will unhook your controls from their binding and break your code.

The Horrors of Internet Explorer 6: Detecting a Visitor's Web Browser

I tend to keep up with updates to browsers, so I left Internet Explorer 6 behind in a cloud of dust a long time ago. It's horrible, and craps all over CSS in a way which beggars belief.

So much so, that several online campaigns have been set up to try to get rid of Internet Explorer 6. After all, it is eight year old technology - and a LOT has changed since its release in August 2001.

So when I discovered that my own website looks absolutely horrible through IE6, I realised that I had to accommodate this somehow.

The market share of IE6 has been dropping steadily throughout 2009, and at the time of writing, accounts for roughly ten percent of browsers on the web.

Rather than try to accomodate such a terrible piece of browser technology, I have decided just to display a message to IE6 users telling them that the site doesn't work for their browser and that maybe it's time for an upgrade.

Now I realise that a lot of people would object to this, shouting claims of lost custom due to IE6 users just closing the site, and that not everyone can upgrade from IE6 (standardised corporate PC builds etc).

But I am willing to sacrifice that potential ten percent of visitors to save myself from a complete site redesign which would be out of date in a year when the last IE6 users finally upgrade to something a bit more robust. I also think that some of those ten percent would have another browser on their system, which they may just use to access sites which don't show up properly in IE6 (there must be a few).

Anyway, the point is that there is a really simple way to detect which version of IE is being used, and display custom messages to the user or to show/hide certain parts of a web page. This excellent blog post highlights how it can be done in detail, but basically detecting IE6 can be done using the following simple conditional comment (which is only parsed by Internet Explorer browsers):

<!--[if IE 6]>
Special instructions for IE 6 here
<![endif]-->

Now, a custom message can be displayed and problematic sections of the site can be hidden for IE6 users.


Simples!