Re: [css-d] Absolute positioning within a table

[Philippe Wittenbergh]

On Jul 14, 2011, at 5:52 PM, Bobby Jack wrote:

> I have a relatively-positioned table, and an absolutely-positioned div in a 
> table cell within that table:
> 
> http://jsbin.com/erasur
> 
> In Firefox 4 and 5, the div is positioned relative to the document. In 
> Chrome, and IE 7 (and - maybe - later) it's positioned relative to the table.

It is a bug in Gecko (or rather a combination multiple bugs). Might get fixed 
in Firefox.next or .next.next or something in the not too distant future.

https://bugzilla.mozilla.org/show_bug.cgi?id=10209
and the many dependencies

Philippe
--
Philippe Wittenbergh
http://l-c-n.com/






__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Absolute positioning within a table

[Bobby Jack]

I have a relatively-positioned table, and an absolutely-positioned div in a 
table cell within that table:

http://jsbin.com/erasur

In Firefox 4 and 5, the div is positioned relative to the document. In Chrome, 
and IE 7 (and - maybe - later) it's positioned relative to the table. Which is 
correct? If Firefox is correct, and there's special handling for positioning 
within a table, which part of the spec. governs this behaviour?

Regards,

- Bobby
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Absolute Positioning for all page containers okay?

[Tom Livingston]

On Thu, Aug 12, 2010 at 11:47 AM, Tom Livingston  wrote:
> On Thu, Aug 12, 2010 at 10:58 AM, Bill Braun  wrote:
>>
>>
>> Anne McKinsey wrote:
>>> Greetings,
>>>
>>> I'm setting up numerous web pages with a jquery photo gallery that
>>> needs AP for its main images. Is it okay to set up every container on
>>> the page with AP or are there potential problems with doing so? The
>>> pages look okay on various browsers and no errors on W3C validator,
>>> but I can't help but think I'm doing something horribly wrong.
>>>
>>> Here is a page:
>>> http://www.amckwebandprint.com/macdonald/portfolio/portfolio-knit-
>>> process.html
>>> http://www.amckwebandprint.com/macdonald/portfolio/portfolio.css
>>>
>>> Your advice is much appreciated,
>>>
>>> A. McKinsey
>>>
>>
>> The trade off is between precision design and the wide variety of
>> preferences users have in how they configure their browsers. What looks
>> great to you based on the screen size, screen resolution, and browser
>> settings you used during design and coding may look unsightly to people
>> who have different monitors and browser preferences.
>>
>> I use absolute positioning myself. No one so far has complained, but I
>> suspect that the easier response from people who find your site (or
>> mine) unsightly is to simply leave. I am actively considering removing
>> absolute positioning in the next site redesign.
>>
>> Bill B
>
>
> I'd have to say that I've never used AP for an entire site. I have
> sprinkled AP within a non-AP site w/o ill effects. Such as AP-ing a
> logo in a header. Obviously being aware of the fact it is removed from
> the flow and making sure nothing would crash into it upon text
> scaling, etc.
>
> I can imagine an entire build using AP would have its share of tricky 
> quirks...
>

Quick look at the site in question resulted in a lot of things
crashing into each other upon 2 clicks up in text size. Mac Safari.


-- 

Tom Livingston | Senior Interactive Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Absolute Positioning for all page containers okay?

[Tom Livingston]

On Thu, Aug 12, 2010 at 10:58 AM, Bill Braun  wrote:
>
>
> Anne McKinsey wrote:
>> Greetings,
>>
>> I'm setting up numerous web pages with a jquery photo gallery that
>> needs AP for its main images. Is it okay to set up every container on
>> the page with AP or are there potential problems with doing so? The
>> pages look okay on various browsers and no errors on W3C validator,
>> but I can't help but think I'm doing something horribly wrong.
>>
>> Here is a page:
>> http://www.amckwebandprint.com/macdonald/portfolio/portfolio-knit-
>> process.html
>> http://www.amckwebandprint.com/macdonald/portfolio/portfolio.css
>>
>> Your advice is much appreciated,
>>
>> A. McKinsey
>>
>
> The trade off is between precision design and the wide variety of
> preferences users have in how they configure their browsers. What looks
> great to you based on the screen size, screen resolution, and browser
> settings you used during design and coding may look unsightly to people
> who have different monitors and browser preferences.
>
> I use absolute positioning myself. No one so far has complained, but I
> suspect that the easier response from people who find your site (or
> mine) unsightly is to simply leave. I am actively considering removing
> absolute positioning in the next site redesign.
>
> Bill B


I'd have to say that I've never used AP for an entire site. I have
sprinkled AP within a non-AP site w/o ill effects. Such as AP-ing a
logo in a header. Obviously being aware of the fact it is removed from
the flow and making sure nothing would crash into it upon text
scaling, etc.

I can imagine an entire build using AP would have its share of tricky quirks...

-- 

Tom Livingston | Senior Interactive Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Absolute Positioning for all page containers okay?

[Bill Braun]

Anne McKinsey wrote:
> Greetings,
>
> I'm setting up numerous web pages with a jquery photo gallery that  
> needs AP for its main images. Is it okay to set up every container on  
> the page with AP or are there potential problems with doing so? The  
> pages look okay on various browsers and no errors on W3C validator,  
> but I can't help but think I'm doing something horribly wrong.
>
> Here is a page:
> http://www.amckwebandprint.com/macdonald/portfolio/portfolio-knit- 
> process.html
> http://www.amckwebandprint.com/macdonald/portfolio/portfolio.css
>
> Your advice is much appreciated,
>
> A. McKinsey
>   

The trade off is between precision design and the wide variety of 
preferences users have in how they configure their browsers. What looks 
great to you based on the screen size, screen resolution, and browser 
settings you used during design and coding may look unsightly to people 
who have different monitors and browser preferences.

I use absolute positioning myself. No one so far has complained, but I 
suspect that the easier response from people who find your site (or 
mine) unsightly is to simply leave. I am actively considering removing 
absolute positioning in the next site redesign.

Bill B
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Absolute Positioning for all page containers okay?

[Anne McKinsey]

Greetings,

I'm setting up numerous web pages with a jquery photo gallery that  
needs AP for its main images. Is it okay to set up every container on  
the page with AP or are there potential problems with doing so? The  
pages look okay on various browsers and no errors on W3C validator,  
but I can't help but think I'm doing something horribly wrong.

Here is a page:
http://www.amckwebandprint.com/macdonald/portfolio/portfolio-knit- 
process.html
http://www.amckwebandprint.com/macdonald/portfolio/portfolio.css

Your advice is much appreciated,

A. McKinsey





__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] absolute positioning

[Steve Foster]

Hi Angela,

I'm not sure about the consistency between IE and FF although I think they
behave the same as far as I can see.

However I found this yesterday which explains positioning in a visual and
easy to understand way. I think it's really good. Hope it helps.

http://www.barelyfitz.com/screencast/html-training/css/positioning/

Cheers,
Steve.
On 30 July 2010 20:25, Angela French  wrote:

> I'm being driving nuts by absolute positioning rendering between IE and FF.
>  I just want to confirm what I think is correct about absolute positioning.
>  My understanding is that an absolutely position element positions itself
> relative to its parent container.  If the parent has not positioning, then
> it positions itself absolutely relative to the grandparent container, and so
> forth, up to the .  Is this correct?
>
> If so, do both IE and FF follow this?
>
> Thank you.
>
> Angela French
> Internet Specialist
> State Board for Community and Technical Colleges
> 360-704-4316
> afre...@sbctc.edu
> http://www.checkoutacollege.com
>
> __
> css-discuss [cs...@lists.css-discuss.org]
> http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- http://css-discuss.incutio.com/
> List policies -- http://css-discuss.org/policies.html
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
>
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] absolute positioning

[Rick Gordon]

To add to what others have said, another issue related to this may be the 
z-index bug, which can affect the layering of positioned elements in IE7 and 
lower. Google z-index bug.

Rick Gordon

--

On 7/30/10 at 12:25 PM -0700, Angela French wrote in a message entitled
"[css-d] absolute positioning":

>I'm being driving nuts by absolute positioning rendering between IE and FF.  I 
>just want to confirm what I think is correct about absolute positioning.  My 
>understanding is that an absolutely position element positions itself relative 
>to its parent container.  If the parent has not positioning, then it positions 
>itself absolutely relative to the grandparent container, and so forth, up to 
>the .  Is this correct?
>
>If so, do both IE and FF follow this?

-- 
___

RICK GORDON
EMERALD VALLEY GRAPHICS AND CONSULTING
___

WWW:   http://www.shelterpub.com
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] absolute positioning

[Angela French]

-Original Message-
From: Ed Seedhouse [mailto:eseedho...@gmail.com] 
Sent: Friday, July 30, 2010 1:31 PM
To: Angela French
Cc: css-d
Subject: Re: [css-d] absolute positioning

On Fri, Jul 30, 2010 at 12:25 PM, Angela French  wrote:
> I'm being driving nuts by absolute positioning rendering between IE and FF.


AP is great for positioning elements for special effect, but using it
to lay out major divisions on your page is pretty complicated and with
floats and margins  your browser and it's normal flow will do much of
the work for you.

-- 
Ed Seedhouse

I am using AP to position an overlay/popup div that is acivated with javascript.
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] absolute positioning

[Ed Seedhouse]

On Fri, Jul 30, 2010 at 12:25 PM, Angela French  wrote:
> I'm being driving nuts by absolute positioning rendering between IE and FF.

While the others have given you accurate information about how AP
works, I should suggest that for laying out major elements of the page
you stick to floats and margins.  They are easier to work with and
easier to understand, although there are some snags, especially with
IE and you have to learn how to make a floated element enclose it's
children, which it won't by default.

AP is great for positioning elements for special effect, but using it
to lay out major divisions on your page is pretty complicated and with
floats and margins  your browser and it's normal flow will do much of
the work for you.

-- 
Ed Seedhouse
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] absolute positioning

[Alex Mitchell]

On Fri, Jul 30, 2010 at 12:25 PM, Angela French  wrote:

> I'm being driving nuts by absolute positioning rendering between IE and FF.
>  I just want to confirm what I think is correct about absolute positioning.
>  My understanding is that an absolutely position element positions itself
> relative to its parent container.  If the parent has not positioning, then
> it positions itself absolutely relative to the grandparent container, and so
> forth, up to the .  Is this correct?
>
> If so, do both IE and FF follow this?
>
> Thank you.
>
> Angela French
> Internet Specialist
> State Board for Community and Technical Colleges
> 360-704-4316
> afre...@sbctc.edu
> http://www.checkoutacollege.com
>
>
It's my understanding that an absolutely positioned element will be
positioned absolutely relative to the nearest relatively or absolutely
positioned parent.
If no parents are relatively positioned it will be positioned relative to
the viewport or the  element.

I've created a demo of how this works here:
http://gumware.com/absolute-positioning.html

Regards,
Alex Mitchell
http://gumware.com

__
> css-discuss [cs...@lists.css-discuss.org]
> http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- http://css-discuss.incutio.com/
> List policies -- http://css-discuss.org/policies.html
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
>
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] absolute positioning

[David Laakso]

Angela French wrote:
> I'm being driving nuts by absolute positioning rendering between IE and FF.  
> I just want to confirm what I think is correct about absolute positioning.  
> My understanding is that an absolutely position element positions itself 
> relative to its parent container.  If the parent has not positioning, then it 
> positions itself absolutely relative to the grandparent container, and so 
> forth, up to the .  Is this correct?
>
> If so, do both IE and FF follow this?
>
> Thank you.
>
> Angela French
>
>   



/As always a clickable link to your page in question is always advisable.../

The best source for confirmation is the CSS specs proper--


There is a good explanation of absolute positioning here:


