Actually, that is quite unfair to say because CSS itself (language/syntax) is okay on its own. It is the standards body and the set of standards they decided upon that cause nightmares for millions of developers and designers each day. This should be no secret for anyone who has attempted to get a site to work 100% in each browser, that is without a single pixel off. While it certainly is possible, the hacks often required to do so have been passed down through the generations of the language.

height: 100% – in your dreams
You would think that making a div have a height of 100% would mean that it would fill whatever space it was within. Not true! It works so long as the parent div has an explicit height. Note that it doesn’t work on this page. Note that while the right div has a height of 100%, it doesn’t adjust to fill the space created by the left div. Note that if you do not have the Clear div in there, you won’t even see the wrapper’s background. In otherwords, it doesn’t grow with its own content. Good job on those standards!

To fix this we have to define some explicit heights. By giving the Wrapper div a height of 800px you will notice that not only does the height setting work all of a sudden, so does the background! View the new code here.

While this is nice and all, it sucks for anything that has fluid height. The real fix for this is to move the right column’s bottom div outside of the right column and create two more columns afterwards. But now that div is outside the height of the left column which could make for an awkward gap, especially if you have a background image that provides a border. Enter the hacks: by adding a negative margin we can move the div back up into the column above it. See the final page. Congratulations, we have now entered the realm of CSS hacks and from here on out there is no turning back.

Margins and Padding In Nested Elements
Why is it that margins and padding in nested elements always seem to affect their parent elements? Furthermore, why can’t I define an explicit width and then give it padding? Why must the padding always be changed with the width? This makes for unreadable CSS that forces you to do addition and subtraction on the fly to get the true width of the element.

This one is simple: attaching the site’s content to the top of the page. This is easy enough as demonstrated here. No real trickery is required; just set the body and html tags to have a padding and margin of zero on all sides. If you are working in ASP.NET you may need to set them for the form as well. Never-the-less the two CSS properties do as we expect them to, at least until we add some real content. Just by adding a simple h1 and p tag we have already corrupted the parent element’s placement on the page.

Why does adding elements with a top margin to a nested element change the positioning of the parent element itself? In some cases (and probably here too, I don’t have WebDev bar installed here) the entire body is moved down because of this top margin issue. Regardless of that, a child’s positioning should never affect the position of the parent except for in specific/explicit cases. An element’s margins and padding should always be relative to the container it sits in and sibling elements. But instead we have to deal with setting top margins to zero now because of the CSS standards.

XAML Rocks
Which brings me to my point – the CSS language isn’t broken, the standards we follow are. If you look at Microsoft’s implementation of similar features in XAML, you will see that the standards they use actually make sense for all of those involved. Let’s look at the first problem I mentioned: advanced column layouts with a bottom positioned element in the right column. In XAML we can use a Grid to create the two columns, but many will cry out that is too easy and "tables" shouldn’t be used for layout purposes. Instead we can use the Grid as we would use a Div in HTML. We use the HorizontalAlignment attribute to tell each Grid to "float" which creates the columns. Much to the web developer’s surprise, XAML does exactly what you tell it to do!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<Window x:Class="BottomPositionedElement.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Window1" Height="300" Width="600">
    <Grid Background="#2D2D2D">
        <Grid Background="#DFDFDF" Width="340" Margin="10" HorizontalAlignment="Left">
            <TextBlock>
                Some content would go here and stuff.
            </TextBlock>
        </Grid>
        <Grid Background="#8F8F8F" Width="200" Margin="10" HorizontalAlignment="Right">
            <Grid Background="YellowGreen" VerticalAlignment="Bottom" Margin="10">
                <TextBlock>Hello, world! I am a bottom positioned "div"</TextBlock>
            </Grid>
        </Grid>
    </Grid>
</Window>

My point is to raise the obvious question: If Microsoft can implement its own set of XML tags and write a standard for them that makes sense and works, why can’t the HTML/CSS standards bodies? To blame this on the browser manufacturers at this point is just silliness since IE8, Chrome, and FireFox all have similar isses. That is to say that they follow the standards but what you expect is not what you get.

This summer has been very good to me so far. I got my old job back and couldn’t be happier in that respect now that I have a title (Web Developer) and received a nice raise over the winter. I have also been very grateful to have the time to put a sublime amount of miles on my bike. I am fast approaching having it for a full year and have already put on well over 2000 miles. In fact, here are the stats:

Totals from 08 August, 2008
Time: 283h
Kcal (Calories): 111 161
Odometer (Miles): 2184.91
Max Speed: 42.5mph
Max Cadence: 130
Ride Time: 133h

Anyways, being able to put so many hours into being on the saddle and just enjoying the ride has taken a serious toll on my weight. On 25 February I decided that at 240 pounds, enough was enough and realized that I could be a serious cyclist within a year or two if I poured everything into it. No fancy tricks, no secret diets; nothing but extremely long hours on the bike whenever I could and reducing the consistency of junk food. It has been 103 days since that day and I have lost roughly 25 pounds. As you will see I didn’t lose it all at once; the first few weeks were really rough as I couldn’t always get on the bike but now that my diet is balanced and my body is used to consuming large quantities (faster metabolism) I can slack off a bit during the week due to work and still lose weight.

The ultimate goal would be 180-185 pounds and if I achieve that I will certainly reward myself with some nice Zipp 808s but I keep in the back of my head the knowledge that at a certain point I will stop dropping body fat and my weight loss will seriously plateau. The other problem is that it is already June and the Winter is fast approaching. I haven’t decided what I am going to do when the snow hits and I can’t ride every day, but I plan to seriously reduce the amount I eat every day when my metabolism slows down. The realistic goal right now is somewhere between 190 and 200 would make me very happy and I would be okay with 200 on the dot.

I have also seen some major changes to the basic physique of my body. Obviously my stomach has gotten quite flat but I have also lost quite a lot of muscle and fat on my arms which was a welcomed change from the days of throwing shotput and discus.

My bike has also changed a lot since I got it. I just recently installed new bar tape, got a new chain (Dura-Ace 7900!) and have dropped the handle bars about 1-1.5 cm from the stock position. The goal with that is to never be comfortable on the bike for weeks while there is still a more aero and powerful position to be achieved by dropping the bars further. Also, I love that pro look of a huge drop from saddle to bars.

I think the best part about this sort of “diet” program is that it is long lasting because I enjoy doing it not just for the fitness aspect but the simple enjoyment of riding and feeling good as well. If only I could solve the dilemma of having to work in a cubicle for 40 hours a week…