Safari bug in "txt w img articles" using css drive
Posted: Wed 26. May 2004, 03:27
text with image articles has the following structure:
<div><table with image>Text</div
I have detected the bug only on MAC's. In Safari-Browser:
If the text is short and not fully integrate the image, than the next article was not correctly placed below the first article.
sample:
Now I've changed the article creation without using a table by using float css definition:
Here is my solution:
The css values can be changed but the tag attributes has to be used.
// css change fo articleText:
// file: phpwcms_temlpate/inc_css/fontend.css
// important are the margin and padding parameters. There has to be some value for top and bottom
// added two tagnames for image definition
// change code in case 6 of switch statement
// file: include/inc_front/content/cnt1.article.inc.php
// new function added
// file: include/inc_front/front.func.inc.php
Now therything looks fine:
<div><table with image>Text</div
I have detected the bug only on MAC's. In Safari-Browser:
If the text is short and not fully integrate the image, than the next article was not correctly placed below the first article.
sample:
Now I've changed the article creation without using a table by using float css definition:
Here is my solution:
The css values can be changed but the tag attributes has to be used.
// css change fo articleText:
// file: phpwcms_temlpate/inc_css/fontend.css
// important are the margin and padding parameters. There has to be some value for top and bottom
Code: Select all
.articleText {
margin: 0.1em -50px 2em 0;
/* margin: 0 -50px 0 0; */
border-bottom: 1px solid #fff;
padding: 1em 1.5em 1em 0; /*1.5em; */
}
// added two tagnames for image definition
Code: Select all
.floatimageleft {
float: left;
margin: 0 1em 0.5em 0;
}
.floatimageright {
float: right;
margin: 0 0 0.5em 1em;
}
// change code in case 6 of switch statement
// file: include/inc_front/content/cnt1.article.inc.php
Code: Select all
$content["main"] .= ($crow["acontent_text"]) ? div_class(outputImage($phpwcms, $image,"floatimageleft") . $crow["acontent_text"],$template_default["article"]["text_class"]) : outputImage($phpwcms, $image,"floatimageleft");
/*
$icontent = ($crow["acontent_text"]) ? "<br />###image_replace###".div_class($crow["acontent_text"],$template_default["article"]["text_class"]) : "<br />###image_replace###";
$content["main"] .= str_replace("###image_replace###", (($image[6]) ? imagetable($phpwcms, $image, "0:0:0:8", "left") : ""), $icontent);
*/
// new function added
// file: include/inc_front/front.func.inc.php
Code: Select all
function outputImage ($phpwcms, $image, $cssclass="") {
// creates and returns the hole image tag with width and height. I know this should be in the css but how?
$imagename = $phpwcms["content_path"].$phpwcms["cimage_path"].$image[6];
$caption = nl2br(html_specialchars(base64_decode($image[7])));
$image_info = getimagesize(PHPWCMS_ROOT."/".$imagename);
$imagedimensions = $image_info[3]; //width + height
if ($cssclass) {
$imagecss = 'class="' . $cssclass . '"';
} else {
$imagecss = "";
}
if ($image[8]) {
$zoominfo = getimagesize(PHPWCMS_ROOT."/".$phpwcms["file_tmp"].$phpwcms["dir_preview"].$image[2]);
$open_popup_link = "image_zoom.php?show=".base64_encode($image[2]);
$imageString = "<a href=\"".$open_popup_link."\" onClick=\"window.open('".$open_popup_link."','previewpic','width=". $zoominfo[0].",height=".$zoominfo[1]."');return false;\">";
$imageString .= "<img src=\"".$imagename."\" ".$imagewidth. " " . $imagecss . " border=\"0\" alt=\"\" /></a>";
} else {
$imageString = "<img src=\"".$imagename."\" ".$imagewidth. " " . $imagecss . " border=\"0\" alt=\"\" />";
}
return $imageString;
}
Now therything looks fine: