I have something like this
These column's content(the middle box of each columns) will be generated from the server so I don't know how many lines they have. This design will repeat in many pages and some of these pages have less column so I need to add a class for the width of these columns.
Some columns have different style like the second column from the right - it has red header and a little margin from bottom.
I need to count all the possibilities for any type of data and this is my code:
<ul class="col styleCol5">
<li class="col5">
<h2 class="col5Header colHeader"><span>خلاصه محصول</span></h2>
<div class="col5Content colContent">
<span><span class="red">1.</span> نیازمند یک وکیل و کارگزار متخصص و امین جهت سرمایهگذاری وجوه خود و بهرهمندی از عواید حاصل از این سرمایهگذاری میباشید.</span>
<br>
<span><span class="red">2.</span> به دنبال سپردهگذاری در حالتهای مختلف و شرایط متنوع هستید.</span>
</div>
<div class="col5More colMore">
<span><a href="javascript:void">بیشتر</a></span><a href="javascript:void(0)"></a>
</div>
</li>
<li class="col5">
<h2 class="col5Header colHeader"><span>شرح کامل محصول</span></h2>
<div class="col5Content colContent">
<span class="red closedTitle">یک فرصت سرمایه گذاری بدون ریسک با بالاترین سود علیالحساب</span>
<span>سپردهسرمایهگذاری رویان مهر یکی از مجموعه سپردههای سرمایهگذاری مؤسسه مالی و اعتباری مهر است که ...</span>
</div>
<div class="col5More colMore">
<span><a href="javascript:void">بیشتر</a></span><a href="javascript:void(0)"></a>
</div>
</li>
<li class="col5">
<h2 class="col5Header colHeader"><span>نرخ سود</span></h2>
<div class="col5Content colContent nerkh">
<span>مشاهده جدول مقاطع زمانی دریافت سود در سپرده رویان مهر...</span>
<span class="table"><a href="javascript:void(0)">جدول نرخ سود</a></span>
</div>
<div class="col5More colMore">
<span><a href="javascript:void">بیشتر</a></span><a href="javascript:void(0)"></a>
</div>
</li>
<li class="col5">
<h2 class="col5Header colHeader"><span>محاسبات مالی</span></h2>
<div class="col5Content colContent mali">
<span>نرم افزار محاسبه سود سرمایه. نرم افزار محاسبه سود سرمایه.</span>
<span class="softwareMali"><a href="javascript:void(0)">مشاهده نرم افزار</a></span>
</div>
<div class="col5More colMore">
<span><a href="javascript:void">بیشتر</a></span><a href="javascript:void(0)"></a>
</div>
</li>
<li class="col5">
<h2 class="col5Header colHeader"><span>نکات مهم</span></h2>
<div class="col5Content colContent">
<span>سپرده سرمایهگذاری سما یکی از مجموعه سپردههای سرمایهگذاری مؤسسه مالی و اعتبار مؤسسه مالییهای سرمایهگذاری مؤسسه ما مهر است که سپردهگذار با افتتاح حساب سرمایهگذاری به مؤسسه وکالت عام میدهد تا سرمایه ...</span>
</div>
<div class="col5More colMore">
<span><a href="javascript:void">بیشتر</a></span><a href="javascript:void(0)"></a>
</div>
</li>
</ul
>
With JQUERY I add some padding or margins to necessary classes:
$("span.closedTitle").after("<br><br>");
$(".colContent.nerkh > span, .colContent.mali > span").prepend("<br>");
$(".colContent.nerkh span.table, .colContent.mali span.softwareMali").prepend("<br><br><br>");
I do it with BR
tag because I need the space to seem like line spaces and I don't want to add fixed height so I use BR
tag.
It works except IE 8, it ignores the BR
tag.
What should I do ? Thanks.