Two Column List With CSS

PROBLEM
I wanted to do a list of items in two columns with a border around the list. I didn’t want to use two floated divs in order to get the look I wanted (nor tables). Also, I didn’t want to break up the list. I wanted the HTML to be simple.

I started out with some old code I found which used floats and widths on each li. However after the list I needed to do a clear so the border would go around the entire list. This clear caused problems since it cleared my other floated divs (for page layout).

Here’s the HTML I wanted to use:

<div class=”summary_container”>
<ul class=”two_column_ul”>
<li>Overview</li>
<li><a title=”Training & Education” href=””>Training & Education</a></li>
<li><a title=”Staff” href=””>Staff</a></li>
<li><a title=”Collaborators” href=””>Collaborators</a></li>
<li><a title=”Research Areas” href=””>Research Areas</a></li>
<li><a title=”Scientific Articles” href=””>Scientific Articles</a></li>
<li><a title=”Scientific Resources” href=””>Scientific Resources</a></li>
<li><a title=”Image Library” href=””>Image Library</a></li>
</ul>
<!– this is where the clear would go if necessary <div class=”clear”></div> –>
</div>

SOLUTION
After attempts at floating and clearing the float, I eventually gave up. I tried to do an inline-block on the li, which worked great in FireFox but IE choked.

The CSS I finally used was the following:

div.summary_container {
border: 1px solid #DEE6F3;
padding: 5px 5px 15px;
}

div.summary_container ul.two_column_ul {
margin: 0 0 0 20px;
padding: 0;
list-style: none;
}

div.summary_container ul.two_column_ul li {
display: -moz-inline-stack;
display: inline-block;
zoom: 1;
*display: inline;
margin: 0;
padding: 6px 0 0 14px;
width: 220px;
}

I hope this can help someone else.

FireFox Print Bug With MOSS Site

ISSUE
I’ve been assigned the horrifying task of fixing various bugs in MOSS/SP sites at my work. One of the bugs is the inability for FireFox to print documents that span more than one page.

I’ve fixed the issue on another MOSS site but when I went to fix it on another, the same hack didn’t work. I did the same things as I did before. I basically started over on the CSS print style sheet and display: none ‘d everything that shouldn’t be displayed. I also gave everything (*) the values of overflow: visible !important and position: absolute and float: none . None of that worked.

Here’s the rough HTML code:

<div id="ncs">
 <div class="ncs_content">
  <div class="ncs_stage">
   <div class="ncs_stage_top">
    <div class="ncs_stage_content">content...</div>
   </div>
  </div>
 </div>
 <div class="ncs_footer">turned off content</div>
 <div class="ncs_footer_printed_date">print date that needs to be displayed</div>
</div>

My CSS before:

#ncs { border: none; width: 100%; height: 100%; float: none; background: none; }

.ncs_content { background: none; border: none; float: none; }

/* this fixes the FF bug */
.ncs_stage_content {
    float: none;
    overflow: visible !important;
    position: absolute;
    height: auto;
    width: 90%;
    font-size: 14px;
    padding: 20px 0px;
    margin: 10px 0px;
    font-size: 120%;
    clear: both;
    display: block;
}

.ncs_footer { clear: both; height: 100%; position: relative; }

.ncs_footer_printed_date {
    float: left;
    display: block;
    width: 950px;
    position: relative;
    bottom: 0;
    left: 0;
    clear: both;
    height: 120%;
    vertical-align: bottom;
}

The problem with this was it was displaying the ncs_footer_printed_date at the top. I couldn’t for the life of me figure out how to get it to be at the bottom of the content.

I even went so far as to post it on stackoverflow.com . No one could figure it out.

I struggled DAYS with it. This was one of the hardest things I’ve ever had to do. I tried explaining to my boss that I didn’t think it was possible. He said to keep playing with it. So I did but how I get I play with it off and on.

FIX
I had to modify my CSS for everything to be encapsulated in #ncs. Then I had to play around with different styles so that the bottom would be displayed the same as the content. Here’s my finished CSS:

#ncs {
    float: none;
    overflow: visible !important;
    position: absolute;
    height: auto;
    width: 99%;
    font-size: 12px;
    padding: 20px 0px;
    margin: 10px 0px;
    clear: both;
}

.ncs_content { background: none; border: none; float: none; }

.ncs_stage_content, .ncs_stage { margin: 0; padding: 0; float: none; clear: both; font-size: 12px; }

.ncs_footer { display: none; }

.ncs_footer_printed_date { margin: 0px; padding: 0px; width: 750px; font-size: 12px; display: block; }

SPECIAL COMMENT
To my lovely FireFox: Screw you. You’ve known about this bug for EIGHT YEARS and you still haven’t fixed it. It’s a bug with YOUR SOFTWARE. Every other browser (even the more standards compliant ones) can print pages without issues. I find it incredibly ridiculous that you haven’t addressed this issue.

I understand about standards compliance. Microsoft doesn’t make any of their web software (let alone any website they create) W3C XHTML 1.0 compliant like it’s supposed to be. They just don’t care.

But you, you’re supposed to be better than that. You’re supposed to be the best. You’re the top browser. And to have known about this bug for eight years and not get around to fixing it is just shameful.

It’s like saying everyone else’s kid in the marching band is off step except mine. They’re all stupid, apparently.

But it’s no reason to not fix a serious problem. A lot of websites can’t print.

You’re wasting people’s time and you’re making it hard on us web developers. I understand you want to go with standards but at the cost of sanity… especially when most of us can’t edit code that we didn’t make (SHAREPOINT).

I expect better from you, FireFox. I was thinking about switching to another browser because of this idiocracy. But, quite frankly, I love FireBug too much and it’s only available in FireFox.

