Ben McCallum's Blog

Dissecting ASP.NET MVC3, CSS3, HTML5, jQuery and a whole lot of other things ending with numbers…

Archive for the category “ASP.NET”

How to have multiple MVC websites under a single Go Daddy hosting account

The other day I decided to expand my repertoire of domain names and make some new websites. Namely, benmccallum.net and Halo Game Finder. My plan was to host them on my existing hosting plan with GoDaddy and after reading some documentation  it seemed this would be possible on my single “Deluxe Windows Hosting” plan. But for some reason I couldn’t get my new domains to serve any content, not even a simple index.html file with some test text in it.

I’ll walk you through the steps and then show you where I had issues.

  1. Buy the domain names with GoDaddy. 
  2. Add them to your hosting account.
    Go to your hosting control center and under the Domains tab add your new domains.
    When you add a new domain you simply point the URL to a particular folder within your hosting filesystem. Note: If that folder doesn’t exist already, one will be made for you.

    Since I already had a primary domain name I currently had something like this:
    http://reach4urphone.com —> /
    In other words, my primary domain was pointing to the root of my hosting filesystem.

    Any additional domains are then simply subfolders within the root. After adding my new domains I had:
    http://reach4urphone.com —> /
    http://halogamefinder.com —> /halogamefinder.com   (a directory sitting under root)
    http://benmccallum.net —> /benmccallum.net                (another directory sitting under root)
    Feel free to name these folder however you like but it’s convention/best practise from my experience to name them according to their domain name.

  3. Upload the content of your new websites into their associated subfolders
  4. Test your websites…
    And this is where I had issues. For some reason none of the new websites would work. Not even if I put a simple test index.html in there and nothing else. Turns out the problem was in the primary website’s web.config under the root. This website was an MVC3 app and it’s web.config seemed to be determining the state of all the other websites sitting in their own folders/virtual directories. Because MVC3 apps at the moment require bin deployment (where the MVC Assemblies/DLLs are deployed into the bin folder of the app) I think the child websites were getting confused trying to find those DLLs. To solve the problem I wrapped the system.web element of the root website’s web.config with a location element. See below:
MVC3 app web.config fix

MVC3 app web.config fix

Hope this helps others facing the same problem.

Making older browsers recognize and correctly style the new HTML5 semantic tags

I recently converted a web app I was working on (Reach4urPhone) to use HTML5 semantic markup. Instead of using divs with id attributes such as “header”, “nav” and “footer”, I replaced them with the semantic header, nav and footer HTML5 elements. Makes sense right? All I had to do was update the HTML and my CSS selectors and all the browsers on my computer were rendering my web pages correctly. It was a five minute job and life was good… or so I thought.

A week later I had a job interview at a web development company. Whilst proudly talking about my latest project the interviewer asked to see my site. Without hesitation I began loading (Reach4urPhone) on the office computer. Then -BAM- all my styling was wrong! Padding seemed obsolete, margins were out, etc. Spluttering and trying to recover gracefully I finally brought it up in a more recent version of Safari that rendered my website in all its true glory. I knew it was a older browser issue but at the time couldn’t figure it out. Well I have now and I’m here to share.

Basically, older browsers that can’t recognize the new HTML5 tags don’t know how to display them. Some decide not to display the elements as block-level elements even though they are defined as block-level in the HTML5 W3C standard. To fix it, add this to your CSS: article, aside, figure, footer, header, hgroup, menu, nav, section { display:block; }. By setting display as block for the new and unrecognized HTML5 elements header, footer, nav and section you tell/force the browser to render them correctly instead of just guessing.

Thinking back I realized the new Visual Studio MVC3 Web Application project template (with the MVC3 Tools Update installed) with the “Use HTML5 semantic markup” checkbox checked actually has a default CSS file with the rule: header,footer,nav,section { display: block; }. Too bad I had noobishly removed it when decluttering.

– benmccallum

PS. I got the job 🙂

reach4urPhone.com BETA released!

bungie logo

Recently, I’ve been working on a mobile phone web application for viewing Halo: Reach stats. Bungie and Microsoft (developers and publishers of the critically acclaimed and awesome game) have been kind enough and forward-thinking enough to expose an API (application programming interface) for us developers to extract data about the game, from player details to game history and fileshares.

I’ll be talking more about this website in the future, including how I’ve designed and maintained it, but for now go and visit it @ reach4urPhone.com and let me know what you think. This site is built using ASP.NET MVC3, HTML5, CSS3, jQuery and I hope you like it!

-Ben

A New Beginning

Hi Interwebs,

It’s been a while since I’ve posted anything on this blog. I’ve been busy finishing my Honours degree 😐

But now that is out of the way I am going to start posting things I learn on here. Whether they be in the ASP.NET MVC framework, ASP.NET Web Forms, C#, CSS3, HTML5, jQuery and other fields. I’m extremely excited about these new technologies and have made the shift from web forms to MVC3 so I’m going to share everything I learn and find useful on this blog, for your sake and my memory.

Regards,
Ben

Post Navigation