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.
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.
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.
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.
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).
html {
height: 100%;/*makes the html the full window height*/
}
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*/
} div#footer {
position: absolute;
height: 150px;
bottom: 0;
width: 100%;
left: 0;}
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:
(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.
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.
A simple unobstrusive script performs a number of tests on the users browser then adds classes to the html tag of the document accordingly.
Create style rules which only apply under certain conditions such as:
Simply link you html file to the js file, and you have the following css classes at your disposal to customise for specific scenarios. It’s recommended that this script should be used for progressive enhancement.
.Dom (browser understands Dom scripting).isIe / .isIe7 (is Internet Explorer, is Internet explorer 7).isMoz (is Firefox, Mozilla etc).isOp (it’s an Opera browser).isSaf (…you guessed it, is Safari).w640, .w800, .w1024, .w1280).gtw640, .gtw800, .gtw1024, .gtw1280).isWin.isMac.isUnix.isLin.isIphone.hasFlash - browser has flash enabled.hasScroll - the page is taller than the browser and consequently has scrollbars.hasImg - browser supports images (good for safer image replacement)Only one very basic example at the moment… but you get the idea. view example
Download specss.js (right click - save as)
The current version is untested in all scenarios so any bugs… let me know.
The previous version had some problems with screen ‘flicker’ as the script ran after the page had loaded. To avoid this problem, the html is hidden until after the script has run. This is done with simple ‘visibility:hidden’ declaration (reset by speccs.js one the script has loaded) in the css and noscript override so it doesn’t recreate any issues for non javascript enabled visitors.