[css-d] Wierd IE 6 position: relative with ghosting

[Subscriptions]

Hello everyone! I have been lurking on this list for almost two years,
but I have yet to post a message. The problem I'm experiencing is weird
enough for me that I want to get input from others.

I have two fixed-size, relatively-positioned divs that align correctly;
in IE6, however, there are "ghosts" of the divs that create a design
issue. They can only been seen when you press CTRL-A (or edit/select all).

Although the page is fully functional, the ghosts make the page longer
than it needs to be, creating visual issues.

Would you mind looking at it? http://www.buckeyeinstitute.org/podcast/

After loading the page, simply press CTRL-A and you'll see the ghost
rectangles on the left and on the bottom. They match up with the menu
div on the left and the content div on the bottom.

Link to to css:
http://www.buckeyeinstitute.org/podcast/loudblog/custom/templates/bi/style.css

Thank you for any help.

Peter

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Wierd IE 6 position: relative with ghosting

[Gunlaug Sørtun]

Subscriptions wrote:
> http://www.buckeyeinstitute.org/podcast/
> 
> After loading the page, simply press CTRL-A and you'll see the ghost 
> rectangles on the left and on the bottom. They match up with the menu
> div on the left and the content div on the bottom.

Looks kind of as expected from reading through your stylesheet.

Note that 'top: ?? / left: ??' on an element with 'position: relative'
doesn't really move the element - it _offsets_ it visually from its
original position _without removing_ its _space_ from the original
position.
I think that's where those "ghosts" come from - those elements still
occupy space in the original positions, even if it _looks like_ they
have been moved.

Combine that with IE6' incorrect 'overflow' handling, where 'position:
relative' makes an element visible over the edge of a parent with
'overflow: hidden' declared on it, and I think IE6 is found to behave
buggy but pretty much as expected in that it won't hide the "ghosts".


If you don't want to leave any "ghosts" behind, then you may try
_moving_ those elements with 'margin-top: ?? / margin-left: ??' instead,
as 'margins' move the element _away from_ the original space - not just
offset them visually.

Using 'position: absolute' with 'top: ?? / left: ??' is another
alternative that won't leave any "ghosts".

regards
Georg
-- 
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Wierd IE 6 position: relative with ghosting

[Ingo Chao]

Subscriptions wrote:
> ... the ghosts make the page longer
> than it needs to be, creating visual issues.
> 
> Would you mind looking at it? http://www.buckeyeinstitute.org/podcast/

I'd like to know if Safari and Opera are right to show the space that is 
occupied by the r.p. box before it is offset. Os is Fx right, not making 
the page longer?

Ingo

-- 
http://www.satzansatz.de/css.html
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Wierd IE 6 position: relative with ghosting

[Roger Roelofs]

Ingo,

On Mar 9, 2007, at 3:49 AM, Ingo Chao wrote:

> Subscriptions wrote:
>> ... the ghosts make the page longer
>> than it needs to be, creating visual issues.
>>
>> Would you mind looking at it? http://www.buckeyeinstitute.org/ 
>> podcast/
>
> I'd like to know if Safari and Opera are right to show the space  
> that is
> occupied by the r.p. box before it is offset. Os is Fx right, not  
> making
> the page longer?

The spec says "When a box B is relatively positioned, the position of  
the following box is calculated as though B were not offset. "  


However, I can't answer your question because I couldn't see any  
difference between Safari/Webkit and ff2.

My (possibly flawed) understanding of the spec is that the browser  
should show the space that would have been occupied by the r.p. box  
and show the content of the box offset as appropriate.  The browser  
should not shift following content due to the offset unless clearing  
floats would dictate otherwise.

hth

-- 
Roger Roelofs
"Remember, if you’re headed in the wrong direction,
God allows U-turns!"
  ~Allison Gappa Bottke

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Wierd IE 6 position: relative with ghosting

[Gunlaug Sørtun]

Ingo Chao wrote:
> Subscriptions wrote:
> 
>> ... the ghosts make the page longer than it needs to be, creating 
>> visual issues.
>> 
>> Would you mind looking at it? 
>> http://www.buckeyeinstitute.org/podcast/
> 
> 
> I'd like to know if Safari and Opera are right to show the space that
>  is occupied by the r.p. box before it is offset. Os is Fx right, not
>  making the page longer?

If my (old) interpretation of 'overflow: hidden' is correct, then Fx got
it wrong. I prefer Fx' way of doing it though :-)

As I see it:
- 'overflow: hidden' means "hide overflowing part from view".
- 'overflow: hidden' does *not* mean "treat overflowing part as if it
was subjected to 'display: none'".

My interpretation comes from the use of the word 'hidden' here. In
'visibility: hidden' the word 'hidden' means "hidden objects aren't
visible but still take up space", so I've always thought it should mean
the same for 'overflow'.

