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/

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/

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

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

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

[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

[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??

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

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??

[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??

[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??

[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??

[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??

[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??

[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??

[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??

[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??

[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]

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??

[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??

[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??

[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??

[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??

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

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

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/

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/

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/

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/

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/

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

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/

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

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

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/

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/

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

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:
> 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

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

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

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?

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

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/

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/

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

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:
>
> 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 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

[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 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

[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

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

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/

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/