Based on the normal thought and previous post, if i set the absolute – positioned image z-index to -1 and make the layer with the png gradiant set a position: relative then it will happen what it was supposed to happen, the gradiant will cover the image. But what if we have this. see the 2 attached examples

The left image is having this CSS:

While the right image is having the same but with z-index: 1. If we remove z-index from the image @ all, then it wont show because of the underlying layer (remove the property). But if you look closely, the image is something on WHITE background so even with absolute positioning the only thing i can think off that makes it look like it “Multiplied” like in Photoshop is browsers ability to calculate png transparency and fill-options.

Of maybe i’m just silly and i am missing something very important but so far, and i cant find enough time to test this in a controlled environment, but so far this stuff works and i am quite happy with this situation

Later Edit: I’m silly, it was a number of factors, Gradiant transparency still works but only that. So Basically what you read in the last post… damn and i got excited about this oh boy.

How many times it happend that you got a design to cut/slice from a designer only (or you yourself are a designer) only to find out that the background of the PSD is unequal on both sides, for example you have a curbed line in the middle, and on the left the repeating line is placed on top while on the right side it goes in the middle. Something like this:

Uneven repeating backgrounds ilustrated

Notice the marked areas, well i found a pretty awesome and easy to implement solution. You slice the marked images and you do the following. When you have your main page container, as it’s siblings you create 2 new divs, bgHelperLeft and bgHelperRight and you style them something like this

Since you used z-index: -1; then it means that it wont overlap any of your center images, absolute positioning means that it will stay there, and those widths means that they will meet BEHIND your center area so the user wont see the binning point, all creating a cursive flow from one side of the screen to the other side of the screen.

It works on all major browsers so this is a good trick to know and have in the book.

Questions in comments

After a week of work, I finished the modifications to the this theme, based on the Inanis Theme MOD. This theme is used on both my blogs and so far it works good. I havent encountered any issues so i decided to release the files. Compared to V1.3 which can be found here, this version has a shitload of improvements such as: (taken from readme)

• Version 2.0
  • a) New Image Preloader Via CSS 2.0
  • b) Since dropping support for IE6, trying to make the most with the newest technologies, added rounded borders for firefox/safari/chrome while keeping the old img based solution for IE7/8. People using those 3 aforementioned browsers will get a small boost in speed since also the divs that took care of the entire img fest are not loaded anymore.
  • c) Fixed a small issue with the wp_smilies class + added support for the default wordpress alignleft/aligncenter/alignright classes which didnt existed in the CSS previous versions
  • d) For IE6 added a small download link for newer browsers ( update you bastards )
  • e) Small optimization done to the start menu. When you click a new theme it activates the theme and automatically closes the menu behind.
  • f) Decided to drop all those extra clear divs and started to use the clearfix method, so lots of divs have been sliced and diced.
  • g) For the index, i modified the file so now the excerpts of the posts will show instead of the full post. The user can access the full post by clicking on the more link. Very easily.
  • h) More minor fixes for the css so everything fits.
• Version 1.4 Image Preloader + NoScript functionality.
  • a) Added an image preloader.
  • b) Small no script stuff.
  • c) fixed some footer issues with the links
• Version 1.31 Small Bugfix
  • a) Fixed a CSS issue with pingbacks

The files can be found inanisMod_v2.0 also please put the comment-template.php from this zip in the wp-includes folder since the xhtml structure is modified. comment-template

This post may be something very common and very known, however not everyone knows these, so this post may be useful to someone.

Here is an entire list for this

• lte = Lower Than Or Equal — lte IE6 means that will be loaded by IE6 and lower versions like IE5.5 / 5 and so on and so forth.
• lt = Lower Than — lt IE6 means that only lower versions of Internet Explorer 6 will read that part of the code such as IE5.5 / IE5 / IE4 and so on and so forth.
• gte = Greater Than Or Equal — gte IE6 means that browsers versions higher than 6 or equal to 6 will load that code, such as IE6 / IE7 / IE8 and so on and so forth.
• gt = Greater than — gt IE6 means that browsers versions higher than 6 will load the code such as IE7 / IE8 and so on and so forth.

The most useful part is the ability to load information that is not read by IE browsers at all, you could do something very nice, for example if you wish to drop IE6 support your stylesheet and JS includes will look like this:

The code above will only load the files for IE7+ and all other browsers. A live example of this situation is my own website, which does not support IE6.

Regards

I was trying to figure out a way to preload CSS images, by javascript or CSS. Unfortunately all the methods I found are not effective, since even tho the images are loaded, when the CSS part that contains an image which is not accessible when the site first opens, it still requires it and downloads it. I checked the net panel in firebug and it wasnt very pretty.

