If you want to just get to the better solution…

The Example

1
2
3
4

<div class="container" style="border:1px solid #000;">
    <img src="something.gif" height="50" width="50" alt="Alt img txt" style="background:green; float:left;" />
    <p style="margin:0;">Text inside the container div.</p>
</div>

Proceeding with the example, div.clear is placed at the bottom of div.container, which solves the problem. Div.container’s border now wraps all the elements within.

1
2
3
4
5

<div class="container" style="border:1px solid #000;">
    <img src="something.gif" height="50" width="50" alt="Alt img txt" style="background:green; float:left;" />
    <p style="margin:0;">Text inside the container div.</p>
    <div class="clear" style="clear:both;"></div>
</div>

The Better Solution

But why should we even bother placing an extra element? It’s not sexy. Here’s the solution: Use height:1% or width:100% and overflow:auto||hidden on div.container. Height and width on div.container would set the hasLayout property in IE, thus fixing a slew of float/box-model bugs (more on hasLayout). Overflow auto or hidden tells div.container to wrap everything within it.

Note: This won’t work if the element is floated, which would cause it to shrink to the percentage height or width.

The HTML

1
2
3
4

<div class="container" style="border:1px solid #000;">
    <img src="something.gif" height="50" width="50" alt="Alt img txt" style="background:green; float:left;" />
    <p style="margin:0;">Text inside the container div.</p>
</div>

The CSS

1

div.container {height:1%; overflow:hidden;}

Solution 1: iFrame

This solution comes from Joe King’s post.

In case you don’t already know, windowed controls in IE will always cover DHTML layers. That means if you have a DIV that pops up or floats on the page and it intersects with a windowed control (such as the common SELECT box), the windowed control will obscure the DIV, no matter what zIndex you have set for each element.

The solution is to create an iFrame shim under the element that needs to appear above the select drop down.

1
2
3
4
5
6
7
8
9
10
11

var element = $('id_of_element');
var iframe_shim = new Element('iframe', {
    'id': 'shim',
    'scrolling': 'no',
    'frameborder': 0,
    'styles': {
        'width': element.getSize().x, //Plug in the width of absolutely positioned object here
        'height': element.getSize().y;, //Plug in the height of absolutely positioned object here
        'filter': 'progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0)' // fixes transparency
    }
}).inject(element,'after'); //this automatically injects the shim after the element.

Keep in mind you’ll probably need to modify this to work with your needs. E.g. For drop down navigation, you would create the shim and use Javascript to make adjustments to the position and dimensions of the shim to reflect that dropped down menu in the navigation.

Solution 2: Flash Param: wmode=transparent

This solution was found on CSS Play by Stu and Fran Nicholls.

So you have a flash object and you require HTML elements to appear above it. You set the HTML elements positioning to absolute and try z-index, which probably didn’t work in IE. You only need to set the flash object’s wmode parameter to transparent to fix this. Use the <param> to set the name/value, and set the wmode attribute on the <embed> tag like so:

1
2

<param name="wmode" value="transparent">
<embed src="flash.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="100" height="100" wmode="transparent"></embed>

Solution 3: Markup Hierarchy

Let’s say you have a flash object that you have no control over, such as a YouTube video. The flash object comes in with wmode=”window” or something. What do you do? Consider markup hierarchy. In IE, the next HTML element is considered at a higher layer than the element before it.

1
2

<div class="box_1">Box 1</div>
<div class="box_2">Box 2</div>

Box 1 will appear above Box 2. So using the drop down navigation as an example again (from solution 1) I would use Javascript to relocate the navigation’s html markup below the flash object and adjust the positioning of the nav to make it look like it never moved via CSS.

There is really, absolutely no reason you need the rest of the doctype in your declaration unless you’re validating code. Furthermore, it does not mean that your page is even invalid. In the end, it puts your webpages into standards mode, which is what really matters.

The Code

It’s so simple! Just brilliant. Here it is:

1

<!doctype html>

You should just…

Try it out. It will fix your box model in IE6 and clobber all those other funny gotchas when you’re in quirks mode.

I’ll be sure to keep this one in mind. Thank you, Dustin.

The Setup:

Just so you know, this is done with MooTools 1.2, but if you know javascript, you can build it from scratch.

1
2
3
4
5
6
7

<form id="response_form" action="response.html" method="get">
    <fieldset>
        <legend>Test</legend>
        Grab the response.
        <input type="submit" name="submit" value="submit" />
    </fieldset>
</form>

1
2
3
4
5
6
7

<script type="text/javascript">
var form = $('response_form');
form.getElement('input[type=submit]').addEvent('click', function(e){
    e.stop();
    form.submit();
});
</script>

The Test:

Copy the code into a test html file. Open Firebug (you DO have Firebug and FireFox, don’t you?) and display the console. Click on the submit button and there should be an error.

The Solution:

Very simple now. Change the name to anything besides submit and you’ve fixed the mapping issue.

1

<input type="submit" name="submit_btn" value="submit" />

This one took me a while to find, but I was glad when I did. I hope this is helpful.

I offer a slightly different approach using an unordered list. Here’s the code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

<?php
    /* BUILD THE CATEGORY LIST */  
    $categories = get_categories(array('type' => 'post','child_of' => 0,'orderby' => 'name','order' => 'ASC','hide_empty' => true));  
    $category_count = 0; $category_col = 1;  
 
    foreach($categories as $catty)   
    {  
        $category_count++;  
        ${'category_list_'.$category_col}[] = array('name'=>$catty->cat_name,'url'=>$catty->category_nicename);  
        if(floor($category_count) == (count($categories) / 2)) { $category_col = 2; }  
    }
 
    //merge the two lists -Garrick
    $category_list = array_merge($category_list_1, $category_list_2);
?>
 
<div class="list_wrap">
    <ul class="category_list">
        <?php foreach($category_list as $category){ ?>
        <li><?php echo '<a href="/sugar/',$item['url'],'">',$item['name'],'</a>'; ?></li>
        <?php } ?>
    </ul>
</div>

Notice that the difference is the array_merge() and unordered list.

Now, it wouldn’t be complete with CSS, which would be something like the following:

1
2
3

.list_wrap {overflow:hidden; margin-left:-10px;}
.category_list {float:left; list-style:none; margin:0; padding:0; width:100%;}
.category_list li {border-bottom:1px solid #000; display:inline; float:left; margin:5px 0 5px 10px; padding:3px 0; width:195px;}

The .list_wrap style is a container so we can do a negative margin to shift things over. The ul and li both float left so that it won’t have extra spacing that IE6 automatically adds. The li has a display:inline because it fixes the 3-pixel-bug in IE6 when an element is floated and has margin-left/right. Lastly, we have to adjust the li’s width accordingly.

When doing the math, you’ll notice that the li’s width and margin-left x 2 columns = 410px. Now remember that .list_wrap has a margin-left:-10px so it fixes the additional 10px from the li’s.

Check out the example page to get a better idea. The category list is contained in a box with borders to help you see it better.

I think using an unordered list makes semantic sense because, after all, you’re listing links.