A new website for my client we buy cars any make has just gone live.

The site has been created to allow people living in or around yorkshire to sell there car or simply get a free valuation for their car with the minimum fuss. Vitamin K created the website and branding for the company who wanted a consumer-friendly iamge for their car buying business. The website was designed to be simple with thr minimum number of required steps for getting the car owner to submit details about their vehicle prior to the sale.

Check out the website for we buy cars any make at www.we buy any car in yorkshire .co.uk

As someone who is constantly trying to build a pool of reliable tradesmen that I can call on when a job falls outside my skillset, After recently having a new fusebox and consumer box wired in, I’m happy to recommend the following wakefield based electrician.

Might be useful to someone, and no… I didn’t design the site.

This isn’t a bug report. I’ve posted this as a reminder to myself and in the hope that it helps to prevent anyone else wasting the time I’ve just wasted trying to fix a non-existant problem. For the last hour I thought I was looking at a Firefox 3 bug which was making an element not appear in the online version of a site. Everything seemed fine offline but when i uploaded the files the element just vanished. The answer? disable ad-blocker extension. Due, probably to the image dimensions or the items ID, my ad-blocker had kicked-in causing a particular image to disappear.

Hope this saves people some man-hours.

I recently read an article about the equidistant spacing of elements with css over at css-tricks.com. The simplicity of the technique really struck me as a case of good old lateral thinking. Despite this I was a little uncomfortable with the extra html that was required to make the technique work.

Inspired by the css-tricks.com solution I decided to try and solve the same problem with out the need for the extra div’s.

Admittedly, the solution I came up with isn’t quite as clean as the one proposed by Chris Coyier but never the less I feel compelled to share it.

Here’s an example

It’s all about lists

firstly, here’s the basic html…

<ul class="equal">
<li class="n1" ><a href="thelink">the first item</a></li>
<li class="n2" ><a href="thelink">Another item </a></li>
<li class="n3" ><a href="thelink">A piece of link text </a></li>
<li class="n4" ><a href="thelink">this also goes somewhere </a></li>
</ul>

That’s right, just good old lists with classes to allow us the differentiate between them.

The css

Firstly, all the list items need to be floated, The floats need to be contained within their parent ul and for simplicity I’ve added a rough and ready css-reset to remove any margins and padding and to remove the default bullets

ul.equal {
padding-left:9em;
height:auto;
zoom:1;/* just for ie - put it in ie only style sheet*/
}
.equal:after{content:".";clear:both;visibility:hidden;height:0px;display:block}
* { margin: 0px;
padding: 0px;
list-style: none outside;
}
.equal li {
min-width:9em;
float:left;
}


The trick, as with Chris Coyier’s solution, the trick is to get three of the four items to each take up a third of the overall width. the trick with this technique is to offset the 1st item using a negative margin and use a padding on the containing ul to prevent anything from droping behind it. You’re now left with a ul which has a width which can be divided into thirds.

.n1{margin-left:-9em;display:inline;/*fix ie6 double margin float bug*/}
.n2,.n3,.n4{width:33.3%!important;text-align:right;width:33.2%;}/*ie6 causes problems due to rounding-up so use a slightly smaller percentage for it.


after the we’ve got the floated <li>’s nicely expanding we need to make sure the last three are right-aligned in their respected <li>

.equal a {
background: #fff;
height: 9em;
display:block;
margin:0 0 0 auto;/*right aligns a block element in the good browsers*/
width: 9em;
text-align:center;/*to override the text-align required for ie6 for the parent li*/
}
.equal .n1 a {margin:0;}

In the good browsers you can use a min-width to prevent the boxes dropping down onto multiple lines.

As with most layout techniques… IE 6 has to be coaxed into behaving how would like. The code required to do this would normally be put in a stylesheet of it’s own using conditional comments but for the purposes of simplicity i’ve used a couple of hacks to keep everything in one file.

A piece of css which will create the impression of rounded corners without any images, javascript , proprietary css, and practically no extra html. The method is inspired by a technique used on google reader though I have to say… I think my methods cleaner.

view demo

