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]
*******************************************************************

Reply via email to