However these methods do work if you try to load images into an <img> tag:

CSS 2.1 Method

Using CSS 2.1 the method is pretty simple. It takes advantage of the :before and :after pseudo classes, and the content property. Although this property is pretty limited in what it can do, it does what we need.

We load the images and then we use display: none so they dont show up, but they are cached so when you load the image within a <img> tag it will show up instantly.

The benefits of this method is that it has a fairly wide acceptance among browser vendors, IE8/Firefox 2+/Google Chrome 1+/Safari 3+. For Previous IE versions you could load up a JS preload.

CSS 3.0 Method

Using the CSS 3.0 is even simpler, it takes advantage of the modifications done to the background property by being able to load multiple images with 1 element. Regardless of what the browser can support we can always create a dummy element and load all the images and then give it a display: none; we need to use in a <img> tag.

The huge downside of this method is that currently only Google Chrome 4 and Safari 4 support these improvements to the background property. Firefox is due to support them in Firefox 3.6 which at the time of this post is in beta 5 so it will be released in 2-3 weeks. IE will probably support CSS3 properties when IE9 will be available, which according to the IEBlog will happen in a year or so.

I am still looking for a way to preload CSS images into play, so when they are requested again, they will use their cached versions instead of being downloaded again.

This post is sort of a checklist of things to check before you upload you’re files on the webserver, and this will be updated with more things as time allows it.

One of the most annoying things you can get is that if you maintain a localhost version of your website, and your live website has the google analytics code in it, when you upload your local files overwriting the files on the webserver, those newer files you have on your localhost may not have the google analytics script set, so you will end up like me with 1 week of uncounted traffic. Stupid and Newbie mistake, meh note to self, never push updates after midnight because shit may happen.

List

• Overwriting files on the webserver that have the Google Analytics code with files that do not have that code, Missing Traffic for the Lose
• Another thing that can go awkward is that if you do some sort of PHP and you include/require files and you have a $path variable, when you upload the config on the server, make sure you change the $path from $path = http://localhost/ to $path = http://yourwebsite.com/.
• Based on wordpress stylesheet files, if you have a CSS folder and you copy some CSS from the styles.css into a new file in the CSS folder, then you need to update any pathing for images. Normally all CSS files are in a specific folder so this is a non-issue, but with WP you have to pay attention, else you spend 30 minutes trying to figure why it isnt working.

In this post I will elaborate and add more functionality to a previous post of mine found here here. Basically i have added more functionality to the page, such as left / right key navigation, number key functionality, enter/escape key functionality, and of course the entire suite of conditions needed so the code works properly.

I have tried to build each functionality as a module, which you can add and remove, however in order to have the search function work well with the tab functionality and switching, then some interdependence was needed.

the XHTML

The XHTML is not different from the last version, the only thing different is a few bits and pieces of additions, and more importantly a couple of new lists so we can have a tab functionality. Other than that, there were no major changes.

the CSS

As with the first version this CSS is very basic however you can style it as you wish, probably in the future i may add some nicer styles to the project but for now, since it’s just a tutorial thingy, i think what we have is quite enough.

the JS

The JS suffered major changes, (of course right, we’re building a JS application here). It is kinda hard to explain everything in the post, but all the lines (almost all the lines) are heavily commented within the JS file itself, so please refer to that file for exact instructions and explanations.

The files can also be found online Here and a zip file can be downloaded from here

In part 3 of the series i will try to enlarge the search possiblity to include more than 1 letter

I was working on a project and i was requested to do something ala Gmail shortcuts, aka you press a specific button and something happens, well, first off i looked on the web to see if there is any information, which of course it’s not at least from what i looked so i had to build it myself

First off we’ll start with a basic XHTML, containing an un-ordered list, styled a bit, the real secret is the JS itself, you can style the xhtml/css as you want, it doesnt really matter. To save space i’ll upload the complete final files at the end of this post, with instructions and comented css/xhtml/jquery

The XHTML

Okay what everything means is the p.tip is basically a tip, how to use the system, not important in the JS.

the div.helpBox is very important, because in JS, it will hold the letter the user typed, due to the JS used only 1 letter will be saved, the last one he typed.

the div.container ul holds the li elements that are the things we are interested in, and finally the li tags hold the names we wish to search through.

Please note that after you understand how this works, you can change the xhtml/css structure to anything that suits you, this is just a demo, to show a concept.

Regarding the JS it is commented extensively within the file so please read that. It is possible to make it work for how many letters you want, however the code gets exponentially bigger as conditions have to be added, i will make a post about how to get 2-3 letters to work together very very easily after we build in more functionality in this post, like left/right navigation, what happens if you have different things u want sorted, and of course a top navigation that can switch between the various lists you have stored

