Jeff Jensen

Email conversation

From	Jeff Jensen
To	Me
Subject	I am having trouble with fixed position relative to container
Date	3 June 2009 18:27

Hi Tarquin,

I am in the process of putting our catalog online when my boss asks me to
display our phone number on each page so that it can be seen no matter how
far down they scroll. And of course, he knows exactly where he would like it
to appear. Well, that seemed simple enough. Anyway, I've been working on
this for weeks but I can't get it to work with Internet Explorer. I tried
every script I could find and [searched] every pertinent topic on this with no
luck. I guess I'm just not smart enough:(

I would really appreciate your help with this. Here is a link to an example
of what I am trying to do: [URL]

On the left there is an image that says "Call for a Quote:...", in Firefox
and any other browser except IE it stays in the left red column where it
belongs and is "fixed" as you scroll down. In IE (IE 8 is all I've tested)
it does stay fixed (but from what I've learned in my research I doubt lesser
versions will even stay fixed) but it's outside of the column. Here is the
styles and html I'm using:

div.callForQuote {
	margin: 0;
	position: fixed;
	top: auto;
	width: 128px;
	background-image: url(images/quote01.gif);
	height: 191px;
}
#callForQuote:hover {
	margin: 0;
	position: fixed;
	top: auto;
	width: 128px;
	background-image: url(images/quote02.gif);
	height: 191px;
}

<div id="callForQuote" class="callForQuote">&nbsp;</div>

Thank you,

Jeff Jensen

From	Me
To	Jeff Jensen
Subject	Re: I am having trouble with fixed position relative to container
Date	4 June 2009 08:02

Jeff,

> In IE (IE 8 is all I've tested) it does stay fixed (but from what I've
> learned in my research I doubt lesser
> versions will even stay fixed) but it's outside of the column.

It works perfectly for me in IE 8 when rendered with the IE 8 engine.
However, the position is slightly wrong when using the IE 7 engine (IE 6
does not support fixed positioning, of course, so it will simply act as a
static element).

The reason for the odd positioning in IE 7 is that the DIV uses auto
left/top position, and the parent is a TD with align="center". It will not
work correctly unless the TD is left aligned. Given that there are no rules
about how this should be handled, either response is correct.

(Personally, I am quite amazed that auto positioning works at all on a fixed
position element inside a table - I would never mix CSS positioning and
layout tables, but whatever, if it works...)


Mark 'Tarquin' Wilton-Jones - author of http://www.howtocreate.co.uk/

From	Jeff Jensen
To	Me
Subject	Re: I am having trouble with fixed position relative to container
Date	4 June 2009 15:17

Tarquin,

Thank you very much! I would have never guessed that it had anything to do
with <td align="center">. Also, I didn't even realize I was in Compatibility
View when I was testing (doh!). I forgot about that feature, I must have
used it once and never turned it off. It was probably a good thing though,
because I wouldn't have noticed the problem otherwise. Anyway, I switched to
<td align="left">, so it's working great now.

Thanks again,

Jeff Jensen

Jeff Jensen

Navigation

Search

Site navigation

Email conversation