Posted on Leave a comment

The Space Available

We’ve just bought our first house earlier this year and it has a small fenced off space out the back. It’s about 15ft by 15ft with a diagonal fence slicing the farthest left corner off… so there’s not a ton of space to work with, but it’s a very sweet little space all the same.

Our garden space

The ground is shingled (nightmare for heels AND plants alike) but container plants have been working quite well this far as the sun covers at least half of the garden for most of the day. We’ve so far stuck a small four chaired table in the middle of it and some half-moon baskets along the fence.

Our garden space

My very patient man (thanks Dan x) has been repeatedly dragged off to garden centres, B&Q and generally anywhere where I’ve seen plants sitting outside with price tags on. At the beginning we bought a bunch of annuals for the baskets, tempting me in with their bright colours and low maintenance demands. I’m not so much of a fan of them anymore.

The basket of shame

They started off well but I wasn’t particularly educated on how big each would grow, to excited at the prospect of having nice new flowers and colour in the garden, and so I didn’t bother to find out if they’d grow straight up or wander off to the side like vines… two of the three baskets are alright as I just planted the plain marigold plants in them, but the third is doing a thing all of its own. The geraniums in it have been and gone (too bad, I liked those ones..), leaving a brown stick standing proudly in the air, the flowers on the right have decided they’d like to turn into a bush in mid-air, protruding far beyond any of the other flowers and the red flowers which I’ve completely forgotten the name of at the moment seemed to bloom for a day and then rot into brown droopy messes.

On the up side I’ve been growing a few trees, and I’m quite proud of them so far. One is my tiny but ever growing ‘Christmas Tree’ who was originally received through the post as a gift from a printing company that my boyfriend’s company uses. For some reason though he seems to have stopped growing upwards and would much more prefer to continue getting wider… I keep meaning to research that and see why that is. The other tree is my Bay tree. Unfortunately when I was getting the original cutting from my boyfriends mom I heard her incorrectly and thought she had said ‘Bailey Tree’ …. that would have been nice, sadly there is no such thing as a Bailey’s tree so I will have to continue to buy the heavenly drink from the off-licence. It’s been growing nicely though, the Bay tree, I even started marking its progress on its support stick every Sunday, it’s been doing about an inch to an inch and a half each week.

The other plant I have is a recent addition (also from Dan’s mom) is a tomato plant. It had three flowers on it when I first put it in the garden… two of which I sadly found had fell off because of the torrential rain England had a month ago, the third flower, to my further dismay, fell off when I touched it. Further on in the week I had just finished a load of laundry and Dan was taking it outside to set it up in the sun when the clothes horse snapped under the weight off the wet clothes, falling directly onto the tomato plant. The tomato plant now has one stem and no branches, although it’s been a couple of weeks now and new flowers have started to bloom… we may get tomatoes yet!

Posted on Leave a comment

CSS : IE and FireFox inconsistancies
…or any browser for that matter

In a life where every browser renders the same way you don’t need to worry about cross browser compatibility, but until that time maybe some hints and tips will help you out (and me when I forget and have to search again!)

I’ll be adding to this list as I find more irritating cross-browser compatibilities…

Display your site the same across all Browsers

First and foremost…

Always have at least two browsers open while building and testing the site. Do not leave it til you are ‘finished’ to have a look and then try to fix things that are wrong. I usually choose IE6 and FireFox 2.0. This way you will notice problems immediately and be able to easily rectify the differences (usually).

Watch your padding carefully

Padding likes to render differently within individual browsers. Margin is your better friend in most cases and should display more consistantly throughout.

Floats and widths

From my experience, IE6 could care less in most cases if you allocate a width on a floated item but FireFox will demand one to display properly. Make sure that any items with float:right or float:left’s also have some sort of a width associated to them.

Posted on Leave a comment

Pure CSS Menu :
Two tiered css menu …
three tiered css menu …
however you like it!

Want a css menu for your website? (See here for an example)

Firstly, get this file: csshover.htc

In your stylesheet add:

BODY {
behavior: url(/csshover.htc);
}

