The Css Bug » Html http://thecssbug.com Just another WordPress weblog Wed, 29 Jul 2009 15:52:02 +0000 http://wordpress.org/?v=2.9 en hourly 1 onChange Internet Explorer bug http://thecssbug.com/onchange-internet-explorer-bug http://thecssbug.com/onchange-internet-explorer-bug#comments Wed, 22 Jul 2009 21:08:32 +0000 admin http://thecssbug.com/?p=115 Ever tried to use the onChange event to catch a change of state in a radio button group? The following code works alright in Firefox, but not in Internet Explorer:


<input type="radio" name="options" id="option1" onChange="alert('option1')">
<input type="radio" name="options" id="option2" onChange="alert('option2')">

IE treats the onChange event in a different manner: it recognizes something changed just after you lose focus on that element. The solution for this problem is to use the onClick javascript event instead of onChange.


<input type="radio" name="options" id="option1" onClick="alert('option1')">
<input type="radio" name="options" id="option2" onClick="alert('option2')">
]]> http://thecssbug.com/onchange-internet-explorer-bug/feed 0 Google Wave responsible for IE 6 support drop http://thecssbug.com/google-wave-responsible-for-ie-6-support-drop http://thecssbug.com/google-wave-responsible-for-ie-6-support-drop#comments Wed, 22 Jul 2009 20:36:19 +0000 admin http://thecssbug.com/?p=113 As I’ve wrote earlier this week, Google is leading a silent battle against Internet Explorer 6, the 7 year-old browser that is still causing tons of problems to web developers. A first major step, was the announcement that YouTube is no longer supporting IE6, which was more of a statement then a strategic decision – since most of YouTube features will probably still work for time to come.

More likely the stake, must be the recently announced Google Wave, the most anticipated web application of the year which is packed with state-of-the-art HTML 5 technologies – some of them not fully supported even by the latest version of browsers (like drag-and-drop), and which Google is trying to sqeeze into the HTML 5 specifications. It is clear that  Google Wave is not likely to work with the age-old Internet Explorer 6, so Google is doing his best to determine users to upgrade to Chrome or some other latest generation browser.

]]> http://thecssbug.com/google-wave-responsible-for-ie-6-support-drop/feed 0 YouTube drops Support for IE6 http://thecssbug.com/youtube-drops-support-for-ie6 http://thecssbug.com/youtube-drops-support-for-ie6#comments Tue, 21 Jul 2009 09:56:05 +0000 admin http://thecssbug.com/?p=109 It looks like the end is finally ariving for our least favorite browser IE6 as SitePoint announces. It’s survived longer than any of us could have expected and it still has a larger market share than Chrome, Safari, and Opera combined. Whilst some smaller web sites have dropped support for the 8 year-old browser, none of the bigger companies dared cut off a fifth of their users. Until now.

YouTube, the Google-owned video sharing web site, is phasing out IE6 support. YouTube is one of the largest and most popular web sites on the net, so this action could have a massive impact on user numbers.

IE5.5 and IE6 visitors to YouTube are now confronted with a message and helpful IE8, Firefox and Chrome download links.

There is some evidence that IE usage has dropped within the past month, although the new releases of Firefox and Safari are partially responsible for that shift. However, the YouTube announcement could certainly persuade many private IE6 users to upgrade their browser.

]]> http://thecssbug.com/youtube-drops-support-for-ie6/feed 1 What’s new in Forefox 3.5 http://thecssbug.com/whats-new-in-forefox-35 http://thecssbug.com/whats-new-in-forefox-35#comments Mon, 13 Jul 2009 22:05:40 +0000 admin http://thecssbug.com/?p=107 Firefox 3.5 is a pretty substantial update to the popular open-source browser, and it’s just around the corner. See what features, fixes, and clever new tools are worth getting excited about in the next big release.

