Re: [css-d] Absolute positioning within a table
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 for all page containers okay?
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?
On Thu, Aug 12, 2010 at 10:58 AM, Bill Braun bbr...@hlthsys.com 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?
On Thu, Aug 12, 2010 at 11:47 AM, Tom Livingston tom...@gmail.com wrote: On Thu, Aug 12, 2010 at 10:58 AM, Bill Braun bbr...@hlthsys.com 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
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: snipped a bit 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 body. 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
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 body. 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-- http://www.w3.org/TR/CSS2/visuren.html#absolute-positioning There is a good explanation of absolute positioning here: http://www.brainjar.com/css/positioning/default4.asp 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
On Fri, Jul 30, 2010 at 12:25 PM, Angela French afre...@sbctc.edu 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
-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 afre...@sbctc.edu 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
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 body. 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 problem in IE6
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
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
--- On Wed, 6/17/09, Scott Wilcox sc...@tig.gr 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 on top of an iframe
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: div id=wrapper div id=prne a href=#prevPrevious/a a href=#nextNext/a /div div id=ifra iframe src=photo.html/iframe /div /div 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
Could you give us an example? I'm guessing something like: div id=wrapper div id=prne a href=#prevPrevious/a a href=#nextNext/a /div div id=ifra iframe src=photo.html/iframe /div /div 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 Disappears in IE6 7 :
2009/2/2 Amrinder amrinder.san...@hotmail.com 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 in IE6
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 of an image not working in IE
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
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
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
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
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;
}
!--[if IE]div id=IEroot![endif]--
You may wish to change the Conditional Comment to this
!--[if lte IE7]
or just target IE7 and earlier in the CSS.
*:first-child+html .sandbag_div_topright2{
height:26em;
}
* html .sandbag_div_topright2{
height:26em;
}
--
Alan http://css-class.com/
Armies Cannot Stop An Idea Whose Time Has Come. - Victor Hugo
http://www.wearechange.org/
__
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
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:
---
div class=gallery
!--...cutting extras...--
aimg src=images/projektit/thumbs/hemvik/villa_hemvik_small-1.jpg
alt=julkisivu 1
img class=big src=images/projektit/hemvik/villa_hemvik-1.jpg
alt=julkisivu 1
/a
---
Doesn't that have hover on the simple 'a'? Or what am I missing? Can the
two images in one a 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 tabletrtd -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
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
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 as 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, off-screen positioning and scrollbars
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: body div style=position:absolute;left:-100em;border:1px solid orange;width:100px; No scrollbars to see here! Carry on! /div /body 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: body div style=position:absolute;left:100em;border:1px solid orange;width:100px; Scrollbar alert! Scrollbar alert! /div /body 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
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
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 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 headaches
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 and Fixed Footer Woes in IE
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... http://www.gunlaug.no/contents/wd_additions_15.html http://www.gunlaug.no/contents/wd_additions_17.html ...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 and Fixed Footer Woes in IE
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... http://www.gunlaug.no/contents/wd_additions_15.html http://www.gunlaug.no/contents/wd_additions_17.html ...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 bug
[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
[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... div style=width: 953px; height: 55px; ...tend to land 1px off in IE6, while even numbers... div style=width: 954px; height: 56px; ...will give a perfect line-up even in IE6. Call it a bug, and adjust for it where you find necessary. 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 of a legend in a form (works in IE but not in FF)
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)
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)
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 hidden
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 in relative element - bug ormisunderstanding?
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 body, the top margin of #content has to stay inside body, as it can't collapse with the top margin of body 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 body that lost its top margin, it's the top margin of #content that was pushing body down 50px first, and isn't now anymore. This you can check very easily: remove the top margin from body 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 in relative element - bug or misunderstanding?
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 browser differences
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 within a DIV
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??
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 divs, having a background png for the 15-minutes-grid and positioning the work/vacation-boxes absolutely, but in a position:relative -div 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: http://garion.dk/webdesign/scheduling.html, 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??
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 divs, having a background png for the 15-minutes-grid and positioning the work/vacation-boxes absolutely, but in a position:relative -div 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: http://garion.dk/webdesign/scheduling.html, 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 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
http://garion.dk/webdesign/scheduling.html - 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??
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:
td width=640px class=task
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.
table width=790px; border=1
tr
td width=75pxPat Smoot/td
td width=75pxCSR/td
td width=640pxspan
style=left:0px;width:140px;background-color:blue;text-align:center;Work/span/td
/tr
/table
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??
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. table width=790px; border=1 tr td width=75pxPat Smoot/td td width=75pxCSR/td td width=640pxspan style=left:0px;width:140px;background-color:blue;text-align:center;Work/span/td /tr /table 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??
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. thead tr!-- hour -- th rowspan=2Employee/th th colspan=46 AM/th th colspan=47 AM/th !-- etc -- /tr tr th0/th th15/th !-- etc -- /tr /thead and use colspans to mark events that cross more then a single 15 minute slot. table width=790px; border=1 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. td width=640pxspan style=left:0px;width:140px;background-color:blue;text-align:center;Work/span/td * 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 http://dorward.me.ukhttp://blog.dorward.me.uk __ 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 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??
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??
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 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 wrote: Oh and how would I add the words to it? like Work or Vacation using a table? table tr td colspan=2 class=onvacationVacation/td /tr /table __ 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??
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? table tr td colspan=2 class=onvacationVacation/td /tr /table -- 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??
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 http://dorward.me.ukhttp://blog.dorward.me.uk __ 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
On 23 Nov 2005, at 7:50 am, Chris Akins wrote:
The div id=search 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 div, 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
http://emps.l-c-n.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/
Re: [css-d] Absolute Positioning Glitch - IE on Mac
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
http://emps.l-c-n.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/
Re: [css-d] Absolute Positioning or Float?
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?
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/