For the most part compliant browsers follow the CSS specifications.
IE 7.0 sometimes follows these specifications.
One never quite knows what IE 6.0 may do in any given situation...

Best,
~d

-- 
http://chelseacreekstudio.com/

__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] absolute positioning

[Luc]

Good afternoon Angela, 

It was foretold that
on 30/07/2010 @ 12:25:52 GMT-0700 (which was 16:25:52 where I live)
Angela French would write:



> I'm being driving nuts by absolute positioning rendering between IE
> and FF.  I just want to confirm what I think is correct about
> absolute positioning.  My understanding is that an absolutely
> position element positions itself relative to its parent container. 
> If the parent has not positioning, then it positions itself
> absolutely relative to the grandparent container, and so forth, up to the 
> .  Is this correct?  


An  absolutely  positioned  element is removed from the normal flow of
the  document  and  placed  precisely at the co-ordinates specified by
top,left, right or bottom.

But  what  is the element absolutely positioned from? It is positioned
absolutely from the top left hand corner of its containing block (i.e.
its  parent).  The  containing  block of the positioned element is the
nearest  ancestor  element which has a value for the property position
other  than  static. If there is no ancestor then the containing block
is the root element , which is the html element outside of all margins
set on the body.

So  what  this  boils  down  to  is that an element will be absolutely
positioned  from  the  top left of the viewport unless it is nested in
another  element that has a value for the property position other than
static.  e.g.  position:relative  or position:absolute. In these cases
the  element  will  position  itself the specified amount from the top
left of its parent elements.

So  the  usual way to place an element in relation to its parent is to
give  the  parent a position:relative without co-ordinates which keeps
the  parent in the flow of the document. The nested child element will
then takes its absolute positioning co-ordinates using the parents top
left co-ordinates as its starting point.

If i'm mistaken, i'm sure somebody here will correct me :-)
 
-- 
Best regards,
 Luc
_

http://www.dzinelabs.com

Using the best e-mail client: The Bat! version 4.2.6 with
Windows XP (build 2600), version
5.1 Service Pack 3 and
using the best browser: Opera.

  


__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] absolute positioning

[Angela French]

I'm being driving nuts by absolute positioning rendering between IE and FF.  I 
just want to confirm what I think is correct about absolute positioning.  My 
understanding is that an absolutely position element positions itself relative 
to its parent container.  If the parent has not positioning, then it positions 
itself absolutely relative to the grandparent container, and so forth, up to 
the .  Is this correct?

If so, do both IE and FF follow this?

Thank you.

Angela French
Internet Specialist
State Board for Community and Technical Colleges
360-704-4316
afre...@sbctc.edu
http://www.checkoutacollege.com

__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Absolute positioning and CSS tables

[Gabriele Romanato]

Hi.
Just some new reflections on some past tests:

http://onwebdev.blogspot.com/2010/07/absolute-positioning-and-css-tables.html

HTH.

Gabriele Romanato

http://www.css-zibaldone.com
http://www.css-zibaldone.com/test/  (English)
http://www.css-zibaldone.com/articles/  (English)
http://onwebdev.blogspot.com/  (English)








__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] absolute positioning problem in IE6

[Debbie Campbell]

Hi David,

That was very close; I had to add just a few more lines to it:

> #logo {
>   float: left;
>   margin-top: -10px;
>   padding-left: 15px;
>   height: 133px;
>   width: 278px;
> }
> #tagline {
>   float: right;
>   padding: 45px 18px 0 0;
>   width: 408px;
>   height: 32px;
> }
> #header-call-text {
>   clear: right;
>   float: right; 
>   padding: 20px 20px 0 0;
>   font-size: 16px;
>   font-weight: bold;
>   width: 300px;
>   text-align: right;
>   color: #6011DB;
>   background-color: transparent;
> }

Thanks for the help!

--
Debbie

David Laakso wrote:
> Debbie Campbell wrote:
>> In this page:
>>
>>  
>>> http://www.redkitecreative.com/projects/hbs/index.html
>>> 
>>
>> My two elements at the top right, #tagline and #header-call-text, are 
>> very out of place in IE6. I've tried placing them in containing divs 
>> with a height assigned, changing position to relative, no luck.
>>
>> The logo was having the same problem and is sort of working, but I'd 
>> rather understand how to correctly fix this.
>>
>> Can someone help?
>>
>>   
> 
> 
> 
> Ditch the ap. Cursory checked in Mac Opera, Safari, FF, SeaMonkey; and 
> IE 6/7/8.
> 
> #tagline {
> float: right;  <-- ::add
> padding: 60px 20px 0 0;   <-- ::add
> position: absolute; <-- ::delete
> top: 60px;<-- ::delete
> right: 20px;<-- ::delete
> width: 408px;
> height: 32px;
> }
> 
> #header-call-text {
> float: right; <-- ::add
> padding: 0 20px 0 0; <-- ::add
> clear:both; <-- ::add
> position: absolute; <-- ::delete
> top: 115px;<-- ::delete
> right: 20px;<-- ::delete
> font-size: 16px;
> font-weight: bold;
> color: #6011DB;
> background-color: transparent;
> }
> 
> Best,
> ~d
> 
> 
> 
> 
> 
> 
> 
> 
> 
> 
> 
> 
> 
> 
> 
> 
> 
> 
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] absolute positioning problem in IE6

[David Laakso]

Debbie Campbell wrote:
> In this page:
>
>   
>> http://www.redkitecreative.com/projects/hbs/index.html
>> 
>
> My two elements at the top right, #tagline and #header-call-text, are 
> very out of place in IE6. I've tried placing them in containing divs 
> with a height assigned, changing position to relative, no luck.
>
> The logo was having the same problem and is sort of working, but I'd 
> rather understand how to correctly fix this.
>
> Can someone help?
>
>   



Ditch the ap. Cursory checked in Mac Opera, Safari, FF, SeaMonkey; and 
IE 6/7/8.

#tagline {
float: right;  <-- ::add
padding: 60px 20px 0 0;   <-- ::add
position: absolute; <-- ::delete
top: 60px;<-- ::delete
 right: 20px;<-- ::delete
width: 408px;
height: 32px;
}

#header-call-text {
float: right; <-- ::add
padding: 0 20px 0 0; <-- ::add
clear:both; <-- ::add
position: absolute; <-- ::delete
top: 115px;<-- ::delete
right: 20px;<-- ::delete
font-size: 16px;
font-weight: bold;
color: #6011DB;
background-color: transparent;
}

Best,
~d

















__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] absolute positioning problem in IE6

[Debbie Campbell]

In this page:

> http://www.redkitecreative.com/projects/hbs/index.html

My two elements at the top right, #tagline and #header-call-text, are 
very out of place in IE6. I've tried placing them in containing divs 
with a height assigned, changing position to relative, no luck.

The logo was having the same problem and is sort of working, but I'd 
rather understand how to correctly fix this.

Can someone help?

-- 
Debbie Campbell
www.redkitecreative.com
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Absolute Positioning

[Bobby Jack]

--- On Wed, 6/17/09, Scott Wilcox  wrote:

> I get the position of the containing element (called
> 'photoContainer') and add that to the x,y points to give me
> my final absolute position. My problem seems to come in when
> I'm setting the values for the absolutely positioned
> elements. In IE, they don't show at all, Firefox 3.0.11
> displays them correctly sometimes, Safari is about 20px out
> and so is chrome.

Hi Scott,

I think it would probably help to have an actual example to view, rather than 
just a screenshot, BUT - on your general method - have you considered the 
following approach:

1. Give photoContainer (or whatever) relative positioning

2. Position the other elements absolutely within that

This should reduce any problems caused by different positionings of the 
containing element. If that doesn't make sense, feel free to mail me directly 
and I'll explain further.

- Bobby
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Absolute Positioning

[Scott Wilcox]

Hello Folks.

[Slightly off topic background info]
I've been working on a system so that I can overlay notes onto my  
photos. A basic run down is that a user will click the top left and  
bottom right of an area within an image then it'll shoot off and save  
the x,y of the clicked area. Now, when a user comes to visit the page,  
I pull the points back and use absolute positioning to place them over  
the image. The x,y points stored in the database are relative to the  
position over the image.


I get the position of the containing element (called 'photoContainer')  
and add that to the x,y points to give me my final absolute position.  
My problem seems to come in when I'm setting the values for the  
absolutely positioned elements. In IE, they don't show at all, Firefox  
3.0.11 displays them correctly sometimes, Safari is about 20px out and  
so is chrome.


The results are shown here:
http://tig.gr/photos/keele-hall/img_4274.jpg

I've really ran out of ideas now and can't understand why they're not  
positioning correctly, any help at all would be appreciated.


Thank you for at least taking the time to read my post.

Scott.

t:  07543 670838
e:  sc...@tig.gr
w:  http://tig.gr

__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] absolute positioning on top of an iframe

[Wishengrad, Ruth]

We decided to go the easier route and not worry about the absolute positioning 
- thanks for your comment.

Thanks.
Ruth

From: mx.css...@googlemail.com [mailto:mx.css...@googlemail.com]
Sent: Wednesday, April 29, 2009 5:55 PM
To: Wishengrad, Ruth; css-d@lists.css-discuss.org
Subject: Re: [css-d] absolute positioning on top of an iframe

Could you give us an example?

I'm guessing something like:




Previous
Next








Would be something I'd do... maybe!

Ta,

~Mx
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] absolute positioning on top of an iframe

[mx . cssdee]

Could you give us an example?

I'm guessing something like:




Previous
Next








Would be something I'd do... maybe!

Ta,

~Mx
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] absolute positioning on top of an iframe

[Wishengrad, Ruth]

Hi All,

I am trying to find out if I can place javascript buttons on top of an iframe. 
The iframe contains photos and text and the buttons are for previous/next. I've 
noticed so far that the absolute positioning is very different in all browsers 
(I started in FF3, but it's way off in IE and Safari) - so that made me worry 
whether it was possible and whether the functionality would work as well. Any 
thoughts, suggestions?

Thanks.
Ruth

__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] :: Absolute Positioning Disappears in IE6 & 7 :

[Ingo Chao]

2009/2/2 Amrinder 

> Hi,
>
> I have done HTML/CSS of a design here: http://demo.awayback.com/ashton .
> Everything is fine in firefox, safari, opera but IE 6,7 are not letting
> things my way. The top sub navigation and search div are not displayed in
> IEs.
> Please help asap.
>
> Regards,
> Amrinder
>

asap: http://www.brunildo.org/test/IE_raf3.html

Ingo
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] :: Absolute Positioning Disappears in IE6 & 7 ::

[Amrinder]

Hi,

I have done HTML/CSS of a design here: http://demo.awayback.com/ashton . 
Everything is fine in firefox, safari, opera but IE 6,7 are not letting things 
my way. The top sub navigation and search div are not displayed in IEs.
Please help asap.

Regards,
Amrinder
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Absolute positioning in IE6

[Gunlaug Sørtun]

Christian Kirchhoff wrote:
> http://www.digitale-bibliothek.de/downloads/test/index.htm

> My problem: there is a p.hint that is absolutely positioned. the
> parent container (div#pub) also contains a label (containing a
> checkbox and text) that is floated left.
> 
> Part of the problem: If I define "bottom: 0;" for the p.hint, in IE6
> it goes way down.

Containers for absolute positioned elements must have 'layout' for
positioning to work in IE. Add 'layout' to div#pub, and IE6 will behave
itself. Declaring "zoom: 1;" or "height: 1%;" on div#pub will do in your
case.

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

[css-d] Absolute positioning in IE6

[Christian Kirchhoff]

Hello,

the following page is a temporary copy depciting my problem:
http://www.digitale-bibliothek.de/downloads/test/index.htm
http://www.digitale-bibliothek.de/downloads/test/chooks.css

