Archive for the ‘CSS’ Category

Color Picker App v2 update

Thursday, July 16th, 2009

I haven’t forgotten v2 of the Color Picker App & it’s something I’ve been wanting to work on. Unfortunately I have other projects that pay the bills taking priority. I wanted to share a couple of ideas I’ve been toying with and get some feedback.

I’m planning to completely drop reliance on the X Library. I had toyed with the idea of doing some sort of flash based thing, but I’m thinking of using jQuery, YUI, or both instead.

I’m keeping the server side code PHP based and thinking of using Symfony, the Zend Framework, or something with user handling already built in - like Drupal (unlikely). Part of the reason for user logins is so people can submit/maintain color schemes.

I’m thinking of making it open source so people can host their own server full of color schemes. I’ll pull out the Firewheel Design ColorBurn feed and make the color feed section pluggable so people could write their own plugins for other services or completely random color schemes.

I’m hoping to make the color schemes more dynamic, but I’m not quite sure how to go about wrapping color swatches. From what I remember v1 requires 4 colors (that’s how many is in the ColorBurn widget). Most of the code is dynamic and simply loops through the array of color swatches, but the current floating & such will more than likely break if it doesn’t have exactly 4 colors.

I’m wanting to set it up so that there will be more choices than just the 3 of default color order, light to dark, & dark to light. I’d like to set it up so that the color feed could specify which color belonged to which class category (i.e. page text, page background, etc) by default. Maybe even define a default reverse order. I will still have the light to dark & dark to light. I may include a default color order based on the order the colors are first added to an array in order to have yet another possible way of viewing the colors.

I’m wanting to add drag & drop as well as color wheel / RGB / hex color selector for each class.

I’d like to make it a full page view with a draggable/clickable icon to pop open the color picker app.

That last brings me to something I was thinking about, but considering all of the various possibilities I’m not sure how viable it would be. Call me crazy, but I think it’d be cool if people could include the color app js file and whatever external js libs were needed to their own site page. It would then scan through all of the html elements; make a list of elements, classes, and id’s; and present them for possibly color changing/styling. The other possibility which might be better is for it to scan through the attached css files and only add the given css selectors to the list - thus giving the end user more control over what they were able to style.

This does cause problems with trying to automatically display color sets on a page. The end user would have to manually set all of the elements/classes/id’s or css selectors and their resulting color set may be near completely useless to somebody else who’s using different classes & id’s.

  • Share/Save/Bookmark

Sitepoint Helping Victims of Recent Australian Bushfires

Wednesday, February 11th, 2009

Quick details:

  • Offer ends on Friday 13th February (2009).
  • 100% of the proceeds from this sale will be donated to victims of the recent Australian bushfires.
  • Choose any 5 books (in PDF format) and pay $29.95 USD.

A friend of mine just sent me an email today with the subject line of SitePoint 5 for 1 Bushfire Relief Sale and all the body contained was the link http://5for1.aws.sitepoint.com/. Copy/pasting the link into firefox dropped me at a page showing a fireman giving a koala a drink of water - how cute. Scrolling farther down the page past the form for selecting the PDFs you want I found the Why is SitePoint doing this? section and I’m stunned! Wow! Over 170 dead, 5000 now homeless… I hope my friends in Australia are all ok.

(more…)

  • Share/Save/Bookmark

Re: 10 Dirty Little Web Development Tricks

Thursday, December 4th, 2008

This post is in response to my friend who pointed this out to me via Facebook/StumbleUpon - 10 Dirty Little Web Development Tricks by Yongfook. I may come back later and add the header names for each item, until then each of mine relate directly to the items in the article.
(more…)

  • Share/Save/Bookmark

z-index in IE

Monday, August 27th, 2007

I ran into an issue in IE a couple months back & I’ve seen a couple of other people mention they’re having the same issue. It’s something that once you’ve solved in a project you usually don’t think about it again… at least until you run into the problem again in a different project.

From what I can tell this isn’t always an issue, just happens when certain conditions are met (& I’ve not completely figured out what all of them are). Usually the person sees what they expect in Firefox, Opera, & Safari, but the bottom of their “popup” is disappearing in IE. This happens a lot with drop down menus (bad for useability, but clients think they’re nifty!) & anything else where using the CSS z-index would fix it… if z-index worked correctly in IE.

Please note - This has nothing to do with the annoyance of certain form elements appearing above everything no matter what you do (in this case you have to set visibility on those form elements to hidden & then reshow them later).

Also note - I don’t know if this applies to IE7 or not.