Please note that this system can be used for a very extensive part, i posted about what you can do with a li tag in This Post so you could read that also

Attached is a full functional demo, with the js file commented at every step of the way, so for js instructions please refer there

In the next post i will show you how you can have left/right arrow keys functions, and in part 3 a top navigation bar, if you have multiple lists, and updated and enhanced left/right arrow key functionality to work with the new lists (this actually took me a while to figure out) AND in finally part 4 the ability to sort via 2 and 3 letters, each part being build on the code that is here ((this i havent done yet, so it will take some trial and error to do so this post may not come as soon as the other 2 parts

Here is the attached file How To Do Quick Shortcuts ala Google Mail Part 1 and a demo can be viewed online HERE

I just found out something very very interesting when i was working on a project. Basically it required me to put a div inside a a tag and that div also had some links. I managed to do that however the code is not valid. Will post source code with examples and explanations tomorrow.

Okay so basically what I was trying to create was something like this (simplified for good reasons)

My version also had a hover JS element over the entire box, so when the user hovers over it, it gets highlighted. So far nothing went bad, everything fits together nicely

Attached is an image of said file

The Challenge came when my client asked to encompass the entire div into an a tag so he could use it for redirecting to something else. Unfortunately as we know, <a href="#"><div ></div></a> does not work, so i had to come up with a solution to this matter

The situation was quite easily done, since those boxes had to be floated, i could replace them with a <li> tag. However this was close but no cigar, since i still ended up with the old <li><a href="#"><div></div></a> situation. Then i thought about the span tag and since the span and div tags are both MEANINGLESS and Almost identical in behavior i could simply replace the div with the span and just make sure to put the display: block; property on the span so it will replicate the div. and the span tag works inside a <a> tag

So my code at the end looked something like this:

However then i had a problem, the encompassing a tag reduced my 2 inner a tags useless. Given this situation I had to create another div outside the encompassing a tag and absolute-position that div in the same place so it will look the same but behave totally different, now all links are working properly, and the user wont even notice the difference. The only thing not quite correct is that the code is not valid, but meh, sometime you have to cut some corners.

This is the almost the final draft with the code

the property is a { outline: 0px none;} however you need to have all the pseudo classes under this rule,  a:focus, a:hover, a:active, a:visited { outline: 0px none;}

Did you know that IE6(and only IE6, IE7+ doesnt have this issue) has a weird UL/OL bug ?

If not read on

Lets say you want to make a vertical list of items that are linkedable like this

In all browsers except IE6 the list will look OK, however IE6 has a peculiar thing, because you press ENTER and you put the list items each on a new row, somehow IE6 interprets that space as a white line, and you will end up with THIS

THE HORROR!!!!…

Well there are multiple ways to fix this issue, from involving Huge javascript codes to doing some very basic things, and the most basic method of it all is to write those links as follow:

The “wonders” of IE6 …

If you have questions, post them in the comments and i will answer as soon as possible

Well to be honest at first glance, both of them do the same thing. Make the element invisible to the user. However there is a very small subtle difference between them.

display: none -> This makes the element invisible AND removes it from pageflow. so if you have items below the item, they will be slided upwards to fill the space this element previous occupied

visibility: hidden -> This makes the element invisible HOWEVER it still retains it’s space in the pageflow of the page. so the items below wont move upwards. In other words you will have an empty hole where this element is.

Nice eh?

So lets start with the XHTML

XHTML

CSS

So lets explain a bit the code above

The first link, class home, will have a background image of the home icon as presented in the end product image. The span.intermediare class will be presented all over the middle lines, and this contains a background image contains the interlining elements, the intermediate links will have their class called link.intermediate. Before the last link in the element, the span will have it’s class changed from span.intermediare to span.lastSpan and then the last link will have it’s class set to a.lastLink.

This is pretty easy to put together and each group can be styled accordingly to create interesting combinations of background images or colors, also more elements can be added to create different underlines or borders.

No javacsript is needed, however this entire system must be powered by a CMS system, because the classes are dynamically generated based on the location of the user and how many “inside” the website structure they find themselves.

If you have questions please post a comment and i’ll get some answers here

As you well know Internet Explorer 6 and lower doesnt recognize position:fixed in CSS, in order to get around that issue we need to do this. Btw everything goes in the same css file, the * html star is a hack for IE6 so only it seems the code so other browsers arent affected.

Please note that this means that future absoltute positioned elements will probably break so a safer bet is either to use javascript or just plain use position fixed and suck it up, IE6 is going to die pretty soon anyways

Questions in Comments

This makes your footer stick at the bottom of the page, even if you have little content on the page. This is useful, but of course there are some jQuery alternatives which will be posted in a similar post later on. It’s a very simple, clean, CSS based only solution that works in 90%+ of the cases. Also this works in IE6.

The other solution is 10 times simpler but does not work in Internet Explorer 6. More details below…

First Method

XHTML

The wrapper div must enclose the page content. And the push div must be the last line in the content area

The CSS

The only limitations are that you need to know exactly the footer height and the footer must have over 80px; it doesnt work with less than that, i dont know why, but thats the way it is

The wrapper CSS for min-height, height and height again is because of a bug in IE6 important declaration, and since every other browser supports the proper important declaration, basically every browser will have it’s height set as auto, while IE6 will be bugged into making sure it has the min-height solution implemented correctly. I dont know the inner workings but after testing this seems to work

Another thing to keep in mind is that the div.push height’s must be a bit bigger so you have to tweak the values to suit your design

Also another thing, dont use margin top on your wrapper since it will break this, and if it still breaks afterwards, just add paddings on the div.content

This is the only clean solution to get the footer to stick at the bottom of the page, using CSS only, there are also some jQuery alternatives i’ll look into and post here in a few days.

Second Method

The second method takes advantage of the position: fixed; in CSS 2.1 however this method only works in IE7+, because IE6 doesnt understand position: fixed; native, however we have a small trick to do position: fixed; in IE6 found here. You can combine them if you wish.

For all the other browsers, add to the element you wish positioned fixed the CSS, and then hack for IE6 if you wish to support that crappy browser.

Questions in comments. Will answer as they come.

I was always wondering what jQuery can do to help me give more power to my CSS stylesheets so one day after some time spent on the web i discovered a very very simple solution that was so easy to install that i was baffled that i couldnt figure it out a lot sooner. So without further comments here is the rundown of the stuff.

the XHTML

It’s very straightforward very easy to implement

You may wonder why i didnt use the href tag instead, well if the user has javascript turned off, then it means that he will be redirected to the CSS file in question rather than just changing the file which is very very bad so thats why we are using the rel attribute.

The jQuery

What did we do here? Simple, everytime a user clicks one of the links in the nav id, the rel attribute we specified is given to the LINK element in the head section of the page. the link element is the tag which inserts external CSS files, so by changing that we CHANGE how the site looks.

Now since we did that and it works, users may be annoyed to do this everytime they enter your site, so it’s a good thing we have the cookie jquery plugin which sorts all our issues. so with some small tweaks to the jquery code we get something like this

Now everything is AOK, only that the user sheets a small shutter everytime they load the page, since javascript is loaded after the HTML and CSS is loaded. to prevent that we can put the if statement ABOVE the document ready function. This is not recommended most of the times but since we know exactly WHAT to manipulate we can do this on this occasion.

In case people didnt know this is the order you need to put link the scripts/CSS in order for this technique to work.

And that is all, nice nifty webpage that does the trick and helps you out enormously when you try to make larger font sizes and stuff like that, even for skinning purposes.

Questions in comments, will answer all of them.

This tutorial will illustrate how to create a variable width/height box with a background image and rounded corners via CSS.

The solution is very easy and the box created can be easily modified and shaped according to different widths and heights required.

First off: you need a PSD file or an image with the entire box.

Second you need to have a HTML file, a CSS file and the images folder.

Ok, so the html structure will look like this:

THE XHTML

The first line is the container of the box.

The second line is a helpful CSS class helper and it shows in the code what that div is doing.

The logic is: top bar, bottom bar, left bar, right bar, bottom-left corner, bottom-right corner, top-left corner , top-right corner. The .innerRoundBorder is another helpful CSS class, so you can chain your CSS for one thing, so you dont have to have large specificity. The fact is that this technique is based on the specificity of the CSS, as you will see in the following CSS file below.

The PSD will be sliced like this, the corners, and then a section of each of the 4 bars, the heights must be identical of the bars, for ex the top-left corner, the top-bar, the top-right corner all of them must be of equal height, and ex: the top-left corner, the left bar, bottom-left corner, for these the width must be identical.

The CSS:

To tell others who may work on the code after you, you can put a small comment at the top like this

This technique can be used both on large scale and on small scale, however it’s best not to exaggerate a lot as the number of divs gets exponentially larger.

The 2nd way to make rounded corners is by using the jQuery framework and the jQuery Corner Plug-in. The explanations on it’s website will be sufficient enough to get you started, but if you require more info post a comment and I’ll see what i can do.

Best Regards