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”
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.
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!
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.
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. 😉
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.
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.
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..
Check them while their hot! I’ll be removing this feature/option soon and these links will be disabled. 😉
New design is up. I’m still tweaking it and working in the comments and suggestions. Thanks for the feedback!
One more correct way to do this would be the following..
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!