• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 313
  • Last Modified:

center an image - position absolute

http://kathrynireland.com/kathrynIreland/recent-projects.html

currently images are left aligned. i need to center them on the page and they're not all the same width. i also don't think i can get rid of position:absolute; in the img style - i did this originally and managed to center the images but my fade transition between images got screwed up until i put position:absolute; back.

here's the container class:

/*projects image rotator*/
.moduletableCraigSlide{
margin:-20px 0 0 0;
padding:0;
width:930px;
float:left;}

here's the img style:

 ul.briask-iss li img {display:none;position:absolute;top:0;padding:0px;left:0;border:none;background:none;margin-left:auto; margin-right:auto; }
0
phillystyle123
Asked:
phillystyle123
  • 2
1 Solution
 
LZ1Commented:
If you take out the absolute positioning it breaks in IE 7, but works in FF.
The easiest thing would be to conditionally comment for IE 7.  
0
 
phillystyle123Author Commented:
it doesn't completely work in ff - the image transition is effected - see how the images don't fade into each other smoothly if the absolute positioning isnt there.
0
 
remorinaCommented:
Hi phillystyle123,
You will need to remove the position:absolute from the image, however in order not to affect the transition, you can try setting the parent element <li> position to absolute and give it appropriate width and text-align:center.

Remove the position:abolute from the class ul.briask-iss li img and update the ul.briask-iss li class as below



ul.briask-iss li {
background:transparent none repeat scroll 0 0;
list-style-image:none;
list-style-position:outside;
list-style-type:none;
margin:0;
padding:0;
position:absolute;
text-align:center;
width:900px;
}

Open in new window

0
 
phillystyle123Author Commented:
genius remorina - worked perfectly - thanks for the help!
0

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now