Solved

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

Posted on 2009-04-01
3
583 Views
Last Modified: 2013-12-08
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
0
Comment
Question by:Valleriani
3 Comments
 
LVL 3

Accepted Solution

by:
ecomm earned 500 total points
Comment Utility
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
 
LVL 13

Expert Comment

by:qwerty021600
Comment Utility
Reduce the margin given for the text next to Yahoo and Google.
0
 
LVL 7

Author Closing Comment

by:Valleriani
Comment Utility
Ahhhh damn, was the second div then, perfect! This worked great!
0

Featured Post

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

Suggested Solutions

SSL stands for “Secure Sockets Layer” and an SSL certificate is a critical component to keeping your website safe, secured, and compliant. Any ecommerce website must have an SSL certificate to ensure the safe handling of sensitive information like…
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.

772 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now