Hi!
i've got a picture that's display in a table. In IE, there's no problem but in FF, i always have a 1px at the bottom of the picture.
Here's the css:
body { margin: 0px; padding: 0px; font: bold 10px Courier New, Courier, mono; color: #FFFFFF; background: #9A968A; }
img { border: none; }
#view { width: 100%; height: 100%; }
#head { clear: left; overflow: hidden; margin: 0px auto; padding: 50px 0px 10px 0px; width: 260px; border-bottom: 1px dashed #FFFFFF; text-align: center; }
#logo { float: left; width: 130px; text-align: left; }
#menu { float: left; width: 130px; text-align: right; }
#body { clear: left; margin: 0px auto; width: 440px; height: 440px; text-align: center; }
#parent { width: 440px; height: 440px; }
#child { margin: 0px auto; padding: 0px; text-align: center; vertical-align: middle; font-size: 1px; }
#frame_tl { width: 20px; height: 20px; background: url("../images/frame_tl.gif") no-repeat top left; }
#frame_tr { width: 20px; height: 20px; background: url("../images/frame_tr.gif") no-repeat top left; }
#frame_br { width: 20px; height: 20px; background: url("../images/frame_br.gif") no-repeat top left; }
#frame_bl { width: 20px; height: 20px; background: url("../images/frame_bl.gif") no-repeat top left; }
#frame_t { height: 20px; background: url("../images/frame_t.gif") repeat-x top left; }
#frame_r { width: 20px; background: url("../images/frame_r.gif") repeat-y top left; }
#frame_b { height: 20px; background: url("../images/frame_b.gif") repeat-x top left; }
#frame_l { width: 20px; background: url("../images/frame_l.gif") repeat-y top left; }
#foot { clear: left; margin: 0px auto; padding: 10px 0px 10px 0px; width: 260px; border-top: 1px dashed #FFFFFF; text-align: center; }
#foot div { float: left; width: 26px; height: 14px; text-align: center; }
#foot div a { color: #FFFFFF; text-decoration: none; }
#foot div a:hover { color: #D6D1C3; text-decoration: none; }
#select { float: left; background: #FFFFFF; color: #9A968A; }
and the page .php:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>maevadesign.com ::: cré—ÂÂå³µions . 2003</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css" title="2004">@import "includes/style.css";</style>
<link rel="shortcut icon" href=http://www.webdeveloper.com/forum/archive/index.php/"favicon.ico" />
</head>
<body>
<?
$pic = array("01","02","03","04","05","06","07","08","09","10","11","12","13","14","15","16","17","18","19");
if(!isset($id)){
$random = array_rand($pic);
$id = "0".$pic[$random];
}
?>
<div id="head">
<div id="logo"> </div>
<div id="menu"><a href=http://www.webdeveloper.com/forum/archive/index.php/"contact.php"><img src="images/btn_contact.gif" alt="Contact" /></a></div>
</div>
<div id="body">
<table id="parent" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<table id="child" border="0" cellspacing="0" cellpadding="0">
<tr>
<td id="frame_tl"> </td>
<td id="frame_t"> </td>
<td id="frame_tr"> </td>
</tr>
<tr>
<td id="frame_l"> </td>
<td><img src=http://www.webdeveloper.com/forum/archive/index.php/"media/photos/2003_<?=$id?>.jpg" alt="<?=$id?>" /></td>
<td id="frame_r"> </td>
</tr>
<tr>
<td id="frame_bl"> </td>
<td id="frame_b"> </td>
<td id="frame_br"> </td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<div id="foot">
<?
foreach($pic as $value){
if($value == "0".$id){
echo "<div id=\"select\">0".$value."</div>";
}else{
echo "<div><a href=http://www.webdeveloper.com/forum/archive/index.php/\"index.php?id=0".$value."\">0".$value."</a></div>";
}
}
?>
</div>
</body>
</html>
thank for the help!
turbThis is often because Gecko (correctly) applies inline display to the img tag. One fix is img { display:block; } in that case. Of course that may be too global and may need to be qualified inside particular ids.or to save the hassle of changing the PHP a class could be used...
<img src=http://www.webdeveloper.com/forum/archive/index.php/"media/photos/2003_<?=$id?>.jpg" class="rndImg" alt="<?=$id?>" />
.rndImg {
display: block;
}
i've got a picture that's display in a table. In IE, there's no problem but in FF, i always have a 1px at the bottom of the picture.
Here's the css:
body { margin: 0px; padding: 0px; font: bold 10px Courier New, Courier, mono; color: #FFFFFF; background: #9A968A; }
img { border: none; }
#view { width: 100%; height: 100%; }
#head { clear: left; overflow: hidden; margin: 0px auto; padding: 50px 0px 10px 0px; width: 260px; border-bottom: 1px dashed #FFFFFF; text-align: center; }
#logo { float: left; width: 130px; text-align: left; }
#menu { float: left; width: 130px; text-align: right; }
#body { clear: left; margin: 0px auto; width: 440px; height: 440px; text-align: center; }
#parent { width: 440px; height: 440px; }
#child { margin: 0px auto; padding: 0px; text-align: center; vertical-align: middle; font-size: 1px; }
#frame_tl { width: 20px; height: 20px; background: url("../images/frame_tl.gif") no-repeat top left; }
#frame_tr { width: 20px; height: 20px; background: url("../images/frame_tr.gif") no-repeat top left; }
#frame_br { width: 20px; height: 20px; background: url("../images/frame_br.gif") no-repeat top left; }
#frame_bl { width: 20px; height: 20px; background: url("../images/frame_bl.gif") no-repeat top left; }
#frame_t { height: 20px; background: url("../images/frame_t.gif") repeat-x top left; }
#frame_r { width: 20px; background: url("../images/frame_r.gif") repeat-y top left; }
#frame_b { height: 20px; background: url("../images/frame_b.gif") repeat-x top left; }
#frame_l { width: 20px; background: url("../images/frame_l.gif") repeat-y top left; }
#foot { clear: left; margin: 0px auto; padding: 10px 0px 10px 0px; width: 260px; border-top: 1px dashed #FFFFFF; text-align: center; }
#foot div { float: left; width: 26px; height: 14px; text-align: center; }
#foot div a { color: #FFFFFF; text-decoration: none; }
#foot div a:hover { color: #D6D1C3; text-decoration: none; }
#select { float: left; background: #FFFFFF; color: #9A968A; }
and the page .php:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>maevadesign.com ::: cré—ÂÂå³µions . 2003</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css" title="2004">@import "includes/style.css";</style>
<link rel="shortcut icon" href=http://www.webdeveloper.com/forum/archive/index.php/"favicon.ico" />
</head>
<body>
<?
$pic = array("01","02","03","04","05","06","07","08","09","10","11","12","13","14","15","16","17","18","19");
if(!isset($id)){
$random = array_rand($pic);
$id = "0".$pic[$random];
}
?>
<div id="head">
<div id="logo"> </div>
<div id="menu"><a href=http://www.webdeveloper.com/forum/archive/index.php/"contact.php"><img src="images/btn_contact.gif" alt="Contact" /></a></div>
</div>
<div id="body">
<table id="parent" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<table id="child" border="0" cellspacing="0" cellpadding="0">
<tr>
<td id="frame_tl"> </td>
<td id="frame_t"> </td>
<td id="frame_tr"> </td>
</tr>
<tr>
<td id="frame_l"> </td>
<td><img src=http://www.webdeveloper.com/forum/archive/index.php/"media/photos/2003_<?=$id?>.jpg" alt="<?=$id?>" /></td>
<td id="frame_r"> </td>
</tr>
<tr>
<td id="frame_bl"> </td>
<td id="frame_b"> </td>
<td id="frame_br"> </td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<div id="foot">
<?
foreach($pic as $value){
if($value == "0".$id){
echo "<div id=\"select\">0".$value."</div>";
}else{
echo "<div><a href=http://www.webdeveloper.com/forum/archive/index.php/\"index.php?id=0".$value."\">0".$value."</a></div>";
}
}
?>
</div>
</body>
</html>
thank for the help!
turbThis is often because Gecko (correctly) applies inline display to the img tag. One fix is img { display:block; } in that case. Of course that may be too global and may need to be qualified inside particular ids.or to save the hassle of changing the PHP a class could be used...
<img src=http://www.webdeveloper.com/forum/archive/index.php/"media/photos/2003_<?=$id?>.jpg" class="rndImg" alt="<?=$id?>" />
.rndImg {
display: block;
}