Forum Moderators: not2easy
Not quite sure if this should go here, the CSS area, or the coding area.
I have a bit of php in a left hand column that randomnly displays an image and other info from a DB. In IE ONLY (big surprise) there is a 10px to 20px of extra space showing beneath the outputted image and text that does not occur with the 2 other sections on the left hand column. Any suggestions?
CSS:
body {width: 100%; height: auto; margin: 0; padding: 0; background: #df451b;}
#wrapper {width: 770px; margin: 0 auto;}
#topnav {width: 746px; height: auto; margin: 0 auto; background: #cccccc; font: bold 90% arial, sans-serif; border-left: 2px solid #ffffff; border-right: 2px solid #ffffff; text-align: center;}
#topnav a:link {margin-right: 5px; color: #333333; text-decoration: none;}
#topnav a:visited {margin-right: 5px; color: #333333; text-decoration: none;}
#topnav a:hover {margin-right: 5px; color: #ffffff; text-decoration: underline;}
#header {float: left; width: 770px; height: 250px; margin: 0; background: url("Images/Page2/header.jpg") no-repeat;}
#container {float: right; width: 748px; margin-right: 5px; margin-left: -230px; background: #f1f2ea url(background.gif) repeat-y right; border-left: 2px solid #ffffff; border-left: 2px solid #ffffff;}
#content {margin-left: 230px; background: #f1f2ea;}
#maincontent {float: right; width: 100%; height: auto; margin: 0; color: #000000;}
#maincontent h1 {margin-top: 10px; padding: 0 20px 0 30px; color: #1e4570; font: bold 100% arial, sans-serif;}
#maincontent p {margin-bottom: 10px; padding: 0 20px 0 30px;}
#subcontent {width: 90%; height: auto; margin: 0 auto; color: #000000; text-align: left;}
#contenta {float: left; width: 50%; height: auto; margin: 0 auto 20px auto; border-right: 2px solid #00224f; text-align: center;}
#contenta p {padding: 0 15px 0 5px; font: normal 80% arial, sans-serif; text-align: left;}
#contentb {float: right; width: 48%; height: auto; margin: 0 auto 20px auto; text-align: center;}
#contentb p {padding: 0 15px; font: normal 80% arial, sans-serif; text-align: left;}
#sidebar {float: left; width: 230px; height: auto; margin-left: 6px; background: #00224f;}
#footer {float: left; width: 750px; height: auto; margin: 0 0 0 5px; padding: 2px 0; background: url("Images/Page2/footer.gif") no-repeat bottom left; text-align: center;}
#footer a:link {margin-right: 5px; color: #cccccc; text-decoration: none;}
#footer a:visited {margin-right: 5px; color: #cccccc; text-decoration: none;}
#footer a:hover {margin-right: 5px; color: #ffffff; text-decoration: underline;}
/* Classes */
.info {float: left; width: 230px; height: auto; color: #000000; font: normal 85% verdana, sans-serif;}
.infoheader {float: left; width: 230px; height: auto; padding: 2px 0; color: #ffffff; text-align: center;}
.infofooter {float: left; width: 230px; height: 30px; background: url("Images/Page2/infofooter.gif") no-repeat top left; color: #ffffff; text-align: center;}
.info a:link {color: #cccccc; text-decoration: none;}
.info a:visited {color: #cccccc; text-decoration: none;}
.info a:hover {color: #ffffff; text-decoration: underline;}
.quicklinks {float: left; width: 200px; height: auto; margin-left: 5px; font: normal 90% arial, sans-serif; text-align: left;}
.results {float: left; width: 135px; height: 100px; margin: 5px 0 0 5px; color: #ffffff; font: normal 80% arial, sans-serif; text-align: left;}
.small {float: left; height: auto; margin-left: 5px; color: #ffffff; font: normal 80% arial, sans-serif; text-align: left;}
HTML:
<div class="info">
<div class="infoheader">
Member Search
</div>
<form action="gainesville-jaycees-search-result.php" method="post">
<div class="small">First, Last, or Company Name</div><br />
<input type="text" size="20" maxlength="60" style="float: left; margin-left: 10px;" />
<input type="image" name="search" src="Images/Page2/go.gif" alt="Start Gainesville Jaycee Member Search" style="float: left; margin-left: 5px;" />
</form>
<div class="infofooter">
</div>
</div>
<!-- Quick Links -->
<div class="info">
<div class="infoheader">
Quick Links
</div>
<div class="quicklinks">
<a href="#" title="Gainesville Florida Jaycees News">News</a><br />
<a href="#" title="Gainesville Florida Jaycees Current Officers">Officers</a><br />
<a href="#" title="Gainesville Florida Jaycees Membership Information">Membership</a><br />
<a href="#" title="Gainesville Florida Jaycees Links">Links</a><br />
<a href="#" title="Gainesville Florida Jaycees Photos">Photo Gallery</a><br />
<a href="#" title="Gainesville Florida Jaycees Contact">Contact Us</a><br />
</div>
<div class="infofooter">
</div>
</div>
<!-- Member Profile -->
<div class="info">
<div class="infoheader">
Meet a Member
</div>
<?php
$username="dbUser";
$password="abc123";
$database="business";
mysql_connect(localhost,$username,$password);
@mysql_select_db($database) or die( "Unable to select database");
$query="SELECT * FROM bus order by busNum asc";
$result=mysql_query($query);
$num=mysql_num_rows($result);
mysql_close();
$number = (rand()%$num);
$x = $number;
$num=mysql_result($result,$x,"busNum");
$first=mysql_result($result,$x,"firstName");
$last=mysql_result($result,$x,"lastName");
$bus=mysql_result($result,$x,"busName");
$web=mysql_result($result,$x,"webSite");
$image=mysql_result($result,$x,"imageLink");
$phone=mysql_result($result,$x,"phoneNum");
$email=mysql_result($result,$x,"email");
?>
<img src="<?php echo $image?>" alt="Gainesville Jaycee Member Picture" style="float: right; margin: 0 5px; border: 1px solid #cccccc;"></img>
<div class="results">
<?php
echo "Name: $first $last<br />Company: $bus<br />Website: $web<br />Phone: $phone<br />";
?>
</div>
</div>
Thanks,
Kevin
Based just on your description of the problem, and in which browser it occurs, it sounds like IE is adding a default margin (or padding) that you weren't expecting. IE is notorious for this; it's default margins are all over the place, and unless explicitly countered can wreak havoc on a layout.
Double check the dynamically added content and see if you've 'zeroed out' the margins (and padding) on those elements. If not, do it and see if it helps.
You might also check to be sure that the DB data being inserted doesn't have extra tags in it (<br />s or unclosed <p>s) that might be adding unwanted space.
If this doesn't work, pare down the code in your post to just the relevant parts so it's not quite so Herculean a task to look it over.
<img src="<?php echo $image?>" alt="Gainesville Jaycee Member Picture" style="float: right; margin: 0 5px; border: 1px solid #cccccc;"></img>