10. Undo closed window
9. Forget this site
8. Tab tearing
7. Keyword AwesomeBar filters
6. Smarter session restore
5. Private browsing mode
4. Color profiles that pop
3. TraceMonkey JavaScript engine
2. Geo-location
1. Video superpowers with HTML 5

from LifeHacker

]]> http://thecssbug.com/whats-new-in-forefox-35/feed 0 HTML 5 Today http://thecssbug.com/html-5-today http://thecssbug.com/html-5-today#comments Mon, 06 Jul 2009 20:24:09 +0000 admin http://thecssbug.com/?p=99 New Features for Web App Developers

With HTML 5’s emphasis on web application development, there’s plenty of new features for developers to use, some of which we can use today:

  • A 2D drawing API for scripting graphics using the new canvas element, which is supported in all the major browsers except for Internet Explorer.
  • registerProtocolHandler and registerContentHandler, which allow web applications to register for certain protocols or MIME types. Both are available in Firefox.
  • A manifest caching mechanism to support offline web applications, available in Firefox and Safari.
  • Video and audio APIs. The majority of the API works in Firefox, Opera (experimental build), and Safari—although Safari only uses Apple’s proprietary .mov format, rather than the open-source Ogg formats supported by Firefox and Opera.
  • window.postMessage: cross-document messaging implemented in all major browsers.
  • history.pushState to enable better back-button support in Ajax apps. (No implementations yet, but window.onhashchange is supported in IE8.)
  • A drag and drop API with a draggable attribute, supported in Firefox 3.5.
  • An editing API that hooks into the contenteditable attribute allowed on any element, already in all major browsers.
  • Client-side persistent storage using key/value pairs and support for embedded SQL databases: key/value pairs are in Firefox, Safari, and IE8, while SQL is supported only in Safari at this point.

For more read the full SitePoint article

]]> http://thecssbug.com/html-5-today/feed 0 Javascript lose focus http://thecssbug.com/javascript-lose-focus http://thecssbug.com/javascript-lose-focus#comments Fri, 03 Jul 2009 11:19:30 +0000 admin http://thecssbug.com/?p=97 When making fancy web 2.0 javascript form validations, sometimes you may want to validate a html textfield right after the data was entered. What you need is to cacth the ‘textfield lose focus’ event‘, that is when a user enters some data into the textfield and then either clicks outside the field or ‘tabs’ to the next field.

The JavaScript lose focus event is actually called onBlur, and is suppoerted by the following HTML tags:


<a>, <acronym>, <address>, <area>, <b>, <bdo>, <big>, <blockquote>,
<button>, <caption>, <cite>, <dd>, <del>, <dfn>, <div>, <dl>,
<dt>, <em>, <fieldset>, <form>, <frame>, <frameset>, <h1> to <h6>,
<hr>, <i>, <iframe>, <img>, <input>, <ins>, <kbd>, <label>,
<legend>, <li>, <object>, <ol>, <p>, <pre>, <q>, <samp>,
<select>, <small>, <span>, <strong>, <sub>, <sup>, <table>, <tbody>,
<td>, <textarea>, <tfoot>, <th>, <thead>, <tr>, <tt>, <ul>, <var>

and the following JavaScript objects:


button, checkbox, fileUpload, layer, frame, password, radio, reset, submit,
text, textarea, window

Usage example:


<html>
<head>
<script type="text/javascript">
function upperCase()
{
var x=document.getElementById("fname").value;
document.getElementById("fname").value=x.toUpperCase();
}
</script>
</head>
<body>

Enter your name:
<input type="text" id="fname" onblur="upperCase()">

</body>
</html>
]]> http://thecssbug.com/javascript-lose-focus/feed 0 10 Cool Things We’ll Be Able To Do Once IE6 Is Dead http://thecssbug.com/10-cool-things-we%e2%80%99ll-be-able-to-do-once-ie6-is-dead http://thecssbug.com/10-cool-things-we%e2%80%99ll-be-able-to-do-once-ie6-is-dead#comments Mon, 04 May 2009 21:24:10 +0000 admin http://thecssbug.com/?p=85 Are you praying for the day when we can stop supporting IE6? In this post, James gives us some things to look forward to for when that day finally comes!

