ListView - item template style - differences between browsers
This is a follow up to my previous question ( ListView is ItemTemplate table style ). I am still trying to make the ItemTemplate like this:
______________________________________________
| |___________Title_____________|
| Image |____________Name_____________|
| |______Value_____|____Value___|
|_______________|______Value_____|____Value___|
It works fine in Chrome and Opera, but there are problems in other browsers.
Firefox:
______________________________________________
| _____________ | |
|| Image | | |
|| | | |
||____________| |___________Title_____________|
| |____________Name_____________|
| |______Value_____|____Value___|
|_______________|______Value_____|____Value___|
IE:
______________________________________________
| _____________ |___________Title_____________|
|| Image ||____________Name_____________|
|| ||______Value_____|____Value___|
||_____________|| | |
| | | |
|_______________|______Value_____|____Value___|
In Safari, it displays like it does in IE, plus adds a large GRAPHIC to it.
Here is the result of the page and CSS http://jsfiddle.net/9HsvF/21/ I would appreciate any help!
0
source to share
1 answer
Just a suggestion. Get rid of tables if possible. And try the div layout. The layout template output could be similar to ( http://jsfiddle.net/V5aCa/1/ ):
<div style="overflow:auto;">
<div class="leftColumn">
<img src="http://static.adzerk.net/Advertisers/da748a4c6e9b4c97af37c32af7531544.jpg"/>
</div>
<div class="rightColumn">
<div class="titleRow">Title</div>
<div class="nameRow">Name</div>
<div class="values">
<div>value1</div><div>value2</div>
</div>
<div class="values">
<div>value3</div><div>value4</div>
</div>
</div>
</div>
and css:
.leftColumn
{
float:left;
width:150px;
overflow:auto;
}
.rightColumn
{
float:left;
overflow:auto;
}
.titleRow,.nameRow
{
text-align:center;
}
.values
{
clear:both;
}
.values div
{
float:left;
padding:0px 3px;
}
0
source to share