General Support: IE display problem - gap between breadcrumb links and picture caption

I integrated gallery into my website. Everything works great in FF, but there is a problem with IE. There is a big gap between breadcrumb links and picture caption in the picture view.
I'm not sure if this is a problem with plogger or my site css. I checked all styles and changed '0' margin and padding values to 1, this usually works when this problem occurs in IE. But not this time. I thought it could have something to do with floating values, but can't find the source.
Here's the link to my website: www.kielki.info
Please help!

In gallery.css you have the following rules for both the date and the caption:

.date, #picture_caption
{
font-size: 0.9em;
font-weight: normal;
line-height: 1.4;
background-repeat: no-repeat;
letter-spacing: 1px;
padding-bottom: 2px;
padding-top: 2px;
}
.date {
display: none;
}

#picture_caption
{
font-size: 110%;
font-weight: normal;
text-transform: none;
letter-spacing: 1px;
font-family: Georgia, "Times New Roman", Times, serif;
;
text-align: center;
margin-right: 5px;
margin-left: 5px;
}
Edit the gallery.css file and replace the above with the following rules to see if that helps fix this issue:

.date {
display: none;
}

#picture_caption {
font-size: 110%;
font-weight: normal;
text-transform: none;
letter-spacing: 1px;
font-family: Georgia, "Times New Roman", Times, serif;
text-align: center;
margin-right: 5px;
margin-left: 5px;
}

I just checked your site, and I'm still seeing the old stylesheet, without the changes I recommended above. Did you switch it back? If so, you need to add those changes to the stylesheet again (including the changes below) and upload it to your server. The initial changes won't hurt anything if you leave them in there.

You might try changing #picture_caption as follows and see what happens:

#picture_caption {
font-size: 110%;
font-weight: normal;
text-transform: none;
letter-spacing: 1px;
font-family: Georgia, "Times New Roman", Times, serif;
text-align: center;
margin: 0 5px 0 5px;
padding: 0;
}
Also, earlier in your gallery.css stylesheet, you have another set of rules for #picture_caption, between #gallery-name and #main_container. You might want to remove those as well so they don't causes issues.

Okay, I think I've figured out what's causing the issue. It will require editing 3 of the theme files. I've seen this before, and this has usually fixed it.

Open header.php and change the width of the table to 99% in the following places:

Line 7:
<table id="header-table" width="100%"><tr><td>'.generate_header().
Line 13:
<table width="100%">
Now open picture.php and change the width of the table to 99% in the following places:

Lines 8, 27 and 46:
<table style="width: 100%;">
Now open footer.php and change the width of the table to 99% in the following place:

Line 7:
<table style="width: 100%;">
Now upload those 3 files to your Plogger gallery themes/default folder, overwriting the existing files and see if that fixes the issue.

Actually, making those changes did fix the issues at the collections and albums level, and has fixed part of the issues at the picture level in IE6. The pages don't break at the picture level until you get below the breadcrumbs, where the #inner_wrapper div starts.

To fix this, edit gallery.css once more, making the following change to #inner_wrapper:

From this:
#inner_wrapper {
/* padding: 10px;*/
width: 100%;
margin: 1px;
padding: 1px;
}
To this:
#inner_wrapper {
width: 98%;
margin: 1px;
padding: 1px;
}
The 100% width will work fine in most browsers, but IE seems to choke on it.

Make sure after you make the change that you empty your cache in IE so that you reload the new version of the stylesheet.

You're most welcome - glad it's finally gotten fixed for you. :)