CSS Consistency Issue between IE7 and IE8

While I was creating a short menu out of a bullet list, I observed an inconsistency in padding that surface between websites being viewing Internet Explorer 6 or 7 and Internet Exporer 8.

With IE 8, when I set the margins of my <ul> tags and my <li> tags to 0px, the bulleted list is still indented.


However, with IE 7 and 6, when I set the margins to 0px, the list lines up with the text above it.


From my research and testing, it would appear there is no way to correct for this.
It especially becomes a problem when developing in IE 8 and correcting the margin-left to -30px.
While IE 8 will show the text of the list left aligned with the rest of the text on the page, previous versions of the browser will bleed the list far left beyond the placement of the control's container.


To avoid this problem, the best practice going forward for the next couple years is either to account space for the list to be indented or avoid using lists.

Best Validation Expression for Email Address

If you've been playing around with the ASP.NET Regular Expression Validator or any other RegEx tools, then you've more than likely had to check an email addresses for its validity at some point.

Email Address values can range all over the place, which makes them somewhat difficult to correctly validate, especially because you don't want someone to not be able to complete a form if their email address doesn't comply with the regular expression you've chosen, or worse, you don't want someone to input an incorrect email address to abide by your validation expression.

I've been testing various expressions that I've been hunting down across the internet and I've found what I believe the be the best on the simple url: http://www.regular-expressions.info/email.html

This site addresses the RFC 2822 standard and makes some minor tweaks to it, leaving you with two options. The better of which is [a-z0-9!#$%&'*+/=?^_`{}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+(?:[A-Z]{2}comorgnetedugovmilbizinfomobinameaeroasiajobsmuseum)\b

However, the above expression does require constant review, as it specifically spells out the top level domains. As new domains are created, they will need to be added to this list. So, tomorrow if the new top level domain was created .webdev (i.e. rob@digitalplaydoh.webdev) then, you would need to add webdev to this expression to allow for all email addresses to be valid.

Rather than constantly need to check on these top-level domains, I much prefer a tweaked version that allows for a much less strict set of top-level domains, including those that don't exist such as rob@digitalplaydoh.fake. It gives the user the ability to provide a fake email address, but at least I know it's an email address in a proper format.

Therefore, I find this to be the most accurate email address regular expression:
[a-z0-9!#$%&'*+/=?^_`{}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?

Crossing The Ocean with Google Maps

Thinking of doing some international travel? Google's got you covered. Did you know that using Google Maps you can plot out directions from Japan to the United State without booking a plane ticket? Follow the directions below to see some of Google's more aggressive traveling suggestions.

1. Go to Google.
2. Click on Maps.
3. Click "Get Directions"



Now try each of the following Start and End Destinations:

Start Point: JAPAN
Destination: CHINA
Direction #43: Jet ski across the Pacific Ocean
Link to Directions

Start Point: JAPAN
Destination: UNITED STATES
Direction #38: Kayak across the Pacific Ocean
Link to Directions

Start Point: CHINA
Destination: TAIWAN
Direction #55: Swim across the Pacific Ocean
Link to Directions

See if you can find any other fun modes of transportation modes Google suggests for crossing the ocean.

Request Variables for ASP.NET Paths, URLs and more

Rick Strahl has done a great job of outlining which Request variables (Request.RawURL, Request.PhysicalPath, etc) to use for different sections of your site's URL, request variables, web server folder structure and more.

Click the link below to access his blog post regarding the Request Properties:
http://www.west-wind.com/weblog/posts/132081.aspx

Is the Back Button needed on Web Browsers

A friend recently was ranting about the Back button on a browser and that it often messes up pages he visits. A counterpoint argued that a good developer is always prepared for users to hit the back button and always programs to handle the user trying to go back in time.

As a web developer, I definitely agree that the Back button is a great nuisance. It also creates a layer of uncertainty in where your user is/came from when they arrive at a page. Anytime a user needs to be able to get back to page they came from, there should be an easily accessible link/button, so is the Back Button really needed?

I could foresee a lot of malicious intent if browsers didn't have a Back button. Maybe the true problem is how overused or available it is.

Maybe one alternative would be to present the user with a new tab for every new site (domain) they navigate to and remove the Back button. Each website is now responsible for the navigation around it's own site, yet if you ever pull up something you didn't actually want, you can easily close the tab and you're back at the site that sent you there. It's really just your web history presented different, but it would take up a shit load of memory (depending on the sites you had pulled up). I'm sure other problems would come from such a strategy as well.

I can't really think of a method that would keep you in full control of web surfing yet remove the Back button entirely. Feels like it might be a necessary evil that developers just have to accept and work around.

Nested Gridview Within Another Gridview

I recently came across a project for which I had a need for a gridview within a gridview.
For this example, I will create a grids of documents and guides housed within a parent grid of resource categories.

Let's start with a basic gridview of 4 documents (2 training modules on gridviews and 2 user manuals for cell phones).

<asp:GridView
    ID="gvDocuments"
    DataSourceID="dataDocuments"
    AutoGenerateColumns="false"
    DataKeyNames="document_id"
    CellPadding="8"
    HeaderStyle-BackColor="#e0e0e0"
    BorderColor="#e0e0e0"
    runat="server">
    <Columns>
        <asp:HyperLinkField
        HeaderText="Resource Link"
            DataNavigateUrlFields="document_filename"
            DataNavigateUrlFormatString="{0}"
            Target="_blank"
            DataTextField="document_name"
            DataTextFormatString="{0}" />
        <asp:BoundField
            DataField="document_description"
            HeaderText="Description" />
    </Columns>
</asp:GridView>
<asp:SqlDataSource
    ID="dataDocuments"
    runat="server">
</asp:SqlDataSource>

Both could be considered training, but to better organize the page, I will split the documents up into groups, each document having a group column in the database named document_group.
On my backend, I have a new table to complement the Documents table called DocumentGroups that has a docGrp_name and docGrp_id field. The docGrp_id field will link to the document_group column I mentioned.

Now to drop my original gridview in a second gridview of "Document Groups"
This is where the code gets a little more bloated but still relatively simple:

<asp:GridView
    ID="gvDocumentGroups"
    DataSourceID="dataDocumentGroups"
    DataKeyNames="docGrp_id"
    AutoGenerateColumns="false"
    GridLines="None"
    runat="server">
    <Columns>
        <asp:TemplateField>
            <ItemTemplate>
                <div style="padding-bottom: 12px;">
                    <div><%#Eval("docGrp_name")%></div>
                    <asp:GridView
                        ID="gvDocuments"
                        DataSourceID="dataDocuments"
                        AutoGenerateColumns="false"
                        DataKeyNames="document_id"
                        CellPadding="8"
                        HeaderStyle-BackColor="#e0e0e0"
                        BorderColor="#e0e0e0"
                        runat="server">
                        <Columns>
                            <asp:HyperLinkField
                            HeaderText="Resource Link"
                                DataNavigateUrlFields="document_filename"
                                DataNavigateUrlFormatString="{0}"
                                Target="_blank"
                                DataTextField="document_name"
                                DataTextFormatString="{0}" />
                            <asp:BoundField
                                DataField="document_description"
                                HeaderText="Description" />
                        </Columns>
                    </asp:GridView>
                    <asp:SqlDataSource
                        ID="dataDocuments"
                        runat="server">
                    </asp:SqlDataSource>
                </div>
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>
<asp:SqlDataSource
    ID="dataDocumentGroups"
    runat="server">
</asp:SqlDataSource>

I added in some padding for better spacing, but you can play around with the CSS however you want.

Now. I didn't put connection strings or select commands in the original SqlDataSource because, if you don't know what you're doing there, this tutorial is not for you.
But now that we've embedded this gridview inside another one, that (inner layer) SqlDataSource is more than likely going to be fed a variable from your outer layer grid.
For my purposes, I'm going to use the docGrp_id, which I conveniently fed into the DataKeys of my outer layer SqlDataSource.
For more information on pulling the current row's datakey, click here.

For Each thisRow As GridViewRow In gvDocumentGroups.Rows
CType(thisRow.FindControl("dataDocuments"), SqlDataSource).SelectCommand = "SELECT * FROM [Documents] WHERE [document_group] = '" & gvDocumentGroups.DataKeys(thisRow.RowIndex).Value & "'"
Next



And there you have it!

Word Wrap a Label in Windows Form Applications

I recent was spinning out a quick Windows Form application to help an orders team look up product information and found myself questioning how to wrap text in a label rather than have it venturing off the application into nowheresville.

As a web developer, I always assume my text will find its place within the boundaries of a panel or table cell, whatever medium houses it. But the same should not be assumed for Windows Forms applications. Luckily, there is a simple solution.

Set the label's AutoSize property to Off.

The label becomes a resizable control that you can drag to whatever limits you want the text contained within.