CSS Issue - repeater with an html <a tag

[DarwinIT]

I cloned some code from a working page which has an <a tag with the word Edit show up just to the left of the text in the next field - using absolute positioning in CSS. However my code seems to be using the same coordinate for all iterations of this hyperlink instead of having the absolute position be calculated for each row.

Here is the CSS code:

.editme
{
position: absolute;
top: 5px;
left: -4em;
width: 3em;
text-align: right;
}

#pagehead, .pagehead
{
margin: 1.5em 0 0.25em;
}

#pagehead h1, .pagehead h1
{
display: inline;
}

#pagehead span, .pagehead span
{
padding: 0 1em;
}

#pagehead h1 span, .pagehead h1 span
{
padding: 0;
}

---------

So with the negative value I don't even see the text EDIT. If I change it to positive then I do. So obviously the absolutely position is being calculate against the whole document causing all the hyperlinks to be stacked on top of one another.


Two salient differences - page working uses a master page with asp:Content and the one not working has an explicit <form> tag.

Here is the code that works:

<%@ Page Language="c#" MasterPageFile="~/Tops1.Master" AutoEventWireup="false" Codebehind="resources.aspx.cs"
Inherits="CommspAdmin.publicHtml.resources" Title="Resources - cosp Admin" %>

<%@ MasterType VirtualPath="~/Tops1.Master" %>
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
<cs:head ID="Head1" runat="server" />
<csubHead ID="PubHead1" runat="server" />
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<div class="pagehead">
<h1>Resources</h1>
<span><a href="Resource_Edit.aspx">Add Resource</a></span>
</div>
<div id="prs">
<asp:Repeater ID="repRes" runat="server" DataSourceID="ObjectDataSource1">
<ItemTemplate>
<div>
<a class="editme" href='Resource_Edit.aspx?r=<%# Eval("ID") %>'>Edit</a>
<h3><a href='<%= ConfigurationManager.AppSettings["LiveWebRoot"] %>res/info/<%# Server.UrlEncode(Eval("Title").ToString().ToLower().Replace(" ", "_")) %>/'>
<%# Eval("Title") %>
</a></h3>
<%# CommspAdmin.Helper.FormatStringForHtml(Eval("Summary").ToString()) %>
</div>
</ItemTemplate>
</asp:Repeater>
</div>
<asp:ObjectDataSource ID="ObjectDataSource1" runat="server" SelectMethod="GetResources"
TypeName="CommspAdmin.ResBLL"></asp:ObjectDataSource>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="SideContent" runat="server">
</asp:Content>
Here is the code that doesn't work:

<div class="pagehead">
<h1>Resources</h1>
<span><a href="EditResource.aspx">Add Resource</a></span>
</div>

<form id="form1" runat="server">

<div id="prs">
<asp:Repeater ID="repRes" runat="server" DataSourceID="ObjectDataSource1">
<ItemTemplate>
<div>
<a class="editme" href='EditResource.aspx?r=<%# Eval("CCFResourcesID") %>'>Edit</a>
<h3><a href='<%= ConfigurationManager.AppSettings["LiveWebRoot"] %>res/info/<%# Server.UrlEncode(Eval("CCFResourcesID").ToString()) %>/'>
<%# Eval("CCFResourceTitle") %>
</a></h3>
<%# cdsp.OffersAdmin.Helper.FormatStringForHtml(Eval("Summary").ToString())%>
</div>
</ItemTemplate>
</asp:Repeater>
</div>
<asp:ObjectDataSource ID="ObjectDataSource1" runat="server" SelectMethod="GetResources"
TypeName="cdsp.OffersAdmin.ResBLL"></asp:ObjectDataSource>

</form>
</body>

 

[adamroof]

how about...

.editme
{
    position: absolute;
    margin-top: 5px;
    margin-left: -4px;
/** what does this do? Its not a block element **/
    width: 3em;
    text-align: right;
}

 

[DarwinIT]

That wasn't it - but in making that change I was able to find the correct answer. I was missing one class:

#prs div
{
position: relative;
margin-left: 4em;
}

Thanks for your suggestion!!!