Tag: CSS
The @font-face snowball
Håkon Wium Lie’s article, CSS @ Ten: The Next Big Thing on A List Apart in August 2007 may have got the (snow)ball rolling, but it seems that it was the announcement of Typekit on May 27 this year which has prompted an avalanche of interest in web fonts. Or maybe I’ve just woken up to the issue since then and been taking more notice. But I seem to be adding a lot of font and type-related bookmarks lately and thought it would be worth sharing some of them.
Removing unwanted fields from TinyMCE’s image and link popup windows
If you use TinyMCE in your Content Management System (CMS) projects, you no doubt also give clients the ability to add images and links to their content with TinyMCE’s Link and Image buttons. But by default, these popup windows come with a variety of fields into which unsuspecting clients can input values which will translate into unwanted code when delivered to the page.
More on Removing unwanted fields from TinyMCE’s image and link popup windows
Animated navigation items using jQuery
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.
What it’s like to run a web design gallery
Having compiled the list, done the numbers and dealt with the facts, I thought for the follow-up article to the The Ultimate Web Design Gallery Resource that I’d get some opinions from not only some of the people who run the web design galleries in the list about what it’s like to run one of these sites, but also some search engine optimisation (SEO) professionals about the perceived value of having your site included on one (or many).
The Ultimate Web Design Gallery Resource
< ?php
$docroot = $_SERVER[‘DOCUMENT_ROOT’];
include($docroot.’/shed/galleries/conn.php’);
include($docroot.’/shed/galleries/countries.php’);
include($docroot.’/shed/galleries/queries.php’);
?>
In case you haven’t noticed lately, there a LOT of web design galleries out there. I’d always kept bookmarks for the galleries I’d come across but recently while looking at one I noticed links to a lot of galleries that I hadn’t heard of before. So I thought it might be worthwhile to investigate just how many there were out there. I came across a few blog posts with links to galleries but rather than just adding to the list and then publishing it, I thought I’d do a bit more investigation and analysis.
Rescinding the reset
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.
Legends of Style Revised
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.
HTML/CSS newbie FAQs
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. 
Wasting the inheritance
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.
HTML image no preload rollovers
Recognise this?
<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];}
}
//-->
</d></script>
<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>
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.
