Re: [css-d] css-d Digest, Vol 60, Issue 16
Re: [css-d] IE6 Problem: Logo won't show
Karl, try something like this:
XHTML:
h1 id=logoa href=#Time Logo/a/h1
CSS:
h1#logo {
position: absolute;
top: 51px;
right: 196px;
margin: 0;
padding: 0;
}
h1#logo a{
background: #CCE181 url(../images/time-logo.gif) left top;
text-indent:-px;
display:block;
width:142px;
height:25px;
margin: 2px 5px 0 0;
}
-Tim
On Nov 22, 2007 3:56 PM, [EMAIL PROTECTED] wrote:
Send css-d mailing list submissions to
css-d@lists.css-discuss.org
To subscribe or unsubscribe via the World Wide Web, visit
http://lists.css-discuss.org/mailman/listinfo/css-d
or, via email, send a message with subject or body 'help' to
[EMAIL PROTECTED]
You can reach the person managing the list at
[EMAIL PROTECTED]
When replying, please edit your Subject line so it is more specific
than Re: Contents of css-d digest...
Today's Topics:
1. Re: Is there any way to filter a css for Safari or Firefox
(Gunlaug S?rtun)
2. Breadcrumbs wrapping and background image IE6 (Rees, Mark)
3. Breaking out of a centered fixed width container...
(Timothy Kelty)
4. Re: Breadcrumbs wrapping and background image IE6 (Bruno Fassino)
5. Re: validation question (tedd)
6. Re: validation question (Jens Brueckmann)
7. Re: Breadcrumbs wrapping and background image IE6 (Jim Davis)
8. Re: Div Problems *whoops* (Hakan K)
9. background problem in IE6 using class selectors
([EMAIL PROTECTED])
10. Re: background problem in IE6 using class selectors (Ingo Chao)
11. Happy Thanksgiving! (Elias Abunassar)
12. Re: Is there any way to filter a css for Safari or Firefox
(Philippe Wittenbergh)
13. Re: How to make a relative positionned DIV invisible to flow
? (Ingo Chao)
14. Re: background problem in IE6 using class selectors
([EMAIL PROTECTED])
15. Re: background problem in IE6 using class selectors (Ingo Chao)
16. Re: validation question (tedd)
17. Re: background problem in IE6 using class selectors
(Gunlaug S?rtun)
18. Re: validation question ([EMAIL PROTECTED])
19. Re: validation question (Gunlaug S?rtun)
20. php sthe switcher for multiple style sheets (DAVOUD TOHIDY)
21. Re: background problem in IE6 using class selectors
(Bruno Fassino)
22. Re: background problem in IE6 using class selectors (Ingo Chao)
23. [ADMIN - OFFTOPIC] Re: php sthe switcher for multiple style
sheets (Alex Robinson)
24. Re: Div Problems *whoops* (David Laakso)
25. IE6 Problem: Logo won't show (Karl Bedingfield)
--
Message: 1
Date: Wed, 21 Nov 2007 16:19:22 +0100
From: Gunlaug S?rtun [EMAIL PROTECTED]
Subject: Re: [css-d] Is there any way to filter a css for Safari or
Firefox
To: chiara chiari [EMAIL PROTECTED]
Cc: css-d@lists.css-discuss.org
Message-ID: [EMAIL PROTECTED]
Content-Type: text/plain; charset=ISO-8859-1; format=flowed
chiara chiari wrote:
Hi guys, I need to filter a style rule for Safari and I was wondering
if there is any way to filter a dedicated css or if there is any
other way I can filter a stylesheet for FireFox and then use the main
one to give my rules to Safari (I am using separate css for IE7 and 6
already)
Don't know if this Safari bug is present in latest releases...
http://www.christopherschmitt.com/2007/11/02/css-attribute-selector-bug-in-safari/
...but if it is then it might work in reversed order - filter for Safari
instead of other browsers.
However, I'd like to see the case where such filtering is really
necessary. All such filters tend to fail after a while, so they
shouldn't be used for anything serious.
regards
Georg
--
http://www.gunlaug.no
--
Message: 2
Date: Wed, 21 Nov 2007 11:03:45 -
From: Rees, Mark [EMAIL PROTECTED]
Subject: [css-d] Breadcrumbs wrapping and background image IE6
To: css-d@lists.css-discuss.org
Message-ID:
[EMAIL PROTECTED]
Content-Type: text/plain; charset=iso-8859-1
Hello
I have a breadcrumb which wraps over two lines. I'd like to have an arrow
appear to the left of each link in the breadcrumb, and I'd like preferably
to split links over two lines where necessary, or alternatively to have
breadcrumbs appear whole on the new line where they would otherwise be
split. I cannot make either option work in Internet Explorer 6.
The current output in IE6 looks like this (arrows before links 3 and 5 are
missing)
- link number one - link number two link
number three - link number four link
number five
This is what I am aiming for (all arrows are present)
- link number one - link number two - link
number three - link number four - link
number five
I have tried including the image in the HTML but then there's nothing to
stop the image appearing on one line and the start of the link text on the
next line, which is not desirable.
Here is some test
[css-d] Should z-index apply to elements with opacity 1.0 ?
Hi,
Safari Webkit, Firefox 3b and Opera 9.5b render this test different:
http://www.satzansatz.de/cssd/tmp/opacity/
#stackA {
opacity: 0.66;
z-index: 2;
background: red;
width: 300px;
height: 300px;
}
#stackA p {
position: relative;
z-index: 1;
width: 200px;
height: 200px;
background: yellow;
left: -100px;
top: 50px;
}
#stackB {
opacity: 0.90;
background: blue;
margin-top: -150px;
width: 150px;
height: 300px;
}
...
body
div class=wrapper
div id=stackA
p!/p
/div
div id=stackB/div
/div
/body
Screenshots:
http://www.satzansatz.de/cssd/tmp/opacity/webkit.png
http://www.satzansatz.de/cssd/tmp/opacity/fx.png
http://www.satzansatz.de/cssd/tmp/opacity/opera.png
The red box and the blue box have opacity set. In addition, the first
one gets a z-index.
In both Safari and Firefox, opacity forms a stacking context. In Safari,
the red box is painted over the blue box. z-index applies. Correct?
(Opera seems wrong in letting the blue box crawl between the red box and
its child box, since a stacking context should be atomic. In addition,
the yellow child element inherits opacity, which appears to be wrong.)
I know CSS3 Color Moldule: opacity does not tell about stacking issues,
and CSS3 Positioning Module is not written yet (or where is stacking
context defined in CSS3 ?).
But since these three implementations of opacity exist: should z-index
apply here?
Another question, probably related:
(2) Elements with opacity 1.0 establish a stacking context (and a
z-index of auto is changed to 0) Dave Hyatt:
http://weblogs.mozillazine.org/hyatt/archives/2004_09.html
For the latter part of it, where is that a z-index of auto is changed
to 0 defined?
Ingo
--
http://www.satzansatz.de/css.html
__
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] Should z-index apply to elements with opacity
Ingo Chao wrote:
Hi,
Safari Webkit, Firefox 3b and Opera 9.5b render this test different:
http://www.satzansatz.de/cssd/tmp/opacity/
#stackA {
opacity: 0.66;
z-index: 2;
background: red;
width: 300px;
height: 300px;
}
#stackA p {
position: relative;
z-index: 1;
width: 200px;
height: 200px;
background: yellow;
left: -100px;
top: 50px;
}
#stackB {
opacity: 0.90;
background: blue;
margin-top: -150px;
width: 150px;
height: 300px;
}
...
body
div class=wrapper
div id=stackA
div!/div
/div
div id=stackB/div
/div
/body
Screenshots:
http://www.satzansatz.de/cssd/tmp/opacity/webkit.png
http://www.satzansatz.de/cssd/tmp/opacity/fx.png
http://www.satzansatz.de/cssd/tmp/opacity/opera.png
The red box and the blue box have opacity set. In addition, the first
one gets a z-index.
In both Safari and Firefox, opacity forms a stacking context. In Safari,
the red box is painted over the blue box. z-index applies. Correct?
(Opera seems wrong in letting the blue box crawl between the red box and
its child box, since a stacking context should be atomic. In addition,
the yellow child element inherits opacity, which appears to be wrong.)
I know CSS3 Color Moldule: opacity does not tell about stacking issues,
and CSS3 Positioning Module is not written yet (or where is stacking
context defined in CSS3 ?).
But since these three implementations of opacity exist: should z-index
apply here?
Another question, probably related:
(2) Elements with opacity 1.0 establish a stacking context (and a
z-index of auto is changed to 0) Dave Hyatt:
http://weblogs.mozillazine.org/hyatt/archives/2004_09.html
For the latter part of it, where is that a z-index of auto is changed
to 0 defined?
Ingo
--
http://www.satzansatz.de/css.html
Both Safari (beta) and Opera on windows shows the same in which opacity creates
a new stacking content. The blue box sits above the red box and the yellow box
is above the blue box it's parent, I would say this is correct for both Opera
and Safari to do this and goes along with what David Hyatt has. Giving
position:relative to #stackA brings Firefox into line with Safari (creating a
stacking content for FF). This also causes Opera to now shows the yellow box
opaque over the parent's red box. Since now the yellow box is part of a
stacking content??
CSS3 stacking content is here, though no mentioned of opacity.
http://www.w3.org/TR/css3-box/#stacking
Kind regards, Alan
http://css-class.com/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] site check please..
Hello everyone, I have been working on a little site for some friends which I have just uploaded. Could anyone please check the site in older browsers For any problems (its not complete). I have workied in OSX running firefox and safari. http://www.precociouscollective.com/artists.html this page has a few floats, which Im a little worried about in older browsers. Thanks. -- lister __ 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] site check please..
Looks like it breaks in IE6 win. See screen shot here: http://www.jimdavis.org/test/ie6.jpg You can see how you site will render in different browsers and os's for free here: http://browsershots.org/ Jim On Nov 25, 2007 10:34 AM, Rob freeman [EMAIL PROTECTED] wrote: Hello everyone, I have been working on a little site for some friends which I have just uploaded. Could anyone please check the site in older browsers For any problems (its not complete). I have workied in OSX running firefox and safari. http://www.precociouscollective.com/artists.html this page has a few floats, which Im a little worried about in older browsers. Thanks. __ 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] site check please..
Looks, good, Some of the image boxes dropped a little down the page in Safari on Windows xp for me! but in FireFox and IE7 all looks good! Rob freeman wrote: Hello everyone, I have been working on a little site for some friends which I have just uploaded. Could anyone please check the site in older browsers For any problems (its not complete). I have workied in OSX running firefox and safari. http://www.precociouscollective.com/artists.html this page has a few floats, which Im a little worried about in older browsers. Thanks. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] update, can you check this site now
http://www.precociouscollective.com/ -- Rob Freeman [EMAIL PROTECTED] __ 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] update, can you check this site now
I had a look trough all of the pages on the first post, and all but the artist one looks good! Rob freeman wrote: http://www.precociouscollective.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] update, can you check this site now
Looks good in IE6 win now. Jim On Nov 25, 2007 11:03 AM, Rob freeman [EMAIL PROTECTED] wrote: http://www.precociouscollective.com/ -- Rob Freeman [EMAIL PROTECTED] __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-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] CSS Tests
From: David Hucklesby [EMAIL PROTECTED] On Mon, 19 Nov 2007 16:54:52 +0100, Gabriele Romanato wrote: Dear all, after a long period of depression, ... Odd, that. So many highly talented people I read about seem to have suffered depression, at least in some part of their lives. Hmm. I'm about to publish a book on CSS. during the development, I've collected a long series of tests on CSS. here they are: http://www.css-zibaldone.com/test Thank you so much for this, Gabriele. I just took a few minutes to look, and I will be back to study your examples more. This definitely looks valuable. It certainly is! I have already had a look with a view to fixing a strange issue that's been bugging me (layout example at http://www.webdev-academy.com/example/test-layout.php - IE of course). Gabrielle has helped me understand the problem (example at http://www.css-zibaldone.com/test/css21/floats/shrink-auto/index.html). Also, I am passing Gabrielle's link to postgraduate students I assist. Impressive reference, especially it's relevance to today's browsers compared to the glut of inconsistent material presented by search engines. I will play with it a bit more tomorrow. Thank you Gabrielle! Mike A. __ 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] Should z-index apply to elements with opacity
Alan Gresley wrote: Ingo Chao wrote: Hi, Safari Webkit, Firefox 3b and Opera 9.5b render this test different: http://www.satzansatz.de/cssd/tmp/opacity/ ... Screenshots: http://www.satzansatz.de/cssd/tmp/opacity/webkit.png http://www.satzansatz.de/cssd/tmp/opacity/fx.png http://www.satzansatz.de/cssd/tmp/opacity/opera.png ... Both Safari (beta) and Opera on windows shows the same in which opacity creates a new stacking content. ... Thank you very much for the testing, Alan. I just installed Safari 3.0.4 on my PC and got the same result as on Mac: The blue box offsets under the red one (the z-index seems to apply to the red box even if this element is not positioned). Thats different to Firefox and Opera. And Opera 9.5 PC does not form a stacking context for the red box, because if if would, the blue box was not allowed to sit between the yellow child of the red box A stacking context is atomic from the point of view of its parent stacking context; boxes in other stacking contexts may not come between any of its boxes. http://www.w3.org/TR/CSS21/visuren.html#layers Another problem in Opera can be seen in the orange area, where the yellow and red boxes overlap: I may be wrong, but I thought this is not how opacity should work on container elements and their children. http://www.w3.org/TR/2003/CR-css3-color-20030514/#transparency CSS3 stacking content is here, though no mentioned of opacity. http://www.w3.org/TR/css3-box/#stacking Hmm. Then I believe the stacking of opacity is to be defined in the missing CSS3 Positioning Module. Thanks again, Ingo -- http://www.satzansatz.de/css.html __ 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] Should z-index apply to elements with opacity
On Nov 26, 2007, at 1:34 AM, Alan Gresley wrote: Ingo Chao wrote: Hi, Safari Webkit, Firefox 3b and Opera 9.5b render this test different: http://www.satzansatz.de/cssd/tmp/opacity/ ... The red box and the blue box have opacity set. In addition, the first one gets a z-index. Both Safari (beta) and Opera on windows shows the same in which opacity creates a new stacking content. The blue box sits above the red box and the yellow box is above the blue box it's parent, I would say this is correct for both Opera and Safari to do this and goes along with what David Hyatt has. The blue box sits on top of the red box because it comes last in source and it is in the same (visual) plane as the red box (or if you prefer, the same stacking level). Now, 1. Gecko does establish a stacking context for elements with 'opacity'. 2. Opera does _not_ establish any stacking context for opacity. http://dev.l-c-n.com/_temp/rp-stacking-opacity.html Opera puts the red box in front of the green box; Gecko and Webkit put the green box in front. see also this email from D. Baron on the subject: http://archivist.incutio.com/viewlist/css-discuss/69890 A difference between Gecko and WebKit is that WebKit give a box with opacity set a z-index of '0', whereas Gecko gives it a z-index of 'auto'. (I think). In Ingo's test case, the red box has z-index:2, but no positioning scheme is specified. That z-index should be ignored in my book. see CSS 2.1: http://www.w3.org/TR/CSS21/visuren.html#z-index 'Applies to:positioned elements ' Webkit seems to do the following: opacity gives z-index:0 and a stacking context. Then the z-index:2 given in the ruleblock for the red box is applied, and the red box is pulled in front of the blue box. Gecko ignores the z-index:2 (no rel.pos or abs.pos declared) and thus paints the blue box in front of the red box. Giving position:relative to #stackA brings Firefox into line with Safari (creating a stacking content for FF). yes, in that case WebKit and Gecko should (and do) display the same thing. This also causes Opera to now shows the yellow box opaque over the parent's red box. Since now the yellow box is part of a stacking content?? I'm trying to wrap my head around what Opera is doing here..., a bit inconsistent. I've noticed that elsewhere as well (some recent discussions on the WSG list). No matter what stacking environment, the yellow box should clip out the red where yellow and red overlap, because yellow is fully opaque. But what is under the whole box (red+yellow) should be partly visible - the background image in Ingo's page. It sounds like in Opera's case, the yellow box is inheriting the opacity on the red box in some case. That is wrong. CSS3 stacking content is here, though no mentioned of opacity. http://www.w3.org/TR/css3-box/#stacking That is basically the same as in CSS 2.1: http://www.w3.org/TR/CSS21/zindex.html#painting-order I think that the stacking context established for 'opacity' is sort of implied in the description, the offscreen buffering part in http://www.w3.org/TR/css3-color/#transparency In very layman's terms: at full opacity, when a box is painted on the canvas (browser window), it clips or cuts out everything that is under it. But when the box has some 'opacity' it needs to be painted on a higher layer, in order to show what is under that box. (Developers working on rendering engines will probably shoot me for this way of explaining things...). 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/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] site check please..
David Laakso wrote: Rob freeman wrote: Hello everyone, I have been working on a little site for some friends which I have just uploaded. Could anyone please check the site in older browsers For any problems (its not complete). I have workied in OSX running firefox and safari. http://www.precociouscollective.com/artists.html this page has a few floats, which Im a little worried about in older browsers. Thanks. A common structural layout test is to see how a well a page can hold with a little stress. At +2 font-scaling -- when testing all pages -- for example, the structure is too brittle-- things overlap, and shoot out the bottom of containers. So it is not so much you have difficulty with floats, but rather with an over abundant use of absolute positioning and setting of height restraints. Setting overflow: scroll; on #main may be a partial way around some of this this. /But in my personal opinion/, I really think it may be worth considering getting rid of the absolute positioning, and height settings, using margin: 0 auto to center the page; and, just let the content determine the height of each page. Either way, the first thing most people do on this list is to see if the CSS and markup are valid... Regards, ~dL -- http://chelseacreekstudio.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/
