Code Couch » Browsers http://www.codecouch.com The ramblings of two code monkeys Thu, 19 Nov 2009 15:47:59 +0000 http://wordpress.org/?v=2.8.4 en hourly 1 Spell checking in Firefox http://www.codecouch.com/2008/12/spell-checking-in-firefox/ http://www.codecouch.com/2008/12/spell-checking-in-firefox/#comments Wed, 10 Dec 2008 21:07:05 +0000 Dan http://www.codecouch.com/?p=233 A handy tip I came across the other day was how to spell-check an entire web page using Firefox – not just textarea elements.

You basically put the page into design mode – so the content becomes editable. Enter this in the URL bar:

javascript:void(document.designMode='on');

You can also add spell checking to fields which do not have it by default (e.g. single-line input elements) by adding a “spellcheck” attribute set to “true”, e.g.:

<input type="text" size="50" spellcheck="true">

See https://developer.mozilla.org/en/Controlling_spell_checking_in_HTML_forms for more information.

]]> http://www.codecouch.com/2008/12/spell-checking-in-firefox/feed/ 0 Problems tabbing through checkboxes and radios in MacOSX Safari http://www.codecouch.com/2008/10/problems-tabbing-through-checkboxes-and-radios-in-macosx-safari/ http://www.codecouch.com/2008/10/problems-tabbing-through-checkboxes-and-radios-in-macosx-safari/#comments Tue, 21 Oct 2008 12:45:34 +0000 Jeff http://www.codecouch.com/?p=199 Many people find it easier to use the tab key to cycle through the various fields of a form in a web page. This is a well supported and adopted behaviour – yet if you are using a browser in MacOSX, you will find that you cannot use the tab key to access checkboxes or radio buttons… instead you have to use the mouse/trackpad.

The solution is rather trivial – and also very simple to achieve.

Open the System Preferences application and choose Keyboard & Mouse then change the Keyboard Shortcuts option to “All controls” (this can also be toggled using Control-Function-F7 if you are so inclined).

You can now use the tab key to cycle through checkboxes (use the spacebar to select a checkbox when you have cycled to it) and radio buttons (you can use up/down or left/right arrow keys to toggle a radio button when the group is in focus).

A similar option is available in Safari (MacOSX as well as Windows) in the Preferences menu option (within the Edit menu). Select the Advanced tab and select “Press Tab to highlight each item on a webpage”. When enabled, this option allows you to cycle through all elements that can receive focus using option+tab (this includes standard links on the page as well).

I’d like to credit this “discovery” to Brad Jasper and Dylan Ryan at MacTips: Tips & Tricks – but the post is no longer available. Thanks for the heads-up guys!

]]> http://www.codecouch.com/2008/10/problems-tabbing-through-checkboxes-and-radios-in-macosx-safari/feed/ 0 Problems with anchors and alpha transparency filters in IE6 http://www.codecouch.com/2008/10/problems-with-anchors-and-alpha-transparency-filters-in-ie6/ http://www.codecouch.com/2008/10/problems-with-anchors-and-alpha-transparency-filters-in-ie6/#comments Tue, 21 Oct 2008 06:29:40 +0000 Jeff http://www.codecouch.com/?p=195 You can use alpha transparent PNGs in IE6 as described in How do I display alpha transparent PNGs across all browsers. There is a problem with implementing this solution – in Internet Explorer 6 links are no longer clickable when they are contained within an element with an alpha transparency filter applied.

The problem

Consider the following CSS and HTML code snippets that set up the problem with a link contained within a div that has an alpha transparency filter applied to it:

<style type="text/css">
.opaque { background: url(images/alphaTransparent.png) transparent no-repeat left top; }
</style>
<!--[if IE 6]>
<style type="text/css">
.opaque {
	background-image: none;
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingMethod=crop,src=images/alphaTransparent.png);
}
</style>
<![endif]-->
...
<div id="parent" class="opaque">
    <span id="child">Lorem <a href="http://www.codecouch.com">ipsum</a> dolor.</span>
</div>
...

The parent element has a class opaque applied to it which puts an image on the background of the element. In Internet Explorer 6 only, the background image is removed and the proprietary filter property is used. The link inside the child span is no longer clickable in Internet Explorer 6.

The solution

Make sure the parent element (the element with the filter applied to it) doesn’t have the position property set on it, and the child element (the element with the link in it) has to have relative position.

The following addition to the above code will make the link clickable:

<!--[if IE 6]>
<style type="text/css">
#child { position: relative; }
</style>
<![endif]-->

Since it only has to apply for Internet Explorer 6, the “fix” can be enclosed within the conditional comment that targets just that browser. This doesn’t require any javascript to work (unlike other solutions that have been posted) and degrades properly.

]]> http://www.codecouch.com/2008/10/problems-with-anchors-and-alpha-transparency-filters-in-ie6/feed/ 0 Fixing a disappearing caret in Firefox http://www.codecouch.com/2008/10/fixing-a-disappearing-caret-in-firefox/ http://www.codecouch.com/2008/10/fixing-a-disappearing-caret-in-firefox/#comments Sun, 19 Oct 2008 12:45:53 +0000 Dan http://www.codecouch.com/?p=178 There are many issues with Firefox hiding the caret (cursor) in text fields which have focus. There are various fixes, depending on the specifics of your issue, which mostly involve adding a style of “overflow:auto” to the input or container in question.

