asked on

CSS Absolute Positioning inconsistent in Chrome and Firefox

In the images below, the little save icon has the "Position" attribute set to "Absolute". IE seems to handle it nicely, placing it in the bottom right corner of the web grid, ALWAYS. However, in Chrome and Firefox, it appears randomly on the screen, depending on your current scroll position. In other words, if I scroll down a bit, the icon will disappear momentarily until you are done scrolling, it will then appear lower on the screen than its previous location (before the scrolling). See below:

IE:

Chrome:

Here's the code that generates this icon:

private void _renderExportButton(HtmlTextWriter writer)
{
	// DIV
	writer.AddAttribute(HtmlTextWriterAttribute.Id, _exportButtonId);
	writer.AddStyleAttribute("cursor", "pointer");
	GridStyle.ExportButtonStyle.ApplyStyle(writer);
	writer.AddStyleAttribute("display", "none");
	writer.AddStyleAttribute("position", "absolute");
	writer.AddAttribute("onclick", String.Format("javascript:event.cancelBubble = true; {0};", Page.ClientScript.GetPostBackEventReference(this, _exportArg)), true);
	writer.AddAttribute("onfocusin", "javascript:event.cancelBubble = true;");
	writer.AddAttribute("onfocusout", "javascript:event.cancelBubble = true;");
	writer.AddAttribute("title", "Click to export contents of this grid.", true);
	writer.RenderBeginTag(HtmlTextWriterTag.Div);
	
	// IMG
	writer.AddAttribute(HtmlTextWriterAttribute.Src, _getExportButtonUrl());
	writer.RenderBeginTag(HtmlTextWriterTag.Img);
	writer.RenderEndTag(); // End IMG

	writer.RenderEndTag(); // End DIV
}

Open in new window

Here's the HTML that's rendered:

IE
<DIV onclick="javascript:event.cancelBubble = true; __doPostBack('ctl12$ctlSearch$grdResults','export');" onfocusin="javascript:event.cancelBubble = true;" onfocusout="javascript:event.cancelBubble = true;" id=ctl12_ctlSearch_grdResults_ExportButton title="Click to export contents of this grid." class=WebGridExportButton style="CURSOR: pointer; POSITION: absolute; LEFT: 636px; Z-INDEX: 2147483647; DISPLAY: none; TOP: 333px"><IMG src="/WebResource.axd?d=h8J9SxoIhEfcN4oLpK28mX1lMa5ACgZld_ixLLaN7xBewpz3XQIaob29gUUootv4DB1BVIwwjuuYdO2aLup3oXaD9jDqLlbnzJF0CJbmEEydqTH1NlhnnZsvJn0uhitAWzvoFUsCmtY0EwYy0&amp;t=635895695122833628"> </DIV>

Chrome
<div id="ctl12_ctlSearch_grdResults_ExportButton" class="WebGridExportButton" onclick="javascript:event.cancelBubble = true; __doPostBack('ctl12$ctlSearch$grdResults','export');" onfocusin="javascript:event.cancelBubble = true;" onfocusout="javascript:event.cancelBubble = true;" title="Click to export contents of this grid." style="cursor: pointer; display: none; position: absolute; left: 637px; top: 333px;"> <img src="/WebResource.axd?d=h8J9SxoIhEfcN4oLpK28mX1lMa5ACgZld_ixLLaN7xBewpz3XQIaob29gUUootv4DB1BVIwwjuuYdO2aLup3oXaD9jDqLlbnzJF0CJbmEEydqTH1NlhnnZsvJn0uhitAWzvoFUsCmtY0EwYy0&amp;t=635895695122833628"> </div>

Open in new window

leakim971

a link to your page, prod OR DEV environment, is required.

Julian Hansen

Instead of absolute use fixed.

SOLUTION

Member_2_248744

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

pzozulka

ASKER

@leakim971: It's an internal site with no public access.
@Julian Hansen: Fixed did not help.

@Slick812: This worked great except I'm confused why it's not being placed "in the top and left position". So what I did was, set this DIV's parent DIV's style to have position: relative, and it now seems to be working, kind of. I say kind of because of the following:

1) It is being placed in the bottom right corner, not top and left. This happens in all browsers.
2) In Chrome and Firefox, it seems to move around by a couple "px" every time I hover over the grid. As I mentioned earlier, it appears when you hover over the grid, and disappears when you stop hovering over the grid. See pics below.
3) In addition to the position: absolute (style), I tried adding top and left styles, but no matter what I set them to, the icon still always appears in the bottom right corner of the grid. Either way, this is progress since it's no longer jumping all over the page.

Here's what I changed. I added the "position: relative" to the div id: ctl12_ctlDetail_ctlPolicies_grdPolicies_Scroller

This now placed the icon in the bottom right corner for div id: ctl12_ctlDetail_ctlPolicies_grdPolicies_ExportButton