Admittedly, it’s pretty inflexible in that there’s no control over corner radius (2 pixels) but I though it was worth posting as there may be instances where it comes in useful. I’ll try and write up the method when I get time but for now you can just view the source.

Just a quick post to promote a new site I’ve been working on which sets out to help you find new music. It’s still in the BETA phase but I’d be interested in any feedback.

returnr.com - find new music

the results of a quick experiment did with a layout consisting of two fixed width side columns and a variable width central column. I also wanted to make the whole thing elastic so it would scale with the browser text size. I’ve yet to test this ‘in the field’ but thought it may be of interest to people anyway… seems like it may have some potential.

The trick with this one is in the negative margins on the side columns.

Have a look

I’ve created a small example page which demonstrates a method for creating a vertically and horizontally centred box. I decide to put this up after seeing a post over at sniplr.

Here’s the example: centred css layout

This example is elastic so it scales to the font size. For simplicity, I’ve not added any hacks for Ie box model issues.

The key code

html,body {
min-height: 100%; /*this makes sure that the page canvas fills the browser*/
background: #efefef;
}
div#popmsg {
position: absolute; /*sets the positioning type*/
width: 18em; /*width in ems - keeps things elastic*/
height: 6em; /* same for the height */
left: 50%; top: 50%; /* this line and the next line sets the top left corner of the box to the exact centre of the page */
margin-top: -4em; /*then use negative margins top and left to offset the box by half it’s width*/
margin-left: -10em;
border: 1px solid #999999;
background: #FFFFFF;
padding: 1em;
}


This is short piece of css which allows you to create a page footer which will sit at the bottom of the browser window when the content is not long enough to force it to the bottom of the page but will still sit below the page content when the page has scrollbars (the method is used by this site).

View Example

1. Set the min-height for the html tag to ensure it always fills the browser window.html {
height: 100%;/*makes the html the full window height*/
}
2. Set the minimum height for the body tag to %100 and positioning value of ‘relative’ this will ensure that the footer, which is a child of the body, will use it as the reference area for absolute positioning. warning IE6 hack!
   
body {
min-height: 100%;/*sets the body to the window height*/
_height:100%;/*ie 6 hack - better in a specific stylesheet*/
position: relative;/*tells the footer to use the body the reference when setting position*/
}
3. Position to footer at the bottom of the body div#footer {
position: absolute;
height: 150px;
bottom: 0;
width: 100%;
left: 0;}

4. Finally, use whatever element proceeds the footer to create a space for the footer on top of which will never contain content.
div#primary {
padding-bottom: 200px;/*creates space at the bottom of the main content the same height as the footer to prevent anything from disappearing behind it*/
}


Tested in windows:

• firefox
• ie 6
• ie 7
• opera
• Safari

(any results from Mac users greatly received)

edit 02/02/08
alternate solution at dave-woods.co.uk

I’ve looked high and low for a solution to ie 6’s problematic implementation of form select boxes. It would appear that select box width and the width of the option tags are inseparable. What this means is that if you set a width to the select-box there’s a good chance that some of the option text is going to be cropped. For sites with dynamic content, this leaves us only one solution… put the select box somewhere with lots of space.

As I’ve been unable to find a pure css I’ve resorted to Dom-Scripting for the answer.

To solve the the problem I’ve created a script  which will allow you to use set widths for the select boxes. The code then  dynamically resizes them when the user interacts with the select box. Once a selection has been made or the element has lost focus the select box is resized back to it’s original size. In order for the code to work there’s a few tricks that are going on with the positioning model to prevent the resizing from affecting other elements but hopefully these won’t be apparent.

This solution isn’t ideal but with few alternatives it could be the answer.

*note
It’s worth mentioning that I’ve seen other scripts which do practically the same thing,  although all the one’s I’ve seen use one Framework or another. My solution is bare-bones, self contained, and unobtrusive. hope its useful.

View the example

Update
It’s worth pointing out that after testing this in the wild I’ve realised the css usually needs quiet a bit of attention to get it working as intended. At some point I hope to get this working straight out of the box, though my preference would be that poepl stop using ie 6 all together.