Ok, so now you’ll have the css hover capabilities pulled into your website. Next for the menu code itself…

I’m sure you’ll find that some of this code can be reduced or perhaps completely removed to suit your specific needs, but it works as it is and should be a good base to get your menu working!

For your STYLESHEET


/** MENU **/
UL.menu {
clear:both;
float:right;
font-size: 0.90em;
padding: 0;
position: relative;
margin:40px 0 10px 0px;
width: 585px;
z-index:100;
}

UL.menu LI{
background-color: #FFF;
color:#FFFFFF;
float:left;
font-weight: bold;
list-style-type: none;
margin: 0 0 0 12px;
padding: 4px 0 0 4px;
}

UL.menu LI:hover
{
background-color: #FFF;
}

UL.menu LI A {
color: #999;
font-weight:bold;
text-decoration:none;
}

UL.menu A {
display:block;
white-space:nowrap;
margin:-4px 0 0 -5px;
padding:6px 0 1px 5px;
color: #000;
font-size: 1em;
text-decoration:none;
height: 20px;
position: relative;
z-index:100;
}

UL.menu A:hover{
color:#333;
background:#FFF;
}

UL.menu UL{
background-color: #FFF;
display:none;
list-style:none;
margin:0;
margin: -5px 0 0 40px;
margin-left: -5px;
padding: 0;
position:absolute;
top:auto;
width: 205px;
z-index:500;
}

UL.menu UL LI, UL.menu UL LI A {
width: 205px;
background-color: #F5F5F5;
background-image: none;
padding-left: 5px;
color: #999;
margin-left: 0;
}

UL.menu UL LI:hover
{
background-color: #D5D5D5;
}

UL.menu UL LI A:hover{
color:#333;
background:#F5F5F5;
}

UL.menu UL UL{
background-color: transparent;
border: 2px solid #CCC;
margin-left: 100px;
width: 300px;
margin-top: -20px;
}

UL.menu UL UL LI, UL.menu UL UL LI A
{
width: 295px;
background-image: none;
padding-left: 5px;
background-color: #666;
color: #FFF;
}

/* Begin non-anchor hover selectors */

UL.menu LI:hover{
cursor:pointer;
z-index:100;
}

UL.menu LI:hover UL UL,
UL.menu LI LI:hover UL UL,
UL.menu LI LI LI:hover UL UL,
UL.menu LI LI LI LI:hover UL UL
{display:none;}

UL.menu LI:hover UL,
UL.menu LI LI:hover UL,
UL.menu LI LI LI:hover UL,
UL.menu LI LI LI LI:hover UL
{display:block;}

UL.menu UL UL UL LI, UL.menu UL UL UL A
{
text-transform:none;
}

UL.menu UL LI UL LI A:hover {
background-color: #777;
}

/* End of non-anchor hover selectors */

/* Styling for Expand */

ul.menu a.x, ul.menu a.x:visited{
font-weight:bold;
color:#FFF;
background:#333;
}

ul.menu a.x:hover{
color:#FFF;
background:#333;
}

ul.menu a.x:active{
color:#FFF;
background:#333;
}

For your front-end

[ul class="menu"]
   [li][a href="#"]Home[/a][/li]
   [li][a href="#"]About Us[/a]
       [ul]
	[li][a href="#"]The Company[/a][/li]
	[li][a href="#"]How It Works[/a][/li]
	[li][a href="#"]Made-To-Order[/a][/li]
	[li][a href="#"]Design your own[/a][/li]
	[li][a href="#"]Flexibility[/a][/li]
	[li][a href="#"]Fabric or Leather[/a][/li]
	[li][a href="#"]Corner Sofas[/a][/li]
	[li][a href="#"]Chesterfields[/a][/li]
      [/ul]
   [/li]
[/ul]
Posted on Leave a comment

Best Practice CSS

The below is a guide that I follow and I believe it’s great for maintaining best practice CSS. I’d be interested to hear of your best practices as I’m certainly not claiming to know the one and only way!

CSS Stylesheet Layout

Keeping classes and id’s in a particular order will quicken development between multiple developers and avoid unnecessary confusion.

