Ramblings

August 28, 2010

Pros and cons of various vertical centering techniques

Filed under: Uncategorized — Tags: , — michaelangela @ 6:48 am

Just want to keep this for reference. 

In the Woods – Vertical Centering With CSS

There are a few different ways to vertically centre objects with CSS, but it can be difficult to choose the right one. I’ll show you all the best ways I’ve seen and also how to create a nice little centered website.

IE7 overflow:auto not working right?

Filed under: Uncategorized — Tags: , , — michaelangela @ 5:27 am

Briefly, the content was in the div that had the overflow: auto and the content was just going E-VE-RY-WHERE. Solution? See below. Yep it worked. Doing some work for a client that needs the legendary IE7- (IE6) support. Doing CSS fixes without hacks until HTML structure has to change. Hopefully not! But this little bit helped. 

Overflow Auto and Position Relative

The simplest fix is to apply position: relative to the containing block; the one with overflow: auto.

August 12, 2010

Making a clean float clear

Filed under: Uncategorized — Tags: , — michaelangela @ 4:33 pm

This is a note for reference in case I run into some funkiness that looks like this might address. Very nice and concise.

Breaking Floats Without Hacks

When you want to clear all floats across the entire width of the page or a div, this single line of CSS code just won’t cut it when using: <div class=”clear”></div>.

  1. clear: both;

Instead, we’re going to use four lines.

  1. width: 100%;
  2. height: 1px;
  3. margin: 0 0 -1px;
  4. clear: both;

Alright, let’s break this down. First of all, the major problem with clearing correctly in all browsers lies mainly in a few of Internet Explorer’s quirks. Both width: 100%; and height: 1px; force the browser into accepting that there is a div there. The margin: 0 0 -1px; negates the 1 pixel space that height introduced; this is the only property that is not required. Natually, clear: both; is the special ingredient to make all of this work.

 

IE6 Fixed Positioning

Filed under: Uncategorized — Tags: , , — michaelangela @ 4:30 pm

When you need it you need it. I just wanted to keep a link to this.

Fixed Positioning in Internet Explorer 6

Fixed positioning has always been a nuisance for web designers because of the lack of support for it in Internet Explorer 6, but I’ve come up with a solution that allows for cross-browser fixed positioning that doesn’t come at the large costs that other techniques result in. If you’ve been on the hunt for a way to get elements with position: fixed; to work properly in Internet Explorer 6, undoubtedly you’ve noticed that most methods come at the expense of absolute positioning or resorting to scripting. Mine does not.

F*CSS is more than just CSS for Flash

Filed under: Uncategorized — Tags: , , , , — michaelangela @ 4:25 pm

I had seen the author’s original writeup on Camouflage and that was already very cool. This goes beyond that and again just beyond CSS properties. The idea that any public property can be set via an external file and it’s not XML, that’s much cleaner. But even the idea of just changing positions, sizes, etc., in such a clean and fast way and with inheritance as well? Merging?! Very nice.

F*CSS |  About

F*CSS is a custom CSS parser for Flash based on the PropteryManagement System in Flash Camouflage. The main class called StyleSheet (found inside of the com.flashartofwar.fcss.stylesheets package), goes well beyond the native StyleSheet class by supporting style inheritance, pseudo selectors, and merging styles on the fly. The goal of the StyleSheet is to make styles something you can apply to any of your classes instead of just TextFields. CSS is a great way to define your class’s properties in an external file and F*CSS helps convert these css styles into property/value pairs you can apply to any Object.

Simplest css based sticky footer I have seen

Filed under: Uncategorized — Tags: , , — michaelangela @ 1:48 am

And apparently all the code is semantic as well. It’s clean and light on hacks which is always good.

New CSS Sticky Footer – 2010 – HTML for Bottom of Page Footer

This sticky footer solution is working in all major browsers, including Google Chrome and IE 8! It works with
floated 2-column layouts and we don’t get overlap in resized browser windows unlike older solutions
you find when you Google sticky footer. You don’t need an empty push div or cleafix hack. Here is how to use this sticky footer code.

Create a free website or blog at WordPress.com.