typical 3-part page layout with header, body, & footer I dislike using it as an example, but it’s an example everybody is familiar with whether they like them or not. Let’s say you have a simple 3 division layout (#header, #body, & #footer). In the #header you have a drop down menu that, when displayed correctly, should appear in the z-index layer above everything in #body. As long as you set the z-index higher than everything in #body this should work fine in Firefox, Opera, & Safari.

Like I said, I’m not sure at which point IE breaks & appears to cut off the bottom of the menu. It could be because some item in #body is floated or perhaps even if #body itself is floated. Whatever the actual cause, it seems as though you can’t get the layer you’re trying to effect to do anything correctly.

I believe that IE is having issues in setting default values for it’s own internal z-index if you will. Typically as a browser parses through HTML it automatically layers stuff that comes last over the top of stuff that came first. This is the correct default behavior of browsers. Unfortunately it seems IE carries it a bit to far.

Layers

IE appears to create containers & z-index only applies to elements at equal levels within that container. So even though you set a z-index of 500 on that drop down menu, that z-index of 500 only applies to items within the #header container & doesn’t apply to any elements within the #body container. Talk about frustrating…

So what’s the solution I came up with? In your CSS for IE you need to reorder the z-index sequence for IE…

#header {
	z-index: 3;
}

#body {
	z-index: 2;
}

#footer {
	z-index: 1;
}

This should force IE to reposition the #header container above the other container layers as well as forcing #body container above the #footer container. It’s a dirty hack imo so don’t use it unless you have to.

  • Share/Save/Bookmark

One of these things is not like the other…

Tuesday, April 3rd, 2007

Welcome to another edition of “What can go wrong in web design”… or “My Little Opera Rant”.

I dislike table layouts… I’ve said that before right? I didn’t set up the initial page layout on this current project I’m on… I’ve been trying to work around the table design until I can get around to fixing it with something that will work across the board… Somebody designed a great tab system that utilizes nested divs, javascript, & css that displays only certain information at a time - hiding & showing portions of the page depending upon which tab is clicked therefore limiting the scrolling on the page… & it works great… most of the time.

Today I’ve been working on a page that requires both the left column to show up & uses the tab system. Currently I only have information for the form that appears on the first tab so the next 2 tabs simply have a short dummy set. According to “The Style Guide”, the left column (the menu) is supposed to be 130px wide which it is… at least as long as the initial tab is selected. As soon as I click the 2nd or 3rd tabs *in Opera* & only on this particular page so far does it decide that the “width: 130px !important” rule on the left column no longer applies.

The left column suddenly snaps to 222px wide… WTH? The weird thing is this only happens in Opera. I tested Firefox, IE, Opera, & Swift. Oddly enough - Firefox, IE, & Swift all have the same behaviour - the left column stays at 130px no matter which tab I click on… Grrr… WTH is up with Opera?

Initial build I tried this on was Opera v 9.10 build 8679 for WinXP. It’s been bugging me about there being a new version available so I figured I’d download it & see if it fixed this issue… Hmm… now I have Opera v 9.00 build 8502 for WinXP… Does Opera go backwards in it’s build numbers?? Out of curiousity I start typing “opera.com” into opera to see if opera had a url for new downloads - sure enough, browser history had “http://www.opera.com/download/” so I headed there & it says Opera 9.10 is the newest version - um, shouldn’t this say the same as the front page?? So I clicked the download button, install this “new” version of Opera, go to Help->About Opera & guess what version I have! Opera v 9.10 build 8679 for WinXP…. *sigh*

Oh well… I did discover that Opera has a new preview release - 9.20b.

  • Share/Save/Bookmark

A Bug in Firefox???

Friday, March 30th, 2007

As great as Firefox is for web development, it still has it’s quirks (just like every other browser). Granted, the few I’ve run into are nowhere near as bad as IE’s quirks, bugs, & bad implimentations. This latest project is proving quite interesting…

My preference for development is to develop in Firefox & then check it in IE - just to make sure it’s still at least readable.

IE is probably the worste thing to do backup testing in, but generally if something is developed in Firefox or Opera (probably even Safari, but I still don’t have a Mac) it will work on the other 99% standards compliant browsers. IE definately has issues, but in trying to make a cross-platform world readable interface one must test in IE… even if it’s simply to make sure stuff is readable & all the elegance & special features are missing.

Anyways, back to my Firefox ‘bug’. I’ve been putting together a table based search preferences page. I hate using tables for this sort of thing, but until IE 5.5 (requirements for this web app) starts implimenting CSS3 I’m kinda stuck with tables to force a specific location on things. So developing this in Firefox wasn’t an issue… The table headers (<th>) were aligned left & everything else worked fine. So I loaded up IE to check & make sure everything looked ok there & the <th>’s were center aligned… hmm…

Ok, standard rendering of a <th> is center aligned… It’s been this way since who knows when. Otoh I do have some CSS somewhere in my style sheets that defines certain <th> characteristics so I figured that’s why the <th>’s had been left aligned. Considering I’m using a bunch of IE hacks to fix certain things (& unfix other things) I thought that I (or somebody else) might have have disabled the left alignment of table headers in IE. Bzzt! wrong answer :(

I really wasn’t even getting around to trying to ‘debug’ this table header issue when I loaded it in Opera, I just wanted to make sure the page looked ok. That’s when I noticed that the <th>’s were centered there as well… whoops! That means my previously defined CSS probably has nothing to do with setting these particular <th>’s.

Going back to Firefox I pop open Firebug, hit [Inspect], click on a <th> & scroll through the CSS pane to see if there’s a bit of CSS stating text-align: left; that Firefox is picking up, but not Opera. Hmm…. There’s absolutely no CSS stating any kind of text-align property for this <th>.

Is this a bug in Firefox ???? I couldn’t believe it! So I decided to check the W3C specifications just to make sure… Here’s what the specs at http://www.w3.org/TR/1999/REC-html401-19991224/struct/tables.html#edef-TH -

Table cells may contain two types of information: header information and data. This distinction enables user agents to render header and data cells distinctly, even in the absence of style sheets. For example, visual user agents may present header cell text with a bold font. Speech synthesizers may render header information with a distinct voice inflection.

Well that doesn’t say anything about horizontal alignment… Let’s see if there’s anything else?

The TH element defines a cell that contains header information. User agents have two pieces of header information available: the contents of the TH element and the value of the abbr attribute.

Ok, that’s more to do with attaching the <th> to the td (somewhat similar to attaching <label>s to <input>s).

The specific issue I was having was in regards to a <th> inside of a <tbody>. I still need to run some more tests, but I think Firefox centers a <th> inside of a <thead> as well as a simply stacked <table> <tr> <th>.

Conclusion: W3C docs do not specify any horizontal positioning for table headers.

For consistent behaviour it’s probably best to force settings you want where you really want them… even if those are the typical defaults… You never know when a browser is going to change how it handles defaults of elements.

  • Share/Save/Bookmark

W3C CSS User Interface - System Colors

Friday, September 15th, 2006

Something sparked my imagination which suddenly made me go hunting for an HTML file I put together in ‘04/’05 displaying the system colors. I don’t remember how I originally found these & put them together, but probably had something to do with building “more professional looking applications” in various programming languages. I do know the reason why I put the page together & it’s mostly due to the geek inside wanting a way to show off this little used knowledge.

Here’s a link to my CSS System Colors page. It wasn’t until later that I stumbled upon the W3C’s CSS UI module in which these are explained in lots of detail.

As far as I know, all of these system colors work on Windows computers. My limited testing on other OSs have lead to the conclusion that support isn’t 100% accurate. Last time I tested konqueror in KDE (a linux gui) it didn’t match all the colors to my system colors, the ones it didn’t match it did however provide a default color for.

  • Share/Save/Bookmark

Run Multiple Versions of Internet Explorer (IE)

Thursday, May 11th, 2006

One of the biggest issues for web designers is having to deal with multiple browsers, the worste of course being IE. One of the biggest problems with IE is the fact that there are lots of people still using the version that came with their computer & they’ve never bothered to upgrade! This could mean that some people are running IE 3, but I think the percentage of people actually using IE 3 is not worth worrying about.

Most standards based designers would prefer to be able to toss IE requirements out the window. Unfortunately IE still holds a major share & so most projects require IE compatibility of some sort. Be glad if your requirements only require IE6 (or better yet IE7 or IE8).

Considering past projects I’ve worked on & reading about projects others have worked on I’ve come to the conclusion that there’s 5 “versions” of IE that designers can lump stuff into - pre 5.01, 5.01, 5.5, 6, & 7 (currently only beta is available). Most people don’t even bother with pre 5.01 except to make sure that it’s readable (a text browser should work just fine). Trying to test a website with multiple versions of IE causes problems because windows only lets you install 1 version. Before somebody figured out how to install multiple versions on the same computer you had to have multiple physical computers - each with it’s own different version of IE installed (or a multi-boot system with different versions of windows installed.. rebooting to see what each browser looked like).
(more…)

  • Share/Save/Bookmark