Safari bug in "txt w img articles" using css drive

[habi]

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

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: