Differences in Cross-Browser Styling for ListView Item Templates

Question

Differences in Cross-Browser Styling for ListView Item Templates

I'm following up on my previous query regarding ListView's ItemTemplate table styling. I am still working on achieving the desired look for the ItemTemplate:

______________________________________________
|               |___________Title_____________|
|    Image      |____________Name_____________|
|               |______Value_____|____Value___|
|_______________|______Value_____|____Value___|

While this layout is functioning correctly in Chrome and Opera, I am encountering issues with other browsers.

In Firefox:

______________________________________________
| _____________ |                             |
||   Image    | |                             |
||            | |                             |
||____________| |___________Title_____________|
|               |____________Name_____________|
|               |______Value_____|____Value___|
|_______________|______Value_____|____Value___|

Regarding IE:

______________________________________________
| _____________ |___________Title_____________|
||    Image    ||____________Name_____________|
||             ||______Value_____|____Value___|
||_____________||                |            |
|               |                |            |
|_______________|______Value_____|____Value___|

In Safari, the display mirrors that of IE but also includes a significant gap above it.

You can view the page output and CSS here. Any assistance would be greatly appreciated!

asp.net html css listviewitem

Answer 1

Answer №1

Here's a suggestion: Consider eliminating the tables in favor of a div layout. A sample layout template could look like this (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 for the 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;
}

Answer 2

Here's a suggestion: Consider eliminating the tables in favor of a div layout. A sample layout template could look like this (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 for the 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;
}

Differences in Cross-Browser Styling for ListView Item Templates

Answer №1

Similar questions

Avoid clicking in areas outside the perimeter of the blue circle in the SVG

Labels are overlapping each other and being aligned to the right side

Tips for sending a string as HTML content in VueIn Vue, you can send a string as

Is there a way to prevent elements from resizing when zooming in or out?

What is the best way to adjust the size of a button using CSS within a ReactJS

Automatically determining the optimal quality from various sources tailored to the individual user - jwplayer

Displaying messages in an Angular 2 chatbox from the bottom to the top

What could be the reason why my buttons are not responding to the ActionListener?

Troubleshooting the non-responsive behavior of Bootstrap's hidden-sm-down

It appears that the anchors and fragment identifiers are not functioning as expected

Enhancing Page Responsiveness with Long-Running ASP.NET Ajax Requests

Customizing a ControlsFX PopOver in a JavaFX application

Leveraging Bootstrap column classes with diverse div heights

HTML list style with varying images at the same level in a ul tag

What is the best way to create a navigation bar that opens on the same page when clicked?

Exploring HTML segments with Python and BeautifulSoup

What is the best way to retrieve a particular value from a database using PHP?

Issue in Chrome where hover state does not persist after clicking, occurring sporadically

Retrieve data from a different div, perform a subtraction operation, and dynamically update yet another div using jQuery

The .media object in Bootstrap 3 does not experience overflow issues with .dropdown elements