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 mucking around facebook for a while i finally decided to take the plunge and create a facebook page. The menus there look a bit complicated and less user friendly that i imagined however after messing around for a bit i think i got the gist of it.

The facebook page can be found @ here really basic but hopefully it will show up in the results there.

In other news I may begin to write on here small and simple CSS tutorials and about the importance of good and easily managed CSS and XHTML code when building a website that is more then a broshure but an entire application.

Best Regards, AlexD

Today I just finished working on my personal portfolio website found at http://alexdweb.com which replaced the old one there who was over 1 and half years old. Lots of things changed in that time, lots of new things learned, lots of new and better ways to write code so it was due for a change.

I am really excited about this website since it utilizes many CSS 3.0 properties and is built in a very very interesting way. I never believed you could do something like this with CSS, even CSS 2.1. Standard 3 layout based on this very own WordPress Theme with some twists. Lots of behavioral javascript and I learned a little PHP also. If you are looking for this wordpress theme, you can look @ this post.

All in all, as i said i am highly excited about the look @ feel of the new website and compared to the old one, I have to say it’s ten times better, but you should decided for yourself. Drop a visit @ http://alexdweb.com and let me know what you think by dropping a comment here.

I did test the website extensively however if you break anything let me know by an email or comment. Also as are most of my sites these days, I have phased out support for IE6 because the browser is older than my sister so I cant spend 20hours debugging for IE6 , so please use a modern browser such as Firefox 3.6 / Internet Explorer 7+ (recommended is 8), Google Chrome 5 and the like.

Back to more tutorials this coming week.

Regards

This is another short and sweet posts, basically it involves using the Math. function to do some nifty tricks

Lets say that you want to get a random number between 1 and 10 and you dont know how. Well the answer is quite easy and it involves combining 2 Math. functions. Math.floor() and Math.random().

Math.random()

This function takes a random number between 0 and 1

Math.floor()

This function rounds a number down to it’s smaller number, for example. 4.4 would become 4, 4.6 would become 4 as well, -4.1 would become -5 as well as -4.6 would become -5 as well.

This issue only happens with menuMatic and with vertical set menus. Basically in all IE browsers the sub-nav-menu didnt show up correctly.

And another thing, when you have link tags inside li tags, you need to float the li tags in IE else you get a hidden spacer there (vertical lists only). and the menu looks very odd. This is old IE6 issue, seems like both IE7 and only IE8 fixed it. Fuck that shit.

When in doubt, float it then clear it. This triggers hasLayout behavior and stuff gets fixed by itself. With that issue done i had another issue when the menu looked out of place. In order to fix that you need to open the menuMatic source file and look for fixHasLayoutBug: false, and change it to true.

On the developers site it works with it set to false, i really have absolutely no ideea why it gets triggered in my projects (2 out of 2 projects) and not there and to be honest i really cant be arsed to look into it. The CSS on both sites regarding to the menu matic is quite identical. I would have switched to something based on jQuery but unfortunately there isnt anything like that currently on the market., or from what i could find. Going with the noConlict() thing really annoys the hell out of me

In sum if it looks borked in IE then a) float the links b) float the li tags and c) set fixhaslayoutbug: true, in the menuMatic.js file. And if you still have issues in IE8 because thats where I had the main issues, then you need to do the following. Look where your vertical navigation menu is placed and make a new CSS and load it only for IE8. in that css go to #subMenusContainer and at the top: property modify it so it looks just right. If needed you can also play with the .smOW class at the margin property in the same CSS below are a few images with the before and after

In my example I set the #subMenusContainer top: property to 222px and the .smOW margin-left to about 20ish px

IE8 Before

IE7 Before Has Layout

Basically this is a negation of the following, god damnit my head hurts

Oh well new day, new learned things. God Bless Amerika

This post is going to be short and sweet. Basically jQuery 1.4 launched a couple of days ago and i thought i’d move my blog from 1.3.2 to 1.4 and lo and behold JS Error.

I was going like WTF, and after trying to debug it for like 15mins i come to the following conclusion. From my own personal experience, in jQuery 1.3.2 when you wanted something to happen to an element you went like this. Since i use WordPress for as my blogging platform not everytime the .elementClass element was present.

The JQuery parsed the XHTML code and if it encountered the stuff.elementClass item, then the script would run, else it will just return Null and be on it’s way to the next thing which in our case is an alert().

Now in JQuery 1.4 something very odd happens, or well, at least it happened to me. Basically when i ran the same script but now with jQuery 1.4 it returned in the firebug js console $(el).doSomethingHere() is null and the entire chain blocked. Of course this is extremely bad because that condition was on line 5 of my blog. WHICH WAS NOT AWESOME.

Anyways in order to fix this sort of weird behavior pattern you first have to CHECK if the element exists on the current page, and then APPLY stuff to it. So our code transforms itself into something like this.

And in case you have more than 1 of the same element you can chain it using the .each() function and the code transform itself into this

Gotta love updating to a new version… jeez

This post is a very straightforward one, basically it involves using javascript to calculate the lowest or highest number from either an array or from some definite variables.

One of the very useful possibilities of this is calculating the height and width of more than 3 columns and equalizing everything to the highest.

To achieve this we can use the Math.max() property and the Math.min() property.

The Math.max() Property

This property compares all the numbers presented and extracts the highest one. It can either be used as a simple stand-alone property like this:

Or we can set up an array and use it a number array to feed numbers to it. Such an example would look like this, however i mention that i couldnt get this example to work. I learned Javascript by learning jQuery, not the other way around.

The Math.min() Property

This property does exactly the opposite of what Math.max() does, as in extracting the lowest number from a set array. The code is almost identical but for keeps sake here it is

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.

After working on the google shortcuts for a while, i decided to open up IE 8 and see if the application works or not. I was surprised and started to do the old alert("hax") thing every dozen lines. The problem is with the $(window).keypress(function(e){}). It seems that IE doesnt understand at all the $(window) property at all when it comes with keypress/keydown/keyup events.

After some research, this is a known issue from IE5 days, which is quite weird that jQuery didnt fix it in a way so it works with $(window)

However i did check the width/height properties and both values return different values.

jQuery

I did look over this issue over Google but I couldnt find any information about it. Really sad you know.

For the past 2 weeks or so i’ve been rewriting the Inanis Theme for wordpress, because i really liked the design and functionality offered but i hated the way it was coded. So i rewrote all the code. You can get the original Inanis Theme from here

Check the readme.txt file inside for what was changed. I used the theme for some time over this blog and i didnt ran into any issues with it, so i have decided to launch it for everyone

The ZIP file can be downloaded from Here . Also i modified the comments-template.php file, here is the file, you can copy it INSIDE the wp-includes folder on your blog.

Basically what you have currently on this blog, is what you get when you download both files. The only special annotation i should make is that this theme does not support Internet Explorer 6 or older. I really think that 9 year old browsers should be dead, so please plan accordingly.

If you encounter any issues please let me know. I plan on expanding this theme with new functionality from time to time and i will release new versions. Currently the version is v1.3 (the v1.0 to current versions were test versions and 1.3 is the last stable release version).

Best Regards

After scouring the web for like 1h in order to find this information, i did eventually find it, however it was in a couple of different posts on another blog. In order to keep stuff simple, let’s put everything together. Using the benefits of feedburner is a no-brainer, because you get a shitload of useful statistics. The only problem is that you will need to maintain 2 lists of feeds, your own internal feed + the official feedburner’s. And now depends on how many users you have subscribed.

A few notes first tho. First if you use your blog as a directory on your domain rather than a full directory, like http://example.com/blog/ instead of http://example.com/ then you will probably have 2 htaccess files. 1) for the main website and 2) for the blog itself. When you edit the htaccess, you must edit the BLOG htaccess which is usually found in your /blog/ folder if you use the blog-directory-thingy (if you dont, then your main-top-domain-level htaccess will be your blog’s.

Secondly you need to PUT THE CODE BEFORE the WordPress’s own rewrite rules (in case you are using permalinks, and if you dont use permalinks YOU SHOULD!

First off is you go to http://feedburner.com and make an account. Put your original feed there and make sure it displays properly.

Then Apply the code found below in the specific htaccess file on your server

.mod_rewrite htacess thingy

This is just a quick thing, mostly using the default settings, but you really should read the full explanations found at:

• PersishablePress.com – Laser Focused Feeds and Smarter Feed Management
• PerishablePress.com – Why Feedburner needs a feed-fix
• PerishablePress.com – Redirect WordPress Feeds to Feedburner via Htaccess redux

MS messed up again, as always, Windows vista task bar is superior to windows 7 taskbar, both in look and feel (as well as polishing) and as functionality.

My Crucial issue with Windows 7 taskbar, was that in previous versions you could put only your taskbar on a side of the screen, like quick launch on the left side of the screen, and on the bottom the start menu / opened programs / right side icons ( the ones with the clock ). Well this is impossible to do with Windows 7, and i was so mad that i nearly uninstalled the software and switched to vista again HOWEVER, i found a program that can simulate this crucial missing feature called rocketdock which set with the windows vista black theme, left side alignment, 28px icons, no zoom when you touch an icon (mac dock sux), and always on top + autohide and some separators for good measurement (since the icons are too close together and you get something very similar.

SHAME ON YOU MICROSOFT!

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

Did it happen that when you use an animation such as fadeIn()/fadeOut() on a LCD screen, that has windows cleratype on (this happens automatically in windows vista+ but can be set on and off in windows XP), on IE (all versions), the text is not antialised anymore. This is due to the filter attribute IE browsers use to make the cleartype/stuff.

The solution is relatively simple, like putting a function callback on the fade in()/fadeOut() such as:

JQuery Code

It’s not a perfect solution, and it may be a bit laggy and you can still SEE THE TEXT BEING CLEARTYPED, but at least it wont stay without cleartype and look like shit. Also this is the only way to do it until jQuery incorporates it’s own fix to counter IE‘s behavior.

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

Did you knew that Google Chrome does not understand keypress() on special keys like arrow keys/esc/enter/etc ?

Me neither

I was trying to get the following code to work and it didnt work in Google Chrome at all

The first function works, the second works in Firefox but not in Chrome. After much headbanging around the room i tried to replace keypress() with keydown() and surprise suprise, now it works. I really dont know what to say about this bug, works with any normal key but not with special keys. Do take notice of this bug so you dont waste 30+mins trying to figure out why this happens

Cheers

This is a post about the 3 properties in javascript, keypress, keyup and keydown. There are some small differences in the means to extract the data of the pressed key.

First off to explain the 3 properties:

• keypress – this is both a keyup and keydown, it triggers when the key is pressed
• keyup – this triggers when you lift your finger from a key
• keydown -> this triggers when you drop your finger on a key

And now the mind-bongling differences start to creep up. We have 2 properties that take the info stored charCode and keyCode

First off in a keypress event the key is stored in EITHER keyCode or charCode, but never both, . If the key pressed generates a character (e.g. ‘a’), charCode is set to the code of that character, respecting the letter case. (i.e. charCode takes into account whether the shift key is held down). Otherwise, the code of the pressed key is stored in keyCode. So basically means that if the key is a character is stored in the charCode property, else it’s stored in the keyCode property

To complicate the problems even further, charCode is never registered in keypress and keyup events, so keyCode is used there

So the solution is a system that checks for both options, .which property checks both keyCode and charCode but this doesnt always work with special keys (F1-F12/ESC/etc) so the solution used in a keypress event is

The above first checks for e.keyCode, if that is not used, then check for e.which which checks both keyCode and charCode properties. I dont know how it actually works, however through experimentation i have saw that .which doesnt always work, so i was forced to use the .keyCode property

Hopefully this can shed some light on this situation

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;}

Sometimes you may have a webpage and some pop-ups on it, they have position: fixed; and styled with JS to appear in the center of the page. (I am not talking about IE6 here, this doesnt work in IE6 at all). for some ex

Now this is just a template, you can do the javascript yourself since it’s not the purpose of the tutorial.

When you click on trigger the popup will show at the top of the page, while the functionality is good, this is kinda bad for SEO so our main concern is to make it at the bottom of the content. However if you put it there, it will appear after the content.

This is very annyoing so in order to fix this, put in the CSS after position: fixed, top: 0px;

Problem solved, took me 30minutes to solve this. Cheers

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?

While i was building a webpage for a client, i came across a very peculiar issue. It seems that webkit (safari/google chrome) have troubles understanding an absolutely positioned floated element

This is the HTML for the file in question.

The CSS looked like this

This happens in Safari/Google Chrome

The image shows HOW Safari/Google Chrome behaves, IE6/IE7/FF3/Opera9.5+ work ok, but everything based on webkit breaks

After fiddling around with the CSS lines i think i found out what happens

Given that the ul element is absolute positioned, it is OUTSIDE the normal pageflow, however it breaks everything after it, because li elements are floated. so an empty clear div should be put there. In normal circumstances like these

everything after the 2 floated elements will resume it’s normal position, however in this case, since the LI elements are somehow outside the page-flow but they are floated, they break the pageflow. Now the surprising thing is that the div.clear is not doing it’s job to put the page in order in webkit. I dont know why since it’s a block type element and in all other cases it works, here however you need to have him not only as a block element but also it needs to have a height of 1px or more.

After putting the height 1px to the clear div, it started to behave properly in Safari / Chrome. Very weird bug, even more weirder than those on IE6/IE7

Questions in comments

Cheers AlexD

Sometimes if your wordpress DB is down, you should normally get an error saying that the DB is unavailable and then some messages will appear with the possible cause of this, like the DB name is not found, the settings in the wp-config folder are wrong, and the like. However there is a case that surprise surprise you get on the page with the INSTALLATION of wordpress and you’ve just lost your WP blog.

The file is found in wp-admin/install.php

As a good rule of thumb, it’s advisable to delete all readme.txt, nfo, info files from all plug-ins, there have been reports of some chinese bots crawling wordpress blogs for these, so save yourself some bandwidth and delete those

In order to make sure this doesnt happen at all, there are 3 methods

• Method 1: JUST NUKE the INSTALL.php file. After the blog has been installed you dont need this file anymore so just delete it
• Method 2: htaccess file
  # PROTECT install.php
  <Files install.php>
   Order Allow,Deny
   Deny from all
   Satisfy all
  </Files>
• Method 3: Replace it entirely with something else that is written by you from the start

Problem Fixed

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.

Everyone loved valign=”middle” on tables… well life just got better with jQuery. This plugin works flawlessly however make sure that both the element itself and the parent element do not have any top/bottom paddings, else please modify it using the .outerHeight() property that takes into consideration the padding/border of those elements. Tweak and use as necessary.

the JQuery

You can get the benefits of valign=middle no problem.

So just put the jQuery framework script then this script above and call the elements you want to be valigned=middle by using this

Also another VERY NIFTY thing to do is, in order to prevent the user from seeing the javascript process (since first HTML is loaded, then CSS file is loaded, then any images are loaded, then JS is processed) you can do this.

First you need an .outerBox that encompasses the Box element, and then you need to have the box element with a declared height, like #box { height: 300px;}. This workaround is only good for IE 6 since that sucks donkey balls, and has a JS rendering engine from 1000AD. however depending on the amount of content being displayed (like entire columns) IE7 which appeared in 2000AD may require this fix also. Other browsers are OK so this is BS

CSS:

Javascript:

End of story.

And for the other more compatible browsers you can put this in another JS file. The previous one was inserted in the HTML using conditional comments <!--[if IE lte 7]> <script src="./../js/biteMe.js" type="text/javascript"/><![endif]-->

$("#box").vAlign(); and just use Conditional comments to put the IE specific things in so they wont see them, and since you are linking 2 different JS files, (again with conditional comments) you script WONT JAM.

Complex solution for an ancient problem.

Cheers

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