 Image Alignment Issues with IE7 |
  |
| TommyZed |
  Aug 21 2008, 09:02 PM
Post
#1
|
|
Group: Members Posts: 1 Joined: 21-August 08 Member No.: 6,469  |
I'm working on a site for a customer - it's pretty basic, but I'm having an image alignment issue. Stop me if you've heard this before - it looks perfect in both Safari and Firefox (both PC and Mac), but it's all messed up in IE7! It's such a simple table, I can't figure out what's wrong. To make matters worse, I even loaded the page in Microsoft's very own Frontpage, and it looks correct. Just not in IE7.
Code is below. And the production site (frame) is here: http://www.aphsf.com/Mural/mural.htm Thanks for any help! --- <!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>About the Mural</title> <style type="text/css"> <!-- .style3 {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 14px; } --> </style> </head> <body background="../images/paws_bg30.gif"> <table width="880" border="0" cellspacing="5" cellpadding="5"> <tr> <td width="1"> </td> <td colspan="6"><p align="center" class="style1">About the Mural</p> <p align="left" class="style3">The All Pets Hospital mural was designed and painted in 2005 by Precita Eyes Mural Arts Association - a community-based mural arts organization located in San Francisco's Mission District. </p> <p align="left" class="style3">Established in 1977, Precita Eyes is responsible for over 80 local murals as well as collaboration on projects not only in other San Francisco neighborhoods but also as far afield as Spain, Russia, and Brazil.</p> <p align="left" class="style3">The A.P.H. mural - designed by Susan Kelk Cervantes - is based on some of the real life pets that have either belonged to staff members or have visited the hospital: Reese the gentle Golden Retriever, Wally the feisty macaw, Sammy the toucan, Sophie the turtle, and Sam the cat-with-an-attitude. (Characteristically, Lester the chameleon is rather hard to find). </p> </td> </tr> <tr> <td> </td> <td colspan="3"><img src="http://www.aphsf.com/Mural/1.jpg" align="right"/></td> <td colspan="3"><img src="http://www.aphsf.com/Mural/2.jpg"/></td> </tr> <tr> <td> </td> <td colspan="2"><img src="http://www.aphsf.com/Mural/3.jpg"/></td> <td colspan="2"><img src="http://www.aphsf.com/Mural/4.jpg"/></td> <td colspan="2"><img src="http://www.aphsf.com/Mural/5.jpg"/></td> </tr> <tr> <td> </td> <td colspan="2"><img src="http://www.aphsf.com/Mural/6.jpg"/></td> <td colspan="2"><img src="http://www.aphsf.com/Mural/7.jpg"/></td> <td colspan="2"><img src="http://www.aphsf.com/Mural/8.jpg"/></td> </tr> <tr> <td> </td> <td colspan="6"><div align="center" class="style3"> <p>Precita Eyes muralists: Suaro Cervantes (above, center), Fred Alvarado (below, left)</p> <p>Assisted by: Susan K. Cervantes (above, right), Clair Bain, Naomi and Jane.</p> <p>All Photos: 2005/2008 Ted Rajfur</p> </div></td> </tr> <tr> <td> </td> <td colspan="3"><img src="http://www.aphsf.com/Mural/9.jpg" align="right"/></td> <td colspan="3"><img src="http://www.aphsf.com/Mural/10.jpg"/></td> </tr> <tr> <td> </td> <td colspan="6" align="center"><img src="http://www.aphsf.com/Mural/11.jpg"/></td> </tr> </table> </body> </html> |
  |
 
