CSS and PHP - Image/text does not align properly in IE7, but does in FF/Opera/etc

Okay, first things first, I'll include a image so you can see what I am talking about. This is an issue with CSS styles.

Basicly what is occuring is in IE7, the writing is being shifted over. I want it to look like the top example, where the 'FEATURED' 'hovers' just on the top left of the image and the wording is to the right of the thumbnail.

In other browsers, it seems to be just fine. I do have
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Declared.. I will post the featured coding however! Maybe someone can give me some advice. basicly this coding LOOPS to create the actual featured listing with thumbnail and wording, etc. but what I'm really looking at I suppose is the 'style' that is declared here twice, you will see it below!
foreach($data as $d){
 
 
    echo "<li style='float:left;width:280px;list-style:none;padding:10px;margin:10px'>
    			<a href='index.php?option=website&task=view_sale&id={$d[id]}'>
    			<div style='position:absolute;margin-left:-18px;margin-top:-9px'>
    				<img src='photos/featured.gif' alt='Featured' border=0>
    			</div>
    			<img align='left' src='http://open.thumbshots.org/image.pxf?url={$d[site_name]}' border=1 hspace=10 width=120 height=90></a>
    			<div style='position:absolute;margin-left:140px;margin-top:0px'>
    			<a href='index.php?option=website&task=view_sale&id=$d[id]'>$d[site_name]</a><br>
    			For {$d[price]}$<br>
				</div>
    	 </li>";
 
 if(++$n>=2) break;
}

Open in new window

issue.jpg
LVL 7
VallerianiAsked:
Who is Participating?
 
ecommCommented:
Hi,

Try the attached code, it should resolve the problem in IE and keep working in FireFox.

Spencer



foreach($data as $d){
 
 
    echo "<li style='float:left;position:relative;width:280px;list-style:none;padding:10px;margin:10px'>
                        <a href='index.php?option=website&task=view_sale&id={$d[id]}'>
                        <div style='position:absolute;left:0px;top:0px;'>
                                <img src='photos/featured.gif' alt='Featured' border=0>
                        </div>
                        <img align='left' src='http://open.thumbshots.org/image.pxf?url={$d[site_name]}' border=1 hspace=10 width=120 height=90></a>
                        <div style='position:absolute;top:10px;left:150px;'>
                        <a href='index.php?option=website&task=view_sale&id=$d[id]'>$d[site_name]</a><br>
                        For {$d[price]}$<br>
                                </div>
         </li>";
 
 if(++$n>=2) break;
}

Open in new window

0
 
qwerty021600Commented:
Reduce the margin given for the text next to Yahoo and Google.
0
 
VallerianiAuthor Commented:
Ahhhh damn, was the second div then, perfect! This worked great!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.