[SitePoint Article]

]]> http://thecssbug.com/10-cool-things-we%e2%80%99ll-be-able-to-do-once-ie6-is-dead/feed 0 Flash on top of lightbox http://thecssbug.com/flash-on-top-of-lightbox http://thecssbug.com/flash-on-top-of-lightbox#comments Sat, 02 May 2009 00:16:38 +0000 admin http://thecssbug.com/?p=83 Many of us are using a lightbox library for nice looking photo galleries, either on a blog or some other kind of website. When using a flash menu, or banner, on the same page usualy the flash gets on top of the image in the lightbox, creating a nasty looking effect.

A Flash movie in a layer on a DHTML page containing several layers may display above all the layers, regardless of the stacking order (“z-index”) of those layers. By default, browsers place embedded plug-in content, such as a Flash movie or Java applet, on the topmost layer.

In orderto to allow layering of Flash content with DHTML layers use the WMODE parameter . The WMODE parameter can be ‘window’ (default), ‘opaque’, or ‘transparent’. Using a WMODE value of ‘opaque’ or ‘transparent’ will prevent a Flash movie from playing in the topmost layer and allow you to adjust the layering of the movie within other layers of the HTML document.

To edit an existing HTML page, add the WMODE parameters to the HTML code.

Add the following parameter to the OBJECT tag:

<param name="wmode" value="opaque">

Add the following parameter to the EMBED tag:


wmode="opaque"
]]> http://thecssbug.com/flash-on-top-of-lightbox/feed 0 Background image on table rows repeating on columns IE bug http://thecssbug.com/background-image-on-table-rows-repeating-on-columns-ie-bug http://thecssbug.com/background-image-on-table-rows-repeating-on-columns-ie-bug#comments Mon, 06 Apr 2009 13:55:49 +0000 admin http://thecssbug.com/?p=26 One of the oldest problems in webdesign is related to background images on table rows.

Problem: when you provide a background images (through HTML or CSS) on a table row:


<table>

<tr background="bg.gif">

<td>some stuff</td>

<td>more stuff</td>

<tr>

</table>

On Firefox everything would go out as planned. However in older browsers like IE 6, each of the 2 table columns will inherit the background image and you will get a nasty effect.

Solution: You will need to use background-image:none on every table cell while the row needs a position:relative.


<table>

<tr style="background-image: url(bg.gif);  position: relative;">

<td style="background-image:none;">some stuff </td>

<td style="background-image:none;"> more stuff </td>

</tr>

</table>
]]> http://thecssbug.com/background-image-on-table-rows-repeating-on-columns-ie-bug/feed 0 Change bullet on mouseover (CSS) http://thecssbug.com/change-bullet-on-mouseover-css http://thecssbug.com/change-bullet-on-mouseover-css#comments Fri, 03 Apr 2009 11:47:46 +0000 admin http://thecssbug.com/?p=20 The following short tutorial will show you how to create a simple menu like the one in the image bellow.

menu_icons

In order to simulate de the bullet we use the css property “background”.
For positioning the bullet on the right  side, we use “background-position” and we specify the left offset in pixels.

We also need to specify the exact width in pixels and the property “display: block;”

<style type=”text/css”>

a.link
{

text-align:left;
display:block;
width: 140px;
background-image: url(’Bullet.gif’);
background-repeat:no-repeat;
background-attachment: scroll;
background-position: 124px 0px;
text-decoration: none;

}

a.link:hover
{

text-align:left;
display:block;
width: 140px;
background-image: url(’BulletOver.gif’);
background-repeat:no-repeat;
background-attachment: scroll;
background-position: 124px 0px;

}

</style>

<a href=”http://www.thecssbug.com/” class=”link”>
Mouseover menu
</a>
]]> http://thecssbug.com/change-bullet-on-mouseover-css/feed 0