Category: Web
[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
This is a bug fix release that solves the problems when there were empty instances of the elements used as containers for the addFirstChild method. Head over to the FixIE page to donwload the new version.
Posted 080218, in: English, Web, JavaScript
Tags: ie6, programming
FixIE is a little script that I've created to overcome a few of the CSS selector limitations in IE6. What it does is adding a few helper classes to certain elements/states, which then can be used in your .css files to reference those elements/states. In particular:
- It adds the"first-child" class to the first child of certain containers (by default UL and OL).
- It adds/removes the class "hover" to LI elements inside certain containers (by default an element with id="nav"), to provide support for CSS drop-down menus.
- It adds a class to all INPUT elements, matching their type. That is, all inputs of type "text" will also have the class "text", and so on.
It is possible to configure the first two features, choosing any number of containers. For example, you could add first-child functionality to all divs, or apply the hover functionality to several navigation menus (see the JS source). Read the full text...
Posted 080215, in: English, Web, JavaScript
Tags: ie6, programming
