PDA

View Full Version : Image Alignment / Trimming problem in IE



stoppress121
Jan 21st, 2009, 10:44 PM
Hey there;

I have a website which features a rolling image header - which displays fine in all browsers apart from IE. It appears to right align off the page, while trimming some of the left of the photo off in the process.

My current workaround is just to block the photos from IE altogether, bit I am hoping this is only very temporary.

The HTML is at http://www.envisionbedford.co.uk/index.html, and the css at http://www.envisionbedford.co.uk/style.css

Any help would be greatly appreciated - and any more info required, just ask!

Thanks, Michael H

EDIT: Bringing some of the code over here for you.


<div class="headerphoto">
<ul id="headerphoto">
<li>
<a href="#BedfordTradeFair">
<img src="images/header/tradefair.png" alt="Bedford Trade Fair" class="center" /> </a>
</li>
<li>
<a href="products.html">
<img src="images/header/draughtexcluders.png" alt="Draught Excluders Product Page" /> </a>
</li>
<li>
<a href="products.html"> </a><a href="team.html"><img src="images/header/team.png" alt="Meet the Team" /></a>
</li>

<li>
<a href="company.html">
<img src="images/header/company.png" alt="About the Company" /> </a>
</li>
</ul>

</div>


/* header photo */
.headerphoto{
width: 770px;
height: 200px;
margin: auto;
background: #FFF;
}

.headerphoto img {
padding: auto;
border: none;
margin: auto auto auto -40px;
}

.headerphoto li {
list-style-type:none;
}

abduraooft
Jan 22nd, 2009, 08:57 AM
Fix all the errors in your markup first, see http://validator.w3.org/check?uri=http%3A%2F%2Fwww.envisionbedford.co.uk%2Findex.html&charset=%28detect+automatically%29&doctype=Inline&group=0

The conditional comments should be of the form

<!--[if IE 6]>
Special instructions for IE 6 here
<![endif]-->