option dropdown can't see options

[nathanpacker]

Hey everyone, am having problem with some php code in a plugin I'm using on my Wordpress site. The problem is that there is an option box that lets you select from among a list of files in a certain directory on my site, and you can't see the options. Well, you can only see the first couple letters of each file name, because the option box is acting like it has no info in it, all closed up. I should mention, that the box works fine in Firefox, the problem occurs in IE6 and IE7 (of course).

Here is the code for the select portion:

<select name="rh_image" onchange="previewImage(this.options[this.selectedIndex].value);" style="width:30%">
            <option value="">Choose an image</option>
<?php
	$image_dir = @dir(get_template_directory().'/images');
	if ($image_dir) {
    $img_dir_uri = get_template_directory_uri().'/images';
		while(($file = $image_dir->read()) !== false) {
			if ( preg_match('/\w*(\.jpg|\.gif|\.png)$/', $file) )
        printf('<option value="%1$s/%2$s">%2$s</option>',$img_dir_uri,$file);
    }
  }
?>
          </select>

First of all, there is some JavaScript, which I'm not too knowledgeable on yet, but maybe someone could explain the php code that he is using to display the file names in the option box? I can kind of follow it, but I'm still getting lost.

But anyway, I just need to know how to get the box to display properly in IE.
Thanks.

Edit: Oh, by the way, just in case you're wondering, yes, I have posted this question on the wordpress site, and even on the plugin's site, but am getting no responses. This forum is much more helpful for issues like this.

[digital-ether]

You'll need to view the output of the php to the page. (view-source on the browser).
You can then see what is causing the problem with IE.

As it looks, there should not be a problem.

What the code does is iterate through each image in the image directory of the template being used.

Then it writes out the options for the select element with:

printf('<option value="%1$s/%2$s">%2$s</option>',$img_dir_uri,$file);

This is the same as:

echo '<option value="'.$img_dir_uri.$file.'">'.$file.'</option>';

If you post the HTML source of the page, it will be easier to see the problem.

[nathanpacker]

Well, viewing the Source code in IE, here is what you get. (I'm assuming you just mean the source code of the portion itself, not the whole page.

<select name="rh_image" onchange="previewImage(this.options[this.selectedIndex].value);" style="width:30%">
<option value="">Choose an image</option>
<option value="http://www.packerworld.com/path to file/audio.jpg">audio.jpg</option>
<option value="http://www.packerworld.com/path to file/kubrickbg.jpg">kubrickbg.jpg</option>
<option value="http://www.packerworld.com/path to file/kubrickbgcolor.jpg">kubrickbgcolor.jpg</option>
<option value="http://www.packerworld.com/path to file/kubrickbgwide.jpg">kubrickbgwide.jpg</option>
<option value="http://www.packerworld.com/path to file/kubrickfooter.jpg">kubrickfooter.jpg</option>
<option value="http://www.packerworld.com/path to file/kubrickheader.jpg">kubrickheader.jpg</option>
<option value="http://www.packerworld.com/path to file/personalheader.jpg">personalheader.jpg</option>
<option value="http://www.packerworld.com/path to file/image_frame.png">image_frame.png</option>
<option value="http://www.packerworld.com/path to file/kubrickheader_pic.jpg">kubrickheader_pic.jpg</option>
<option value="http://www.packerworld.com/path to file/personalheader_no_logo.jpg">personalheader_no_logo.jpg</option>
<option value="http://www.packerworld.com/path to file/maddiecamera_copy.jpg">maddiecamera_copy.jpg</option>
<option value="http://www.packerworld.com/path to file/maliyah_maddie.jpg">maliyah_maddie.jpg</option>
<option value="http://www.packerworld.com/path to file/1_maddie.jpg">1_maddie.jpg</option>
<option value="http://www.packerworld.com/path to file/2_maddie.jpg">2_maddie.jpg</option>
<option value="http://www.packerworld.com/path to file/3_maddie.jpg">3_maddie.jpg</option>
<option value="http://www.packerworld.com/path to file/4_familyjpg.jpg">4_familyjpg.jpg</option>          
</select>

As you said, it looks like it is doing everything right, and it probably is, because firefox reders it correctly. However in IE, it still is acting weird. I just uploaded a screenshot of what it is doing. This is what it looks like when you click the drop down box to view all the files:
[IMG]http://www.packerworld.com/nate_personal/select.JPG[/IMG]

[digital-ether]

Must be the style="width:30%".

Remove that and see if it helps...

[nathanpacker]

Must be the style="width:30%".

Remove that and see if it helps...

I suspected that might help, so I made a simple test html file with a select box in it, and that didn't seem to make a difference. But when you suggested it, I went ahead and made the change in the actual code, and voila! It did the trick. Thanks for the help.

[digital-ether]

When you specify a % for the width - it will be the percentage of the parent element.
Your test probably took on the window or document body as the parent..

I've heard IE needs widths and heights specifically defined for alot of CSS to work.

My guess is the parent element does not have a specific width, so the child inherited a percent of 0px or something like that..
Haven't used IE7, so I'm just guessing based on the problems with IE6..

[nathanpacker]

When you specify a % for the width - it will be the percentage of the parent element.
Your test probably took on the window or document body as the parent..

I've heard IE needs widths and heights specifically defined for alot of CSS to work.

My guess is the parent element does not have a specific width, so the child inherited a percent of 0px or something like that..
Haven't used IE7, so I'm just guessing based on the problems with IE6..

You're probably exactly right. Thanks for the help.