Entries tagged ‘css’

Animated navigation items using jQuery

By /

Dave Shea recently published an article on A List Apart (ALA), CSS Sprites2 – It's JavaScript Time', about how to use jQuery to create the effect of animated rollovers on navigation items.

The technique he outlines makes use of the same image replacement method as outlined in ALA's original Sprites article. The problem with this method however is that it uses a large negative text-indent to remove the default text from screen, and with images turned off in the browser, you don't see anything. This has accessibility implications not only from the perspective of those with disabilities, but also for those who deliberately turn images off, i.e. people on slower connections or those using handheld devices who are trying to limit the amount of information downloaded to their phone.

More on Animated navigation items using jQuery

Rescinding the reset

By /

For a while now I've been using some sort of 'reset' for my stylesheets. At first it was the global reset which involves zeroing out padding and margins on all elements by with the universal selector, e.g., * { margin: 0; padding: 0 }. Later I read about the problems this can cause for form elements and so have been using Eric Meyer's Reset CSS.

More on Rescinding the reset

Legends of Style Revised

By /

When I wrote the original article on how to achieve cross-browser consistency when styling form legends, I noted that there was a bug in the way Firefox handled legends which required an additional div to be wrapped around the fieldset with positioning and other styling applied to the div rather than the fieldset. The bug appears to still have not been resolved, but as Thierry Koblenz pointed out in the comments on the original article, there is a way to achieve the same effect across browsers that doesn't require the additional div.

More on Legends of Style Revised

HTML/CSS newbie FAQs

By /

After spending a while on web development forums, you start to see the same questions being asked regularly. So here I'm going to answer some of these common beginner questions and hopefully save me typing answers out repeatedly in the future because I can just refer the poster to here or copy it myself. ;)

More on HTML/CSS newbie FAQs

Wasting the inheritance

By /

No I'm not going to talk about Paris Hilton (although she may not have so much to waste anymore now her grandfather has decided to give $US2.3 billion to charity ;)), what I want to talk about today is something that I've seen cropping up quite a lot on my travels through sites and code (usually via requests for help on forums) and that is a lack of understanding about CSS inheritance.

More on Wasting the inheritance

HTML image no preload rollovers

By /

Recognise this? Chances are you do. Even if you don’t own a copy of Dreamweaver, it’s likely you would have come across the code it outputs for creating image rollovers in your travels looking at the code of other sites.

<script type="text/javascript">
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[ i])&&x.oSrc;i++) x.src=x.oSrc;
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[ i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[ i];}}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[ i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[ i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[ i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
<a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('example','','/images/example_company_on.png',1)">
<img src="/images/example_company_off.png" alt="Example company" name="example" width="326" height="167"></a>

More on HTML image no preload rollovers

When to use display: none

By /

If you're interested in website accessibility best practices, you might have come across warnings against using display: none to hide content that you don't want to appear on screen. The argument is that content hidden with display: none can't be accessed by people using screen readers, and the recommended solution is to position the content offscreen instead using a large negative position (let's call this the offset method). But this shouldn't be a hard and fast rule for all situations. There are some situations for which using display: none will be acceptable.

More on When to use display: none

New article on Search-This

By /

I've just written an article on a technique which can be used with column layouts which has been published on Search-This: Two Column Layout With A Twist.

I've been a subscriber to the site for a while (a lot of its contributors and readers also frequent Sitepoint) and a regular commenter, but this is my first published article. Search-This also publishes a range of articles dealing with the spectrum of web development topics, so it's worth checking out.

Tools for checking website accessibility

By /

Following on from my last post in which I mentioned screenreaders (or alternatives) that people might like to try for checking their own sites' accessibilty, and an earlier post in which I listed the extensions I use for web development with Firefox, I thought I'd also list the different tools I use for testing website accessibility.

More on Tools for checking website accessibility

Centering a dropdown menu

By /

Recently, I needed to create a centered version of the Suckerfish dropdown menu and realised that some significant modifications were going to be needed. This is because the method for getting the top level list items to sit in a row, on the same horizontal plane, is to use float: left. However, when you float elements, you can't centre them unless you give them a width and use auto left and right margins.

More on Centering a dropdown menu