[WSG] help with picture alignment in CSS
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
*///
///
.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;
}
*///
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]
***
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
*///
///
.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;
}
*///
///
myhosting.com - Premium Microsoft(r) Windows(r) and Linux web and
application
hosting - http://link.myhosting.com/myhosting
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
Re: [WSG] help with picture alignment in CSS
On 2/10/08, [EMAIL PROTECTED] <[EMAIL PROTECTED]> wrote: > > > 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 > > > > */// > /// > >
Re: [WSG] help with picture alignment in CSS
On xp windows I see the thumbs half in the white area rest in right brown.in
ie7 and firefox
Moving .gallerycontainer position to less 200? if you want them in white and
changing .thumbnail:hover SPAN to suit?
Bruce
bkdesign
- Original Message -
From: <[EMAIL PROTECTED]>
To:
Sent: Monday, February 11, 2008 12:41 AM
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
*///
///
.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;
}
*///
///
myhosting.com - Premium Microsoft® Windows® and Linux web and application
hosting - http://link.myhosting.com/myhosting
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
[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
*///
///
.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;
}
*///
///
myhosting.com - Premium Microsoft® Windows® and Linux web and application
hosting - http://link.myhosting.com/myhosting
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