The missing mages do not matter. The HTML validates except for an 
undefined attribute, the CSS validates in total.

Links won't work as well, as this is a temporary copy.

My problem: there is a p.hint that is absolutely positioned. the parent 
container (div#pub) also contains a label (containing a checkbox and 
text) that is floated left.

Part of the problem: If I define "bottom: 0;" for the p.hint, in IE6 it 
goes way down. The original version of the page contains more elements 
and is longer, this temp version is so short that the p.hint moves 
outside the browser and thus gets invisible. For testing resons I defned 
"top: -100px;" for IE6 and now the p.hint sits higher.

The x-coordinate of the p.hint doesn't change, no metter whether I 
define a value for left or for right. Its left border just sticks to the 
right border of the label. That is my main problem. The p.hint is 
absolutely positioned, it's parent has "position: relative;" Should the 
position of the p.hint not be computed in regards to the upper left 
corner of the parent?

Best regards,

Christian Kirchhoff
*Editura Gesellschaft für Verlagsdienstleistungen mbH*
Möckernstraße 68 · 10965 Berlin
www.editura.de
AG Berlin-Charlottenburg · HR B 81823 · USt.Id. DE217180548
Geschäftsführer: Ralf Szymanski


__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] absolute positioning of an image not working in IE

[Bruno Fassino]

On Sun, 16 Nov 2008 21:31:54 +0100, Patrik Jansson wrote:

> Hmm.. it seems I was a bit too hasty with saying it
> works... I installed IE6 now and
> saw that the hovers don't work. What could be the problem? You say
> that it should have "hover on the simple 'a' as well", but
> doesn't it already have it? The appearance of big image is achieved
> when hovering the thumbnail: --- .gallery a:hover img.big {
> display:block; } ---


As David mentioned, a rule like
  .gallery a:hover img.big { display: block; }
may not work in IE6 without an "extra kick" of the type
  .gallery a:hover { background-position: 0 0; }
Only certain rules (like background-position) are useful here, and they must
be applied to the 'simple' a:hover.

Unfortunately, this is not sufficient in your case.
Your s have no href and IE6 seems not to apply any hover in this case. So
you need to add an href (something like # is sufficient, but you could also
use something more useful like the url of the big image...)

After this two corrections I see hovers working in IE6, but there is still a
problem, at least in my IE6: Once the big images are displayed they remain
'stuck', so the hover seems to work correctly only the first time. I haven't
looked too much, the only simple workaround I've found is to change method
to make the big images to appear and disappear. Instead of using display:
none/block, use visibility: hidden/visible.  But this should be tested
better, maybe on a simplified test case.


Bruno

--
Bruno Fassino http://www.brunildo.org/test

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] absolute positioning of an image not working in IE

[David Hucklesby]

On Sun, 16 Nov 2008 21:31:54 +0100, Patrik Jansson wrote:
>> On 16.11.2008 15:24, Bruno Fassino wrote:
>>> I think they are aligned as desired, but in IE6 your hover is not working. 
>>> You have
>>> used a child selector (like in '.gallery a:hover > img.big') which IE6 
>>> doesn't
>>> support. I believe you can get rid of it (just use a simple descendant 
>>> selector).
>>> Then maybe IE6 still needs other minor corrections (like having an hover on 
>>> the
>>> simple 'a' as well), I haven't tested.
>>>
>>>
>> Thanks for that, I changed the child's to descendant selectors and 
>> everything seem to
>> work as desired! finally. :)
>>
> Hmm.. it seems I was a bit too hasty with saying it works... I installed IE6 
> now and
> saw that the hovers don't work. What could be the problem? You say that it 
> should have
> "hover on the simple 'a' as well", but
> doesn't it already have it? The appearance of big image is achieved when 
> hovering the
> thumbnail: --- .gallery a:hover img.big { display:block; } ---
>
[...]

Hi Patrik,
I have not studied your code, but from the code snippets you provide,
I believe that your problem with ":hover" in IE 6 *may* be due to that
browser needing an "extra kick in the pants" to get it to respond.

Try adding some other property to that rule, additional 
to "display: block;", that does not affect your design.

One suggestion I have is to add "background-position: 0 0;"

Sorry I can't help with the IE 8 problem. Perhaps I can ask Alan
how close Microsoft is to releasing 8, as it does appear to have
its share of problems?

Cordially,
David
--

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] absolute positioning of an image not working in IE

[Patrik Jansson]

On 16.11.2008 16:09, Patrik Jansson wrote:
> On 16.11.2008 15:24, Bruno Fassino wrote:
>> I think they are aligned as desired, but in IE6 your hover is not working.
>> You have used a child selector (like in '.gallery a:hover > img.big') which
>> IE6 doesn't support. I believe you can get rid of it (just use a simple
>> descendant selector). Then maybe IE6 still needs other minor corrections
>> (like having an hover on the simple 'a' as well), I haven't tested.
>>
>>   
> Thanks for that, I changed the child's to descendant selectors and 
> everything seem to work as desired! finally. :)
Hmm.. it seems I was a bit too hasty with saying it works... I installed 
IE6 now and saw that the hovers don't work. What could be the problem? 
You say that it should have "hover on the simple 'a' as well", but 
doesn't it already have it? The appearance of big image is achieved when 
hovering the thumbnail:
---
.gallery a:hover img.big {
display:block;
}
---

the images' code being:

---
 




---

Doesn't that have hover on the simple 'a'? Or what am I missing? Can the 
two images in one  be a problem? I got the idea for this kind of 
gallery from Stu Nicholls' demo at 
http://www.cssplay.co.uk/menu/lightbox3 , which works in IE6. However, I 
haven't figured out what difference in our galleries make his version 
work. He has an IE6-specific hack, where he wraps the entire subgallery 
(e.g. portraits) into a  -cell, but not for individual 
thumbnails if I understood it correctly and I don't need such a wrap.

regards,
--patrik
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] absolute positioning of an image not working in IE

[Alan Gresley]

Patrik Jansson wrote:
[...]
> For example here there are two rows of thumbnails and IE shows the 
> bigger image 1.5em or so below the line it should be in:
> http://www.mondiara.com/x_tlehto.php?lang=en
[...]
> regards,
> --patrik


Bruno has covered the haslayout issues with IE6 and IE7. IE8b2 shows 
something different all together. If you scroll to the bottom of this page

http://www.mondiara.com/x_tlehto.php?lang=en

and refresh it, only two thumbnails show and the larger popup image is 
hanging outside the div#container1 and over div#footer. Hovering the 
thumbnails causes reflow and the layout snaps into place. I don't know 
why this is happening but I dare say that this may have something to do 
with it.

#IEroot .sandbag_div_topright2{
height:26em;
}




You may wish to change the Conditional Comment to this

Re: [css-d] absolute positioning of an image not working in IE

[Patrik Jansson]

On 16.11.2008 15:24, Bruno Fassino wrote:
> Patrik Jansson wrote:
>   
>> Thanks! Yes, your fix solved it (at least in IE7), I hadn't heard of
>> the zoom-attribute before.. Could someone check e.g.
>> http://www.mondiara.com/x_hemvik.php?lang=en on IE6 and tell if the
>> the big images are aligned with the top of the thumbnails like in FF,
>> Safari and IE7?
>> 
>
> I think they are aligned as desired, but in IE6 your hover is not working.
> You have used a child selector (like in '.gallery a:hover > img.big') which
> IE6 doesn't support. I believe you can get rid of it (just use a simple
> descendant selector). Then maybe IE6 still needs other minor corrections
> (like having an hover on the simple 'a' as well), I haven't tested.
>
>   
Thanks for that, I changed the child's to descendant selectors and 
everything seem to work as desired! finally. :)
> Yes, width triggers hasLayout, so it has the same effect as zoom. I prefer
> zoom, since it is sort of 'neutral' and it immediately recalls that it is a
> sort of hack. Again opinions here vary much. The hasLayout article (and
> linked pages) is a source of further information.
>   
> You're welcolme. Sorry if I'm a bit concise, hasLayout problems in IE are a
> long and winding matter :-)
>
> Bruno
No problem with concise explanations, the link you provided had good 
information in a more elaborate manner. :) I was just wondering if there 
was any reason to select a specific attribute for hasLayout purposes and 
I liked your reasons for using zoom. Maybe we can get rid of those later 
when (or if?) IE doesn't need those in the future and using zoom makes 
these hacks easier to find.

thanks again,
--patrik
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] absolute positioning of an image not working in IE

[Bruno Fassino]

Patrik Jansson wrote:
>
> Thanks! Yes, your fix solved it (at least in IE7), I hadn't heard of
> the zoom-attribute before.. Could someone check e.g.
> http://www.mondiara.com/x_hemvik.php?lang=en on IE6 and tell if the
> the big images are aligned with the top of the thumbnails like in FF,
> Safari and IE7?

I think they are aligned as desired, but in IE6 your hover is not working.
You have used a child selector (like in '.gallery a:hover > img.big') which
IE6 doesn't support. I believe you can get rid of it (just use a simple
descendant selector). Then maybe IE6 still needs other minor corrections
(like having an hover on the simple 'a' as well), I haven't tested.

> "In IE relative containers need hasLayout otherwise they misbehave in
> many different ways"
> Any chance you could clarify this a bit?

Relative containers without hasLayout may create positioning problems to
absolutely positioned descendants. The hasLayout article that I mentioned
[1] has links to pages describing some other problems.


> It seems that it's necessary to set one layout-attribute to all relative
> containers?

Usually I do that. But I'm sure that opinions are different here. HasLayout
may create problems as well as solving some of them.


> I tried setting a width to the .gallery -div and also
> that solved the problem. Is there any specific reason you suggested
> to set the zoom- and z-index -attributes to it?

Yes, width triggers hasLayout, so it has the same effect as zoom. I prefer
zoom, since it is sort of 'neutral' and it immediately recalls that it is a
sort of hack. Again opinions here vary much. The hasLayout article (and
linked pages) is a source of further information.


> thanks for your help,
> --patrik

You're welcolme. Sorry if I'm a bit concise, hasLayout problems in IE are a
long and winding matter :-)

Bruno

[1] http://www.satzansatz.de/cssd/onhavinglayout.html

--
Bruno Fassino http://www.brunildo.org/test

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] absolute positioning of an image not working in IE

[Patrik Jansson]

On 16.11.2008 13:27, Bruno Fassino wrote:
> Patrik Jansson wrote:
> In IE, however, the top of the bigger image is a bit lower than the
> thumbnails and when there are thumbnails in three or more rows, the
> bigger image drops even more down, approximately the height of one
> thumbnail. So it looks like IE thinks that the bigger image is
> positioned somehow relatively with the thumbnails..?
>   
> [...]
>   
>> For example here there are two rows of thumbnails and IE shows the
>> bigger image 1.5em or so below the line it should be in:
>> http://www.mondiara.com/x_tlehto.php?lang=en
>> 
> In IE relative containers need hasLayout otherwise they misbehave in many
> different ways [1].
> Adding:
>   .gallery { zoom: 1; z-index: 1; }
> and removing the IE-specific
>   top: -8em;
> seems to fix the problem, at least in IE7.
> (I haven't looked at the details, in particular why a z-index seems
> necessary to avoid problems at hover.)
>
>
> Best regards,
> Bruno
>
>   
Thanks! Yes, your fix solved it (at least in IE7), I hadn't heard of the 
zoom-attribute before.. Could someone check e.g. 
http://www.mondiara.com/x_hemvik.php?lang=en on IE6 and tell if the the 
big images are aligned with the top of the thumbnails like in FF, Safari 
and IE7?

About the z-indexes: I want the first image on the page (in css the 
img.big0) to be visible when thumbnails are not hovered over so the 
z-index is needed (unless there is another alternative) to get the other 
big images appear on top of the first, allways-visible, one.