<div hidefocus="true" id="ctl12_ctlDetail_ctlPolicies_grdPolicies_Scroller" style="-moz-outline-style:none;width:100%;position:relative;height:100%;overflow:auto;max-height:100%;">
	<table cellspacing="0" cellpadding="0" border="0" id="ctl12_ctlDetail_ctlPolicies_grdPolicies_Body" style="table-layout:fixed;width:100%;">
		<colgroup>
			<col style="width:16px;text-align:Center;" />
			<col style="width:15px;text-align:Left;" />
			<col style="width:80px;text-align:Left;" />
			<col style="width:65px;text-align:Left;" />
			<col style="width:auto;text-align:Left;" />
			<col style="width:60px;text-align:Left;" />
			<col style="width:70px;text-align:Right;" />
			<col style="width:60px;text-align:Right;" />
			<col style="width:60px;text-align:Right;" />
			<col style="width:75px;text-align:Right;" />
		</colgroup>
		<tr class="WebGridContentRow" id="grdPolicies_row_0" i1KeyValue="0" i1CheckBoxId="ctl12_ctlDetail_ctlPolicies_grdPolicies_check__0" style="cursor:default;">
			<td class="WebGridContentCell" style="text-align:center;">
				<img src="/images/grid_edit.gif"/>
			</td>
			<td class="WebGridContentCell" class="WebGridContentCell" style="text-align:Left;vertical-align:top;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:Left;vertical-align:top;">
				<nobr>Zurich</nobr>
			</td>
			<td class="WebGridContentCell" class="WebGridContentCell" style="text-align:Left;vertical-align:top;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:Left;vertical-align:top;">
				<nobr>GL</nobr>
			</td>
			<td class="WebGridContentCell" class="WebGridContentCell" style="text-align:Right;vertical-align:top;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:Right;vertical-align:top;">
				<nobr>1,000.00</nobr>
			</td>
			<td class="WebGridContentCell" class="WebGridContentCell" style="text-align:Right;vertical-align:top;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:Right;vertical-align:top;">
				<nobr>0.00</nobr>
			</td>
			<td class="WebGridContentCell" class="WebGridContentCell" style="text-align:Right;vertical-align:top;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:Right;vertical-align:top;">
				<nobr>0.00</nobr>
			</td>
			<td class="WebGridContentCell" class="WebGridContentCell" style="text-align:Right;vertical-align:top;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:Right;vertical-align:top;">
				<nobr>1,000.00</nobr>
			</td>
		</tr>
	</table>
	<div id="ctl12_ctlDetail_ctlPolicies_grdPolicies_ExportButton" class="WebGridExportButton" 
			onclick="javascript:event.cancelBubble = true; __doPostBack(&#39;ctl12$ctlDetail$ctlPolicies$grdPolicies&#39;,&#39;export&#39;);" 
			onfocusin="javascript:event.cancelBubble = true;" 
			onfocusout="javascript:event.cancelBubble = true;" 
			title="Click to export contents of this grid." 
			style="cursor:pointer;display:none;position:absolute;">
		<img src="/WebResource.axd?d=h8J9SxoIhEfcN4oLpK28mX1lMa5ACgZld_ixLLaN7xBewpz3XQIaob29gUUootv4DB1BVIwwjuuYdO2aLup3oXaD9jDqLlbnzJF0CJbmEEydqTH1NlhnnZsvJn0uhitAWzvoFUsCmtY0EwYy0&amp;t=635896543877047549" />
	</div>
</div>

Open in new window

SOLUTION

Member_2_248744

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

SOLUTION

Member_2_248744

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Julian Hansen

@Julian Hansen: Fixed did not help.

Not really useful. Can you show the implementation of this?
Consider this code
CSS

<style type="text/css">
.mybutton {
  position: fixed;
  bottom: 10px;
  right: 10px;
}
</style>

Open in new window

HTML

<p>...</p>
<button class="btn button-primary mybutton">Button</button>
<p>...</p>

Open in new window

Working sample here
See screen shot below

pzozulka

ASKER

@Julian Hansen: First of all, that's a pretty cool sample site. Did you use a tool to generate this?

I realize that "Fixed" should do exactly what you suggested, but when I change my "position" attribute from absolute to fixed, the button disappears entirely. When I inspect the element in IE, I see it's LEFT attribute is set to -5px, while in Chrome LEFT is set to 637px. Furthermore, in Chrome, depending on how far you scroll down the grid, the icon appears lower and lower as you scroll.

When I change it back to absolute, it mostly works ok, just jumps around a bit in the bottom right corner of grid. See post ID: 41440063.

I'll see what our senior devs think about this, and hopefully can post some relevant news.

ASKER CERTIFIED SOLUTION

Julian Hansen

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

SOLUTION

Member_2_248744

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial