Users of Opera might find that mousing down menus makes them disappear from underneath the cursor, making for a very frustrating experience.

From searching round the internet I understand the problem to be around the onmousevent on the li elements. So instead of using these events to show and hide menus we can just use CSS (as it should be) to show and hide the menus.

Methods to add the CSS include a custom user stylesheet (Right-click Edit Site Preferences Display tab), or the Stylish extension. The CSS to add is very simple:

#nav li:hover > ul {
  left:auto;
  z-index:999999;
}

Responsive web design is an excellent way to make a site work really well for a variety of different screen sizes without having to serve more than one design to users. Responsive web design does pose additional challenges however.

Some of the challenges for you, as the developer, are being able to implement, test and debug the design implementation. Fortunately built in to Firefox’s arsenal of developer tools is an interface for exactly that!

Lets take a website that uses a responsive design:

Here is the ‘mobile’ view:

So every thing is normal you can use the developer tools and Firebug or whatever. If you then need to make changes to the smaller version and use Firebug you would have to pop out Firebug (which may or may not be to your preference) then resize the main window. This works ok but Firebug currently isn’t great for working with responsive designs as it doesn’t show you all the rules that might apply based on the screen size and other conditions. This is one area that the Firefox built in tools beat Firebug. The styles editor shows you all rules that could apply and their conditions.

To activate Firefox’s responsive design view press Ctrl + Shift + M. You can open the inspector and stlyes by pressing Ctrl + Shift + I. You can also access the responsive design view by going to Tools Web Developer. With responsive design view enabled you can still use Firebug without a problem, unless you enable the built in element inspector then you kind of lose loads of screen space.

I can’t remember where I got these from (if you know please tell me so I can credit accordingly)

This is a collection of CSS classes that provide a nice easy way to add colour to buttons, messages etc.

I’m posting them up here purely for my own ease of access, if you get some usage out of it as well then great

/* color styles
---------------------------------------------- */

/* black */
.black {
    color: #d7d7d7;
    border: solid 1px #333;
    background: #333;
    background: -webkit-gradient(linear, left top, left bottom, from(#666), to(#000));
    background: -moz-linear-gradient(top,  #666,  #000);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#666666', endColorstr='#000000');
}
.black:hover {
    background: #000;
    background: -webkit-gradient(linear, left top, left bottom, from(#444), to(#000));
    background: -moz-linear-gradient(top,  #444,  #000);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#444444', endColorstr='#000000');
}
.black:active {
    color: #666;
    background: -webkit-gradient(linear, left top, left bottom, from(#000), to(#444));
    background: -moz-linear-gradient(top,  #000,  #444);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#666666');
}

/* gray */
.gray {
    color: #e9e9e9;
    border: solid 1px #555;
    background: #6e6e6e;
    background: -webkit-gradient(linear, left top, left bottom, from(#888), to(#575757));
    background: -moz-linear-gradient(top,  #888,  #575757);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#888888', endColorstr='#575757');
}
.gray:hover {
    background: #616161;
    background: -webkit-gradient(linear, left top, left bottom, from(#757575), to(#4b4b4b));
    background: -moz-linear-gradient(top,  #757575,  #4b4b4b);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#757575', endColorstr='#4b4b4b');
}
.gray:active {
    color: #afafaf;
    background: -webkit-gradient(linear, left top, left bottom, from(#575757), to(#888));
    background: -moz-linear-gradient(top,  #575757,  #888);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#575757', endColorstr='#888888');
}

/* white */
.white {
    color: #606060;
    border: solid 1px #b7b7b7;
    background: #fff;
    background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ededed));
    background: -moz-linear-gradient(top,  #fff,  #ededed);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed');
}
.white:hover {
    background: #ededed;
    background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#dcdcdc));
    background: -moz-linear-gradient(top,  #fff,  #dcdcdc);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#dcdcdc');
}
.white:active {
    color: #999;
    background: -webkit-gradient(linear, left top, left bottom, from(#ededed), to(#fff));
    background: -moz-linear-gradient(top,  #ededed,  #fff);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#ffffff');
}

/* orange */
.orange {
    color: #fef4e9;
    border: solid 1px #da7c0c;
    background: #f78d1d;
    background: -webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20));
    background: -moz-linear-gradient(top,  #faa51a,  #f47a20);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#f47a20');
}
.orange:hover {
    background: #f47c20;
    background: -webkit-gradient(linear, left top, left bottom, from(#f88e11), to(#f06015));
    background: -moz-linear-gradient(top,  #f88e11,  #f06015);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#f88e11', endColorstr='#f06015');
}
.orange:active {
    color: #fcd3a5;
    background: -webkit-gradient(linear, left top, left bottom, from(#f47a20), to(#faa51a));
    background: -moz-linear-gradient(top,  #f47a20,  #faa51a);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#f47a20', endColorstr='#faa51a');
}

/* red */
.red {
    color: #faddde;
    border: solid 1px #980c10;
    background: #d81b21;
    background: -webkit-gradient(linear, left top, left bottom, from(#ed1c24), to(#aa1317));
    background: -moz-linear-gradient(top,  #ed1c24,  #aa1317);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ed1c24', endColorstr='#aa1317');
}
.red:hover {
    background: #b61318;
    background: -webkit-gradient(linear, left top, left bottom, from(#c9151b), to(#a11115));
    background: -moz-linear-gradient(top,  #c9151b,  #a11115);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#c9151b', endColorstr='#a11115');
}
.red:active {
    color: #de898c;
    background: -webkit-gradient(linear, left top, left bottom, from(#aa1317), to(#ed1c24));
    background: -moz-linear-gradient(top,  #aa1317,  #ed1c24);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#aa1317', endColorstr='#ed1c24');
}

/* blue */
.blue {
    color: #d9eef7;
    border: solid 1px #0076a3;
    background: #0095cd;
    background: -webkit-gradient(linear, left top, left bottom, from(#00adee), to(#0078a5));
    background: -moz-linear-gradient(top,  #00adee,  #0078a5);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#00adee', endColorstr='#0078a5');
}
.blue:hover {
    background: #007ead;
    background: -webkit-gradient(linear, left top, left bottom, from(#0095cc), to(#00678e));
    background: -moz-linear-gradient(top,  #0095cc,  #00678e);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#0095cc', endColorstr='#00678e');
}
.blue:active {
    color: #80bed6;
    background: -webkit-gradient(linear, left top, left bottom, from(#0078a5), to(#00adee));
    background: -moz-linear-gradient(top,  #0078a5,  #00adee);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#0078a5', endColorstr='#00adee');
}

/* rosy */
.rosy {
    color: #fae7e9;
    border: solid 1px #b73948;
    background: #da5867;
    background: -webkit-gradient(linear, left top, left bottom, from(#f16c7c), to(#bf404f));
    background: -moz-linear-gradient(top,  #f16c7c,  #bf404f);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#f16c7c', endColorstr='#bf404f');
}
.rosy:hover {
    background: #ba4b58;
    background: -webkit-gradient(linear, left top, left bottom, from(#cf5d6a), to(#a53845));
    background: -moz-linear-gradient(top,  #cf5d6a,  #a53845);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#cf5d6a', endColorstr='#a53845');
}
.rosy:active {
    color: #dca4ab;
    background: -webkit-gradient(linear, left top, left bottom, from(#bf404f), to(#f16c7c));
    background: -moz-linear-gradient(top,  #bf404f,  #f16c7c);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#bf404f', endColorstr='#f16c7c');
}

/* green */
.green {
    color: #e8f0de;
    border: solid 1px #538312;
    background: #64991e;
    background: -webkit-gradient(linear, left top, left bottom, from(#7db72f), to(#4e7d0e));
    background: -moz-linear-gradient(top,  #7db72f,  #4e7d0e);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#7db72f', endColorstr='#4e7d0e');
}
.green:hover {
    background: #538018;
    background: -webkit-gradient(linear, left top, left bottom, from(#6b9d28), to(#436b0c));
    background: -moz-linear-gradient(top,  #6b9d28,  #436b0c);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#6b9d28', endColorstr='#436b0c');
}
.green:active {
    color: #a9c08c;
    background: -webkit-gradient(linear, left top, left bottom, from(#4e7d0e), to(#7db72f));
    background: -moz-linear-gradient(top,  #4e7d0e,  #7db72f);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#4e7d0e', endColorstr='#7db72f');
}

/* pink */
.pink {
    color: #feeef5;
    border: solid 1px #d2729e;
    background: #f895c2;
    background: -webkit-gradient(linear, left top, left bottom, from(#feb1d3), to(#f171ab));
    background: -moz-linear-gradient(top,  #feb1d3,  #f171ab);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#feb1d3', endColorstr='#f171ab');
}
.pink:hover {
    background: #d57ea5;
    background: -webkit-gradient(linear, left top, left bottom, from(#f4aacb), to(#e86ca4));
    background: -moz-linear-gradient(top,  #f4aacb,  #e86ca4);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#f4aacb', endColorstr='#e86ca4');
}
.pink:active {
    color: #f3c3d9;
    background: -webkit-gradient(linear, left top, left bottom, from(#f171ab), to(#feb1d3));
    background: -moz-linear-gradient(top,  #f171ab,  #feb1d3);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#f171ab', endColorstr='#feb1d3');
}

PrestaShop has a really nice structure for handling all the CSS that will appear in a site. It starts by splitting the CSS so that the CSS is split up per modules. There is a global CSS sheet but this should only be used for things that genuinely appear on all pages.

Extending the CSS of a module in PrestaShop is easy. All you need to do is create a CSS file that matches the naming convention of the module you are looking to extend.

For example if you wanted to change the CSS of the “Wishlist block” module (a.k.a. blockwishlist) in your theme, you would create the file themes/mytheme/css/modules/blockwishlist/blockwishlist.css. This file will then be included on every page that the CSS from the blockwishlist module appears on.

This system is good because it minimises the amount of CSS the browser has to load and also splits the concern of CSS into separate files making it much easier to manage. It also makes adding to a modules CSS with in a theme much easier.

One problem with this method of handling CSS is that by default a PrestaShop site may want the browser to download ten or more individual CSS files which is quite a overhead. Fortunately since PrestaShop 1.4 it has supported CCS merging (referred to as CCC in the admin) which causes the CSS for a page to be merged into a single file on the server to prevent the client having to download tens of CSS files.

If you are at all involved or exposed to the world of web design and web development then you have no doubt heard of the phrase “responsive” web design. If you browse the popular theme sites for themes for platforms like WordPress and Magento then you can see responsive themes becoming more popular.

So what does it mean and how does it work?

What does Responsive Web Design Mean?

Responsive designs change the layout and visible content on a page depending on the width, height and other factors of the device or window rendering the page. You can generally test out responsive designs by simply unmaximising a browser window and then resizing it down to smaller sizes such as 320 pixels wide. On a normal design you would be quite lucky if the site still rendered in a readable way at that width. More than likely you will only be able to see a fraction of the page and would have to sideways scroll to see the rest of it.

On a responsively designed site, the layout would change as the screen width gets smaller. It might hide certain elements such as side columns and may make things rearrange in a more vertical way to allow them to be displayed without the need for side scrolling.

In a nutshell, this is what responsive web design means.

How Does Responsive Web Design Work?

Responsive web design works by using a CSS3 technique called Media Queries.

CSS has had the concept of media specific style sheets for quite some time. Traditionally though this was limited to print and screen, allowing for example to remove background images from a page when printing and perhaps adjust font family and size for better printing results.

The media queries functionality extends this concept significantly, allowing custom style rules to be applied based upon a range of differnt media options. The most commonly used of these for responsive web design are width and height.

The full list of properties that can be utilised with media queries include:

width
height
device-width
device-height
orientation
aspect-ratio
device-aspect-ratio
color
color-index
monochrome
resolution
scan
grid

Get Your Web Site Working Responsively

If you want to upgrade your web site to use responsive design techniques to better support the wide range of internet devices in use today then get in touch with Edmonds Commerce today to discuss how we can help you.

Some Useful and Interesting Links

http://www.w3.org/TR/css3-mediaqueries/
http://johnpolacek.github.com/scrolldeck.js/decks/responsive/
http://reference.sitepoint.com/css/mediaqueries
http://mediaqueri.es/
http://mac-blog.org.ua/css-3-media-queries-cheat-sheet/

If you use the disqus plugin on your wordpress site, you may be surprised to learn that your content is hidden on mobile devices (specifically ipad/iphone).

The problem that occurs is that the content is covered by a nice white box that you can’t see through.

Thankfully there’s a nice quick fix. In your site’s css rules, simply add the following :-

#disqus_thread { clear: both !important; }

And mobile users can see your content again!

Okay, this is hacky but it really works, and saves a lot of time!

To copy the css selector of an element in chrome, you need your developer tools open popped-out of chrome, not docked but here is the trick :-

Inspect the element that you want, be sure it’s selected in developer tools, then press F12. This will open a second developer tools window inspecting the first developer tools.

Then, insert the following two lines of javascript magic, one at a time – the first pulls jQuery into the developer tools and the second runs a function to build the css path and output it into the console!

First jQuery :

var script = document.createElement('script');script.src = "https://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js";document.getElementsByTagName('head')[0].appendChild(script);

Then the path :

path=""; function addtopath(str) { if(typeof(str) != 'undefined') {path = str+' '+path} } jQuery('.crumbs span').each(function(){addtopath(jQuery(this).attr('title'))}); path;

You can try stringing them together into one command, but sometimes jQuery doesn’t seem to load fast enough.

If you are developing a Magento store and you would like a method you can call to completely clear everything out that might be cached or indexed etc then you will like this little snippet:

public function flushEverything() {
        Mage::app()->getCacheInstance()->flush();
        Mage::getModel('core/design_package')->cleanMergedJsCss();
        Mage::getModel('catalog/product_image')->clearCache();
        $indexer    = Mage::getSingleton('index/indexer');
        /* @var $indexer Mage_Index_Model_Indexer */
        foreach($indexer->getProcessesCollection() as $process){
              $process->reindexEverything();
        }  
    }

This flushes the cache storage, removes merged JS/CSS files, flushes the product image cache then loops through each index and reindexes.

Perhaps overkill but sometimes there’s nothing like the use of excessive force!