Posted on

Don’t use underscores in css ids

Today’s reminder from your friendly neighborhood codeslinger is "don’t use underscores in css ids!" You know, those lines _ that programmers like to use instead of spaces in variable names (because you can’t really have spaces in a variable name in most languages). This was an illegal character in the original CSS1 and CSS2 specifications (updated in 2001 to be valid) so setting an id to foo_bar (e.g. <div id="foo_bar">) would be translated by the browser as foo\_bar (e.g. <div id="foo\_bar">), well, some browsers, not all browsers because you know browsers are so consistent in their interpretation and implementation of these so called web standards.

The solution? Instead of underscores, opt for dashes (e.g. <div id="foo-bar">) or camel case (e.g. <div id="FooBar">) but remember that id’s and class names are case-sensitive.

See also.

Posted on

jquery challenge of the day

And now for something completely different…

Let’s say you have a table that could have infinite rows. The table has an id but none of the other elements (ie. we won’t be traversing by id). The column to the furthest right of the row has an anchor tag in the for of an <a href> There are no other anchors on that row. What I want to do is when the anchor tag is clicked, have the <a href> text in the row above the clicked on turn bold and only that <a href>. Sample table:

<table id="tbl">
   <thead>
      <tr>
         <th>col 1 label</th>
         <th>col 2 label</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td>one</td>
         <td>sometext <a class="tt" href="#">link</a></td>
      </tr>
      <tr>
         <td>two</td>
         <td>moretext <a class="tt" href="#">link</a></td>
      </tr>
      <tr>
         <td>three</td>
         <td>differenttext <a class="tt" href="#">link</a></td>
      </tr>
      <tr>
         <td>four</td>
         <td>othertext <a class="tt" href="#">link</a></td>
      </tr>
   </tbody>
</table>

So, if I click the link in row three, I want the text "link" in row two to become bold. This is using jquery and traversing this is kicking me hard.

Posted on

Seeking Next Project

I am coming to the end of a project and have an opening in my schedule. My strengths are programming in PHP, ColdFusion, JavaScript and jQuery, CSS, and HTML. I most frequently work with MySQL or MS SQL but can work on most database platforms. Code I write validates and is W3C compliant. I can also write Section 508 compliant code. I carry a project from concept to production as project manager, independent developer, and/or project team member. In addition to custom original code, I work well with open source projects and APIs. I usually telecommute but am not adverse to working onsite or traveling. I am not an artist and typically hire a graphic artist to provide the design for each project. I enjoy WordPress customizations (but have not done custom work to either Reality Me or Domestic Psychology). Please send referrals or inquiries to jugger@gmail.com or call +1-865-898-7189. Thank you!

Posted on

The next hour’s challenge

My current project has been experimented on, tweaked, and change requested into a CSS mess. I’m going to dump all the CSS and start fresh. This has to happen and many projects skip this step as cumbersome.

Update: Really cleaned up the development environment and production server by removing test files, unnecessarily included (old and unused) code, and so forth. Much improved!

Posted on

Programming self into corner

With programming, over thinking a problem is a common pitfall. Sleeping on a problem often results in a quick solution for the mere fact that you quit thinking about the issue long enough to see the simpler solution. As we contrive our Rube Goldberg devices to solving programming challenges, we become like plumbers simply adding more pipes to divert the water to the end result. Quickly we paint ourselves into a corner and waste valuable time. I am there right now on what should be some simple css.

If I have a <tr> that has a class <tr class="foo"> and the <td> within the tr has an <a href> how do I style the anchor?

Before anyone jumps on the "Don’t use tables" bandwagon, this is semantically correct because the output is tabular data.

The solution should be tr.foo td a { }. But nothing changes. CSS is not magic; not spooky. CSS is relatively simple, and fun! But hiccups like this drive me to the brink!

Posted on

Today’s Technical Challenge

I like the semantic web. That means that when I create a website I use markup as its intended. We used to have to use tables to make elegant layouts. Browsers have matured and become more compliant to the HTML specification. Now tables can be used for tabular data; however, designers still have tools which cut and slice designs up into tables rather than using CSS. Tables have their place in HTML. Specifically, tables use be used for presenting tabular data but not for arranging graphics or chopped up pieces of images in the browser window.

Menus and navigation are lists semantically speaking. Of course, no one wants to see a menu with a bunch of dots beside it nor should ever menu be presented as a vertical list with indentions for submenus. Using CSS we can remove the bullets, turn the list horizontal, and make the submenus appear as submenus when the mouse rolls over the navigation. This works great in a browser and because of the semantic nature will present well in a pda, phone or other mobile device. However, the WYSIWYG editor in an email client wreaks havoc on the page. "Huh?" is the correct response because really web pages, particularly dynamic web pages, should not be sent by email. Instead a link to the web page should be sent. BUT Internet Explorer is kind enough to provide under its FILE menu (PAGE menu in IE7) an option to "Send Page by Email" which in theory will deliver an HTML email that is an exact representation of the web page.

In reality, in a specific case which has not been narrowed down yet, the CSS menu is rendered with conditional comments.

<!–[if !supportLists]–>o<!–[endif]–>

Obvious steps have been to make sure that IE is upgraded to IE7 and that the email client is updated. And to confirm that the email is being sent as HTML and not plain text. Aside from returning to a tabled design, what other options should be explored?

Posted on

CSS3 is coming!

CSS3 is coming! CSS3 is coming! Cascading Style Sheets allow design to be separated from programming. Before quality support of CSS within web browsers, designers and programmers had to rely on tricks to make the site appear correctly. One technique even included creating separate documents for each of the major browser, detecting the browser version, and presenting the correct document. What a pain!

With CSS, a programmer can create an HTML document sematically. In short a programmer can write code that says, "put a paragraph here" without worrying about what a paragraph’s appearance should be. That is, the programmer need not concern themselves with size of the font, indentions, emphasizing the first word, and so forth. The designer can manage that all through the style sheet.

Is it me or wasn’t vertical alignment of text promised in CSS3? I don’t see that in the list!

Posted on

Debugging CSS

For folks working with CSS and Firefox, there is an outstanding tool called Aardvark. There is also a javascript bookmarklet that does something similar and can be used in any browser that supports javascript. Simply go to this page and drag the Bookmark this link for MODIv2 link to your bookmarks toolbar. When you want to use it, click the shortcut. (of course, you can skip going to the page and simply drag that link).

I still highly recommend Aardvark.

Posted on

5 Steps to CSS Heaven

I find CSS to be much fun. I like reading other people’s options of CSS techniques. PingMag lists 5 steps that I like.

  1. http://www.pingmag.jp/2006/05/18/5-steps-to-css-heaven/
  2. Separate the positioning properties from the typographic properties
  3. Isolate single properties that you are likely to reuse a lot
  4. Try out an online CSS compressor
  5. Learn to exploit the cascading nature of CSS

I don’t necessarily agree completely or adhere to these steps but they are certainly worth reviewing. [Source]

Posted on

Levels of HTML Knowledge

This serious rating of HTML coders complements my earlier joke post regarding the evolution of programmers by explaining 7 levels of HTML understanding from HTML Level 0 to HTML Level 6. I’d put myself at HTML Level 4 moving into 5.

It isn’t necessary for everybody to reach HTML Level 6. I consider myself a Level 5 person, and I’m quite happy reading the specs instead of writing them so I don’t really feel like I need to reach Level 6. People whose task is to keep a website’s content up-to-date can even get by at Level 1, provided that their CMS is good enough. It all depends on your needs.

Levels of HTML Knowledge was inspired by Levels of CSS knowledge. I am Level 5.