"In IE relative containers need hasLayout otherwise they misbehave in 
many different ways"
Any chance you could clarify this a bit? I haven't studied that much 
before, but obviously it's a good thing to remember. It seems that it's 
necessary to set one layout-attribute to all relative containers? I 
tried setting a width to the .gallery -div and also that solved the 
problem. Is there any specific reason you suggested to set the zoom- and 
z-index -attributes to it?

thanks for your help,
--patrik
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] absolute positioning of an image not working in IE

[Bruno Fassino]

Patrik Jansson wrote:

> I've been working on a site, which has several small image
> galleries of
> different buildings. Bigger image shows when thumbnail is
> hovered over.
[...]
> In IE, however, the top of the bigger image is a bit lower than the
> thumbnails and when there are thumbnails in three or more rows, the
> bigger image drops even more down, approximately the height of one
> thumbnail. So it looks like IE thinks that the bigger image is
> positioned somehow relatively with the thumbnails..?
[...]
> For example here there are two rows of thumbnails and IE shows the
> bigger image 1.5em or so below the line it should be in:
> http://www.mondiara.com/x_tlehto.php?lang=en


In IE relative containers need hasLayout otherwise they misbehave in many
different ways [1].
Adding:
  .gallery { zoom: 1; z-index: 1; }
and removing the IE-specific
  top: -8em;
seems to fix the problem, at least in IE7.
(I haven't looked at the details, in particular why a z-index seems
necessary to avoid problems at hover.)


Best regards,
Bruno


[1] http://www.satzansatz.de/cssd/onhavinglayout.html#rp

--
Bruno Fassino http://www.brunildo.org/test

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] absolute positioning of an image not working in IE

[Patrik Jansson]

(I don't know if this posted at all yesterday... if did, sorry for 
double posting)

Hi,
I've been working on a site, which has several small image galleries of 
different buildings. Bigger image shows when thumbnail is hovered over. 
In FF and Safari the bigger images show nicely on the right side of the 
thumbnails with top of the image aligned with the top of the thumbnails.

In IE, however, the top of the bigger image is a bit lower than the 
thumbnails and when there are thumbnails in three or more rows, the 
bigger image drops even more down, approximately the height of one 
thumbnail. So it looks like IE thinks that the bigger image is 
positioned somehow relatively with the thumbnails..? 

Both the thumbnails and the bigger images are in a relatively positioned div. 
Bigger images have absolute positioning with left and top -values specified. In 
a previous version of the gallery I needed to specify a different top-value for 
IE to position the image correctly (with the #IEroot -technique), now this does 
not help.

For example here there are two rows of thumbnails and IE shows the 
bigger image 1.5em or so below the line it should be in:
http://www.mondiara.com/x_tlehto.php?lang=en

In here there are three rows of thumbnails and the bigger image sinks lower:
http://www.mondiara.com/x_mia.php?lang=en

Four rows of thumbnails and bigger image is even lower:
http://www.mondiara.com/x_kantama.php?lang=en

css is here (gallery part starting on line 207, almost half way down):
http://www.mondiara.com/mondiara.css

Hopefully someone can figure out where the problem is, I've been staring 
at the code for too long and can't come up with new ideas any more.. :-/

regards,
--patrik

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Absolute positioning, off-screen positioning and scrollbars

[Gunlaug Sørtun]

Chris Hardie wrote:
> And I presume because when the left attribute is assigned a negative
>  value, the calculation of the canvas's width is not increased, so
> scroll bars are not added?

The fact is that "browsers" decided to providing horizontal scrolling to
one side only - the right side, because nearly all pages back in those
days were aligned left.
The spec-writers intended to allow scrolling to both sides, but once
they thought of writing that in the specs it was simply too late since
"off-screen" positioning were already common and would ruin too many
pages by creating a scroll-bar. So the spec-writers left the issue open,
and accepted the way browsers do it as the de facto standard.

(I read this in an interview with Bert Bos somewhere, not too long ago,
so you know where to ask if I got the details wrong.)


So what we have now is "off-screen" without scroll-bars to the left for
ltr pages, and "off-screen" without scroll-bars to the right for rtl
pages - at least in the latest rtl capable browser-versions.

If you want something "off-screen" without scroll-bars for both ltr and
rtl pages, position it over the top of the document and make it narrow.
Works in all browsers, AFAIK. Doesn't matter how you position it over
the top though, even a large negative margin-top on any element will do.

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

Re: [css-d] Absolute positioning, off-screen positioning and scrollbars

[Ingo Chao]

Chris Hardie wrote:
> And I presume because when the left attribute is assigned a negative 
> value, the calculation of the canvas's width is not increased, so scroll 
> bars are not added?
>> Though it is taken out of the normal flow, it is still painted on the 
>> "canvas" (CSS 2.1: 2.3.1: "the space where the formatting structure is 
>> rendered").
>>
>> CSS 2.1: 9.1.1: "When the viewport is smaller than the area of the 
>> canvas on which the document is rendered, the user agent should offer 
>> a scrolling mechanism."

If not, then no hidden off-screen placement for the various replacement 
techniques would be possible without adding scrollbars. But that is not 
an answer to your question, which I pass to someone else.

Ingo

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

Re: [css-d] Absolute positioning, off-screen positioning and scrollbars

[Chris Hardie]

And I presume because when the left attribute is assigned a negative 
value, the calculation of the canvas's width is not increased, so scroll 
bars are not added?
> Though it is taken out of the normal flow, it is still painted on the 
> "canvas" (CSS 2.1: 2.3.1: "the space where the formatting structure is 
> rendered").
>
> CSS 2.1: 9.1.1: "When the viewport is smaller than the area of the 
> canvas on which the document is rendered, the user agent should offer a 
> scrolling mechanism."
>
> regards,
>
> Ingo
>
>   


__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Absolute positioning, off-screen positioning and scrollbars

[Ingo Chao]

Chris Hardie wrote:
> Hi,
> 
> I'm wondering if someone could point out where in the spec the following 
> behaviour is defined. If I use absolute positioning to position an 
> element off the left-hand side of the screen, I don't get any scroll bars:
> 
> 
> 
> No scrollbars to see here! Carry on!
> 
> 
> 
> However, if I try to position the element off the right-hand side of the 
> screen, I get a horizontal scroll bar that allows me to scroll over to 
> see the absolutely positioned element:
> 
> 
> 
> Scrollbar alert! Scrollbar alert!
> 
> 
> 
> I had presumed that since the element was taken out of document flow, 
> the viewport wouldn't be impacted by its placement, but obviously I'm 
> missing something
> 
> C.

Though it is taken out of the normal flow, it is still painted on the 
"canvas" (CSS 2.1: 2.3.1: "the space where the formatting structure is 
rendered").

CSS 2.1: 9.1.1: "When the viewport is smaller than the area of the 
canvas on which the document is rendered, the user agent should offer a 
scrolling mechanism."

regards,

Ingo

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

[css-d] Absolute positioning, off-screen positioning and scrollbars

[Chris Hardie]

Hi,

I'm wondering if someone could point out where in the spec the following 
behaviour is defined. If I use absolute positioning to position an 
element off the left-hand side of the screen, I don't get any scroll bars:



No scrollbars to see here! Carry on!



However, if I try to position the element off the right-hand side of the 
screen, I get a horizontal scroll bar that allows me to scroll over to 
see the absolutely positioned element:



Scrollbar alert! Scrollbar alert!



I had presumed that since the element was taken out of document flow, 
the viewport wouldn't be impacted by its placement, but obviously I'm 
missing something

C.

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Absolute positioning/Div Overflow/Inline Frame

[CSSHelp]

I'm wondered if you could help me figure out how to accomplish my goal.  I
need to put content from a CMS system into the areas of the website links
below.  They should be some type of inline frames or CSS overflow, but I'm
quite sure how to implement them here.  Since the background is fixed,
should I use absolute positioning for all the links and how would I achieve
proper placement on the pages which differ in shape?  Take a look and let me
know what you think.  

Here are the links below: 

http://ferg.isa-geek.com/chithetasigma/home.asp 
http://ferg.isa-geek.com/chithetasigma/legal.asp 
http://ferg.isa-geek.com/chithetasigma/history.asp
http://ferg.isa-geek.com/chithetasigma/philathropy.asp 
http://ferg.isa-geek.com/chithetasigma/sponsors.asp  


Thank you for your time and assistance!


__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] absolute positioning headaches

[Kenny Graham]

> from what i've read it is my understanding that absolute positioning will
> position an element absolutely based upon the nearest positioned element. so
> if i have an absolute position in my code that is directly under a
> relatively positioned element it should place it in relation to that object
> rather than at the top of the page correct? this is a confusing issue to me
> for some reason

Not to the nearest positioned element, it'll position it relative to
the nearest positioned -ancestor-. So if it's parent element is
positioned, it'll position relative to that.  If it's
great-grandparent is positioned, and its grandparent and parent
aren't, it'll position relative to the great-grandparent.  If none of
its ancestors are positioned, it'll position relative to the root
(html) element.
__
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/

[css-d] absolute positioning headaches

[jeffrey morin]

hello everyone,

from what i've read it is my understanding that absolute positioning will
position an element absolutely based upon the nearest positioned element. so
if i have an absolute position in my code that is directly under a
relatively positioned element it should place it in relation to that object
rather than at the top of the page correct? this is a confusing issue to me
for some reason

-- 
Jeff
__
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] Absolute Positioning and Fixed Footer Woes in IE

[Mark Henderson]

Mark Henderson wrote:
>> [...] So, to reiterate, does anyone know of a way to have a fixed 
>> width box horizontally centered but always a fixed distance from the 
>> bottom of the viewport, whilst allowing the content to scroll using 
>> overflow. I hope that all made sense. Any ideas?

then Gunlaug Sørtun wrote:
> Yes...
> 
> 
> ...but I don't know if any of the above can be adapted to your case
> without seeing the case.
> 
> regards
> Georg

Thanks Georg.

My apologies for the delay, but after some time away from this project 
(and a holiday!) I have finally returned to it and settled on a 
compromise across browser land, managing to convince the client of this 
also. I'm still pretty much where I was beforehand, in that IE can't 
quite do what I want (compare Firefox or Opera to IE on PC to see the 
difference), but now I'm using your position fixed implementation, as 
opposed to the tagsoup [1] approach. It just seems cleaner and easier. 
I'm still not happy with the actual design, but have little choice as 
this is what I was given and this is what the client wants - period. It 
handles font-resizing *ok* in good browsers, but at text size 
larger/largest in IE on PC the footer goes a little haywire in its 
alignment. This seems due to the #hnav expanding the #footer-inner 
beyond its specified width, and I can fix this if I float the #hnav list 
items (they then wrap), but that has another trade-off in that I can no 
longer horizontally center the navigation. Go figure. However, its not 
critical and I can live with it, but if there is a fix for this I'd love 
to know it.

Example URI: http://www.hokonuimoonshinefest.co.nz/food.html

[1] http://tagsoup.com/cookbook/css/fixed/

Mark
__
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/

[css-d] absolute positioning problem in IE5

[info]

Hello .. my first post here, thanks for this resource.

I created a slideshow control-
http://www.yasweb.com/slideshow/demo.html

Source code download from here-
http://www.yasweb.com/slideshow/

I'm using an extra DIV (class is "slideshowwrap") to wrap the entire
control.  The child DIV (class is "slideshow") is floated left in order
for it to shrink to fit, otherwise it expands the entire length.  Is
there a simpler, or more direct way in CSS to specify shrink to fit
width?

I could have calculated the width by accounting for extra padding,
border ... but I'd prefer not to do this, makes the CSS a bit messy.

Thank you






__
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] Absolute Positioning and Fixed Footer Woes in IE

[Gunlaug Sørtun]

Mark Henderson wrote:
> [...] So, to reiterate, does anyone know of a way to have a fixed 
> width box horizontally centered but always a fixed distance from the 
> bottom of the viewport, whilst allowing the content to scroll using 
> overflow. I hope that all made sense. Any ideas?

Yes...


...but I don't know if any of the above can be adapted to your case
without seeing the case.

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/

[css-d] Absolute Positioning and Fixed Footer Woes in IE

[Mark Henderson]

It's been a while...

I have a slightly unusual design request from a client that's giving me 
some grief in IE. In the nutshell, effectively what is required is a 
fixed footer of fixed height that sits at the bottom of the viewport. 
The content will be centered in another fixed width box and will scroll 
when it is longer than the height of the box, and the bottom of this box 
will sit directly above said footer. Initially I had achieved this to 
good effect using position: fixed and the respective IE hacks (no 
hardships there), but now I've been asked if they can have the scrollbar 
for the main content sitting right next to that box inside the window. 
This has given me a slight headache since I can get it working in 
Firefox/Netscape/Opera but NOT in IE6. Something like...

html, body {
margin: 0;
padding: 0;
height: 100%;
border: 0;
}

#content {
width: 730px;
position: absolute;
bottom: 260px;
top: 10px;
left: 50%;
margin: 0 auto auto -365px;
text-align: center;
overflow: hidden;
}

