Binary Expressions

Vertically centering in CSS is not necessary simple to achieve as one would think. However saying this I have been able to achieve vertically centering without hacks and works in Mozilla Firefox, IE 5.5, IE 6, IE 7, Opera 9.10 and Safari for Windows.

Use vertical-align: middle with line-height. Make the line height is the same as the box height. If you do not see the alignment change make sure you have the height and line-height value set the same for the box in conjunction with the element you want to have the content vertically centered to.

Example

Source: Ten CSS Tricks You May Not Know – 8. Vertically aligning with CSS
Source: Jakpsatweb – Vertical Centering in CSS

I’ve come into a situation where I require to have BBCode parsed, this includes the standard tags supported by PEAR package HTML_BBCodeParser and custom BBCode tags I’ve added myself.

My problem is this, I’ve discovered that when an value has a space within the value the value is truncated at the first occurrence of the space. This applies to a URL, image file names and any additional attribute values (alt, style, etc.). This issue is present in the stable release and latest release in CVS for HTML_BBCodeParser. Here is some examples.

Before BBCode Parser
   [url=http://www.somedomain.com/Foo World?str=1]Foo World
After BBCode Parser
   <a href="http://www.somedomain.com/Foo">Foo World</a>

Before BBCode Parser
   [img w=100 h=99 alt=Enthalpy Wheel]/images/Enthalpy Wheel.png[/img]
After BBCode Parser
   <img src="/images/Enthalpy" width="100" height="99" alt="Enthalpy" />

Before BBCode Parser
   [p style=foo bar]something here[/p]
After BBCode Parser
   <p style="foo">something here</p>

Before BBCode Parser
   [div style=color:blue; font-size: 1em;]something here[/div]
After BBCode Parser
   <div style="color:blue;">something here</div>

This problem appears to exist across the board even without additional BBCode tags or additional attributes.

Any suggestions or directions on how I can resolve this problem would be much appreciated.

Since I started using PHP 5.x.x I started to experience incorrect time reported back through PHP using for example date(). I checked phpinfo() and found out that the default timezone was detected as America/Chicago. This was not the case as the server was configured for Canada/Saskatchewan (CST). I found out that I ended up having to directly set my timezone in php.ini file. I put the following in my php.ini file, then restarted Apache and the problem was resolved.

date.timezone = “Canada/Saskatchewan”

I’m not sure if this is a bug in PHP not detecting the timezone correctly. I tried searching through known PHP Bugs but no luck locating my problem. By the way, I’m running Apache with PHP/MySQL on OpenBSD i386 v3.7.

Thanks to TML from IRC channel ##php on freenode for helping me resolve the problem.

I’m sure most would agree when one does a programming mistake they are a lot of times trivial mistakes. However when one stares at the code for long periods of time we seem to go blind and then in the process of frustration loose all logically thinking as to what could be causing the problem. Here is one such problem with arrays.

Problem

The value of the Array is not rendering. Instead you see array[0].

Solution

Remove your single or double quotes around the variable representing the array. When one places single or double quotes around the array you are causing it to be treated as literal.

There is many ways to populate vales into a HTML select element. Here is one example I’ve come up with.

PHP Code Example

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<select size="1" name="szFooBar[]" multiple="multiple">
< ?php
$i=0;
while($obResults = mysql_fetch_row($saResults))
{
    if ($_POST['szFooBar'] == $obResults[0])
    { $szSelectedValue[$i] = " selected=\"selected\""; }
    else { $szSelectedValue[$i] = ""; }
 
    printf("<option value=\"%s\"%s>%s\n",$obResults[0], $szSelectedValue[$i], $obResults[1]);
    $i++;
}
?>							
</select>

I finally did some work with my other web site, “The Kid’s Bookmarks“. The web site seems to be quite a hit for little child and with the parents too. I’ve repaired 3 broken links and the rest verified as valid links. Add 9 new games with a total of 69 games. Removed 1 game. See below for additional changes and possible new features coming to the web site. Please send in your comments or suggestions. This site was made for the kids and parents. So let’s here some feedback!

New Features Coming Soon (possibly)

• Game descriptions for older children and parents.
• Game categories or pages to allow for faster loading site and room for additional games.
• Multiple Web Site Editions – This would allow for separation of games and the site to grow with the children as the get older. This would mean I would break the site up into age ranges. Not sure how this will work at this point.

New Game Additions

• Super-Fishing
• Simon
• Clowns
• Turbo Spirit
• Table Hockey
• Space Invaders
• Astroys
• Busy Burgers
• Luigi’s Revenge Interactive
• Easter Egg Hop

Games Removed

• Barney Online – Seems to be something wrong with it and not much there anymore.

I’m a huge fan of Mozilla Foundation and their products. So it’ not unusual for me to immediately have the latest stable version of Firefox and Thunderbird not to mention alpha/beta versions. Unfortunately Firefox v1.5 is the first version I’ve installed and immediately afterwards down graded to the previously stable final release (v1.07). Don’t get me wrong the bug fixes, new features and other imrpovements are great. However more then 50% of my Mozilla Firefox extensions and themes are no longer compatible nor could it find updates to fix the incompatibility problem. There was a few exceptions of extensions that did work, which I have listed below. I even went out to search for updates manually for Firefox v1.5 for my extensions and themes and I came up empty. I realize these extensions and themes are independant however I use a lot of them on a daily bases and can not go without them. In my case I could have survived if Chatzilla and Zhluk.com DevBoi extensions worked.

I was very impressed with the seemless and trouble fee upgrade to Firefox v1.5. Unfortunatly when I down graded something messed up causing user control popups and links not to function normally. I ended up having to uninstall Firefox (excluding my profile) and re-install from scratch. I hope to see the extesions updated soon so I can enjoy the benefits of Firefox v1.5.

At this point I would recommend to all users thinking of upgrading to Firefox v1.5 to check to see if the extensions and themes important to you work in Firefox v1.5 before upgrading. If you do upgrade of course make sure to do a backup of your critical files including creating a list of extensions/themes/plugins/search engines. I’m not aware of an extension that will create a list of all of those but there is one extension that can handle creating a list of extensions and themes, InfoLister.

My Installed Compatible Firefox v1.5 Extensions

• All-In-One Sidebar 0.5.6
• BugMeNot 0.8
• Forecastfox 0.8.2.4
• Html Validator 0.7.6
• IE Tab 1.0.6
• IE View 1.2.7
• Image Zoom 0.2.1
• InfoLister 0.8.2 (was fixed by updating)
• Sage 1.3.6
• SpellBound 0.7.3
• Web Developer 0.9.4

My Installed Incompatible Firefox v1.5 Extensions

• Afterglow ToolbarAdjuster 0.3
• ChatZilla 0.9.68a
• fireFTP 0.88.3
• jybe 2.0
• Live HTTP Headers 0.10
• Mozilla SpellCheck Libraries 0.9.1.0
• SpoofStick 1.05
• Tab Mix 0.2.2.3
• Zend Studio Toolbar 1.0.7
• DevBoi 0.2.6

My Installed Incompatible Firefox v1.5 Themes

• Afterglow FF 1280 0.80
• Brushed 0.9.9.5

As you may have discovered that currently IE does not support the pseudo-class :hover on non anchor element tag(s). However there is two solutions to this problem. The Suckerfish:hover or Whatever:hover. In my case I wanted to apply pseudo-class :hover onto multiple div element tags. I chose to use the Suckerfish:hover solution as it’s simple and very little code required to solve the problem. Whatever:hover has quite a bit of code and apparently has issues that might not make it work even in IE. I’m sure Whatever:hover has it’s place but in my mind either use JavaScript to solve the problem. I would prefer not to use JavaScript but what can you do . Here’s the Suckerfish:hover solution with my modifications (not much). I will not go much into this as the two source I have given are more then enough. I just wanted to show my modifications and to get more exposure to this problem.

CSS
I just add div.sfhover to my existing style.

div.float:hover, div.sfhover
{
background-color: #dde5f7;
}

JavaScript
I only modified this line var sfEls = document.getElementById(“nav”).getElementsByTagName(“LI”); to the following so it would be applied to an id called hover and to only div element tags enclosed in with in the hover id.

sfHover = function()
{
var sfEls = document.getElementById("hover").getElementsByTagName("div");
for (var i=0; i {
sfEls[i].onmouseover=function()
{
this.className+=" sfhover";
}
sfEls[i].onmouseout=function()
{
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);

Source: Suckerfish:hover
Source: Whatever:hover

Centering a table in css is quite simple to achieve however how one would think to center a table is not always the correct way to do so.

Common Mistakes

• Table align attribute (deprecated)
• • One may say why not just use the table element attribute align? Well this attribute is deprecated and not recommended to be used. This is why we have CSS to separate styling and structuring.
• Table style text-align: center;
• • One might think to just apply a style on to a table by using text-align: center;. However text-align can only be applied on non-block level element. A table is a block level element.

Solutions

• Method 1 – Using Margins
• • To center a table one must apply a style with margin-left: auto; margin-right: auto;. This can be done like so:

    table.center { margin-left: auto; margin-right: auto; }

    Then apply the class style like so:

      <table class="center">
        ...
      </table>
      

• Method 2 – Using Percentages
• • If you desire to have a table with a specific width, you can do this:

    table.center { width: 70%; margin-left: 15%; margin-right: 15%; }

    Then apply the class style like so:

      <table class="center">
        ...
      </table>
      

• Method 3 – Using Fixed Width
• • If one desires to have a table with a fixed width you can do this:

    div.tablecontainer { width: 98%; margin: 1%; }
    table.center { margin-left: auto; margin-right: auto; width: 200px; }

    Then apply the class style like so:

      <div class="tablecontainer">
      <table class="center">
        ...
      </table>
      </div>
      

    You can set the “width: 200px” to whatever width you desire.

Notes / IE Exception To The Rule

These methods worked perfectly in Mozilla Suite/Firefox, Opera and IE 6. However these methods did not work in IE 5.5 or IE 5.01. You can over come this problem by doing a couple additional styles and the use of a div or span element tag.

• IE 5.01 & IE 5.5 Additional Solution
• • For these methods to work in IE 5.01 & IE 5.5 one must add some additional styles. First enclose your table with a div or span element tag with a css class such as tablecontainer and then create an additional style to your tr and td element tags like so:

    div.tablecontainer { text-align: center; width: 98%; margin: 1%; }
    div.tablecontainer tr, div.tablecontainer td { text-align: left; }
    table.center { margin-left: auto; margin-right: auto; }

      <div class="tablecontainer">
      <table class="center">
        ...
      </table>
      </div>
    

    The “text-align: center;” is what will cause the table to center in these versions of the IE browser. The tables will not center without it. The draw back of having “text-align: center” is it will center all the text inside your table cells. This is counter acted by applying a style to “tr” and “td” to align left. If you have th element tags, make sure to set a style so it aligns the text entered back to the default behaviour if desired (i.e. table.tablecontainer th { text-align: center; }).

Source: Center a table with CSS by Scott Granneman
Source: Centring using CSS

Now a days it is easy to get your code written by an editor, but are you learning how things really work? Very well written statement. Also do not forget about following standard compliance, World Wide Web Consortium (W3C). Interesting read, that should be passed on to certain people.

read more | digg story

This is one of the best posts/articles I’ve found for a beginner to read that explains regular expressions and how they work using the Apache module, mod_rewrite. Even if you are not interested in mod_rewrite this is still a good read to understand regular expressions.

read more | digg story

I’ve read through many articles discussing “User Friendly URLs” and I have come to the conclusion that Apache module mod_rewrite and the use of an external prg (program) using preferably PHP but if necessary Perl, is the answer. If there is a better answer please let me know. As for now I can’t seem to figure out how to get my “User Friendly URLs” method to work using Apache mod_rewrite.

What I want to achieve is to create virtual paths such as www.domain.com/products/ or www.domain.com/products/erv/ with trailing slashes that is passed into mod_rewrite to process this virtual path. Which breaks up the path into separate values (i.e. “products”, “erv”). Then queries the database for the topic id to determine if “erv” and/or “products” exists. If it does exist the topic id would be returned to the page to be processed other wise a 404 error should occur to the client. I don’t want to have to input direct references to all the paths into Apache’s httpd.conf or .htaccess as I have 11 topics with 70+ sub-topics to deal with. Going to a database is the best option I believe. In theory this should work however I’ve tried my own mod_rewrite RewriteRules and RewriteMap with no success of a value being returned. I’ve even tried examples that demonstration a similar method but no success. If anyone has an idea how to achieve this or can direct me into the right direction please let me know.

PHP code example to break up the path into separate values.
list($value1, $value2, $value3) = explode(“/”, $_SERVER['SCRIPT_URL']);

httpd.conf mod_rewrite in VirtualHost directive.

RewriteMap content prg:/var/www/htdocs/venmar/getTopicId.php
RewriteRule ^(.*)/(.*)/$ /index.php?nTopicID=${content:$1|0}