Re: [css-d] [+] Re: [css-d Is this proper use of div tags?

2010-11-18 Thread Thierry Koblentz
 Example D
 http://www.alistapart.com/d/css-positioning-101/example_d.html
 shows our new markup. Because of the new coordinate system, the
 blue  
 block measures its offset 200 pixels from the left of the red block
 (|#box_1|) instead of the document.
 
 Yes, and by placing #box_2 as a child of #box_1, it's default position
 within the flow changes. Because it shares a y-coord in common with
 #box_1, it shows up as adjacent to #box_1, as Example D clearly
 indicates. Perhaps is wording isn't the best, but the example supports
 his logic.

Copying your post: the blue block measures its offset 200 pixels from the
left of the red block (|#box_1|) instead of the document. The red box *and*
the document have nothing to do with the offset of that box. Imho, the
example should not demo his logic, but rather how things work... 

--
Regards,
Thierry
www.tjkdesign.com | www.ez-css.org | @thierrykoblentz


__
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] [+] Re: [css-d Is this proper use of div tags?

2010-11-18 Thread Climis, Tim
 The red
 box *and* the document have nothing to do with the offset of that
 box. 

Not entirely true.  Yes, the blue box is offset in relation to where it would 
be without position.  But where the blue box would be depends directly on 
other elements (previous siblings and parents, i.e, the red box, and the 
document).  and since we're only changing the left position, the only thing 
that affects that is the document, making the offset in relation to the 
document a fair statement.

The thing that's missing, and should have been pointed out, is that if we added 
an older sibling, the blue box would not be in the same place.   Although, 
since this article appears to assume that we're working with non-floated block 
elements, it would only move down, and not over.

Actually, now that I think about it, if there were a floated sibling, it 
wouldn't have any effect on the flow, since floats are out of the flow... which 
means that the only way to make the box move further to the left is by moving 
the document further to the left (with either position or margin).  Thus the 
box still ends up in relationship to the document.  It only breaks down when 
you use a top offset.

---Tim

__
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] [+] Re: [css-d Is this proper use of div tags?

2010-11-18 Thread Thierry Koblentz
Hi Tim,

  The red
  box *and* the document have nothing to do with the offset of that
  box.
 
 Not entirely true.  Yes, the blue box is offset in relation to where it
 would be without position.  But where the blue box would be depends
 directly on other elements (previous siblings and parents, i.e, the red
 box, and the document).  and since we're only changing the left
 position, the only thing that affects that is the document, making the
 offset in relation to the document a fair statement.

I don't think you can explain relative positioning that way, because
that's true for any positioning value, but fixed.

The offset (200px in that example [1]) is not in relation to the document.
If it was the case, a left-margin or a left padding on the reddish box
should have no effect on the blue box. If such styling has an effect on the
box, it is because that blue box is offset from *its* normal position in the
flow. *its* position, not the position of siblings, or document, etc. That's
the reference point for the 200px, nothing else. 

[1] http://www.alistapart.com/d/css-positioning-101/example_d.html

--
Regards,
Thierry
www.tjkdesign.com | www.ez-css.org | @thierrykoblentz

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


[css-d] OK to insert block-level tag inside div?

2010-11-18 Thread John

Hello;

This is related to my question yesterday about proper use of div tags...

I now get that an ID must be used only once on a page. Within div  
tags (from code generously provided here) I've been able to format  
specific bits of content, like text, using classes and span tags.


But I'd like to ad a dotted line between to paragraphs, and that  
seems to me to be a block-level tag required to do it. Is this correct?


Can I throw in a br and apply a border-bottom to that or is that  
considered bad coding?


thank you!

John

__
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] [+] OK to insert block-level tag inside div?

2010-11-18 Thread Thierry Koblentz
 This is related to my question yesterday about proper use of div
 tags...
 
 I now get that an ID must be used only once on a page. Within div
 tags (from code generously provided here) I've been able to format
 specific bits of content, like text, using classes and span tags.
 
 But I'd like to ad a dotted line between to paragraphs, and that
 seems to me to be a block-level tag required to do it. Is this correct?

Yes, but paragraphs are block-level elements, so simply give a class to one
of the paragraphs to create that border.
One thing you'll notice though, is that once you apply a border to a
paragraph its margin will not collapse with the margin of its sibling (see
margin collapsing). 

 Can I throw in a br and apply a border-bottom to that or is that
 considered bad coding?

Bad coding, yes :)

--
Regards,
Thierry
www.tjkdesign.com | www.ez-css.org | @thierrykoblentz

__
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] OK to insert block-level tag inside div?

