]> CSS | Web Developer Reference Blog

Figures In Comfort Project Report

Sunday, May 23rd, 2010
Figures In Comfort Screen-shot

Figure Cases Product Listing (FIGURE 1)

Figures in comfort asked me to produce a method of ensuring that customers can only select the amount of foam that will fit into the cases.

The previous system allowed customers to choose more foam than would fit, which made it take longer for them to be able to fulfil the order.

This is because some trays are double, triple and even quadruple depth.

The client would first have to contact the customer to explain, costing time and money.

(more…)

Why should I comply with web standards?

Thursday, February 25th, 2010

Complying with web standards can give your web pages greater visibility in web searches. The structural information present in compliant documents makes it easy for search engines to access and evaluate the information in those documents, and they get indexed more accurately.

(more…)

CSS VS Tables

Thursday, February 25th, 2010

Tables are meant for tabular data and therefore using them to control layout is sloppy. They also mean that you need to edit more pages to move things such as menu items. CSS gives you more diversity and allows you to lay your markup in a more accessible way by hiding jump-links for example.

If you are using FireFox, View >> Page Style >> No Style and you will notice that the website is not broke by the fact there is no style. Tabled websites often will or content is read before links making sites less accessible.

Import vs Link

Thursday, February 25th, 2010

Import is where you import a .css file from inside another css declaration in the header of a html document or in another style-sheet. The main advantage is that older browsers ignore these and will not fall over because of styles they don’t understand.

You can have an import within a link or an import but not within a link. Using imports correctly you can ‘override’ styles to fix flaws of the rendering in older browsers which would cause a design fault in a newer browser.

e.g.

//STYLES HERE TO FIX FLAWS IN THE WAY OLDER BROSWERS RENDER WEBSITE
@import "newerbrowser.css";//IMPORT TO OVERRIDE THEM

CSS Selectors

Thursday, February 25th, 2010

selector {property: value} – the selector is one of three things, the id of a single element that this style effects indicated by a #, the class used on many elements indicated by a . or the element itself, effecting all of the element named, the type selector.

Examples:

  • ID – #container {float:left;} causes the element with the id container to float left
  • Class – .red { color:red;} causes all elements in the red class to have red text
  • Type – body {font-family: Verdana, Tahoma, Arial;} causes all text within the body element to use the Verdana font face or Tahoma if Verdana is unavailable or Arial if Verdana and Tahoma are unavailable