There is one case that doesn’t appear to have a fix, other than upgrading to Firefox 3: The cursor (caret) in a text input turns invisible when it is over a fixed element. I’ve known about this problem for a while, and have tried many solutions that fixed similar issues, but they never seemed to work for this specific one.

I’ve found a solution that works, but it has 2 drawbacks:

  1. It requires JavaScript to work
  2. It causes rendering errors on the fixed element when scrolling (almost as if the fixed element is scrolling as well)

Using the test harness below, you can see the problem and the fix. I’ve included my test background image after the code, to make the rendering problem very obvious.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">
<head profile="http://gmpg.org/xfn/11">
	<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
	<meta http-equiv="content-language" content="en" />
	<title>Disappearing caret bug - workaround</title>
 
	<style type="text/css">
		#fixedDiv {
			width: 100%;
			height: 100%;
			top: 0px;
			left: 0px;
			background: url(caretBugBg.gif);
			position: fixed;
		}
 
		#contentDiv {
			position: relative;
		}
	</style>
 
	<script type="text/javascript">
		function fixCaretBug() {
			document.getElementById('fixedDiv').style.zIndex = -1;
			setTimeout(fixCaretBugPartTwo, 0);
		}
 
		function fixCaretBugPartTwo() {
			document.getElementById('fixedDiv').style.zIndex = 0;
		}
	</script>
</head>
 
<body>
	<div id="fixedDiv"></div>
 
	<div id="contentDiv">
		<form>
			<input type="text" size="50" value="You cannot see the caret in this text input field..." />
			<br />
			<input type="button" value="Click me to fix that!" onclick="fixCaretBug();" />
		</form>
 
		<p>This text...</p>
		<br /><br /><br /><br />
 
		<p>is used...</p>
		<br /><br /><br /><br />
 
		<p>to produce a vertical scrollbar.</p>
		<br /><br /><br /><br />
 
		<p>If you cannot see a vertical scrollbar,</p>
		<br /><br /><br /><br />
 
		<p>reduce the size of your browser window.</p>
		<br /><br /><br /><br />
	</div>
 
</body>
</html>

There is a small flicker when the fix is enabled, although this could potentially be fixed by hooking into the DOMContentLoaded event and running the fix before the background image is loaded.

A grey rectangle with a black cross on top of it
My test background image
]]> http://www.codecouch.com/2008/10/fixing-a-disappearing-caret-in-firefox/feed/ 0 How do I display alpha transparent PNGs across all browsers? http://www.codecouch.com/2007/05/how-do-i-display-alpha-transparent-pngs-across-all-browsers/ http://www.codecouch.com/2007/05/how-do-i-display-alpha-transparent-pngs-across-all-browsers/#comments Sat, 05 May 2007 09:40:05 +0000 Jeff http://www.codecouch.com/?p=104 Many web developers have shunned the PNG image format in the past. For some this has been because of a perceived lack of support for alpha transparency (described formally as alpha compositing) in Internet Explorer. Here are some directions on how you can use alpha transparency successfully across all browsers – and specifically IE 6 for Windows.

The examples below rely on the following CSS code (described below):

<style type="text/css">
  #demo1 {
    width: 250px;
    height: 100px;
    background: url(images/logo.png) transparent 0 0 no-repeat;
  }
</style>
<!––[if lt IE 7]>
<style type="text/css">
  #demo1 {
    background-image: none;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader
        (enabled=true,sizingMethod=scale,src=/images/logo.png);
  }
</style>
<![endif]––>

The first block of CSS sets a background image on an element with the id “demo1″ (typically a div, span or img) for all browsers. This works fine for everything else, but doesn’t work with IE prior to version 7.

The second block targets just these “broken” browsers through use of a conditional comment. This second block uses the filter property to set up a proper alpha transparent version of the png. Read more about this here at the MSDN site.

In the following example the CSS above would show the logo.png with alpha transparency as the background to a div:

<div id="demo1"></div>

This next example shows that you can display a png with alpha transparency by targetting a transparent image:

<img src="transparent.gif" id="demo1" alt=""/>

There are plenty of variations of this technique. All the examples above are considered “standards friendly”. This final example shows the same CSS simplified (but not passing validation):

<style type="text/css">
  #demo1 {
    width: 250px;
    height: 100px;
    background: url(images/logo.png) transparent 0 0 no-repeat;
    _background-image: none;
    _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader
        (enabled=true,sizingMethod=scale,src=/images/logo.png);
  }
</style>

If you are putting the CSS above into an external stylesheet, then be aware that the path to the logo.png when used as the background image is relative to the CSS file, but the path to logo.png when used in the filter is relative to the enclosing HTML file. This can cause some confusion.

