As you can see, I have implemented navigational tabs.
They render nicely in Firefox, IE6 and theoretically in IE5#.. without any hacks. So, how did I achieve this?
It involved several sources for code (listed at the bottom of this article for reference) as well as a little known but powerful Javascript and a whole heap of trial-and-error applying the code snippets and CSS to the ‘forces..
Now, before you cry “By the power of Cthulu, that sounds complex!” it’s actually a simple process. In fact, I’ve done all the hard yards for you. :)
This quick how-to will run through basic yet snazzy tab navigation creation, the CSS files you’ll need, and the code to trigger correct browser rendering - well, certainly as reasonable as IE will allow! It’s also aimed squarely at wordpress, but it should be relatively simple to adjust to suit your PHP based blog of choice.
Ok, you might want to grab a cup of coffee, tea, or the ’strong drink’ of your choice before we begin.
All sorted? Excellent.
First, lets look at the code needed to create the actual navigation elements. I’ll cover the additional CSS shortly.
The following code creates the tabs - copy this code snippet and paste into your active theme’s header.php file just below the `
` tag:`
`
`
This creates our basic navigational element. If you wish to include other pages, archives or about pages for example, insert additional lines, like thus:
`
`
`
I’ve highlighted an example for a static wordpress page with the link name `the-page`. As you can see, we run a comparison against the currently view page. If the current viewed page and the if statement match (for example, on the home page) the Blog link will be highlighted. The beauty with this, is that the code self identifies which page is currently loaded.
Repeat the above highlighted code as many times as required for each page required.
Now, at this point the result is going to be very ugly as we haven’t dealt with CSS. The following file is an example of the CSS I use to create the tabs. You will most likely need to edit it to suit your individual blog layout.
Upload this to your web host, I recommend placing in your current active theme folder, eg wp-content/themes/your_theme so it can be edited within WP easily.
To include the CSS add the following line in your theme’s header.php file:
`
CSS file and added the code snippets to the header.php file it’s time to check the results. You should find the tabs have been added to your layout. Again, you may need to edit to taste.
The CSS sample includes two lines to fix IE browser issues - feel free to enable those if required.
At this point - we are done. Now, if you find that IE happens to render the tabs in a different location compared to Firefox or Safari, for example, then there is a cure.
The following code will execute if the web browser identifies itself as IE 5 or higher. It’s a small portion of javascript code that saves any CSS or PHP hacks to force IE to play nicely:
``
The above code will execute if the browser identifies itself as IE version 5 or above. Now, we can use this to our advantage by ‘overwriting’ the existing CSS style sheet called above, with an IE compatible one. Nifty shit, huh?
So, if we create a copy of the tag-snippet.css file, rename it to ie-snippet.css & upload it to the same location, we can do the following:
`
IE 5]>`
`
CSS trait - the ability to over-ride existing CSS elements with new ones.
For example, after editing the header.php file and tag-snippet.css you discover that IE renders the page differently to Firefox- the tabs have moved down, or up a few pixels.
The first CSS file is loaded by web browsers as normal. However, if the web browser is IE 5, or above, the second CSS file is loaded, over-riding the CSS with the new data. Thus we are able to ‘correct’ the tab rendering issue in IE.
This actually opens up a few options. You could theoretically have a ‘fix’ CSS file that contains certain duplicate entries to correct IE rendering issues, leaving Firefox, Opera, Safari, et all unaffected. This though, is a topic for another day.
The following are the varied sources that proved of assistance:
- David Appleyard, for the initial tab and CSS guide
#
- pixies.ca, nifty code to identify pages correctly
#
- javascriptkit.com, ie browser javascipt code
#
NB: The code and CSS in this how-to has not been verified as compliant. Your mileage may vary.
# not able to test currently
≡ This is a journal entry relating to the topics of code, design, noteworthy, wordpress.
Brendan Borlase is a Systems and Network Administrator living in Adelaide, Australia, having lived, worked and breathed Information Technology for over 12 years. Learn more.
Feedback is encouraged. If you would like to read more, consider subscribing to the regularly updated RSS Feed.
Jun 18th, 2005 at 9:20 am
Hi Brendan,
Sorry to be a pedant, but javascript != java. They have little in relation with each other apart from the name and certain syntatical similarities.
I’m a developer by trade so this sort of thing probably annoys me more than most:-)
Jun 18th, 2005 at 10:01 am
Ok, so I referred to it as a java scriplet, rather than javascript. My bad.
The purpose of the post wasn’t to define anything, simply to suggest a possible method for getting tabs to work. I actually refer to the code block as ‘javascript’ further into the post. :)
You are however correct - again it wasn’t my intention to piss developers off, so have edited the post and have made sure any references use the term ‘javascript’ only.
Jun 18th, 2005 at 10:24 am
Yeah, I know:) I didn’t mean to sound like I was coming down on you in any way. As I said, I’m probably more pedantic than others.
BTY, it’s an interesting approach. In the main, I stay away from browser sniffing, though it can provide a useful fix in specific situations.
Jun 18th, 2005 at 11:00 am
I’d prefer it if I never had to identify any web browser. It would be great if they all had compliant, standardised XHMTL, DHTML and CSS/CSS2 support.
They don’t. Probably never will - but it is a simple way to handle different browsers. It also means that down the track if I.E. 7 is actually pretty compliant and handles cascading style sheets correctly, then it’s a case of adjusting the javascript, not half the style sheet. :)
Personally, I like them apples far more than custom CSS hacks that are likely to do more damage than good down the track. But them, I no developer, so what would I know?! ;)
Jun 18th, 2005 at 11:08 am
I’ve still got some work to do on the tabs - it seems they can ‘move’ left and right depending on screen resolution, which is a complete bastard. I’m going to have to convert the placement to ‘em’ I think, that should at least make it sensible no matter what font size or screen res is used. :|
Jun 18th, 2005 at 3:50 pm
Here’s an interesting side-effect which I observed after trying to replicate the moving tabs effect.
Opening this page in FF and manually resizing the window so as to change the page width makes my computer fan get louder as the page gets narrower than a certain size i.e. when the tab shift kicks in:-)
Obviously, it’s a knock on effect; it appears that the resize is a bit more processor intensive and thus the fan kicks in to minimise any potential overheating but it’s mildly amusing…
I guess you have a possible slogan/warning sticker label there; these web skills are so hot that your PC may melt:-)
Jun 19th, 2005 at 12:12 am
hahaha damn. :D
Back to the drawing board then! :)
Jun 19th, 2005 at 1:29 am
Fixed, well mostly - Every time I want to check the layout in IE5, lilpixel goes sidewayz.
“the Safari Screenshot Generator is temporarily offline. please come back later - we do have to get some work done, too…”
At some point people really need to ‘let go’ of IE on the Mac platform - it’s unhealthy. :)
Jun 22nd, 2005 at 7:15 pm
Just wondering… using the same principles as outlined above: Would it be possible to create a sitewide navigation element on the homepage based on Categories? Also to check the “current” against the Category heading so that no matter what level you are inside each category, it will still be highlighted as the ‘active’ if well… it is. I am thinking of something along the lines of Dan Cederholm’s excellent Fast Company website tabs, but can be changed easily by the client using the Category options to add, delete or modify the title etc.
I am just new to this wordpress thing and am trying to make a small portal site for a non-profit with various sub-sections. This sounds like a great idea - and also someone who doesnt know PHP can understand (ie. me!).
Great explanation. I may also see if this can be tried out using the Suckerfish method too.
Jun 23rd, 2005 at 2:59 am
dezhen,
Possibly, yes. The wordpress codex might be able to illuminate the code required. I haven’t really investigated tabbed navigation based on categories to be honest.
Theoretically, as long as the if statement can be resolved to either a true or false reponse (remember this is checked outside of the wordpress the_post loop), then it’s completely possible.
Jun 23rd, 2005 at 8:27 am
Well i guess thats the next part i have to figure out how to do then :P “the_loop” seems like the holy grail of Wordpress or something.
As far as i can recall, its easy to get the different categories to display as a list using xhtml and such (most templates use that for the main page at leas), so it should be (theoretically) easy to use css to impliment them as a horizontal tabbed bar. I guess the hard part would be to make the sub-categories appear on rollover as a dropdown menu (ala suckerfish or something). That’s a pretty fascinating idea though!
Just wish i had more understanding of the capabilities of Wordpress, and also how PHP works so i can really try cranking things up a bit. Unfortunately i’m just a n00b :(
Great site for inspiration by the way!
Jul 6th, 2005 at 12:47 am
Hi,
I have been attempting to utilize the code above to identify a visitors browser and divert them to an alternate stylesheet for IE. I have placed it in the header.php as prescribed, but to no avail. I studied your page source and placed it where I believe you have placed yours.
Q: Has anyone actually gotten this to work? If so, what could I be doing wrong?
Q:Is there suppose to be opening and closing script tags? It is javascript isn’t it?
I’m using WordPress 1.5.1.3 and the Kubrick default theme.
thanks in advance
http://ronpemberton.com
Jul 6th, 2005 at 3:26 am
It is javascript.
Have a look at this example wordpress header block. This is a copy of this blog’s header including the block of code to handle IE.
Pay special note to the syntax of javascript (it’s not the same syntax as a comment block). You might want to put the full path to the ie css file initially to make sure it loads correctly.
I’d also suggest adding a comment block such as:
/* this is the IE style sheet */into the ie css file only. It should then show up as part of the sites CSS file. If you don’t see that in the CSS, then you know the file isn’t loaded. :)
Remember the CSS will not be loaded unless the browser matches IE 5.x or above thus you will not see the IE css in firefox (as an example). Hope that helps!
Jul 6th, 2005 at 3:30 am
Ron,
If you have included the CSS in the existing theme’s style.css file - then browser matching will not work.
I’ve visited your blog and just had a look at the source CSS and there is no sign of the tab CSS file(s).. You must have two seperate CSS files for my how-to to work correctly.. Have a look at the above sample header.php file, it might help clarify what’s needed.
Jul 7th, 2005 at 5:20 pm
Brendan,
Let me clarify myself. I created a copy of my stylesheet and renamed it ie-style.css. I placed the conditional comment tags in the top of my header.php, with an absolute path to the new file. Then, in order to test, I commented out the css associated with my nav bar that I already had on my site. I haven’t installed your tabs yet. I first wanted to make sure IE was getting the proper file.
For some reason it isn’t working. I’m sure it is something I’m doing wrong. I have read many post and articles other than yours, where this very same javascript is being used successfully.
My version of IE is IE6 SP2. I have WP 1.5.1.3 and it is the Kubrick default theme.
I can’t understand what could not be right.
Have you actually viewed this in IE, as well as Firefox and varied it works?
Thanks for your input.
Jul 7th, 2005 at 10:32 pm
Yes, it works.
Ok - can you possibly send me your header.php file? I’ll have a look at it to see if I can follow what’s happening.
Jul 8th, 2005 at 1:30 am
Brendan, thank you for taking a look at this. I have pasted my header.php with the javascript at http://pastebin.com here; http://pastebin.com/309320 and, a copy here that includes a php solution to this is here; http://pastebin.com/309272 I have exausted every avenue I could find related to this. Everyone says that it works for them too. It must be something within the header.php or my copy of IE6 on my computer that is keeping both language solutions I’ve attempted from working.rnrnThank you for your very kind assistance. Ron
Jul 8th, 2005 at 6:03 am
Ok, here’s your problem.
First, you’ve not read the instructions quite right.
You seem to have two complete style.css files (why?!) which doesn’t make any sense to me, or the instructions I’ve given.
Download this zip file - I’ve edited your header.php file, included the two example css files and instructions.
Batteries not included.
Jul 8th, 2005 at 3:42 pm
Thank you for your patience and assistance.
The second CSS file is due to the last paragraph of your How-to where you mention a theoretical “Fix” css file to incompass all other IE hacks. It sounded like a good idea. I am still learning and trying to juggle multiple browsers in one file has proven a difficult task for me. I will now follow your instructions exactly, and worry about all the other rendering issues in IE I have another day.
Thank you, Brendan.