Part 1: The confession
It is almost a over half a decade and the business I am talking about is now defunct. So I think I can safely talk about this mess.
Back when I was fresh out of university, the recession of 2008-9 hit hard in the UK and I found it very difficult to get a Junior Developer Job after leaving university.
I had to pay rent to my father and I had about £50 in the back account. There was a startup that wanted a HTML, CSS and VB.NET developer ... I didn't know any of those (I knew a bit Java, C# and SQL) however I was getting desperate for money and applied for the job.
Somehow I passed the developer test (and I found out later I was the only one that ever had). Prior to this had built 2 websites both were incredibly simple compared to what would come.
I started the job, and on the first day I was given an old Pentium 4 (2002) machine with a quarter of a gig of ram. It was a previous customer service PC with a CRT monitor. It had a copy of XP with VS 2005 installed as well as SQL Server and lots of customer service programs wouldn't I couldn't seem to prevent from loading.
I had a few easy jobs given to me. They were a few static HTML sites.
Then I got my first real job .... SOLEROS pronounced "Sol-eros", and no it isn't latin for masturbating. The logo was supposed to be a flower, but looked like artistic impression of a ladies nether regions.
At the time CSS 2.1 wasn't fully supported in anything else except for IE8, this new browser called Chrome and Firefox.
I could do some basic layouts in CSS but didn't know how to do advance things at the time which CSS 3 make easy ... rounded corners, shadows and rounded corners with Shadow.
The design required rounded corners with drop-shadows, custom fonts (these couldn't be done reliably without Sifr or Cufon). At the time each header had to be cut and pasted from the design and put into a CSS background sprite or so I should have known if I had enough experience to use this method.
This was the preferred solution at the time
.fancy-text {
text-indent: 1000em;
}
.my-custom-header {
background-url: '/path/to/my/custom.header.png';
width: 100px;
height: 20px;
}
I didn't do this, my solution was an image in the text flow and manually lining each one up with a custom class ... it didn't work very well.
The design had to work from IE6 to Chrome (which was at version 1 or 2 at the time) and Safari Mac and Windows.
So to normalise the paddings and margins and margins I decided to use a "css reset".
The CSS reset I chose was this
* {
border: 0;
padding: 0;
margin: 0;
}
It didn't work very well for form elements and buttons as one would imagine, but there wasn't any on the home page, so I didn't find this out until later.
I then passed my HTML + CSS + Images to one of the developers to do the CMS integration.