5 April 2006, by Karl Bunyan
Whenever there's a site that makes you wonder whether Jesus died in vain, the odds are it was created by Microsoft's (Af) FrontPage. 
This article is quite old but still interesting enough, and quite well written:
Whenever there’s a site that makes you wonder whether Jesus died in vain, the odds are it was created by Microsoft’s (Af) FrontPage.
The biggest web design mistakes in 2004
April 5, 2006 at 11:11 am
Filed in: Front-end, CSS
No comments
7 September 2005, by Karl Bunyan
Internet Explorer has suppored opacity for a long time but it's also
possible to change the opacity of a layer in Safari, and both newer and
older versions of Mozilla (including Firefox).
Internet Explorer has suppored opacity for a long time but it’s also
possible to change the opacity of a layer in Safari, and both newer and
older versions of Mozilla (including Firefox).
The code for setting the opacity of a layer to 50% (in JavaScript) is:
- For IE/Win: layer.style.filter = “alpha(opacity:50)”;
- For Safari (pre version 1.2), Konqueror: layer.style.KHTMLOpacity = .5;
- For older versions of Mozilla and Firefox: layer.style.MozOpacity = .5;
- For Safari 1.2, newer Firefox and Mozilla using CSS3: layer.style.opacity = .5;
The main difference now between IE and the other browsers is that in IE
opacity is specified as 0 to 100 whereas in Firefox and Safari it is a
decimal from 0 to 1.
September 7, 2005 at 11:02 am
Filed in: Front-end, CSS, Programming
No comments
17 August 2005, by Karl Bunyan
Solutions to the problem of PNG alpha transparency in IE6 have been around for a while... This solution uses script to write in the correct
html, or to pass variables to a script and set a property of an object.
Solutions to the problem of PNG alpha transparency in IE6 have been around for a while, as exemplified by this post on Cross-Browser Variable Opacity with PNG
on A List Apart. This solution uses script to write in the correct
html, or to pass variables to a script and set a property of an object.
Other solutions involve using server-side browser sniffing to serve
different CSS depending on the browser.
The crux of the problem is that IE6 doesn’t support the Alpha channel
of PNG files used as an image. The solution is to take advantage of one
of the proprietary DirectX filters built into Internet Explorer (for
Windows) and to use this instead of the background image. The important
point to note is that it is an ‘either/or’ solution - the PNG is used
as a background image for the other browsers, and as a filter source in
IE. Including both in IE means the PNG appears but with a nasty grey
where all the transparency should be.
I’ve come up with the JavaScript below as an instant fix solution which
means no rewriting of existing code is necessary. The CSS file will
contain the background image as supported by Firefox and the other (non
IE) modern browsers. (IE 7 is supposed to fix this, by the way.) The
JavaScript runs through the stylesheet and replaces all of the
background images with DirectX filters. The script should be placed in
the head of the page just after the stylesheet tags and works
automatically (although I haven’t yet tested it in older browsers).
You’ll need to remove some of the linebreaks which I’ve marked with a \n.
if(document.all&&document.styleSheets)
{
var stylesheets=document.styleSheets;
for(var i=0;i<stylesheets.length;i++)
{
var stylesheet=stylesheets[i];
var rules=stylesheet.rules;
for(var j=0;j<rules.length;j++){
var curRule=rules[j];
if(curRule.style.backgroundImage&&(curRule\n
.style.backgroundImage.indexOf('.png')>0)){
var imageName=curRule.style.backgroundImage;
imageName=imageName.substr(4,imageName.length-5);
curRule.style.backgroundImage='';
curRule.style.filter="progid:n
DXImageTransform.Microsoft.AlphaImageLoader(src='"+imageName+"')";
}
}
}
}
The way this works is to loop through each stylesheet, then
each rule in the stylesheet, looking for any one with the
backgroundImage property set. If it’s set it takes the image name from
it (stripping out the url('’) bit) and sets that as the source of a
DXImageTransform CSS filter. It then removes the backgroundImage
property.
August 17, 2005 at 10:57 am
Filed in: Front-end, CSS, Programming
No comments
7 December 2004, by Karl Bunyan
The problem arises from the rendering of form elements, specifically dropdowns, by the browser.
An interesting browser (mostly, it has to be said, Internet Explorer) rendering issue has produced an slightly odd workaround. The problem arises from the rendering of form elements, specifically dropdowns, by the browser. These are registered as windows components and hence are rendered somewhat outside of the other HTML elements. (This is not true in Firefox and other Mozilla based browsers which have their own rendering. It is painfully true of the old Netscape 4 where all form elements show through, but there’s no fix for that at all.) The same rendering issue is also true of frames, iframes and embedded objects (albeit Flash can now be specified with a transparent background).
This gives the situation where a layer (in a div tag) over the top of a dropdown box leaves half the select box visible through the layer. E.g.
The code for this follows:
<div style="position: relative;">
<form name="testForm" id="testForm">
<select name="test" id="test">
<option>Peekaboo!</option>
</select>
</form>
<div style="background: rgb(0, 102, 153); position: absolute;
left: 50px; top: 10px; width: 300px; height: 20px;
color: rgb(255, 255, 255); overflow: hidden;
clip: rect(auto, auto, auto, auto);">
I'd like to be on top
</div>
</div>
The solution I’ve found is that IFrames can be rendered on top of select tags. Not much use in itself, but ever since Internet Explorer 5.5 it’s been possible to give IFrames a Z-Index and render layers on top of them. So in the rendering scheme of things:
- select beats div
- iframe beats select
- div beats select
Hence the ‘Scissors, paper, stone’ reference of the title. The order does seem somewhat circular
To solve the IE rendering problem we can insert an iframe between the div
and the select with the same dimensions as the div tag over the top, as follows:
With the following HTML code
<div style="position: relative;">
<form name="testForm" id="testForm">
<select name="test" id="test">
<option>Peekaboo!</option>
</select>
</form>
<iframe style="position: absolute; left: 50px;
top: 10px; width: 300px; height: 20px; background: #069;
color: #fff; overflow: hidden; clip: auto;"></iframe>
<div style="position: absolute; left: 50px;
top: 10px; width: 300px; height: 20px; background: #069;
color: #fff; overflow: hidden; clip: auto;">
I'd like to be on top
</div>
</div>
December 7, 2004 at 10:45 am
Filed in: Front-end, CSS, Programming
No comments