Archive for Development
It is popular to use ul and li elements float them and set them to width:auto in CSS in order to create a horizontal list of self-sizing boxes. These can easily be used to create horizontal navigation or a listing of tabs, and it works very well. However, there is one caveat; given the right mix of CSS this solution doesn’t work properly in IE 6.
To create this scenario, we can simply use something like the following:
<style type="text/css">
ul {
height: 30px;
overflow: hidden;
}
ul li {
float: left;
width: auto;
}
ul li a {
display: block;
height: 30px;
}
</style>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
</ul>
This will show the problem in IE 6 nicely. The problem is that IE 6 interprets this mix of CSS and decides that each li element should actually expand out to 100% width.
I’ll explain how to fix this issue and provide and example page so you can easily play around with the HTML and CSS yourself.
Today I have yet another entry on HTML and CSS. Today it is how to vertically center content in HTML using CSS.
You’d think that there would be a standard definition of how to vertically center any content by now, but there isn’t. There are a variety of methods out there that do this. I frequently see people using the line-height CSS property to vertically center content. While this appears to work, it isn’t very flexible, only works properly if there is only one line of text, and doesn’t work in all situations.
I found Yuhu’s Definitive Solution with Unknown Height which looks great, works properly with all major browsers, doesn’t have the limitations I’ve seen in other solutions, and is quite simple to implement. Basically all you have to do is have three divs wrapped around the content you wish to vertically center and use specific styling for those divs.
The following code is what does the magic. Replace the comment with the content to be vertically centered, change the height to match the vertical height of the container, and you’re set.
<div style="display:table; height:400px; #position:relative;">
<div style="#position:absolute; #top:50%; display:table-cell;
vertical-align:middle;">
<div style="#position:relative; #top:-50%">
<!-- content to be centered -->
</div>
</div>
</div>
I built a quick example document that shows how I applied the rules via a style block in the head to keep the HTML clean.
As with my taming HTML lists fix, I tested this successfully on the following browsers:
- OS X
- Firefox 3.5
- Safari 4
- Ubuntu (Linux)
- Firefox 3.5
- Google Chrome 4
- Konqueror 4.2
- Midori 0.1.2
- Opera 10
- Windows
- Firefox 3.5
- Google Chrome 4
- Internet Explorer 6, 7, and 8
- Safari 4
Thank you Yuhu for the great solution.
I recently tutored a friend in C coding. Since I hadn’t worked with C in at least 8 years, I really needed to have some references to rely on for syntax and other specifics. Fortunately, there are some easy man pages that can be installed in Ubuntu that offer helpful information that I was able to use to help refresh my memory.
These man pages are easily installed by installing the manpages-dev package. You can install this package via Synaptic or directly on the command line. I like the command line method personally, so I ran sudo apt-get install manpages-dev from the command line to quickly install the package.
After installing the package, I’m able to access man pages for functions such as printf, opendir, and putc. For each function, it shows the valid syntax as well as what library is required to make use of the function.
The information isn’t limited to functions as you can also access information on the libraries, such as stdio or string.
To access any of this information, simply run man [function or library name] such as man stdio.
This package isn’t limited to C functions/libraries. It is a general use Linux development suite of man pages. For a full list of what is installed, check out the file list.
Anyone that works with HTML and CSS will tell you that positioning things exactly where you want them to be is often times difficult. If you want to position something somewhere vertically, it becomes even worse.
I just finished working on a theme where I needed to force the footer of the layout to the very bottom of the page. While logically putting the footer after all the other content is easy, making it sit at the very bottom of the page even when the content doesn’t take up enough space to push it down there is quite difficult.
After struggling with getting this right for a couple of hours, I finally found a site that has done all the hard work for me. CSS Sticky Footer is the site that saved my sanity.
CSS Sticky Footer provides a solution that sticks the footer to the bottom of the page in a cross-browser compliant manner. The site reports, and I can confirm, that it works with Internet Explorer 6 through Internet Explorer 8, Firefox, Google Chrome, Safari, Opera, and Konqueror.
Since the implementation could change, I recommend that you visit the site to get details; however, just in case something happens to the site, I’m going to add the solution here as well.
Continue reading “Pushing a Webpage Footer to the Bottom of an HTML Page with CSS”
It seems that every browser rendering engine has a completely different way of rendering lists. I recently had the frustrating job of getting them all to play nicely together.
The CSS I ended up using is quite simple and works across all the browsers I tested (list at the bottom).
This is the magic bit of CSS:
ul, ol {
list-style-position: outside;
margin: 0 0 0 15px;
padding: 0;
}
ol {
margin-left: 20px;
*margin-left: 24px; /* targeted IE 6, 7 fix */
}
li {
margin: 0;
padding: 0;
}
This CSS forces all the browsers to play by the same rules. The end results are nice and clean.
The left margins are necessary to get all the browsers to not clip part of the bullet/number; however, you can change this left margin on ul/ol elements contained within the primary ul/ol if you need to adjust the indentation of each sub-list.
Each browser that I tested rendered the same thing, albeit with slightly different bullets or padding in front of the number.
The following are the browsers I tested:
-
OS X
- Firefox 3.5
- Safari 4
-
Ubuntu (Linux)
- Firefox 3.5
- Google Chrome 4
- Konqueror 4.2
- Midori 0.1.2
- Opera 10
-
Windows
- Firefox 3.5
- Google Chrome 4
- Internet Explorer 6, 7, and 8
- Safari 4
I had fun writing about how I work with Git yesterday. I thought I’d continue on that thread.
I have a solid set of code libraries that I’ve written that latch into the WordPress themes we produce at iThemes. Each time code is duplicated across different repositories, I break that code out and make it into a separate repository. I then link it back into the project as a submodule. This makes it extremely-easy to keep duplicated code across numerous repositories updated with little or no fuss.
After cloning a repository, simply run git submodule init followed by git submodule update in order to initialize all the submodules and update their container folder with the content of the submodule’s repository. For a long time, this is exactly what I did when I would clone a theme repository to start working on it. However, this quickly wasn’t enough.
The problem happened as soon as I added a submodule to a repository that was also a submodule of other repositories. Doing the submodule init and update process wouldn’t do everything I needed in this case as there would be submodules in some subfolder that haven’t been set up.
I didn’t want to get into a habit of always switching to other directories and doing the submodule processes there as well since I 1) knew that I would forget all-too-often, thus wasting my time, and 2) knew that this would not be the last time that a submodule had submodules. Heck, there is even the possibility that I’ll have a submodule that has a submodule that has a submodule. It was immediately clear that I needed a script to do all this dirty work for me. The rest of this post will be about the script I created.
All of the WordPress themes that I work on for iThemes are managed as Git repositories. Recently, we moved past the 100 repositories mark. That’s a lot of repositories to manage, and unfortunately, too many of those repositories contain duplicated information.
Later on, I might delve into how we use Git to manage our theme repos. For today, however, I’d like to focus on how I quickly and easily pushed up changes to more than a dozen repos in a single, albeit long, Bash command.
I had finished making updates to 16 Flexx repos, and I needed to push all of those changes up. Since I had multiple working repos in that folder, I was lucky that each of these repos began with the text “Flexx”. Also, since they are all part of the same series and need to keep the same version number, that simplified the tagging as all could be tagged as 2.5.0.
Given this information, I simply ran the following command from the directory that contained all the repository directories:
There’s a lot going on here, so I’ll break it up and explain what I’m doing.
Continue reading “Updating Multiple Git Repositories Easily Using Bash for Loop”
I’ve spent a little more than a month working with Git now. I can honestly say that while there are many things that I like about Git, there are just as many things that I personally find to be a pain in the butt.
Submodules specifically have managed to be a thorn in my side on many occasions. While the concept of submodules is simple, figuring out how to actually work with them can be a chore. I say “figuring out” because not everything about working with submodules is well documented. I’ll cover two of the more difficult things to figure out: removing and updating submodules from your repository.
Continue reading “Git Submodules: Adding, Using, Removing, and Updating”
I recently worked on a project where I had to sort a set of rows returned from a MySQL query. The problem is that most of the data in the field being sorted is numeric yet the field type is varchar since some of the entries contained characters.
The reason that this is a problem is that MySQL sorts character fields using a method that will produce undesirable results with numeric data. For example, sorting 4, 10, and 50 as character data produces 10, 4, and 50. In most applications, this is highly undesirable.
The solution to this is to force a sorting order that is commonly referred to as a natural sort. Natural sort is just a term that refers to how humans would commonly sort a set of information (numbers as numbers and non-numeric characters alphabetically). Fortunately, this isn’t difficult to achieve in MySQL.
Continue reading “MySQL Natural Sort Order By on Non-Numeric Field Type”
As I mentioned before, I want to switch from using Subversion for project code collaboration and versioning to Git.
I’m switching not because I have some idealogical dread of Subversion or its methods. In fact, I quite like how much easier Subversion has made handling code collaboration. The problem I ran into is that Subversion has become doggedly slow and bloated.
For example, a simple project with a current working size of 2.9MB has a Subversion repository that is a massive 98MB in size. Furthermore, it takes a full four minutes to commit a change, even a simple one-line change to a text file. During this commit process, my server’s dual quad-core processors are essentially maxed. Why the repository has become so amazingly large and why the commits take so long, I’ll never know. The maxing out of my server for four minutes per commit is also unacceptable since there are times where minor changes will need to be made to more than a dozen repositories at a time. Multiply the number of commits by 4 minutes a piece, and not only is a terminal on my system tied up for more than an hour, but my server’s CPU is maxed for just as long.
Beginning last week, I dug into Git and learned what I needed to know. The initial impressions are great; however, Git is not without its problems either. The primary problem with Git is that its syntax is extremely-obscure, IMHO.