Web Development & Design Tutorials | Brenelz Web Design Solutions

Fix table-cell and max-width bug in IE80 Comments »

I find I like documenting IE bug fixes that I come across in my daily work. It is just as much for myself to go back to as it is for you the reader.

Well the other day I came across a real puzzling bug. Lets describe the circumstance first:

The Cause

Lets say you have a table that lists of bunch of suppliers that a company has. It includes an image and the company name.

Something like the following:

<table id="suppliers">
    <tr>
    	<td><img src="images/suppliers/airflex.jpg" alt="" /></td>
        <td><img src="images/suppliers/wallace.jpg" alt="" /></td>
        <td><img src="images/suppliers/lunde.jpg" alt="" /></td>
        <td><img src="images/suppliers/hutchens.jpg" alt="" /></td>
    </tr>
    <tr>
    	<td>Airflex</td>
        <td>Wallace Forge Company</td>
        <td>Lunde Lift Systems</td>
        <td>Hutchens Industries</td>
    </tr>
</table>

Now let’s say that each image is a different size… and you want to control this. You use the following CSS rule:

table#suppliers img {
	max-height: 107px;
	max-width: 159px;
}

This now keeps the height and width reasonable. Now if you look in Firefox it looks great… IE8 has its table stretch out to the sides…. and IE7 looks perfect.

This had me stumped… why does IE8 show worse than IE7. It made no sense. Below is the solution I found.

The Solution

The simple solution is to specify a direct width for the table, as well as set the table-layout to fixed:

table#suppliers {
	table-layout: fixed;
	width: 726px;
}

Happy Bug Fixing!

Find Out More Over at Bytes.com

Posted on: February 2nd, 2010 Author: brenelz Categories: Uncategorized

Firebug 1.5 Inspector Stuck (FireQuery Fix)1 Comment »

The other day I upgraded my Firebug to the newest version. Shortly after I was required to debug some CSS and was going to use my favorite too Firebug when it seemed to have a glitch.

I would attempt to inspect an element as I normally do. I would click on an anchor tag, but the HTML tab would not go to the appropriate place in the code.

I first dismissed the problem as a temporary bug, and restarted the browser to try again to only have the same problem.

Update Firebug Extensions

I then found the solution on the firebug blog. It turns out your extensions had to be updated.

I then went to my addons dialog in Firefox and clicked find updates, only to find out they were all updated (or so it seemed).

I then read the blog a little more and found out “FireQuery” doesn’t auto update properly, so you have to download the newest version manually.

Solution: Download Newest FireQuery

Download Version 0.5 Here and it should solve your problems!

Any other bugs with Firebug 1.5… let me know in the comments.

Posted on: January 21st, 2010 Author: brenelz Categories: Uncategorized

Create a Mashup from Scratch1 Comment »

In this tutorial we are going to create a search Mashup which searches for books and shows the category of the search string. We will cover the basics required for making of any mashup.Let’s get started !!

Tutorial Structure

What is a Mashup?
Setting up workspace.
Tutorial

Posted on: January 14th, 2010 Author: brenelz Categories: Uncategorized

Win Some Chuck Swag with Brenelz Web Solutions…6 Comments »

Today we will finish up our Chuck series that was based on getting some new Big Bang Theory viewers… Below you will find reasons 4 and 5.

But before you read those, I would like to inform you that I will be giving away some chuck swag to one lucky winner.