However, it often makes more sense design-wise to "treat overflowing
part as if it didn't exist" - like Fx does, but we should then have had
an 'overflow: none' variant so we could choose.

regards
Georg
-- 
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Wierd IE 6 position: relative with ghosting

[Ingo Chao]

Its probably me; I see an vertical scroll bar in Opera/Mac and Safari 
that I cannot see in Fx.

?

Ingo

-- 
http://www.satzansatz.de/css.html
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Wierd IE 6 position: relative with ghosting

[Peter Barney]

Gunlaug Sørtun wrote:
> Subscriptions wrote:
>> http://www.buckeyeinstitute.org/podcast/
>>
>> After loading the page, simply press CTRL-A and you'll see the ghost 
>> rectangles on the left and on the bottom. They match up with the menu 
>> div on the left and the content div on the bottom.
>
> Note that 'top: ?? / left: ??' on an element with 'position: relative'
> doesn't really move the element - it _offsets_ it visually from its
> original position _without removing_ its _space_ from the original
> position.
>
> If you don't want to leave any "ghosts" behind, then you may try
> _moving_ those elements with 'margin-top: ?? / margin-left: ??' instead,
> as 'margins' move the element _away from_ the original space - not just
> offset them visually.
>
> Using 'position: absolute' with 'top: ?? / left: ??' is another
> alternative that won't leave any "ghosts".

Thank you! You taught me something valuable today. I usually avoid using 
position:, so I was not familiar with everything here.

The answer came from using your suggestion to you position: absolute, 
and once I realized that the containing block needed to be positioned 
relatively, everything snapped together.

So thank you, and how much do I owe you? ;-)

Peter
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Wierd IE 6 position: relative with ghosting

[Philippe Wittenbergh]

On Mar 9, 2007, at 9:23 PM, Gunlaug Sørtun wrote:

>> I'd like to know if Safari and Opera are right to show the space that
>>  is occupied by the r.p. box before it is offset. Os is Fx right, not
>>  making the page longer?
>
> If my (old) interpretation of 'overflow: hidden' is correct, then  
> Fx got
> it wrong. I prefer Fx' way of doing it though :-)
>
> As I see it:
> - 'overflow: hidden' means "hide overflowing part from view".
> - 'overflow: hidden' does *not* mean "treat overflowing part as if it
> was subjected to 'display: none'".
>
> My interpretation comes from the use of the word 'hidden' here. In
> 'visibility: hidden' the word 'hidden' means "hidden objects aren't
> visible but still take up space", so I've always thought it should  
> mean
> the same for 'overflow'.
>
> However, it often makes more sense design-wise to "treat overflowing
> part as if it didn't exist" - like Fx does, but we should then have  
> had
> an 'overflow: none' variant so we could choose.

[OK, now I see where the issue is.]

But the elements that are positioned relative and moved upwards on  
that page are not contained within blocks with overflow:hidden
Those elements trigger a scrollbar on  in Safari, iCab, Opera,  
but not in Gecko
Especially the div #entry, which is pulled upwards 365 px and has a  
height specified. Doesn't sound correct.

---
Anyway, on overflow:hidden:
 From CSS 2.1, 11.1.1 [1]
'This property specifies whether content of a block-level element is  
clipped when it overflows the element's box.'

'clipped' is the keyword. The part of the box that is hidden  
shouldn't take up any space anymore.
The overflow property (except 'visible') also establishes a new block  
formatting context (per 9.4.1), everything is contained within that box.

So a block within an overflow:hidden box that overflows that box  
should not take up any space nor affect the surrounding layout.

[1] http://www.w3.org/TR/CSS21/visufx.html#propdef-overflow
---

Philippe
---
Philippe Wittenbergh





__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Wierd IE 6 position: relative with ghosting

[Gunlaug Sørtun]

Philippe Wittenbergh wrote:
> But the elements that are positioned relative and moved upwards on  
> that page are not contained within blocks with overflow:hidden

Guess I didn't read well enough through that stylesheet. Now I have 
mixed styles and created confusion - again :-)

> Those elements trigger a scrollbar on  in Safari, iCab, Opera,  
> but not in Gecko
> Especially the div #entry, which is pulled upwards 365 px and has a  
> height specified. Doesn't sound correct.

Other (following) elements (should) adjust to that element's original 
space - not the offset one, so Gecko should not act as if #entry's 
original space isn't down there anymore.

> ---
> Anyway, on overflow:hidden:
>  From CSS 2.1, 11.1.1 [1]
> 'This property specifies whether content of a block-level element is  
> clipped when it overflows the element's box.'
> 
> 'clipped' is the keyword. The part of the box that is hidden  
> shouldn't take up any space anymore.

Ok, so 'hidden' means 'clipped' in this context. I've probably seen too 
many non-compliant browser-version on this point through the years, and 
should read a bit more specs.

Georg
-- 
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/