/* hide from ie mac \*/
#content {
overflow: auto;
}/*end hide*/

...does the trick for most browsers, but of course IE6 doesn't like the 
use of both position top and bottom without a height in this situation, 
and using a height wont work (well, I can't make it work).

So, to reiterate, does anyone know of a way to have a fixed width box 
horizontally centered but always a fixed distance from the bottom of the 
viewport, whilst allowing the content to scroll using overflow. I hope 
that all made sense. Any ideas?


TIA
Mark
__
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/

[css-d] absolute positioning not working either in IE6

[Ross Hulford]

I have created a situation where the internal bits #header #left and #right are 
all absoultely positioned but I still cannot seam to get the dropdown to go 
over the text.

http://www.blue-fly.co.uk/trisco/abs.php


The css

http://www.blue-fly.co.uk/trisco/css/abs.css


I am not too clear on how to use z-index. The bigger the number should be on 
top of the stack? doesIE not recognise this??


Thanks,


R.
__
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] absolute positioning bug

[Gunlaug Sørtun]

[EMAIL PROTECTED] wrote:
> page w/ absolute position works fine in most or all browsers, except 
> IE 6 is off by one pixel right, and one pixel bottom... anybody know 
> why?

> http://www.fatgraffix.com/testing/test-absolute-position/absolute-test.html

IE6 isn't any good at calculating with odd numbers.

Odd numbers here...
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] absolute positioning bug

[francky]

[EMAIL PROTECTED] wrote:

>page w/ absolute position works fine in most or all browsers, except IE 6
>is off by one pixel right, and one pixel bottom... anybody know why?
>
>http://www.fatgraffix.com/testing/test-absolute-position/absolute-test.html
>  
>
Hi Francis,
I didn't investigate this 1px question, for I think there has te be 
thought about some (IMO) more important other things first...

Oops-Help!
If I visit the page in Internet Explorer in my screen resolution of 
1280x1024, I see very very small font sizes. And I cannot enlarge them 
in IE. - So for lots of visitors the page will be inaccessible...

* Screenshot IE at 1280x1024.
  
http://home.tiscali.nl/developerscorner/css-discuss/images/screenshot-herbalife-1280x1024.gif
* About 80-85% of the visitors is using IE:
  http://www.thecounter.com/stats/2006/September/browser.php
* About 20% is surfing with a 1280x1024 screen size:
  http://www.thecounter.com/stats/2006/September/res.php
* And more and more people are buying and using screens > 1280x1024px.
* Then 16-17% of the visitors can have severe accessibility problems
  with the fixed font sizes of 11 px and 9 (!) px.

On the other hand, if I visit the page in a resolution of 800x600px, the 
page is walking out of the screen on the right side, and I need to use 
the horizontal scrollbar  to read what is on the page.

* About 16% of the visitors is still using 800x600 screens:
  http://www.thecounter.com/stats/2006/September/res.php
* Then these 16% has less usability because of the fixed width of 961px.

On the third hand, if I visit the page in other browsers than IE, in a 
resolution of 1280x1024px, I can enlarge the font size. But scaling the 
font-size upwards, already in a few steps the text is extending the 
header area.

* Screenshot Firefox at 1280x1024, font-size client side enlarged
  with 3 steps:
  
http://home.tiscali.nl/developerscorner/css-discuss/images/screenshot-herbalife-1280x1024-enlarged.gif

All together, I agree cordially with the recommendation of the BrowserNews:

* Recommendation.
  A good way to ensure that sites will work for as many resolutions
  as possible is to design sites to be resolution-independent, i.e.
  not to specify widths in absolute units (e.g. pixels) /unless/ a
  width is that of a fixed-width object, e.g. a GIF, JPG, or PNG image.
* http://www.upsdell.com/BrowserNews/stat_trends.htm#res
* As a rule of thumb, I use em's for font-sizes, and % for the width
  of a container (and: mostly no div-height! Then the height of the
  boxes can grow or shrink together with the font-sizes).
* In the same way, I try to avoid Absolute Positioning as much as
  possible: it is fixing the elements; then they cannot shift
  upwards or downwards if needed.

To rebuild a site with all fixed styles into a flexible css is not easy. 
But everything can be made with css! [1]
So I hope you will consider to make a fresh start ... ;-)

Success and greetings,
francky

[1]
Illustration of flexibility: a page in the Belgian CSS Zen garden 
"Gigastyle":

* http://www.gigastyle.be/?cssfile=41/elastico.css
  It is not for the beauty of the design, just a test page for
  showing possibilities of fluid css coding. You can try different
  screen sizes, different window sizes, different font-sizes, and
  different browsers.
  The page and the comments in the stylesheet are in Dutch, the css
  is universal.  :-)

Reading stuff for instance:

* The Sizing Text pages of the css-Wiki: http://css-discuss.incutio.com/
* The Float Layouts page of the css-Wiki:
  http://css-discuss.incutio.com/?page=FloatLayouts
* http://www.cssliquid.com/
* Not enough? Google for "liquid style css"!


__
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/

[css-d] absolute positioning bug

[[EMAIL PROTECTED]]

page w/ absolute position works fine in most or all browsers, except IE 6
is off by one pixel right, and one pixel bottom... anybody know why?

-
http://www.fatgraffix.com/testing/test-absolute-position/absolute-test.html

thanx all.

=fgx=
[EMAIL PROTECTED]


mail2web - Check your email from the web at
http://mail2web.com/ .


__
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] Absolute positioning of a legend in a form (works in IE but not in FF)

[Bernat Lleonart]

Hello,

On 6/17/06, Ingo Chao <[EMAIL PROTECTED]> wrote:
> Bernat Lleonart wrote:
> > Hello,
> >
> > I want to position a legend in a form. I've made te fieldset position:
> > relative, and the legend position: absolute.
> >
> > It works in IE, but not in FF.
>
>
> see the Firefox installation folder,
>
> /res/forms.css
>
>
> legend {
>position: static ! important;
>float: none ! important;
>}
>
>
> By design, you cannot position or float it from within an author style
> sheet.
>
>
> Ingo
>
Thanks for your explanation.
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- 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] Absolute positioning of a legend in a form (works in IE but not in FF)

[Ingo Chao]

Bernat Lleonart wrote:
> Hello,
> 
> I want to position a legend in a form. I've made te fieldset position:
> relative, and the legend position: absolute.
> 
> It works in IE, but not in FF.


see the Firefox installation folder,

/res/forms.css


legend {
   position: static ! important;
   float: none ! important;
   }


By design, you cannot position or float it from within an author style 
sheet.


Ingo

-- 
http://www.satzansatz.de/css.html
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- 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/

[css-d] Absolute positioning of a legend in a form (works in IE but not in FF)

[Bernat Lleonart]

Hi,

On 6/17/06, Christian Montoya <[EMAIL PROTECTED]> wrote:

>
> Did you try:
> > legend {
> > position: absolute;
> > top: -1em;
>
> display:block;
>
> > }
>
> ?
>
I've just tried it but it doesn't work.

Thanks.
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- 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] Absolute positioning of a legend in a form (works in IE but not in FF)

[Christian Montoya]

On 6/16/06, Bernat Lleonart <[EMAIL PROTECTED]> wrote:
> Hello,
>
> I want to position a legend in a form. I've made te fieldset position:
> relative, and the legend position: absolute.
>
> It works in IE, but not in FF.
>
> Any idea where is the problem?

Did you try:
> legend {
> position: absolute;
> top: -1em;

display:block;

> }

?

-- 
-- 
Christian Montoya
christianmontoya.com ... portfolio.christianmontoya.com
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- 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/

[css-d] Absolute positioning of a legend in a form (works in IE but not in FF)

[Bernat Lleonart]

Hello,

I want to position a legend in a form. I've made te fieldset position:
relative, and the legend position: absolute.

It works in IE, but not in FF.

Any idea where is the problem?

Thanks

Here's the code:

**
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
http://www.w3.org/1999/xhtml"; xml:lang="ca">



form {
background: #fff;
border: 1px solid #ff8200;
border-top: 1em solid #ff8200;
margin: 0;
padding: 0;
width: 11em;
margin: auto;
}
fieldset {
margin: 0;
padding: 0;
border: 0;
position: relative;
}
legend {
position: absolute;
top: -1em;
}







Legend

Nom:










__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- 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] Absolute positioning hidden

[Stuart Swan]

On 4/28/06, Bill Brown <[EMAIL PROTECTED]> wrote:
> Hi Stuart,
>
> Adding z-index: 1000 to the #headingFloat style block fixed it for me on
> Firefox/WinXp and IE/WinXP. What OS are you using?
>
> Bill Brown
> Webmaster, MacNimble.com
>

Hi Bill,

Just put the z-index to 1000 and it worked a treat, many thanks, was
using much lower figures than this before. Need to read up on this I
think. Thanks.

Stuart
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- 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/

[css-d] Absolute positioning hidden

[Stuart Swan]

Hi List,

I'm having a hard time trying to figure this one out, the below link takes
you to the problem:

URL: http://www.nailzone.co.uk/dev/training.php

CSS: http://www.nailzone.co.uk/dev/css/styles.css

I am trying to position a header image at the top lefthand corner of the
pink box but it seems to be hidden for some reason.

http://www.nailzone.co.uk/dev/images/screenshot.gif is a screenshot of how
i'd like it to appear, the ID in question is #headingFloat at the bottom of
the CSS file.

Any ideas, I've tried messing with the z-index etc. but this does not help,
I'm still a newbie to all this! ;-)

Any help much appreciated,

Stuart
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- 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/

[css-d] absolute positioning items in self-contained blocks?

[Peter Michaux]

Hi,

I am trying to turn a definition list into an attractive tabbed pane.
The user clicks on one of the definition titles and the associated
definition is set to display:block by JavaScript. The CSS part is
causing me some grief.

In the example below, I would like the grey  to contain all of the
green . If this is the case, then there would be grey in the
bottom left side of the output (below the blue). I have used absolute
positioning and don't know if it is possible to do what I want. I hope
there is a simple way without altering any of my markup. Any
suggestions greatly appreciated.

Thanks,
Peter


  tabbed pane
  
  .tabbedPane {background:grey; position:relative;}
  .panel {margin:0; left:10em; background:lightgreen; position: absolute;}
  .tab {width:10em; cursor: pointer; background: lightblue;
float:left; clear:left;}
  