Order your tags by authority

Place the predefined tags such as ‘BODY’ and ‘A’ at the top
Next have your main framework tags, followed by main classes, and then lastly a general section.

This way you will be able to quickly scroll to the general area you want to add/modify.

An example is as below:
/** Standard tags **/

BODY {}
TD {}
A {}
H1 {}

/** Framework tags **/

#full_page {}
#main_content {}
#footer {}

/** Main classes **/

To contain all general classes, with sections for each different area. This may have a sub-section grouped with ‘News classes’, ‘Resource Classes’ … etc.

Note that the predefined tags (BODY, A, H1…) are all in UPPERCASE. Another quick and easy way to identify and organise your code.

Style Arrangement

Keep styles formatted with properties listed alphabetically and in a vertically listed format.
(Ok it MAY be a little OTT for some of you less organisation-enthusiasts, but every little bit helps)

Example:

.info_box {
border:1px solid #fff8f3;
color:#067;
margin-bottom: 10px;
}

General Rules

Accessibility
It is important to have a style sheet for accessibility. This style sheet will replace certain objects for non-graphical / resize-able objects depending on the situation/media used. It is also best practice to create a style sheet to adapt your website specifically for printing. Don’t waste all your visitor’s ink on pointless menus they can not use!

Re-using Code
Re-usable code is best. If there is a consistently repetitive attribute within your style sheet, consider creating a class specifically for the repetitive code and calling in two classes within your pages.

Example #1

Incorrect:
.class1 { border:1px solid #000; color:#F00; }
.class2 { border:1px solid #000; color:#F09; }
.class3 { border:1px solid #000; color:#233; }

[div class=”class1”]This text[/div]
[div class=”class2”]This text[/div]
[div class=”class3”]This text[/div]

Example #2

Correct:
.border { border:1px solid #000; }
.class1 { color:#F00; }
.class2 { color:#F09; }
.class3 { color:#233; }

[div class=”border class1”]This text[/div]
[div class=” border class2”]This text[/div]
[div class=” border class3”]This text[/div]

The second example is better because by combining the repetitive code it will prove to be more flexible, if for example, you decided to change the border to 2px and blue.

Naming Conventions

Especially if multiple developers will be working on a project, a naming convention should be decided upon and kept consistent throughout the project. There are two main adopted methods of naming your classes: camelCase and underscore_separated.

For this guide I make use of the ‘underscore_separated’ method.

Use a generic name for your styles

Use something that describes what it is the class/id will do, NOT how it does it. For example do not say .yellow_text but rather .highlight_text. This way if you were to change the colour to green it would still be relevant without having to change the class/id name throughout your project.

Tidbits of Knowledge

These are little bits that I have found to be saviours of otherwise frustrating situations. Have a go and see if they work for you as well. I’d be interested in hearing little things you do as a developer that makes things more fluid.

Use margins instead of padding wherever reasonably possible. Different browsers still read padding values differently, resulting in different spacing.

Develop using Firefox and then fix bugs in IE. From my experience, and that of other developers I’ve spoken to, it has proved to be far easier to get your desired results matching throughout different browsers if you use Firefox while developing and then flip over to IE to fix any inconsistencies.

Make use of predefined tags by applying classes/id’s to tags already in use throughout your code without loading it down with div’s and span’s. (Example below)

Incorrect:
[div class=”highlight”][a href=”mylink.asp”]My site[/a][/div]

Correct:
[a href=”mylink.asp” class=”highlight”]My site[/a]

See how the class is applied directly to the ‘A’ tag. Reducing of code where reasonable should be one of your targets. In case you are wondering what the stylesheet would look like, here are the two styles that would have been used in the above examples:

Incorrect
.highlight A {
color: #067;
}

Correct
A.highlight {
color: #067;
}

or even

.highlight {
color: #067;
}

Use EM in font size and not pixels or other. EM is recommended because of it’s ability to easily scale when required for accessibility. It also makes it very easy to scale your text throughout the project.

And that’s my CSS bible!

Hopefully it will help you sort out what might currently be a disaster of a stylesheet.