Strange IE6+7/ListView behaviour

philthy · March 9th, 2009, 05:58 PM

Ok, this is not so much a BeerHouse question, so I hope it's ok I ask anyway. After all, this is where the elite hangs out

I use ListViews many places in my app, which is based on BeerHouse. For instance, in the ArticleListing, I use a ListView instead of a GridView.

In each ListItem, I have the Article Abstract followed by a linkbutton to read the entire article. Then comes a section with author name and edit/delete buttons. Also, there are the tags. (These tags are something I added to the design). Each tag is a link to a page that shows a list of articles with that tag.

All of this works perfectly in Firefox, but IE 6+7 screws everything up (surprize surprize).

What happens is that they pretty much turn most of the ListView Item into a link area. When I move the mouse around the area, I can see in the status bar that the link changes. Some of it links to where the linkbutton to read the entire article links to, and some of it links to where the edit button links to. Also, the non link text is underlined like links, and it gets that ugly standard blue color. The same thing happens on every page I use ListViews. Does this make any sense at all??

The reason I ask here is that I can't see anything wrong in my code, at least not anything that should cause this.

Code:

<div class="EntryInfo">
                <span class="text1">Author:
                  <asp:Label ID="Label" CssClass="text1" runat="server"  Text='<%# Eval("AddedBy") %>'></asp:Label></span>
                <asp:Panel runat="server" ID="ImgButPanel" Visible='<%# UserCanEdit %>'>
                    <div class="editDeleteButtons right">
<asp:HyperLink ID="HyperLink1" CssClass="imgBut" runat="server" NavigateUrl='<%#"~/View/Admin /AddEditArticle.aspx?ID=" + Eval("ID") %>'
                            Text="<img border='0' src='../App_Themes/Theme1/Images/Edit.gif' alt='View articles'" />
<asp:ImageButton ID="deleteLink" CausesValidation="false" CommandName="Delete" OnClientClick="return confirm('Are you sure you want to delete this record?');"
                            ImageUrl="../App_Themes/Theme1/Images/Delete.gif" runat="server" />
                    </div>
                </asp:Panel>
                <p>
<asp:ListView ID="ListViewTags" runat="server" DataSource='<%# Eval("Tags") %>' ItemPlaceholderID="tags"
                        DataKeyNames="ID">
                        <LayoutTemplate>
<asp:Label ID="TagLabel" CssClass="" runat="server" Text="Tags:"></asp:Label></span>
                            <asp:PlaceHolder runat="server" ID="tags"></asp:PlaceHolder>
                        </LayoutTemplate>
                        <ItemTemplate>
                            <span>
<asp:HyperLink ID="HyperLink1" runat="server" NavigateUrl='<%#"~/View/ArticleByTag.aspx?tagID=" + Eval("ID") %>'
                                    Text='<%# Eval("TagName") %>' /></span> </span>
                        </ItemTemplate>
                        <EmptyDataTemplate>
<asp:Label ID="TagLabel" CssClass="" runat="server" Text="No tags:"></asp:Label></span>
                        </EmptyDataTemplate>
                    </asp:ListView>
                </p>
            </div>

This ListView is nested in another ListView, but the problem is the same in non nested ListViews.

Have any of you had any weird behaviour when using ListViews in said browsers?

I wish all browsers worked like FF...

Soeren

Lee Dumond · March 9th, 2009, 07:30 PM

Seeing as none of the elite are answering, I will give it a shot.

I would say it is almost certain that it's not an issue with your code, but an issue with how ASP.NET renders HyperLinks and LinkButtons, which as I recall is with a default "display: inline-block" style. Firefox pretty much treats inline-block the same as inline, where IE does not.

I would try throwing the following style definition into the <head> and see if it makes any difference:

Code:

 
<style type="text/css">
   a { display: inline !important; }
</style>

You mention the use of LinkButtons, but I see no LinkButtons in your code. Do you mean ImageButton or HyperLink? That might make a big difference too.

philthy · March 9th, 2009, 08:11 PM

ImageButton, that's what I meant

I tried what you mentioned, but it doesn't help.
I just noticed that there are no problems with the comments on my ShowArticle page. The comments are written with a ListView, and uses pretty much the same code. Each comment contains the same edit and delete buttons.
I think I will try to compare these pages in detail... Strange...

IE, I curse thee

Lee Dumond · March 9th, 2009, 09:18 PM

No, you're right, that wouldn't work for ImageButtons. Wish I had know that before answering.

Scott663 · March 10th, 2009, 09:47 AM

I use LinkButtons instead of ImageButtons & HyperLinks in my Listviews, so I'm not sure if an ImageButtons in a ListView is problematic. Try switching your ImageButton to a LinkButton to see if it resolves the issue.

I also noticed that you have several extra </span> tags in your code. Not sure if this would cause any problems, but you should remove these to be sure.

- Scott.

Scott663 · March 10th, 2009, 10:07 AM

I forgot to mention that the ListView's PalaceHolder element must have the ID property set to "itemPlaceHolder" for the ListView to render properly. If I change the ID to something other than "itemPlaceHolder" I get an exception error. I'm actually surprised that your page is compiling without the required PlaceHolder ID.

philthy · March 10th, 2009, 10:08 AM

Hi Scott.

I know, I'm a span freak

I even used to wrap label controls into spans, until Lee pointed out, in another thread, that the label control renders a span for me, which I hadn't thought about (thanks Lee). There were spans everywhere!!

I still have plenty of those to remove, but, I'm getting there

Don't know if it has anything to do with this though, but it's worth checking out.

I'll try switching the ImageButtons to LinkButtons, and see how that works out.

Soeren

Lee Dumond · March 10th, 2009, 10:24 AM

Quote:

Originally Posted by Scott663

I forgot to mention that the ListView's PalaceHolder element must have the ID property set to "itemPlaceHolder" for the ListView to render properly. If I change the ID to something other than "itemPlaceHolder" I get an exception error. I'm actually surprised that your page is compiling without the required PlaceHolder ID.

Actually, you can set the placeholder ID to anything you want, as long as you also set the ItemPlaceHolderID to the same value.

Scott663 · March 10th, 2009, 11:15 AM

Opps - I forgot about the 'ItemPlaceHolderID' parameter. Thanks Lee.

philthy · March 10th, 2009, 02:52 PM

I found the cause of this.

As you can see in the code I pasted earlier, I use a hyperlink control like this:

Code:

<asp:HyperLink ID="catLink" runat="server"
                              NavigateUrl='<%#"~/View/ShowArticle.aspx?articleID=" + Eval("ID") %>' Text="<img border='0' src='../App_Themes/Theme1/Images/ArrowR.gif' alt='View entire article'" />

In the text property, I refer to the image to use for the hyperlink. This renders like this:

Code:

<a id="ctl00_ctl00_Content_PrimaryContentUser_ArticleListing_ListViewArticles_ctrl0_catLink" href="ShowArticle.aspx?articleID=44"><img border='0' src='../App_Themes/Theme1/Images/ArrowR.gif' alt='View entire article'</a>

Because of the way I use the text property, the <img> doesn’t get it’s closing tag, so the hyperlink includes everything following it, into the link. That’s why I get this large clickable area.
Firefox accepts this, but IE doesn’t.

I added a > like this:

Code:

<asp:HyperLink ID="catLink" runat="server"
                            NavigateUrl='<%#"~/View/ShowArticle.aspx?articleID=" + Eval("ID") %>' Text="<img border='0' src='../App_Themes/Theme1/Images/ArrowR.gif' alt='View entire article'>" />

And now it works...

Soeren