On a related note… you should always ensure your alpha transparent PNGs are 32-bit to ensure that they always display the same colour across all browsers (specifically Firefox and IE displayed a 24-bit alpha transparent PNG differently using the technique described here – changing it to 32-bit confirmed this was the case).

]]> http://www.codecouch.com/2007/05/how-do-i-display-alpha-transparent-pngs-across-all-browsers/feed/ 0 How to target specific IE browsers using just HTML? http://www.codecouch.com/2007/04/how-to-target-specific-ie-browsers-using-just-html/ http://www.codecouch.com/2007/04/how-to-target-specific-ie-browsers-using-just-html/#comments Wed, 18 Apr 2007 10:08:01 +0000 Jeff http://www.codecouch.com/?p=110 Many people were introduced to conditional comments with the introduction of IE7 and their grass-roots call to action to stop using “CSS Hacks” to target specific IE browser versions.

Conditional comments are totally valid markup (for HTML as well as XHTML doctypes) that cause IE browsers running in Windows (the old Mac versions of IE ignored them completely) to parse the contents of the commented markup.

The following code shows how a conditional comment can be used to match “all versions of IE less than version 7″ and include an extra css file and an extra div in the content of the page:

<html>
<head>
  <link href="default.css" type="text/css" rel="stylesheet" />
<!––[if lt IE 7]>
  <link href="iexplore.css" type="text/css" rel="stylesheet" />
<![endif]––>
</head>
<body>
  <h1>Testing</h1>
<!––[if lt IE 7]>
  <div>I’m an old IE running in Windows</div>
<![endif]––>
</body>
</html>

Because of the start HTML comment code (<!--), everything until the close HTML comment code (-->) is treated as a comment for non matching IE Windows browsers.

The code that is actually rendered by the browser is different when viewed in IE Windows browsers older than IE7 and any other browser:

<html>
<head>
  <link href="default.css" type="text/css" rel="stylesheet" />
  <link href="iexplore.css" type="text/css" rel="stylesheet" />
</head>
<body>
  <h1>Testing</h1>
  <div>I'm an old IE running in Windows</div>
</body>
</html>

This is the code that is rendered in other browsers:

<html>
<head>
  <link href="default.css" type="text/css" rel="stylesheet" />
</head>
<body>
  <h1>Testing</h1>
</body>
</html>

You might choose to use this to set some variables on the page for javascript to use – without having to worry about user agent detection issues and spoofing browsers (remember that this will not work for the old IE Mac browsers – only Windows):

<script type="text/javascript">
  var isIE=isIE5=isIE6=isIE7=false;
</script>
<!––[if IE]>
  <script type="text/javascript">
    isIE=true;
  </script>
<![endif]––>
<!––[if IE 7]>
  <script type="text/javascript">
    isIE7=true;
  </script>
<![endif]––>
<!––[if IE 6]>
  <script type="text/javascript">
    isIE6=true;
  </script>
<![endif]––>
<!––[if IE 5]>
  <script type="text/javascript">
    isIE5=true;
  </script>
<![endif]––>

Be sure to check out the difference between down-level hidden (which is what I have used all the examples in this FAQ) and down-level revealed at the MSDN conditional comments page.

]]> http://www.codecouch.com/2007/04/how-to-target-specific-ie-browsers-using-just-html/feed/ 0 Microsoft finally retires IE 5 for the Mac http://www.codecouch.com/2005/12/microsoft-finally-retires-ie-5-for-the-mac/ http://www.codecouch.com/2005/12/microsoft-finally-retires-ie-5-for-the-mac/#comments Thu, 15 Dec 2005 11:03:31 +0000 Jeff http://www.codecouch.com/?p=122 On December 14th 2005, Microsoft quietly published an update onto their web site. They announced they are finally ending all support for Macintosh Internet Explorer as of 31st December 2005 and will not be providing any further security or performance updates. Furthermore, the browser will not be available for download from January 31st, 2006. They then go on to actively promote users adopt Apple Safari as a “more recent browsing technology”.

This isn’t really completely new – it has been in Microsoft’s Lifecycle Policy document since at least June 2003 (as seen in this CNet news article from June 2003).

When it was first released in March 2000, version 5.x of IE for the Mac was much more standards compliant than it’s Windows counterpart – and even though Microsoft ended development over 2 and a half years ago, the browser still performed better at rendering CSS in a consistent fashion than more modern Windows Internet Explorer builds. That’s not to say the Macintosh version wasn’t ready for retirement… and without anyone remaining to develop it… it’s loyal users have quietly migrated away.

We now have Apple’s flagship Safari as well as the latest Firefox, and Opera browsers available for MacOSX as well as a dedicated following of less well-known browsers (including iCab and Camino) that remain in development.

I don’t think the loss of IE is going to be a problem for Mac users and web developers going forward – it will be good to see it finally drop off the web logs, though.

]]> http://www.codecouch.com/2005/12/microsoft-finally-retires-ie-5-for-the-mac/feed/ 0