Help - Search - Members - Calendar
Full Version: Image Alignment Issues with IE7
HTMLHelp Forums > Web Authoring > Markup (HTML, XHTML, XML)
TommyZed
Aug 21 2008, 09:02 PM
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
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.
poojak
Aug 21 2008, 10:25 PM
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>&nbsp;</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>&nbsp;</td>
<td colspan="3" style="text-align:left;" align="left">
<img src="http://www.aphsf.com/Mural/1.jpg" hspace="0" align="left"/>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<img src="http://www.aphsf.com/Mural/2.jpg"/> </td>
</tr>
<tr>
<td>&nbsp;</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>&nbsp;</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>&nbsp;</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>&nbsp;</td>
<td colspan="3"><img src="http://www.aphsf.com/Mural/9.jpg" align="left"/>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<img src="http://www.aphsf.com/Mural/10.jpg"/> </td>
</tr>
<tr>
<td>&nbsp;</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>&nbsp;</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>&nbsp;</td>
<td colspan="3" style="text-align:left;" align="left">
<img src="http://www.aphsf.com/Mural/1.jpg" hspace="0" align="left"/>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<img src="http://www.aphsf.com/Mural/2.jpg"/> </td>
</tr>
<tr>
<td>&nbsp;</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>&nbsp;</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>&nbsp;</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>&nbsp;</td>
<td colspan="3"><img src="http://www.aphsf.com/Mural/9.jpg" align="left"/>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<img src="http://www.aphsf.com/Mural/10.jpg"/> </td>
</tr>
<tr>
<td>&nbsp;</td>
<td colspan="3" align="center"><img src="http://www.aphsf.com/Mural/11.jpg"/></td>
</tr>
</table>
</body>
</html>

This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2010 Invision Power Services, Inc.