Winn.ws » CSS

Jumping page content

Greg Winn — Fri, 14 May 2010 02:36:25 +0000

You are likely aware of the page-centering technique of adding auto left and right margins to an outer div:

1
2
3

#some_div   {
     margin: 0 auto;
}

One of the issues of this is that when used on websites with multiple pages, the layout can appear to “jump” a little bit when going back and forth between pages that require scroll bars and pages that do not. This is because the ~16px width of the scroll bar in the browser window causes the content area to become that much narrower and the wrap div re-centers itself in the narrower content area causing the jump.

One way to eliminate this jump is to force scroll bars onto every page regardless if they need them or not. This may annoy some purists out there, but I think it’s a decent solution.

1
2
3

html    {
     overflow-y:scroll;
}

I just used this in a recent project and it checks out with all browsers including IE6.

Browser detection using jQuery

Greg Winn — Tue, 10 Feb 2009 17:31:05 +0000

Browser sniffing is messy. There are a million ways to do it but none of them are particularly clean and most involve conditional statements such as “” for IE and various other CSS selector hacks for other browsers.

It get around this common issue i am now using jQuery to add a class to my body tag.

if($.browser.msie){
        $('body').addClass('browserIE');
        // Add the version number
        $('body').addClass('browserIE' + $.browser.version.substring(0,1));
}

If the user is using IE it will add a class to teh body tag like so:

1	<body class="browserIE browserIE#">

The “#” stands for the version of IE the user is running.

You can now access elements on your page that neeed to be corrected for IE by calling:

1
2
3

.browserIE6 #myDiv {
     display:block;
}

This will work much better then current hacks. Hope that helps someone!!

CSS 3 talk – Rounded corners

Greg Winn — Tue, 11 Nov 2008 04:50:13 +0000

So the last few years have brought amazing things, with the standards movement and getting companies to pay attention to the importance of following standards. In that time, I have seen over five big changes in PHP, three great changes in rails and only one in CSS. Why are we not seeing css3? Why does IE 8 beta still barley work with CSS 2.1? Crazy!

Well, time for a CSS 3 trick! I will cover rounded corners! This is only supported by Firefox and Safari. Below you should see a box with rounded corners!

This box has rounded corners!

Here is the code:


 
This box has rounded corners!

Web User Controls

Greg Winn — Fri, 24 Oct 2008 03:08:15 +0000

Using the user controls may be one of the best moves you will make when developing an application in .NET. The user control will allow you to separate your reusable logic and keep it in one place. For many developers this is a great thing! Many of us have to re-create items over and over, after some time your code can look like crap and then you feel like crap because you have to deal with it.

Let’s say we have a site where I needed a “Quick Search” on every other page, but each page had a different look and feel or a different CSS document. All I would need to do is create a web user control “.ascx” file and lay down the basics of my quick search. Assign the div’s ID’s or classes, then include your control in each page that needs it. To style, just use your style sheet assigned to that page an add your styles.

Web controls make life a little easier when developing in .NET, so be sure to take advantage of this great tool and stop duplicating your work!