Thanks everyone for your suggestions. I haven't had a chance to look at it but plan on tomorrow.
tg ----- Original Message ----- From: Likely, James A. To: wsg@webstandardsgroup.org Sent: Monday, February 11, 2008 9:38 AM Subject: RE: [WSG] help with picture alignment in CSS Hello, The problem is that you are using absolute positioning for the .gallerycontainer and on your browser I am sure that it looks fine but if the user or client has the resolution set lower then everything gets moved except for the content that is in .gallerycontainer. Try to resize your browser and see what happens. A suggestions is to try something like this http://wisconsin.joekiosk.com/testing/test.html The other problem you were having is that you were positioning the larger image based on your browser size. Hope this helps. James -----Original Message----- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of [EMAIL PROTECTED] Sent: Sunday, February 10, 2008 11:41 PM To: wsg@webstandardsgroup.org Subject: [WSG] help with picture alignment in CSS Hello, I have a site here that I've been trying to add some pictures to. I have IE7 and Firefox and it looks good but my client is seeing things different with her IE. The pictures at the bottom, 6 of them should be lined up all in a row but are not. I put the code I am using inside the page and in this email. Can someone take a look and let me know if they can see what is going on here. Thanks.....tg Here is the link: http://www.rejuvenatespas.com/test.html */////////////////////////////////////////////////////////////////////// //// /////////////////////////////////////// <style type="text/css"> .gallerycontainer{ position: absolute; /*Add a height attribute and set to largest image's height to prevent overlaying*/ left: 430px; } .thumbnail img{ border: 1px solid white; margin: 0 5px 5px 0; } .thumbnail:hover{ background-color: transparent; } .thumbnail:hover img{ border: 1px solid gray; } .thumbnail span{ /*CSS for enlarged image*/ position: absolute; background-color: lightyellow; padding: 5px; left: -1000px; border: 1px dashed black; visibility: hidden; color: black; text-decoration: none; } .thumbnail span img{ /*CSS for enlarged image*/ border-width: 0; padding: 2px; } .thumbnail:hover span{ /*CSS for enlarged image*/ visibility: visible; bottom: 0; left: 300px; /*position where enlarged image should offset horizontally */ z-index: 50; } </style> */////////////////////////////////////////////////////////////////////// -------------------------------------------------------------------- mail2web.com – Enhanced email for the mobile individual based on Microsoft® Exchange - http://link.mail2web.com/Personal/EnhancedEmail ******************************************************************* List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *******************************************************************