One
Usually people put some Greek in places like
this.Usually people put some Greek in places like this.Usually people put some Greek in places like this.Usually
people put some Greek in places like this.Usually people put
some Greek in places like this.Usually people put some Greek in
places like this.Usually people put some Greek in places like
this.Usually people put some Greek in places like this.Usually people put some Greek in places like this.Usually
people put some Greek in places like this.Usually people put
some Greek in places like this.Usually people put some Greek in
places like this.Usually people put some Greek in places like
this.Usually people put some Greek in places like this.
Two
Definition 2




__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- 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] absolute positioning browser differences

[Gunlaug Sørtun]

Christy Collins wrote:
> Are there any resources for understanding the differences between how
>  browsers render absolutely positioned elements?  I have a couple of 
> different instances that seem to look different on every browser.

They should position the same - apart from what might be caused by
browser-bugs and incomplete CSS.

Got a link to one of your pages with positioning-problems, so we can
help sort it out?

regards
Georg
-- 
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- 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/

[css-d] absolute positioning browser differences

[Christy Collins]

Are there any resources for understanding the differences between how  
browsers render absolutely positioned elements?  I have a couple of  
different instances that seem to look different on every browser.

Thanks,
Christy
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- 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] Absolute positioning in relative element - bug or misunderstanding?

[Ingo Chao]

Jeroen Coumans wrote:
> http://jeroencoumans.nl/test/border.html
> http://jeroencoumans.nl/test/no-border.html
> 
> ... And even more dubiously, Internet  
> Explorer seems to do the correct thing - the positioning shouldn't be  
> affected by the presence of a border, so both files should be  
> rendered the same. 

Els already answered this, I'd like to add why IE does it wrong.

Margins do not collapse when they are not adjoining due to a border or a 
padding. This is why the given files do not render the same, which is 
correct.

Block formatting contexts (float, overflow, position:absolute, 
display:table-..), do prevent margin collapsing, too.

The bug in IEx-7 is that "layout" establishes a new block formatting 
context and prevents margin collapsing [1]. And body is a default 
"layout" element in IE, like td or iframe.

Since there is no way to "un-layout" default layout elements in IE, and 
non-layout parents would be usually too instable to hold complex 
designs, or simply fail to work correctly: The only cross-browser 
workaround is to prevent margin-collapsing in the more 
standards-compliant browsers, by using padding, border, or by 
establishing a new block formatting context.

Ingo

[1] http://www.satzansatz.de/cssd/onhavinglayout.html#uncollapse

-- 
http://www.satzansatz.de/css.html
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- 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] Absolute positioning in relative element - bug ormisunderstanding?

[Els]

Jeroen Coumans wrote:
> Hi all,

Hoi Jeroen :-)

> I thought I understood absolute and relative positioning
> pretty well, but I've hit upon either a bug in Firefox and
> Safari (unlikely) or a bug in IE6 (likely) and/or gaps in my
> knowledge about this subject (also likely). Please have a look
> at the following two documents:
>
> http://jeroencoumans.nl/test/border.html
> http://jeroencoumans.nl/test/no-border.html
>
> In short: the body is relatively positioned, and in it are
> three divs: #content, #left and #right. The latter two are
> absolutely positioned to the top and to the left resp. right.
>
> Strangely enough, when the relatively positioned element
> *doesn't* have a border, the absoluteley positioned elements
> are positioned *relative* to the non-positioned element! The
> no-border.html demonstrates this: only #content has a top
> margin, yet both #left and #right start at the same margin.
> And even more dubiously, Internet Explorer seems to do the
> correct thing - the positioning shouldn't be affected by the
> presence of a border, so both files should be rendered the
> same. At least, that's what I thought.
>
> Does anybody have an idea what's going on? Thanks,


Well, it's not what you think.
What you see happening, is collapsing margins.
As soon as you add a border to , the top margin of #content 
has to stay inside , as it can't collapse with the top 
margin of  anymore.

You can check this by just setting a border on the right side of 
body. You'll see it doesn't extend to the top of the window, but 
only to the top of body, i.e. 50px from the top of the viewport. 
So the question is not 'why doesn't position:absolute obey the 
top of relative positioned ancestor', but 'why does body lose its 
top margin on receiving a border'.

The answer is, that it's not  that lost its top margin, 
it's the top margin of #content that was pushing  down 50px 
first, and isn't now anymore. This you can check very easily: 
remove the top margin from  in your no-border version, and 
you'll see nothing changes.



-- 
Els
http://locusmeus.com/
http://locusoptimus.com/

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- 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/

[css-d] Absolute positioning in relative element - bug or misunderstanding?

[Jeroen Coumans]

Hi all,

I thought I understood absolute and relative positioning pretty well,  
but I've hit upon either a bug in Firefox and Safari (unlikely) or a  
bug in IE6 (likely) and/or gaps in my knowledge about this subject  
(also likely). Please have a look at the following two documents:

http://jeroencoumans.nl/test/border.html
http://jeroencoumans.nl/test/no-border.html

In short: the body is relatively positioned, and in it are three  
divs: #content, #left and #right. The latter two are absolutely  
positioned to the top and to the left resp. right.

Strangely enough, when the relatively positioned element *doesn't*  
have a border, the absoluteley positioned elements are positioned  
*relative* to the non-positioned element! The no-border.html  
demonstrates this: only #content has a top margin, yet both #left and  
#right start at the same margin. And even more dubiously, Internet  
Explorer seems to do the correct thing - the positioning shouldn't be  
affected by the presence of a border, so both files should be  
rendered the same. At least, that's what I thought.

Does anybody have an idea what's going on? Thanks,

-- 
Met vriendelijke groeten,
Jeroen Coumans
www.jeroencoumans.nl


__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- 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] absolute positioning within a DIV

[Erik Harris]

At 05:41 PM 2/25/2006, Erik Harris wrote:
>The work-in-progress page is here:
>
>http://www.fileh.com/kungfujoe/WebDVD/index.html
>[...]
>specify offsets with respect to the box's containing block."  Isn't a DIV a
>containing block?  More specifically, how do I make a DIV into a containing
>block?  I've absolutely positioned the "a" elements, just as the example on
>A List Apart does, but they're being positioned with respect to the

Never mind..  I managed to fix it with the div-in-a-div method (I forgot 
about that, though I'd used it before).  I still don't quite understand why 
a relatively-positioned div can't be a containing element, but I guess it's 
a design choice made by the W3C folks...


Erik Harrishttp://www.eHarrisHome.com
-AIM: KngFuJoe - Yahoo IM: kungfujoe7 - ICQ: 2610172-
Chinese-Indonesian Martial Arts Club  http://www.kungfu-silat.com

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- 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/

[css-d] absolute positioning within a DIV

[Erik Harris]

I'm in the process of putting together a CSS image map (with help from 
http://www.alistapart.com/articles/imagemap), and I'm clearly doing 
something wrong.  I haven't yet gotten to the point of placing images onto 
the links (or even creating all of the images), but I've got text placeholders.

The work-in-progress page is here:

http://www.fileh.com/kungfujoe/WebDVD/index.html

(with CSS here: http://www.fileh.com/kungfujoe/WebDVD/WebDVD.css - the last 
line is for a stupid free hit counter that fileh.com automatically inserts 
into my HTML file)

My understanding from the CSS spec is that when it comes to absolutely 
positioned elements: "The box's position (and possibly size) is specified 
with the 'top', 'right', 'bottom', and 'left' properties. These properties 
specify offsets with respect to the box's containing block."  Isn't a DIV a 
containing block?  More specifically, how do I make a DIV into a containing 
block?  I've absolutely positioned the "a" elements, just as the example on 
A List Apart does, but they're being positioned with respect to the 
upper-left corner of the portal window, and not of the parent 
DIV.  Unfortunately, the example given on A List Apart forces its menu to 
the upper-left corner of the portal window (a convenient "fix" for my 
problem), but I really want to have mine centered.  I'm not quite sure what 
I'm doing wrong here.

Any help would be appreciated.  Thanks in advance

Erik Harrishttp://www.eHarrisHome.com
-AIM: KngFuJoe - Yahoo IM: kungfujoe7 - ICQ: 2610172-
Chinese-Indonesian Martial Arts Club  http://www.kungfu-silat.com

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- 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] absolute positioning inside table cells

[Jesper Brunholm]

Sarah Waterson wrote:
> I'm building a page that requires large tables of small table cells.
> Inside those cells, I need to layer images on top of one another.

I think that, in your place, I'd set-up the images relative to one big 
div, and let some serverside scripting handle the position-numbers. 
That'll allow you to skip the td's too.

If a non-css version is important, I'd make a css-hidden alt-texts-table 
below the images (it will screw up with those stacked images without css 
anyway)

Best regards

Jesper Brunholm
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] absolute positioning inside table cells

[Philippe Wittenbergh]

On 29 Dec 2005, at 7:59 am, Sarah Waterson wrote:

> 'm building a page that requires large tables of small table cells.
> Inside those cells, I need to layer images on top of one another. I've
> found two ways to do this with the position attribute:
>
> OPTION 1: use a  inside each table cell with a position:relative
> and place all of the images inside that div with their
> position:absolute. example:
>   
>   
>   
>   
>   
>   
>   
>   
>
> with .status {position:absolute; top:0px; left:0px}
>
>
> OPTION 2: similar to (1) set the  to have position:relative and
> absolutely position the images inside of it.
>   
>   
>   
>   
>   
>   
>
> with the same style for the .status class.
>
> MY QUESTION: Option (1) works in IE6 and FF. Option (2) only seems to
> work in IE. Why?

The specs leave it open to the User-Agent to decide if a table-cell  
can act as a container for absolute positioned objects.

(note the 'effect of 'position:relative' on table-row-group, table- 
header-group, table-footer-group, table-row, table-column-group,  
table-column, table-cell, and table-caption elements is undefined').

As far as I know, only iCab 3.0 correctly positions an a.p. object  
when the containing block is a table-cell. The fact that IE win seems  
to do it might be the unexpected result of a bug. When I tested it,  
it didn't work very well in IE 6 (read: was unreliable).

So, essentially, you are limited to wrapping the content of the table- 
cell in a div, and use that to establish a containing block.

Philippe
---
Philippe Wittenbergh



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

[css-d] absolute positioning inside table cells

[Sarah Waterson]

Hello everybody,

I'm building a page that requires large tables of small table cells.
Inside those cells, I need to layer images on top of one another. I've
found two ways to do this with the position attribute:

OPTION 1: use a  inside each table cell with a position:relative
and place all of the images inside that div with their
position:absolute. example:
  
  
  
  
  
  
  
  

with .status {position:absolute; top:0px; left:0px}


OPTION 2: similar to (1) set the  to have position:relative and
absolutely position the images inside of it.
  
  
  
  
  
  

with the same style for the .status class.

MY QUESTION: Option (1) works in IE6 and FF. Option (2) only seems to
work in IE. Why?

AND SOME HELP? Unfortunately, I'm building tables with *many* cells
(100's of them - a data visualization of sorts) and would like to
avoid the additional  of option (1) to make this work
cross-browser. Is that possible? Is there some value for the postion
attribute that I don't know about that could magically solve this? :)

I'm new to this list and tried sifting through the archives for folks
having similar issues, but couldn't find anything (but found a lot of
other cool info!). Any help is definitely welcome!

Thanks,
Sarah
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] absolute positioning??

[Jesper Brunholm]

Greg Morphis wrote:

> Hey thanks again for the help..

I'm very happy that you can use it. I still discuss with myself whether 
I have sinned in the eyes of Deus SemantiMaxus, but as long as it works 
and provides the overview intented.

> Quick question.. it says 10px = 15 mins?
> So 40 pxs = 60 minutes or an hour.

There's one funny bogus there, I had overlooked - it appears that the 
rules are a little complicated:

10px = 15 minutes of positioning. (and 40px=60min)

but

(10-5)px = 15 minutes of timespan, as
(40-5=35)px = 1hour of timespan

