Making CSS UL Menu’s Browser-Consistent

If you’ve ever made a web site and wanted it to look consistent from one browser to the next, then you’re well away of the difficulties that are involved. Fixing these sorts of styling issues can be a major annoyance, however, I like to hunt down issues on my own pages from time to time and stand up to the challenge.

One issue that I can across today was dealing with horizontal menu positioning using unordered lists (<UL>) and some positioning. The positioning wasn’t consistent between browsers or even operating systems.

Continue reading “Making CSS UL Menu’s Browser-Consistent”

UbuntuForums.org Site Makeover via UserJS

A while back there was a neat little styling script being passed around that tuned the Ubuntu Forums to match the new official designs a little more closely. While its not official and no where near a perfect solution, it does dramatically improve the appearance of the forums overall.

Before

After

To use this, all you have to do is download and install the Stylesheet or UserJS file and configure it in your browser! I’m using the UserJS version, but you may prefer the other. Either way, enjoy!

UserJS: Twitter-Rounded

I’ve thrown together a quick script for Opera that you can use if you’d like to see rounded corners (aka border-radius). It seems that Twitter currently sends Opera a style sheet with empty settings for rounded corners…

…so, all I did was write a script that will insert a link to a style sheet that’s stored here at kyleabaker.com which overwrites these empty styles with the correct ones.

If you’ve never used scripts before then you should first learn how to setup UserJS. After you’ve setup Userjs, you may need to enable UserJS for secure pages (https) in Opera’s internal configuration page….”opera:config#UserPrefs|UserJavaScriptonHTTPS“. Just check/enable that option. Make sure to click save!

Lastly, save the “Twitter-Rounded” script to your UserJS folder that you setup in the steps above.

Now you have a more pleasant looking Twitter page in Opera 10.5. 😉

NC State ACM/AITP Website Update

I just finished (or reached the publishing or pushing live step) the update to the NC State ACM/AITP website.

The improvements over the previous design are pretty drastic when it comes to user interface and ease of use.

I ended up going with a K2 theme for Drupal since I’m such a big fan, but it just didn’t seem right for the site at first. I ended up going through and modifying a great deal of a barely and poorly done version that I came across online so I had to finish up most of it myself, but that just allowed for making it suit my (read ‘our’…for the club) needs.

acm-aitp-site-upgrade-2009

After working with the html and tweaking it hardcore until I got it clean so it passes HTML Validation inspection it was time to tweak the CSS.

This became a breeze with Opera’s Dragonfly developer tools. I was able to select an element and tweak the style sheet live so I could see real-time results. After making an adjustment it’s as simple as updating the actual stylesheet.

After tweaking the style almost obsessively for hours the first day I decided it was time for a break. It wasn’t long before I got back into the groove the next day and finished it up (for the time being).

I really have to say that I am in love with Dragonfly now. I’ve used Firebug in the past and to be honest I’ve never been a Firefox fanboy…it’s a good browser, but it’s not pushing standards support at the rate that I want and Opera is just better at a lot of the things that I use and need from a browser… anyways, I got used to Firebug a while back and Dragonfly vs. Firebug isn’t a fair competition because the both are still very different, but I find Dragonfly being easier to use ever second compared to Firebug.

After getting the code working it was time to push the update. As a result, the NC State ACM/AITP club now has a much friendlier outlet on the web!

Now I have the pleasure of tackling any smaller issues such as stylesheet problems. 😀 Updating the content will now be much less of a pain now that it can be updated directly from the browser for most everything.

New site design under way..

I’ve been working on redesigning the site a bit so it doesn’t feel so cluttered. I’m not finished yet and still have a bit of cleaning up to do. However, I wanted to get some comments, feedback and constructive criticism. Please let me know the goods and the bads. If you can..please give a suggestion or 20. 😀

I don’t want to officially launch the design yet, so I’m waiting for reviews. I’m curious if it’s better or worse and what is better or worse about it. I haven’t gone as far as setting up cookies or passing the css tag, so the style sheet will only apply on pages with css=2 appended to them. If you view another page and would like to see how it looks with the style sheet then just add ?css=2 at the end and press enter. Here are some links to get started..

https://www.kyleabaker.com/?css=2
https://www.kyleabaker.com/archive.php?css=2
https://www.kyleabaker.com/news.php?news=71&css=2

Check them while their hot! I’ll be removing this feature/option soon and these links will be disabled. 😉

UPDATE:
New design is up. I’m still tweaking it and working in the comments and suggestions. Thanks for the feedback!

ECMAScript and CSS: Quick Lesson

Hey all, I know most of you are not guru’s in ECMAScript (a.k.a. Javascript)..but then again I’m not either. I just wanted to share a little tip with you. I find that many times when people try to add javascript functions to their pages or web applications, they add the functions in an incorrect manor.

Here is the most common mistake made. Say you want to make an image button or a hyperlink on your page that is linked to a javascript function. You might attempt this..

<a href=”#” onclick=”Javascript:someFunction();”> Click Here to do some action </a>

One more correct way to do this would be the following..

<a onclick=”Javascript:someFunction();” style=”cursor: pointer;”> Click Here to do some action </a>

Or..if you are using an image as a button or link to a javascript function then instead of wrapping an anchor tag around it, you could do the following..

<img src=”./image.png” alt=”buton” onclick=”Javascript:someFunction();” style=”cursor: pointer;”>

So you can see that the main difference is the use of some simple css ( cursor: pointer; ) which gives you the effect of appearing to “link” to something. The whole linking design is a good way to just make your functions easier for users to find (verses the regular arrow cursor). However, the problem with the incorrect method that I mentioned is that search engines tend to find your site and scan links. When they scan links with addresses such as “#” they usually rank your pages lower. Using css can help you avoid causing poor search results for your site. Also, some browsers are not designed to follow links such as “#” and often just reload the current page. You don’t want your page reloading instead of performing the script that you thought you correctly called for..do you?

So it’s best to just follow safe methods and standards to ensure that your code lasts longer and is supported in most all browsers without having to do silly browser specific hacks. These hacks can often become out dated very fast and force you to do hacks to your hacks. If you’d like to check into other web standards take a look at W3C. If you have any comments or suggested articles please let me know!