Category: Web
While I was working on modifying SHJS (a JavaScript syntax highlighter), I came across a very frustrating (and initially extremely puzzling) IE bug. Well, it might not be a bug, but it's a very strange and illogical behaviour. In short: IE performs text normalization when setting innerHTML. Sebastian Redl explains it in The Internet Explorer innerHTML Quirk. Read the full text...
Posted 080924, in: English/Web/JavaScript
Tags: ie6, innerHTML
After exploring the possibility to add multiple background images to an element, I realized it was possible to use that technique to create boxes with rounded corners in a very clean, CSS-only way. In particular:
- No need to add any extra markup.
- No need to know the dimensions of the element. In fact the element can be resized freely, which makes it perfect for fluid layouts.
- Pure CSS solution.
The catch is: this technique relies on the use of generated content, so it doesn't work in IE6 or IE7. Which makes it pretty much useless for real projects, unless for some reason you can ignore IE. Read the full text...
Posted 080902, in: English/Web/CSS
Tags: generated content
Here's an interesting way to add multiple background images to an element using CSS2. Before anyone gets too excited, since this technique uses generated content it doesn't work with IE6 nor IE7. Maybe IE8 will support generated content, but who knows.
Still it's fun to try, and if you can ignore IE, then this might be useful sometimes. It works in Firefox 2/3 and Opera 9 under Windows XP, at least.
In this article I'll first guide you through a basic example, and then we'll create a nicer box. Read the full text...
Posted 080831, in: English/Web/CSS
Tags: generated content
Styling table captions with CSS is not always an easy task. The specific issue I'll be dealing with in this article is the fact that the width of the caption doesn't naturally fit the width of the table. First I'll introduce the problem and then present a cross browser solution. Read the full text...
Posted 080823, in: English/Web/CSS
Tags: Opera, styling tables
I was having a few problems with the syntax highlighter I was using for the code blocks in this blog, so I decided to look for an alternative. There are a few out there, but my choice went to SHJS. I liked it straight away, although I wanted a couple of features that are not there. So I got my hands dirty and wrote some code to implement them. Here's a description of what I've done, in case someone has similar needs. Read the full text...
Posted 080817, in: English/Web/JavaScript
Tags: javascript syntax highlighting, SHJS
[Edit: 080828] This hack targets only Opera 9 and below, but fails in (at least) v9.52. You should not use it unless you're specifically targeting Opera 9 and below.
If you ever need to apply certain styles to Opera only, there is an easy way that I found in Jeff Starr's post, 'CSS Hack Dumpster'. All you need to do is prefix your selector with html:first-child.
For example, let's see how you would add a left margin of 10px to all paragraphs in all browsers except Opera:
p {
margin-left: 10px;
}
html:first-child p {
margin-left: 0;
}
This hacks validates and seems reasonably safe. As always, it's a risk to use hacks in your CSS (what would happen if, say, Internet Explorer 12 matched html:first-child? Any websites using this hack wouldn't work correctly in IE12). I'm still going to use it though, it seems quite safe to me.
Posted 080815, in: English/Web/CSS
Tags: css hacks, Opera
One of the problems with existing methods for CSS image replacement is that when a user is using a browser with CSS on but images off, the replaced element is not visible at all. There is a solution to that, but it implies using this sort of HTML:
<h1><span></span>Some text</h1>, which I find rather ugly.
Lately I've been playing around with generated content trying to find a solution that solves the above described problem, without the use of any extra markup. Obviously this won't work in IE6, not even 7, but apparently IE8 will support generated content, so why not give it a go? Read the full text...
Posted 080812, in: English/Web/CSS
Tags: css techniques, generated content, image replacement
DynamicToolbar is a plugin for FCKEditor that allows you to create custom toolbars on-the-fly, without the need to use configuration files. This won't be necessary once FCKEditor reaches v3.0, but for the moment, here's a quick and easy solution. Read the full text...
Posted 080406, in: English/Web/FCKEditor
Tags: programming
If you want to redirect all non-www requests to your site to the www version, all you need to do is add the following code to your .htaccess file:
RewriteEngine On
RewriteCond %{HTTP_HOST} !^www\.
RewriteRule ^(.*)$ http://www.%{HTTP_HOST}/$1 [R=301,L]
This will redirect any requests to http://my-domain.com to http://www.my-domain.com. There are several benefits from doing that: Read the full text...
Posted 080227, in: English/Web/.htaccess
Tags: mod_rewrite, seo
Since in this blog I'll be writing about JavaScript, XHTML, CSS and other languages, I was wondering which would be the best way to display code fragments in a web page. Obviously each fragment will go inside a CODE element, but there's other things I'd like to implement:
- When the page is displayed without CSS, I'd like the code fragment to have a decent formatting.
- I'd like to add a sort of caption to each code block, to add things like "add this to your .css file" (see the code fragments below as an example).
And of course, I'd like to do it with the cleanest possible XHTML. Let's go! Read the full text...
Posted 080219, in: English/Web/JavaScript
Tags: programming