Please fix this printing issue in your next release. I hear good things from FF 4.0. Hopefully one of them will be an end to this madness. Good night and good luck.

Extra Padding At The Bottom & Div Height Too Big In IE6

This blog post is actually for two problems with IE6 I’ve come across recently.

I’m sure I discovered and solved these before, but I keep having to find the answer again, so I thought I’d blog about it to remind myself and maybe help someone else out, too.

This blog entry is composed of two IE6 problems that I’ve found the answers to. Since we as developers still have to support IE6 for that few 7.2% that refuse to upgrade, there’s a lot of fixes (and/or hacks) out there to get the job done. I prefer the fixes. As a rule, I don’t use hacks, I just play around with it till it works.

ISSUE #1
In IE6, sometimes it puts extra padding or margin at the bottom of images and div tags like so:

Extra Padding At The Bottom In IE6

Notice the extra space between the banner and the menu? Yeah, that’s only in IE6.

As I’ve said, I’ve found the solution to this before, but to avoid needlessly googling again, here it is.

My CSS for the entire banner before:

#main_banner {
width: 100%;
margin: 0px;
padding: 0px;
height: 74px;
max-height: 74px;
vertical-align:  middle;
border-top: 1px solid #FFFFFF;
border-bottom: 1px solid #FFFFFF;
}

FIX #1
Since IE6 has an overflow issue, the correct fix for it is to hide the overflow like so:

overflow: hidden;

This solution also solves the other problem I had when I wanted the divs to move and not drop down when the window gets smaller.

ISSUE #2
I needed an orange bar under a header image to kind of separate the page out. Kind of like a horizontal rule. I probably could have used a hr, but decided to use a div tag. It was to span the entire length and be 8 pixels tall.

<div id=”orange_separator”></div>

My CSS was the following:

#orange_separator {
height: 8px;
background-color: #F77B25;
}

FIX #2
This code works in ALL browsers EXCEPT IE6.

IE6, I guess, expects there to be text inside the div tag, but there isn’t. It uses the font-sizes from other stuff, so we need to specify to it that there is no font or text.

I added the following to my #orange_separator CSS:

line-height: 0px;
font-size: 0px;

IE now thinks that the text inside has a font-size of 0 and since there is no text, the height of the div is 8 pixels.

Inserting Data Into A Form Input Array

ISSUE
I’ve also struggled with this one for a while, off and on. I have a form that has several textarea’s. Their data is put into an input array. It is looped using a for loop in PHP. Ex:

// for loop in PHP here

<label>Data:</label><br />
<textarea name="data[]" id="data[]" rows="5" cols="40"><?= $data[$x]; ?></textarea> <a href="javascript:popUpWindow('popupsearch.php?frm=input_form&amp;fld=data[]&amp;select_multi=yes', 700, 300);">Lookup Data</a>

// end for loop

This is generated using PHP (a for loop). Basically, the user decides how much data they want and they type it in, or they can look up data. When they click Lookup Data, a window pops up with a search feature for them to search for data. They can choose multiple items to insert into the form. When they do, it closes the popup and inserts the data into the form.

Sounds simple, right?

WORK AROUND
The problem was with the array. My guess is XHTML doesn’t use arrays of id’s (yet). The syntax above is what I tried (and failed) to put before. The work around is:

<label>Data:</label><br />
<textarea name="data[]" id="data_<?= $x; ?>" rows="5" cols="40"><?= $data[$x]; ?></textarea> <a href="javascript:popUpWindow('popupsearch.php?frm=input_form&amp;fld=data_<?= $x; ?>&amp;select_multi=yes', 700, 300);">Lookup Data</a>

The id is no longer in an array. The name is what is actually used later in PHP to get the value(s), so there’s no rewrite of code on the backend side.

I read an article (or I heard) that in HTML 5 when it becomes a standard, they will be combining the id and name elements of inputs. That’s the only problem I can forsee with this code not being able to be used later. I’d have to modify this code and rewrite the backend to recognize each textarea as its own entity instead of an array.

Form Fields Jumbled Up

ISSUE
Occasionally when I display data back to the user, the display becomes all jumbled. I want to display data back to the user the same kind of way they entered it in the form using fieldsets and labels. However, sometimes I get this:

Form Fields Jumbled Screen Shot

Here’s my xHTML code:

     <fieldset>
      <legend class="change_form">Personal Information</legend>

      <label>Name:</label>
      <label class="left"><?= $emp_info["emp_title"] . " " . $emp_info["emp_fname"] . " " . $emp_info["emp_mname"] . " " . $emp_info["emp_lname"]; ?></label><br />

      <label>SSN:</label>
      <label class="left">XXX-XX-<?= $emp_info["emp_ssn"]; ?></label><br />

      <label>Employee ID:</label>
      <label class="left"><?= $emp_id; ?></label><br />

      <label>Relationship Status:</label>

      <label class="left"><?= $emp_info["emp_relationship_status"]; ?></label>
     </fieldset>

My CSS for the fieldsets are:

fieldset {
	width:				100%;
	border:				solid 0 #FFFFFF; /* Opera doesn't get border:none or border:0 on fieldsets */
}

fieldset label {
	color:				#FFFFFF;
	text-align:			right;
	font-weight:			bold;
	display:			block;
	width:				250px;
	float:				left;
	padding:			2px;
	margin:				0;
	margin-top:			0.4em;
}

fieldset label.left {
	font-weight:			normal;
	text-align:			left;
	float:				left;
	width:				380px;
	margin-left:			0.3em;
}

FIX
I fixed this issue by increasing the width in the fieldset label.left class:

	width:				450px;

A shot in the dark but it worked and it does make sense. Now the lines properly break when they’re supposed to and the form looks better than if I had to add a bunch of line breaks (my previous solution to this problem).