And actually it should be -6 there, namely 2x2pixel padding + 2 pixel 
border that we don't want covered.

There's a small padding on the .work and .vacancy classes, which we have 
to allow for. We could take it out, but then we would still have the 
right-border covered, which isn't nice. So instead:

if you change
div.work, div.vacate {
position: absolute;
top: 0;
border: 0;
}

to

div.work, div.vacate {
position: absolute;
top: 0;
border: 0;
padding: 2px 1px 2px 2px;
}

Then it's there - deduct 5 pixels from the found width, and it fits.

I've changed my example a bit online 
 - but only to demonstrate 
the change mentioned above.

Kind regards

Jesper Brunholm


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

Re: [css-d] absolute positioning??

[Jesper Brunholm]

Zoe M. Gillenwater wrote:
> While this is a great proof of concept, I wouldn't use it on an actual 
> project.  This is really tabular data and belongs in a table.

That was my first thought too - looking on the given example.

Then I considered the data to be presented, the loads of code that would 
be needed to present empty space, and finally the fact that the page to 
be set up here is hardly the data-storing part of the set up, it's only 
presenting something from a database or a datasheet of some kind.

>  With this 
> sort of layout, there is no underlying semantic meaning that the user 
> agent can make sense of without CSS.  Turn off CSS and see what I mean.

I was going to suggest that starting and finishing times should be 
written on every entry of work/vacation etc (it would be a help, 
regardless of whether a table is used in the setup or not), but forgot 
in the hurry.

With a database behind, there is not a much devellopment to be done here 
in order to make a list of each employee's engagements for the day - 
actually it could be fitted into an xml structure without major changes 
to the setup.
The lists of engagements are visionally relateable to check hour 
overlaps - in a table-like way - I agree :-).

 > Even in an intranet setting where you can assure that everyone has CSS
 > turned on, this might not be a good solution because if it needs to be
 > significantly restyled it will probably take considerably more work than
 > restyling the table would.

I agree that much will have to be done to convert into a new setup if 
the data is stored in this page only. On the other hand, saving these 
data as a table is madness in terms of storage, far too much code, used 
for nothing, is saved.

>  With a lot of employees with very different 
> schedules, it could also get pretty messy -- a ton of ids to form the 
> colored spans for each of their schedules.  Maybe I'm wrong about this 
> last though -- maybe the PHP is doing something that makes this far more 
> efficient than I can see.

I've held the positioning indicating pixel/hours of each task inline, 
close to the classification, as those two will mostly have to be changes 
at the same level of administration. If a database is behind (as I 
asume), it's still easier to enter those data there, than in an external 
sheet where they would be un-administrationable, I agree.

A final note: if this is along the lines of an ancient "what is tabular 
data and what's not" debate or the like, then I've overlooked it, and 
would like to be kindly kicked in the right direction. I'm still very 
much learning here and everywhere else concerning the web standards and 
their proper use.

Best regards

Jesper Brunholm
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] absolute positioning??

[Greg Morphis]

Wow Jesper thats freaking awesome!
I started to build the table but my problem is we're using a java
backend to build it dynamically.
The java class stores the starttime and endtime and thats it. I can
convert that into pixels but converting it into colspans and
generating the blank space inbetween activities are becoming difficult
at best..
Jesper I will try your approach which looks amazing.
Thanks!


--
Auxilium meum a Domino
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] absolute positioning??

[Zoe M. Gillenwater]

Jesper Brunholm wrote:

>I have an alternativ approach to the solution, using your mentioned 
>"position: absolute" instead of tables, for two reasons:
>Firstly, I was horrified by the huge number of table-cells ;-)
>Secondly, I wouldn't like to create the engine behind, administrating 
>the table-setup.
>
>SO I went for a solution with s, having a background png for the 
>15-minutes-grid and positioning the work/vacation-boxes absolutely, but 
>in a position:relative - themselves, which allows us to maintain 
>top: 0; for them and just tell how many pixels=minutes from the 6 
>o'clock left-margin we want it to begin, and how many pixels/minutes we 
>want them to cover.
>
>It's all here: , further 
>explanations on demand, and if anybody is interessted in the rough and 
>tiny PHP code behind some of it, just ask me off-list.
>  
>

While this is a great proof of concept, I wouldn't use it on an actual 
project.  This is really tabular data and belongs in a table.  With this 
sort of layout, there is no underlying semantic meaning that the user 
agent can make sense of without CSS.  Turn off CSS and see what I mean.

Even in an intranet setting where you can assure that everyone has CSS 
turned on, this might not be a good solution because if it needs to be 
significantly restyled it will probably take considerably more work than 
restyling the table would.  With a lot of employees with very different 
schedules, it could also get pretty messy -- a ton of ids to form the 
colored spans for each of their schedules.  Maybe I'm wrong about this 
last though -- maybe the PHP is doing something that makes this far more 
efficient than I can see.

Zoe

-- 
Zoe M. Gillenwater
Design Services Manager
UNC Highway Safety Research Center
http://www.hsrc.unc.edu

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

Re: [css-d] absolute positioning??

[Jesper Brunholm]

Hi Greg and CSS-d

I have an alternativ approach to the solution, using your mentioned 
"position: absolute" instead of tables, for two reasons:
Firstly, I was horrified by the huge number of table-cells ;-)
Secondly, I wouldn't like to create the engine behind, administrating 
the table-setup.

SO I went for a solution with s, having a background png for the 
15-minutes-grid and positioning the work/vacation-boxes absolutely, but 
in a position:relative - themselves, which allows us to maintain 
top: 0; for them and just tell how many pixels=minutes from the 6 
o'clock left-margin we want it to begin, and how many pixels/minutes we 
want them to cover.

It's all here: , further 
explanations on demand, and if anybody is interessted in the rough and 
tiny PHP code behind some of it, just ask me off-list.

Regards

Jesper Brunholm

Greg Morphis wrote:
> Hey, I'm trying to build a daily schedule view which will have
> schedules from 6am - 10pm.
[...]
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] absolute positioning??

[Greg Morphis]

Yeah I realized out after someone replied.. was having a major "Duh" moment.
Thanks for the tips guys!
Now just to work on the dynamic part of it heh..

On 12/7/05, David Dorward <[EMAIL PROTECTED]> wrote:
> On 07/12/05, Greg Morphis <[EMAIL PROTECTED]> wrote:
> > Oh and how would I add the words to it? like "Work" or "Vacation" using a 
> > table?
>
> By putting the text in the table data cell that spans the columns
> headed by the times that the event occurs.
>
> > On 12/7/05, Greg Morphis <[EMAIL PROTECTED]> wrote:
> > > okay so using the tables would it allow for multiple enteries on the same 
> > > day?
>
> By putting two non-empty cells in the same row.
>
> --
> David Dorward 
> __
> css-discuss [EMAIL PROTECTED]
> http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- http://css-discuss.incutio.com/
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
>


--
Auxilium meum a Domino
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] absolute positioning??

[David Dorward]

On 07/12/05, Greg Morphis <[EMAIL PROTECTED]> wrote:
> Oh and how would I add the words to it? like "Work" or "Vacation" using a 
> table?

By putting the text in the table data cell that spans the columns
headed by the times that the event occurs.

> On 12/7/05, Greg Morphis <[EMAIL PROTECTED]> wrote:
> > okay so using the tables would it allow for multiple enteries on the same 
> > day?

By putting two non-empty cells in the same row.

--
David Dorward 
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] absolute positioning??

[Greg Morphis]

Okay thats cool.. BTW they wouldnt be doing 2 things at once.. but
like Meeting from 10-1  and then vacation from 2-6.. multiple things
on the same day.
Thanks
On 12/7/05, Brian Cummiskey <[EMAIL PROTECTED]> wrote:
> Greg Morphis wrote:
> > Oh and how would I add the words to it? like "Work" or "Vacation" using a 
> > table?
> >
>
>
> 
> 
> Vacation
> 
> 
>
>


--
Auxilium meum a Domino
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] absolute positioning??

[Brian Cummiskey]

Greg Morphis wrote:
> Oh and how would I add the words to it? like "Work" or "Vacation" using a 
> table?
> 




Vacation



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

Re: [css-d] absolute positioning??

[Brian Cummiskey]

Greg Morphis wrote:
> okay so using the tables would it allow for multiple enteries on the same day?
> Thanks!

This doesn't seem like a coding problem but rather a business logic 
problem??

For example, how can someone be on vacation, and in a meeting at the 
same time?

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

Re: [css-d] absolute positioning??

[Greg Morphis]

Oh and how would I add the words to it? like "Work" or "Vacation" using a table?


On 12/7/05, Greg Morphis <[EMAIL PROTECTED]> wrote:
> okay so using the tables would it allow for multiple enteries on the same day?
> Thanks!
>
>
> On 12/7/05, Brian Cummiskey <[EMAIL PROTECTED]> wrote:
> > Greg Morphis wrote:
> > > here's a screen shot of what I'm trying to dupe.. Thanks!
> > > http://home.alltel.net/omen/schedule_example.jpg
> >
> >
> > I may not speak for everyone here, but I would use a table for this.
> >
> > Every half-hour is a data cell, and use the proper colspan's as necessary.
> >
> > Can it be done in pure CSS? Sure.  But I don't think it's the best
> > method in this case.
> >
> >
>
>
> --
> Auxilium meum a Domino
>


--
Auxilium meum a Domino
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] absolute positioning??

[Greg Morphis]

okay so using the tables would it allow for multiple enteries on the same day?
Thanks!


On 12/7/05, Brian Cummiskey <[EMAIL PROTECTED]> wrote:
> Greg Morphis wrote:
> > here's a screen shot of what I'm trying to dupe.. Thanks!
> > http://home.alltel.net/omen/schedule_example.jpg
>
>
> I may not speak for everyone here, but I would use a table for this.
>
> Every half-hour is a data cell, and use the proper colspan's as necessary.
>
> Can it be done in pure CSS? Sure.  But I don't think it's the best
> method in this case.
>
>


--
Auxilium meum a Domino
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] absolute positioning??

[Brian Cummiskey]

Greg Morphis wrote:
> here's a screen shot of what I'm trying to dupe.. Thanks!
> http://home.alltel.net/omen/schedule_example.jpg


I may not speak for everyone here, but I would use a table for this.

Every half-hour is a data cell, and use the proper colspan's as necessary.

Can it be done in pure CSS? Sure.  But I don't think it's the best 
method in this case.

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

Re: [css-d] absolute positioning??

[David Dorward]

On 07/12/05, Greg Morphis <[EMAIL PROTECTED]> wrote:
> Hey, I'm trying to build a daily schedule view which will have
> schedules from 6am - 10pm.

Tabular data.



  Employee
  6 AM
  7 AM
  


  0
  15
  



and use colspans to mark events that cross more then a single 15 minute slot.

> 

In HTML, attributes that take a length generally either take a
percentage (an interger followed by a % character) or a pixel length
(*just* an integer). "790px" is wrong.

That said, such things should be done with CSS, not HTML, and the px
unit is required there (if you are using pixels, generally a unit
relative to the font size (e.g. em) or parent element (e.g. %) is more
suitable.

>  style="left:0px;width:140px;background-color:blue;text-align:center;">Work

* You are styling the entire content of the element, that span is pointless.
* You have not set the position property, thus the "left" property
does not apply
* You have specified a width, but the element is not being displayed
as a block, so it doesn't apply.
* You have set a background-color without setting a color (this can
cause problems once the cascade is applied)
* You have specified text-align, but the element is not being
displayed as a block, so it doesn't apply.

> I believe what I need to use is absolutle positioning

You shouldn't need that.

> however when I add that to the inline CSS statement, the width works

I have a feeling absolute positioning may turn things into blocks,
thus causing the property to apply.

> but the span is moved out of the cell table element.

Yes.


--
David Dorward 
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] absolute positioning??

