close ad
WARNING: Do Not Install the DREAMWEAVER CC 2017 or 2018 Update »
open ad
View Menu

Technical Support Forums

Free, outstanding support from WebAssist and your colleagues

rating

Grid+Lightbox Displaying Problem Using IE8

Thread began 12/29/2009 8:31 pm by paputxi | Last modified 12/31/2009 12:47 pm by paputxi | 2429 views | 6 replies |

paputxi

Grid+Lightbox Displaying Problem Using IE8

I have successfully integrated PG into my website. I have one gallery that has 15 photos in it and I am displaying it using Grid+Lightbox.

In Firefox, Safari and Chrome browsers, the images display correctly, i.e, with 5 images per row. So, no problem here.

However, in IE8 it displays only 4 images per row. The background layer is grayed such that it indicates that a fifth image should appear (just like in the other browsers), but it doesn't. Rather, the fifth image goes to the next row.

Has anyone else encountered this problem with IE8? If so, how did you resolve it? Thanks in advance.

Sign in to reply to this post

neilo

Make sure that the containing div that holds your gallery include has been assigned a width, and that it is wide enough to contain the five columns. You may need to do a bit of trial and error to set the minimum width without forcing the grid to displace the fifth column.

If you have problems, post a link to your gallery page so we can have a look at it and suggest a remedy.

Sign in to reply to this post

paputxi

The div appears to be okay. You can see what is happening at students0910.php. Again, the problem only appears in IE8. You will see there is space for the fifth image, but it doesn't appear in that space as it does with the other browsers.

Sign in to reply to this post

Eric Mittman

It appears that it is the width that is assigned in the .pg-gl style in the common.css file. The file is the one located here:

common.css

In this file near line 11 is this style:

/* wrapper
--------------------------------------------------*/

.pg-gl {
width: 720px;
font-family: Arial, Helvetica, sans-serif;
background-color: #1e1e1e;
padding: 8px 0 8px 8px;
}



If you adjust the width in here to 725px it looks like it will allow the images to fit.

Sign in to reply to this post

paputxi

Yes, that solved the problem! My issue has been resolved.

Thanks, Eric!

Sign in to reply to this post

neilo

The issue also resolves in IE8 without adjusting the css if you specify a DOCTYPE in the HEAD area. i.e:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">



You should really add the proper heading to your pages as IE gets a bit temperamental without the DOCTYPE being specified.

Sign in to reply to this post

paputxi

Thanks, neilo! That is the best solution. I've now corrected my templates to include that information.

Sign in to reply to this post

Build websites with a little help from your friends

Your friends over here at WebAssist! These Dreamweaver extensions will assist you in building unlimited, custom websites.

Build websites from already-built web applications

These out-of-the-box solutions provide you proven, tested applications that can be up and running now.  Build a store, a gallery, or a web-based email solution.

Want your website pre-built and hosted?

Close Windowclose

Rate your experience or provide feedback on this page

Account or customer service questions?
Please user our contact form.

Need technical support?
Please visit support to ask a question

Content

rating

Layout

rating

Ease of use

rating

security code refresh image

We do not respond to comments submitted from this page directly, but we do read and analyze any feedback and will use it to help make your experience better in the future.

Close Windowclose

We were unable to retrieve the attached file

Close Windowclose

Attach and remove files

add attachmentAdd attachment
Close Windowclose

Enter the URL you would like to link to in your post

Close Windowclose

This is how you use right click RTF editing

Enable right click RTF editing option allows you to add html markup into your tutorial such as images, bulleted lists, files and more...

-- click to close --

Uploading file...