Помогнете ми да го направя да изглежда правилно под opera

[hisar]

Зравейте значи имам един стил който съдържа коментари в него обаче ми се разминава стила в opera в google chrome е наред и под Mozilla всичко е наред но под Opera изглежда много зле ето какво имам предвид:

Под google chrome & Mozilla:

Под Opera

Html:

<div id='post_comm'>
                           <img width='48' height='48' src='img/users_avatars/name/hisar.jpg' />
			<div style='margin-left:5px; float: right; text-align: left; margin-right: 375px;'><b>Hisar</b> - ".$rw['added_by']."</div>
			<div id='bbd'>Тук е коментара</div>
		</div><br />

Css:

#post_comm {
	background: #f3f3f3;
	max-width: 532px;
	height: auto;
	padding-bottom: 15px;
	font-size: 12px;
	margin-left: 4px;
	padding-top: 3px;
	padding-left: 3px;
}

#post_comm span {
	font-size: 13px;
	color: #545454;
}

 

[shterev]

задай на снимката disply:block; float:left;

 

[hisar]

Нестава прави проблеми

 

[hpstuff]

има css пропарти padding: кадето задаваш top right bottom left много нечетливо е да пишеш всеки по отделно, height: auto; е дефолтно (освен ако не наследяваш друга височина от някаде) , няма нужда да слагаш толкова div-ове и сега да дойдем на въпрова ако искаш да подредиш текст около, до картинка трябва да се съсредоточиш върху нея ,а не върху елемента с текста. Цялата работа се оправя с едно <img align="left" /> или float: left; в css-a ,а на дива или каквото и да слагаш до нея не трябва да има никакъв float и текста сам се нарежда до нея ето ти резултата.

<style>
    #post_comm { 
       background: #f3f3f3; 
       max-width: 532px; 
       font-size: 12px; 
       margin-left: 4px; 
       padding: 3px;
       overflow: hidden;
    }
    #post_comm img {
        float: left;
        margin-right: 10px; 
    }
</style>
<div id="post_comm"> 
    <img width="48" height="48" src="http://dummyimage.com/48x48" /> 
    <div><strong>Hisar</strong> - 17.08.2010<br />
    lorem ipsum dolor</p></div>
</div>

 

[shterev]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title> Добре дошли!</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<style>
		 #post_comm {
		   background: #f3f3f3;
		   max-width: 532px;
		   padding:3px;
		   font-size: 12px;
		   margin-left: 4px;
		}

		#post_comm span {
		   font-size: 13px;
		   color: #545454;
		}

.image{
	display:block;
	float:left;
}

.comments{
	padding:0 0 0 5px;
	float:left;
}

	</style>
</head>
	<body>
		<div id='post_comm'>
			<img class="image" width='48' height='48' src='img/users_avatars/name/hisar.jpg' />
			<div class="comments">
				<b>Hisar</b> - 17.08.2010
				<div id='bbd'>Тук е коментара</div>
			</div>
			<div style="clear:both;"></div>
      </div>
	</body>
</html>

Това работи

 

[relax15pyt]

Да знаеш, че и доктайпа зависи и е нужен.