2010-11-18 Thread Beth Lee
On Thu, Nov 18, 2010 at 2:34 PM, John j...@coffeeonmars.com wrote:

 I now get that an ID must be used only once on a page. Within div tags (from
 code generously provided here) I've been able to format specific bits of
 content, like text, using classes and span tags.

 But I'd like to ad a dotted line between to paragraphs, and that seems to me
 to be a block-level tag required to do it. Is this correct?

 Can I throw in a br and apply a border-bottom to that or is that
 considered bad coding?

A paragraph *is* a block-level element. Why not throw in some
padding-bottom and apply a dotted border-bottom to that? You can add a
class of 'last' to the last paragraph to override the border.

Beth
__
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] OK to insert block-level tag inside div?

2010-11-18 Thread G.Sørtun

On 18.11.2010 22:34, John wrote:

Hello;

This is related to my question yesterday about proper use of div tags...

I now get that an ID must be used only once on a page. Within div tags 
(from code generously provided here) I've been able to format specific 
bits of content, like text, using classes and span tags.


But I'd like to ad a dotted line between to paragraphs, and that seems 
to me to be a block-level tag required to do it. Is this correct?


Paragraphs and headlines are block elements, and, yes, of course you can 
put any type of block-level elements inside divs.


No need to add extra markup for adding decorative lines and separators 
though. Add a little extra padding at the bottom or top of one of the 
paragraphs you want to split a bit, and put a dotted border-line on that 
paragraph. Adjust padding/margin on those paragraphs for a nice line-up.


Another method is to add a background to the expanded top or bottom 
padding on paragraphs. I haven't documented it anywhere (AICR), but this 
page...

http://www.gunlaug.no/contents/molly_1_25.html
...shows pretty clearly how I have added a cat and a ---***--- line 
to selected paragraphs using a dedicated class, to create spaces between 
paragraphs. No extra elements in markup, only a class and a few lines of 
reusable CSS in the stylesheet.




Can I throw in a br and apply a border-bottom to that or is that 
considered bad coding?


A br won't take such styling. br is line-break and nothing else. 
You are probably thinking about hr - horizontal ruler...

http://www.gunlaug.no/contents/wd_chaos_30.html
...and sure, you can use hr but it isn't always easy to make it look 
right or the same across browser-land.


br (line-break) is best reserved for breaking lines within paragraphs, 
and only where it makes sense for the text and doesn't start looking odd 
if someone apply font-resizing.


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


[css-d] More IE7 stacking / z-index issues

2010-11-18 Thread Tim Wolf
Thanks to the information discussed a couple weeks back on this issue I thought 
I had the IE7 z-index issue solved with my drop-down menu. Apparently not.

My CSS-only (slightly modified Stu Nichols droplist) drop-down menu was 
displaying (stacking) behind the content below the navs. Had it fixed until I 
added more content. 

This is an IE7 and IE8 issue (works in FF, Opera, Safafri). Notice how it lays 
above the gradient grey border but below the divs with the blue background 
images.

Here a a slightly simplified version of the page:

http://uatext1.cga.ct.gov/sdo/index-test2.php

or a version with more content within those divs:

http://uatext1.cga.ct.gov/sdo/index-test.php

There are a bunch of CSS files being called to. Here are the primary ones in 
addition to a reset.css:

http://uatext1.cga.ct.gov/sdo/css/base.css
http://uatext1.cga.ct.gov/sdo/css/index.css
http://uatext1.cga.ct.gov/sdo/inc/inc-css/header.css

The header code is being pulled into the page via a PHP include.

I've tried a variety of z-index experiments. Tried to make anything that didn't 
need to have the position element not have one. I even tried a jQuery script 
that promised to solve all my problems,

Help!

Tim Wolf


__
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] [+] OK to insert block-level tag inside div?

2010-11-18 Thread Thierry Koblentz
 Yes, but paragraphs are block-level elements, so simply give a class to
 one
 of the paragraphs to create that border.
 One thing you'll notice though, is that once you apply a border to a
 paragraph its margin will not collapse with the margin of its sibling
 (see
 margin collapsing).

Before somebody points this out:
This won't do anything regarding margins collapsing as the border would not
come in between the two :-)

--
Regards,
Thierry
www.tjkdesign.com | www.ez-css.org | @thierrykoblentz




__
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] OK to insert block-level tag inside div?

2010-11-18 Thread David Laakso

On 11/18/10 4:34 PM, John wrote:



But I'd like to ad a dotted line between to paragraphs...



Others have answered your question. However, if you are still having 
difficulty, it always a good idea to put the page in question on a 
public server and provide a clickable link to it in your post to the 
list. Otherwise, we all
 get to play an endless guessing game as to what you are after, rather 
than providing what may well be a very simple definitive answer.






John





Best,
~d

--
:: desktop and mobile ::
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] OK to insert block-level tag inside div?

2010-11-18 Thread John
OK..Here's a link to a graphic showing the dotted line and its  
position which I'm after:



http://thinkplan.org/workshop/pix/dottedline.jpg


thanks!

John


On Nov 18, 2010, at 2:42 PM, David Laakso wrote:


On 11/18/10 4:34 PM, John wrote:



But I'd like to ad a dotted line between to paragraphs...



Others have answered your question. However, if you are still  
having difficulty, it always a good idea to put the page in  
question on a public server and provide a clickable link to it in  
your post to the list. Otherwise, we all
 get to play an endless guessing game as to what you are after,  
rather than providing what may well be a very simple definitive  
answer.






John





Best,
~d

--
:: desktop and mobile ::
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/


__
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] [+] Re: OK to insert block-level tag inside div?

2010-11-18 Thread Thierry Koblentz
 OK..Here's a link to a graphic showing the dotted line and its
 position which I'm after:
 
 
 http://thinkplan.org/workshop/pix/dottedline.jpg

Try this:

.myParagraph {
margin-top:10px;
padding-top:10px;
border-top:1px dotted #333;
}


--
Regards,
Thierry
www.tjkdesign.com | www.ez-css.org | @thierrykoblentz

__
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] OK to insert block-level tag inside div?

2010-11-18 Thread John

One thing I tried here was to make a new p class:

.dotted {
border-top: 1px dotted #000;
padding: 8px 0 0 0;
}

that top padding value of 8px gets the line where I want it  
vertically...


the p portion I don't want to have with the dotted line, I just  
closed that p tag after that part, and the description I want to have  
the dotted line I handled like this:


p class=dotted
descriptive blurb paragraph...
/p



^^^ Is this a legitimate way of handling it...good coding?


John





On Nov 18, 2010, at 2:51 PM, David Laakso wrote:


On 11/18/10 5:44 PM, John wrote:



On Nov 18, 2010, at 2:42 PM, David Laakso wrote:

Others have answered your question. However, if you are still  
having difficulty, it always a good idea to put the page in  
question on a public server and provide a clickable link to it in  
your post to the list. Otherwise, we all
 get to play an endless guessing game as to what you are after,  
rather than providing what may well be a very simple definitive  
answer.


right you are, David and I'm kinda smackin' my forehead I didn't  
just throw that up there with a graphic showing what I'm after.


I'm going to do that now, then post the links as soon as it's up  
there.


thanks for hanging in there with me!

John



-- off-list --
A graphic image will do. Putting the actual html/css file[s] up is  
better.

~d
--
:: desktop and mobile ::
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] [+] Re: OK to insert block-level tag inside div?

2010-11-18 Thread John

On Nov 18, 2010, at 4:04 PM, Thierry Koblentz wrote:


OK..Here's a link to a graphic showing the dotted line and its
position which I'm after:


http://thinkplan.org/workshop/pix/dottedline.jpg


Try this:

.myParagraph {
margin-top:10px;
padding-top:10px;
border-top:1px dotted #333;
}


thanks, Thierry;

looks similar to something I fiddled with just before your email  
arrived:


.dotted {
border-top: 1px dotted #000;
padding: 8px 0 0 0;
}

Now, in yours, why margin-top AND padding-top of 10px?  Isn't padding- 
top: 10px; enough by itself?


John

__
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] [+] Re: OK to insert block-level tag inside div?

2010-11-18 Thread Thierry Koblentz
  OK..Here's a link to a graphic showing the dotted line and its
  position which I'm after:
 
 
  http://thinkplan.org/workshop/pix/dottedline.jpg
 
  Try this:
 
  .myParagraph {
  margin-top:10px;
  padding-top:10px;
  border-top:1px dotted #333;
  }
 
 thanks, Thierry;
 
 looks similar to something I fiddled with just before your email
 arrived:
 
 .dotted {
   border-top: 1px dotted #000;
   padding: 8px 0 0 0;
 }
 
 Now, in yours, why margin-top AND padding-top of 10px?  Isn't padding-
 top: 10px; enough by itself?

The padding is what creates the gap below the border, the margin is what
creates the gap above the border.
You may have the space above the border already created by the bottom margin
of the previous sibling, but in any case, that should not matter because of
*collapsing margins*, hence that value will not change anything if the gap
already exists (via margin). Because these two margins will collapse. 
It would be different if that gap was the result of bottom padding on the
previous sibling.

--
Regards,
Thierry
www.tjkdesign.com | www.ez-css.org | @thierrykoblentz

__
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] [+] Re: OK to insert block-level tag inside div?

2010-11-18 Thread John


On Nov 18, 2010, at 4:21 PM, Thierry Koblentz wrote:

The padding is what creates the gap below the border, the margin is  
what

creates the gap above the border.
You may have the space above the border already created by the  
bottom margin
of the previous sibling, but in any case, that should not matter  
because of
*collapsing margins*, hence that value will not change anything if  
the gap

already exists (via margin). Because these two margins will collapse.
It would be different if that gap was the result of bottom padding  
on the

previous sibling.



Zounds! I believe that I understand that entire paragraph!  but why,  
then, after I add a margin-top: 8px to my code, does that paragraph  
go wider? By wider, I mean that it widens to the width of the  
parent div which contains all that stuff...the small head, the big  
head and date the dotted line and the blurb paragraph, now enclosed  
by my


p class=dotted

?

John
__
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] [+] Re: OK to insert block-level tag inside div?

2010-11-18 Thread Thierry Koblentz
 
 Zounds! I believe that I understand that entire paragraph!  but why,
 then, after I add a margin-top: 8px to my code, does that paragraph
 go wider? By wider, I mean that it widens to the width of the
 parent div which contains all that stuff...the small head, the big
 head and date the dotted line and the blurb paragraph, now enclosed
 by my
 
 p class=dotted

The top margin should not create a issue like that. Did you check that you
did not make a typo? Did you validate your code?
Sometimes that helps. Or post a URL, that helps too ;)

--
Regards,
Thierry
www.tjkdesign.com | www.ez-css.org | @thierrykoblentz

__
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] [+] Re: [css-d Is this proper use of div tags?

2010-11-18 Thread Alan Gresley

On 19/11/2010 4:37 AM, Thierry Koblentz wrote:

Hi Tim,


The red
box *and* the document have nothing to do with the offset of that
box.


Not entirely true.  Yes, the blue box is offset in relation to where it
would be without position.  But where the blue box would be depends
directly on other elements (previous siblings and parents, i.e, the red
box, and the document).  and since we're only changing the left
position, the only thing that affects that is the document, making the
offset in relation to the document a fair statement.


I don't think you can explain relative positioning that way, because
that's true for any positioning value, but fixed.

The offset (200px in that example [1]) is not in relation to the document.


Example [1]. I'm lost.


If it was the case, a left-margin or a left padding on the reddish box
should have no effect on the blue box. If such styling has an effect on the
box, it is because that blue box is offset from *its* normal position in the
flow.


It's normal position is it's static position.


*its* position, not the position of siblings, or document, etc. That's
the reference point for the 200px, nothing else.

[1] http://www.alistapart.com/d/css-positioning-101/example_d.html


An interesting thing about this test is that if a margin is given to the 
blue box, only the margin-top and margin-left changes things with the 
current height and width of the red box.


A value of margin-left: 100px visually shifts the blue box to the right 
from it's static position by 100px.


A value of margin-top: 100px collapses through into it's parent being 
the red box. The red box is pushed down by 100px. The blue box is 
positioned on the same y-axis as the red box.


The red box physical height is due to the height of it's content, that 
being the blue box. If no height is given on the red box, then for the 
blue box, a value of margin-bottom: 100px collapses through into it's 
parent being the red box. The yellow box is then pushed down by 100px.


A value of margin-right: 100px has little affect but this is also true 
with a value of margin-right: 5000px since it can only disappear into 
the overflow on the right. Margins are clipped inside boxes that behave 
as overflow:auto.


The article fails to mention about how position:relative can generate a 
new containing block for descendants elements with a position value of 
either absolute or fixed.


A also not one of the comments.

  | I never realized quite how redundant the CSS spec is.
  | The final two lines of this selection are almost insultingly
  | pointless and unhelpful.

CSS can only be redundant if you do not use it. The commenter quotes 
this as the final two lines.


  | “Boxes in the normal flow belong to a formatting context,
  | which may be block or inline, but not both simultaneously.
  | Block boxes participate in a block formatting context. Inline
  | boxes participate in an inline formatting context.”

A block formatting context is a very misunderstood concept of CSS.


--
Alan http://css-class.com/

Armies Cannot Stop An Idea Whose Time Has Come. - Victor Hugo
__
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] OK to insert block-level tag inside div?

2010-11-18 Thread Alan Gresley

On 19/11/2010 10:15 AM, John wrote:

OK..Here's a link to a graphic showing the dotted line and its position
which I'm after:


http://thinkplan.org/workshop/pix/dottedline.jpg


thanks!

John


If this is what you have, then theoretically, no class is need. If the 
text that is bold is a heading, then you could do this.


  p:first-child {border-top: border-top:1px dotted #333;}

If the text that is bold are paragraphs, then you could something like this.

  p+p+p {border-top: border-top:1px dotted #333;}

The only browser that will not support this is IE6-.

--
Alan http://css-class.com/

Armies Cannot Stop An Idea Whose Time Has Come. - Victor Hugo
__
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] More IE7 stacking / z-index issues

2010-11-18 Thread Alan Gresley

On 19/11/2010 9:27 AM, Tim Wolf wrote:

Thanks to the information discussed a couple weeks back on this issue
I thought I had the IE7 z-index issue solved with my drop-down menu.
Apparently not.


You running into a similar issue with IE7 handling of position:relative 
which incorrectly

establishes a new stacking context [1].


My CSS-only (slightly modified Stu Nichols droplist) drop-down menu
was displaying (stacking) behind the content below the navs. Had it
fixed until I added more content.

This is an IE7 and IE8 issue (works in FF, Opera, Safafri). Notice
how it lays above the gradient grey border but below the divs with
the blue background images.


This does not affect IE8.


Here a a slightly simplified version of the page:

http://uatext1.cga.ct.gov/sdo/index-test2.php

or a version with more content within those divs:

http://uatext1.cga.ct.gov/sdo/index-test.php

There are a bunch of CSS files being called to. Here are the primary
ones in addition to a reset.css:

http://uatext1.cga.ct.gov/sdo/css/base.css
http://uatext1.cga.ct.gov/sdo/css/index.css
http://uatext1.cga.ct.gov/sdo/inc/inc-css/header.css

The header code is being pulled into the page via a PHP include.

I've tried a variety of z-index experiments. Tried to make anything
that didn't need to have the position element not have one. I even
tried a jQuery script that promised to solve all my problems,

Help!

Tim Wolf


The problem is cause by the below CSS or any other elements with both 
position: relative and hasLayout that come later in the source.


#container-fea {
position: relative;
height: 350px; /* hasLayout trigger */
}

To help IE7- one must goes back up the tree to the element that is the 
sibling to the  div.container-940. This is the div#header. The following 
will sort IE7- out.


#header {
width: 960px;
height: 140px;
margin: 0 auto 0 auto;
position: relative;
clear: left;
z-index: 1;  /* to help IE7- along */
}


--
Alan http://css-class.com/

Armies Cannot Stop An Idea Whose Time Has Come. - Victor Hugo
__
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] [+] Re: [css-d Is this proper use of div tags?

2010-11-18 Thread Thierry Koblentz
Hi Alan,

 The article fails to mention about how position:relative can generate a
 new containing block for descendants elements with a position value of
 either absolute or fixed.

I believe this is true for absolute, but not for fixed as for the latter
the reference is the viewport.

--
Regards,
Thierry
www.tjkdesign.com | www.ez-css.org | @thierrykoblentz


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