|
| Hefty |
Aug 21 2008, 09:46 PM
Post
#2
|
|
Member  Group: Members Posts: 48 Joined: 30-November 07 Member No.: 4,440 |
http://validator.w3.org/
I see what your saying, so instead of using tables I recommend you use <div> tags to do this. Much better. Also to center your images just set a margin-left to one <div> tag wrapping all images. Cw.Riess@gmail.com if you need help. For example: (This works fine for me in all browsers and its perfectly center in middle of page.) CODE <!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"> <head> <title></title> <style type="text/css"> #imgwrap1 { float: left; margin-left: 300px; } .set1 img { margin: 5px; } </style> </head> <body> <div id="imgwrap1"> <div class="set1"> <img src="http://www.aphsf.com/Mural/3.jpg"> <img src="http://www.aphsf.com/Mural/4.jpg"> <img src="http://www.aphsf.com/Mural/5.jpg"> </div> </div> </body> </html> ~Hope this helps, Hefty. This post has been edited by Hefty: Aug 21 2008, 10:01 PM |
|
|
|
| poojak |
Aug 21 2008, 10:25 PM
Post
#3
|
|
Newbie Group: Members Posts: 15 Joined: 4-August 08 Member No.: 6,331 |
Hi,
There were some problem in image alignmnet, you have given image alignment right and it was causing problem. Alos the table structure was not right. try the below given code i hope it will work. <!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>About the Mural</title> <style type="text/css"> <!-- .style3 {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 14px; } body,td,th { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 14px; } --> </style> </head> <body background="../images/paws_bg30.gif"> <table width="880" border="0" cellspacing="5" cellpadding="5"> <tr> <td> </td> <td colspan="3"> <p align="center" class="style1">About the Mural</p> <p align="left" class="style3">The All Pets Hospital mural was designed and painted in 2005 by Precita Eyes Mural Arts Association - a community-based mural arts organization located in San Francisco's Mission District. </p> <p align="left" class="style3">Established in 1977, Precita Eyes is responsible for over 80 local murals as well as collaboration on projects not only in other San Francisco neighborhoods but also as far afield as Spain, Russia, and Brazil.</p> <p align="left" class="style3">The A.P.H. mural - designed by Susan Kelk Cervantes - is based on some of the real life pets that have either belonged to staff members or have visited the hospital: Reese the gentle Golden Retriever, Wally the feisty macaw, Sammy the toucan, Sophie the turtle, and Sam the cat-with-an-attitude. (Characteristically, Lester the chameleon is rather hard to find). </p> </td> </tr> <tr> <td> </td> <td colspan="3" style="text-align:left;" align="left"> <img src="http://www.aphsf.com/Mural/1.jpg" hspace="0" align="left"/> <img src="http://www.aphsf.com/Mural/2.jpg"/> </td> </tr> <tr> <td> </td> <td><img src="http://www.aphsf.com/Mural/3.jpg"/></td> <td><img src="http://www.aphsf.com/Mural/4.jpg"/></td> <td><img src="http://www.aphsf.com/Mural/5.jpg"/></td> </tr> <tr> <td> </td> <td><img src="http://www.aphsf.com/Mural/6.jpg"/></td> <td><img src="http://www.aphsf.com/Mural/7.jpg"/></td> <td><img src="http://www.aphsf.com/Mural/8.jpg"/></td> </tr> <tr> <td> </td> <td colspan="3" align="center"><p>Precita Eyes muralists: Suaro Cervantes (above, center), Fred Alvarado (below, left)</p> <p>Assisted by: Susan K. Cervantes (above, right), Clair Bain, Naomi and Jane.</p> <p>All Photos: 2005/2008 Ted Rajfur</p></td> </tr> <tr> <td> </td> <td colspan="3"><img src="http://www.aphsf.com/Mural/9.jpg" align="left"/> <img src="http://www.aphsf.com/Mural/10.jpg"/> </td> </tr> <tr> <td> </td> <td colspan="3" align="center"><img src="http://www.aphsf.com/Mural/11.jpg"/></td> </tr> </table> </body> </html> Best of luck Pooja QUOTE structure was not right. try the below given code i hope it will work. <!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>About the Mural</title> <style type="text/css"> <!-- .style3 {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 14px; } body,td,th { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 14px; } --> </style> </head> <body background="../images/paws_bg30.gif"> <table width="880" border="0" cellspacing="5" cellpadding="5"> <tr> <td> </td> <td colspan="3"> <p align="center" class="style1">About the Mural</p> <p align="left" class="style3">The All Pets Hospital mural was designed and painted in 2005 by Precita Eyes Mural Arts Association - a community-based mural arts organization located in San Francisco's Mission District. </p> <p align="left" class="style3">Established in 1977, Precita Eyes is responsible for over 80 local murals as well as collaboration on projects not only in other San Francisco neighborhoods but also as far afield as Spain, Russia, and Brazil.</p> <p align="left" class="style3">The A.P.H. mural - designed by Susan Kelk Cervantes - is based on some of the real life pets that have either belonged to staff members or have visited the hospital: Reese the gentle Golden Retriever, Wally the feisty macaw, Sammy the toucan, Sophie the turtle, and Sam the cat-with-an-attitude. (Characteristically, Lester the chameleon is rather hard to find). </p> </td> </tr> <tr> <td> </td> <td colspan="3" style="text-align:left;" align="left"> <img src="http://www.aphsf.com/Mural/1.jpg" hspace="0" align="left"/> <img src="http://www.aphsf.com/Mural/2.jpg"/> </td> </tr> <tr> <td> </td> <td><img src="http://www.aphsf.com/Mural/3.jpg"/></td> <td><img src="http://www.aphsf.com/Mural/4.jpg"/></td> <td><img src="http://www.aphsf.com/Mural/5.jpg"/></td> </tr> <tr> <td> </td> <td><img src="http://www.aphsf.com/Mural/6.jpg"/></td> <td><img src="http://www.aphsf.com/Mural/7.jpg"/></td> <td><img src="http://www.aphsf.com/Mural/8.jpg"/></td> </tr> <tr> <td> </td> <td colspan="3" align="center"><p>Precita Eyes muralists: Suaro Cervantes (above, center), Fred Alvarado (below, left)</p> <p>Assisted by: Susan K. Cervantes (above, right), Clair Bain, Naomi and Jane.</p> <p>All Photos: 2005/2008 Ted Rajfur</p></td> </tr> <tr> <td> </td> <td colspan="3"><img src="http://www.aphsf.com/Mural/9.jpg" align="left"/> <img src="http://www.aphsf.com/Mural/10.jpg"/> </td> </tr> <tr> <td> </td> <td colspan="3" align="center"><img src="http://www.aphsf.com/Mural/11.jpg"/></td> </tr> </table> </body> </html> |
|
|
|
|
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:
|
Lo-Fi Version | Time is now: 24th April 2024 - 11:04 PM |
Invision Power Board
© 2024 IPS, Inc.
Licensed to: HTMLHelp.com, LLC