[Greg Morphis]

here's a screen shot of what I'm trying to dupe.. Thanks!
http://home.alltel.net/omen/schedule_example.jpg


On 12/7/05, Greg Morphis <[EMAIL PROTECTED]> wrote:
> Hey, I'm trying to build a daily schedule view which will have
> schedules from 6am - 10pm.
> I'm not sure if this is the correct approach so I'm asking for help...
>
> I was thinking of using a table with 3 columns, 1 column for the name,
> 1 column for job title and 1 column for their daily schedule. I was
> thinking of using spans for the various tasks that the users will have
> throughout their day.
> 
> 
> Pat Smoot
> CSR
>  style="left:0px;width:140px;background-color:blue;text-align:center;">Work
>
> 
> 
> the border is just for viewing..
> I believe what I need to use is absolutle positioning however when I
> add that to the inline CSS statement, the width works but the span is
> moved out of the cell table element.
> I'm no CSS wiz, I'm just a beginner and hoping one of you can suggest
> some sites to look at, tutorials or code snippets.
>
> Thanks!
>
>
>
> --
> Auxilium meum a Domino
>


--
Auxilium meum a Domino
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] absolute positioning??

[Greg Morphis]

I noticed that when I changed the spans to divs, the width worked but
of course because divs are block level you can't have more than one on
a row unless you change the display to in-line which basically makes
it a span.



On 12/7/05, Greg Morphis <[EMAIL PROTECTED]> wrote:
> Hey, I'm trying to build a daily schedule view which will have
> schedules from 6am - 10pm.
> I'm not sure if this is the correct approach so I'm asking for help...
>
> I was thinking of using a table with 3 columns, 1 column for the name,
> 1 column for job title and 1 column for their daily schedule. I was
> thinking of using spans for the various tasks that the users will have
> throughout their day.
> 
> 
> Pat Smoot
> CSR
>  style="left:0px;width:140px;background-color:blue;text-align:center;">Work
>
> 
> 
> the border is just for viewing..
> I believe what I need to use is absolutle positioning however when I
> add that to the inline CSS statement, the width works but the span is
> moved out of the cell table element.
> I'm no CSS wiz, I'm just a beginner and hoping one of you can suggest
> some sites to look at, tutorials or code snippets.
>
> Thanks!
>
>
>
> --
> Auxilium meum a Domino
>


--
Auxilium meum a Domino
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] absolute positioning??

[Joe Huggins]

A better approach might be to create a class, call it .task. Then the 
rule might be td .task {background-color:blue;text-align:center;}.

And then your HTML would be:
  

Greg Morphis wrote:
> Hey, I'm trying to build a daily schedule view which will have
> schedules from 6am - 10pm.
> I'm not sure if this is the correct approach so I'm asking for help...
> 
> I was thinking of using a table with 3 columns, 1 column for the name,
> 1 column for job title and 1 column for their daily schedule. I was
> thinking of using spans for the various tasks that the users will have
> throughout their day.
> 
> 
>   Pat Smoot
>   CSR
>style="left:0px;width:140px;background-color:blue;text-align:center;">Work
>   
> 
> 
> the border is just for viewing..
> I believe what I need to use is absolutle positioning however when I
> add that to the inline CSS statement, the width works but the span is
> moved out of the cell table element.
> I'm no CSS wiz, I'm just a beginner and hoping one of you can suggest
> some sites to look at, tutorials or code snippets.
> 
> Thanks!
> 

-- 
Joe Huggins MSW, MSCIS
University of Colorado Health Sciences Center
Clinical Science Program
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] absolute positioning??

[Greg Morphis]

Hey, I'm trying to build a daily schedule view which will have
schedules from 6am - 10pm.
I'm not sure if this is the correct approach so I'm asking for help...

I was thinking of using a table with 3 columns, 1 column for the name,
1 column for job title and 1 column for their daily schedule. I was
thinking of using spans for the various tasks that the users will have
throughout their day.


Pat Smoot
CSR
Work



the border is just for viewing..
I believe what I need to use is absolutle positioning however when I
add that to the inline CSS statement, the width works but the span is
moved out of the cell table element.
I'm no CSS wiz, I'm just a beginner and hoping one of you can suggest
some sites to look at, tutorials or code snippets.

Thanks!



--
Auxilium meum a Domino
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Absolute Positioning Glitch - IE on Mac

[Philippe Wittenbergh]

On 24 Nov 2005, at 8:32 am, Chris Akins wrote:

> I tried the below suggestion as wells as specifying a width for that
> div, margin-left, margin-right, all to no avail.
>
> Anything else anyone can think of?
>
> On 11/23/05, Philippe Wittenbergh <[EMAIL PROTECTED]> wrote:
>
>> Try: div#search {text-align:right;}

I tested this on a local copy of your page, and it worked right out of 
the box.

Philippe
---
Philippe Wittenbergh


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

Re: [css-d] Absolute Positioning Glitch - IE on Mac

[Chris Akins]

I tried the below suggestion as wells as specifying a width for that
div, margin-left, margin-right, all to no avail.

Anything else anyone can think of?

On 11/23/05, Philippe Wittenbergh <[EMAIL PROTECTED]> wrote:

> Try: div#search {text-align:right;}
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Absolute Positioning Glitch - IE on Mac

[Philippe Wittenbergh]

On 23 Nov 2005, at 7:50 am, Chris Akins wrote:

> The  on the following page:
>
> www.springfieldmogov.org
>
> does not appear in the proper place on IE Mac.
>
> The css for this page is www.springfieldmogov.org/css/3colTest.css
>
> I've read some stuff about IE Mac not doing absolute positioning
> correctly when specifying "right: some value;"
>
> But i've also tried using right:0 then adding right and left margins
> to that , but to no avail.

The problem in IE Mac is that your div is as wide as the window- it is 
not very good at 'shrink-wrapping' the width. Then your elements are 
positioned to the left side of the page.

Try: div#search {text-align:right;}

Philippe
---
Philippe Wittenbergh


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

[css-d] Absolute Positioning Glitch - IE on Mac

[Chris Akins]

The  on the following page:

www.springfieldmogov.org

does not appear in the proper place on IE Mac.

The css for this page is www.springfieldmogov.org/css/3colTest.css

I've read some stuff about IE Mac not doing absolute positioning
correctly when specifying "right: some value;"

But i've also tried using right:0 then adding right and left margins
to that , but to no avail.

Is there something I'm missing?

IE Mac isn't a huge issue for me since it's an officially abandoned
browser, but we've gotten one call already about this issue, having
had this new page up only a week.

P.S. - I'm open to comments good and bad about this page structure,
CSS, etc. also.  This is my most complex CSS-only design so far.  I
think it's mostly doing what I want, but am always wanting to learn
more.

The CSS validates, and, in my opinion, the critical part of the HTML
validates too.  Some scripting keeps it from validating fully as HTML.

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

Re: [css-d] Absolute Positioning or Float?

[Adriano Castro]

> I am working on a personal page that will serve as a
> portfolio page and contact website. It will be in
> two-column format. I have read advantages for both,
> but was seeking advice on should I use absolute
> positioning or floating? (or does it matter?) I
> appreciate any insight on this topic!

Hi Zach,

I suggest floating instead of positioning.

Also, this is very good read on this subject:

+ http://css.maxdesign.com.au/floatutorial/

Good luck!

-- 
[EMAIL PROTECTED]
www.adrianocastro.net
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Absolute Positioning or Float?

[Christian Heilmann]

> Hi,
> I am working on a personal page that will serve as a
> portfolio page and contact website. It will be in
> two-column format. I have read advantages for both,
> but was seeking advice on should I use absolute
> positioning or floating? (or does it matter?) I
> appreciate any insight on this topic!

Absolute positioning makes you dependent on knowing what column will
be the highest, with floats you don't need that knowledge. On the
other hand, absolute positioning seems to be better supported by real
old browsers like NS4.x and Mac IE.

Floating allows for more flexible layouts, IMHO.

--
Chris Heilmann
Blog: http://www.wait-till-i.com
Writing: http://icant.co.uk/
Binaries: http://www.onlinetools.org/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Absolute Positioning or Float?

[Zach Byrd]

Hi,
I am working on a personal page that will serve as a
portfolio page and contact website. It will be in
two-column format. I have read advantages for both,
but was seeking advice on should I use absolute
positioning or floating? (or does it matter?) I
appreciate any insight on this topic!

   Thanks,
  Zach Byrd

__
Do You Yahoo!?
Tired of spam?  Yahoo! Mail has the best spam protection around 
http://mail.yahoo.com 
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Absolute positioning woes

[David Wang]

Hi,

The site I'm working on has an absolutely positioned menu at the top of each 
page. However, within the markup, the menu is actually at the end of the 
page. The menu (#smenu) shows correctly in Firefox but not in IE. It's 
easier for me to show you my problem than put in into words, so please point 
IE and Firefox to http://beta.quattro.com.my to observe the problem.

My CSS file is located at http://beta.quattro.com.my/assets/styles.css

I'm actually trying to emulate the menu positioning from Doug Bowman's 
Stopdesign (I only refer, never copy). In his site, Doug places #cnav right 
at the top with absolute positioning, but within the markup it is actually 
down at the footer.

What am I doing wrong? How can I make IE display the menu?

Any help is much appreciated,

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

Re: [css-d] Absolute positioning containers

[Kelly Miller]

If you give a container position: relative, but no top or left value, 
it'll be drawn as if it weren't positioned, but any absolutely 
positioned elements inside it will be positioned with respect to it.  
position: absolute is relative to the last positioned ancestor element 
(positioned = has position: relative or position: absolute).


Viascape List wrote:


I have a page that is generating an order confirmation that is broken
down into a whole bunch of small tables. I have redone pretty much
everything with css, but I am leaving the tables for now because the
html table code is generated on the fly by PHP script that I inherited
with the code-base.  On one of the pages I was able to use absolute
positioning to position the tables absolutely with respect to the
 element that contained them.  For that application it worked
beautifully.  However, on the next page which has the same table but
without the  or  elements (we go from an order page to an
order confirmation page, where it re-lists everything you just typed
in), the absolute positioning renders with respect to the page instead
of the containing .  My favorite reference, Core CSS 2nd Ed. by
Schengili-Roberts, claims that absolute positioning renders with
respect to the page always.  This is obviously not true (at least
anymore).  I am testing with Firefox 1.0.4 and IE6, which display the
same behavior in this regard.  Does anyone know the details of
container elements for absolute positioning: what will and will not
render abs contained elements "properly"?  Any help is greatly
appreciated.
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

 




--
http://www.mozilla.org/products/firefox/ - Get Firefox!
http://www.mozilla.org/products/thunderbird/ - Reclaim Your Inbox!

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

[css-d] Absolute positioning containers

[Viascape List]

I have a page that is generating an order confirmation that is broken
down into a whole bunch of small tables. I have redone pretty much
everything with css, but I am leaving the tables for now because the
html table code is generated on the fly by PHP script that I inherited
with the code-base.  On one of the pages I was able to use absolute
positioning to position the tables absolutely with respect to the
 element that contained them.  For that application it worked
beautifully.  However, on the next page which has the same table but
without the  or  elements (we go from an order page to an
order confirmation page, where it re-lists everything you just typed
in), the absolute positioning renders with respect to the page instead
of the containing .  My favorite reference, Core CSS 2nd Ed. by
Schengili-Roberts, claims that absolute positioning renders with
respect to the page always.  This is obviously not true (at least
anymore).  I am testing with Firefox 1.0.4 and IE6, which display the
same behavior in this regard.  Does anyone know the details of
container elements for absolute positioning: what will and will not
render abs contained elements "properly"?  Any help is greatly
appreciated.
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/