Android 2.3 browser ignoring li width in combination with CSS ellipsis

Live URL: http://www.jungledragon.org/apps/jd3/lists

I'm working on a responsive website and as I am testing it on various devices (mostly using browserstack) I'm running into an issue that seems specific to the Android 2.3 browser.

Please find below the correct rendering of what I am trying to accomplish. This is how it works and looks on almost any browser tested. What we're looking at is a list of photos, each having a caption. The caption is entered by users and can be of any length. The caption in the top left photo is very lengthy, yet as you can see it is cut off correctly, for this I am using the text-overflow:ellipsis CSS property.

This is how the same page looks on the Android browser (2.3, using browserstack to simulate a Galaxy Note):

As you can see, the top left photo takes up more than the 50% that I have set it to, and as a result the view extends the browser window. It definitely has to do with the long caption, because if I shorten it, the view does fit in nicely.

Strangely, we do see the ellipsis effect taking place, it's just that it it somehow uses more width than I specify.

The HTML structure is as follow (pseudo code):

<ul>
<li>
<figure>
<a href=""><img></a>
<figcaption><a href="">caption here</a></figcaption>
</figure>
</li>
</ul>

The li element has a width of 50% applied in CSS. The ellipsis properties are set on figcaption a. As explained, the Android 2.3 browser does seem to apply the ellipsis, yet it goes beyond the 50% width that I specified. I have tried all kinds of overflow properties at all levels of the html structure, all to no avail.

As I am using this technique in various places, I'm quite eager to solve it.

Note: I'm using border-box throughout the design, although I don't think that is the issue.

Answers


Need Your Help

pagination not working for KO Grid

javascript jquery gridview knockout.js knockout-2.0

I am working with KO-grid and it seems to load all the data fine. Now, I am working on the pagination part and it does not seem to work properly. Yes, I do the pagination control on the bottom but...

Java version of the Java Library in Lotus Domino Designer

java lotus-notes lotus-domino

I need to use enums in the java library (not xPages!) in my application. But every java library that I create, is being compiled with java 1.3 (there is a field called $JavaCompilerSource in Java L...

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.