Re: [css-d] Pipe List
On 4/5/07, Philippe Wittenbergh [EMAIL PROTECTED] wrote: You could of course minimise on hacking and use display:inline-block for everybody. Then use display:-moz-inline-box for Gecko =1.8 (up to Firefox 2.0 - Gecko1.9alpha, FX 3.0alpha support inline-block pretty well) if needed (more often than not, I don't really need it). Yes, that's a good idea. I've sometimes seen Gecko =1.8 make strange things with the contents of -moz-inline-box boxes if not adequately protected (= further workarounds needed), but in this cases there are no problems, I've tested on one page and indeed the number of necessary hacks is reduced. Bruno __ 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] Pipe List
Morning David You Wrote Don - HtmlFixIt.com wrote: snipped a bit try it again if you would ... think I have it in ie6, 7 and ff http://htmlfixit.com/tutes/css/pipe_delimited_faux.html Forgot ie6 won't respect the first child ... but I think this might do it ... Nice job, Don. You are good to go in IE6 and IE7. I am seeking a pipe menu, or a border menu that does /not/ require images and works in all versions of IE including mac/IE5.2. If I have a choice I would prefer /not/ to hack IE7.0. For example, something like this http://www.nytimes.com/pages/todayspaper/index.html (the file folder tab is not a requirement, although it is charming :-) ). It is the look and feel I am after. Anyone? Regards, ~dL In the referenced NY Times link above, they are physically inserting a pipe (as I'm sure you noted) between each end /a and the start of each new a in the html. If you want that effect in IE 7 using Fat Erik's code, you need to switch to Quirks mode. A simple test page [1] using an incomplete Doctype shows what I mean. This will, I'm sure, create other problems to overcome in a production page / site. IE 7.0.5xx shows the pipes on my Win XP Pro SP2 Box. hth [1] http://www.nannery.net/atest.html Jim Nannery www.redfernenterprises.com PScan't tell if this works on mac IE 5.2 can't test that OS / browser combo locally. and IIRC, mac IE isn't affected by Doctype switching Jim __ 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] Pipe List
Jim Nannery wrote: I am seeking a pipe menu, or a border menu that does /not/ require images and works in all versions of IE including mac/IE5.2. If I have a choice I would prefer /not/ to hack IE7.0. For example, something like this http://www.nytimes.com/pages/todayspaper/index.html (the file folder tab is not a requirement, although it is charming :-) ). It is the look and feel I am after. Anyone? Regards, ~dL In the referenced NY Times link above, they are physically inserting a pipe (as I'm sure you noted) between each end /a and the start of each new a in the html. If you want that effect in IE 7 using Fat Erik's code, you need to switch to Quirks mode. A simple test page [1] using an incomplete Doctype shows what I mean. This will, I'm sure, create other problems to overcome in a production page / site. IE 7.0.5xx shows the pipes on my Win XP Pro SP2 Box. hth [1] http://www.nannery.net/atest.html Jim Nannery While the page in quirks for IE7.0 does bring up poor Fat Erik's http://css.maxdesign.com.au/listamatic/horizontal32.htm pipes, it does not a pretty picture make in my book. I think I'll pass on this option. Nevertheless, /thank you/ for your time in checking this out, Jim. Best, ~dL -- http://chelseacreekstudio.com/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Pipe List
~davidLaakso wrote: Jim Nannery wrote: I am seeking a pipe menu, or a border menu that does /not/ require images and works in all versions of IE including mac/IE5.2. If I have a choice I would prefer /not/ to hack IE7.0. For example, something like this http://www.nytimes.com/pages/todayspaper/index.html (the file folder tab is not a requirement, although it is charming :-) ). It is the look and feel I am after. Anyone? Regards, Okay David, Version 2 of my faux pipe delimited unordered list menu [1] has one less hack in it (no ie6 hack) and appears to work fine in win ie6, ie7 and ff. I don't do mac often :-) The trade off? Well I class the first li and create a border-left: 0 rule for that classed li. Better? Worse? The beauty of the tabs in the NYT example is obviously that it works for all tabs because they have both left and right dividers. They also special class the active tab. They do not use pipes on the tabbed menu that I think you referred to. They did down lower in the jump to, that confused me at first as well until I grasped what you were referring to. I await colorful screen shots on the Mac 5.x platform :-) Don [1] Version 2: http://htmlfixit.com/tutes/tutorial_CSS_Generated_Faux_Pipe_Delimited_Unordered_List.php __ 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] Pipe List
Don - HtmlFixIt.com wrote: ~davidLaakso wrote: I am seeking a pipe menu, or a border menu that does /not/ require images and works in all versions of IE including mac/IE5.2. If I have a choice I would prefer /not/ to hack IE7.0. [trimmed] Okay David, Version 2 of my faux pipe delimited unordered list menu [1] has one less hack in it (no ie6 hack) and appears to work fine in win ie6, ie7 and ff. I don't do mac often :-) Don [1] Version 2: http://htmlfixit.com/tutes/tutorial_CSS_Generated_Faux_Pipe_Delimited_Unordered_List.php Nine captures http://www.browsercam.com/public.aspx?proj_id=337404 No pipes: IE5.0/Win2000 Pipes appear but not in correct place (s): Mac/IE5.2 ~dL -- http://chelseacreekstudio.com/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Pipe List
David Laakso wrote: I am seeking a pipe menu, or a border menu that does /not/ require images and works in all versions of IE including mac/IE5.2. If I have a choice I would prefer /not/ to hack IE7.0. David, I had some (now old) horizontal list tests not using inline elements but floats, exactly to overcome the problems that you are seeing now in IE 5.01/Win (missing borders), and maybe other problems in IE5/Mac. Some have extra hacks to simulate a min-width. I have now slightly revised them [1], have a look if you like. I'm sure you will find they are broken in some conditions :-)) Bruno [1] http://brunildo.org/test/NavBar8.php __ 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] Pipe List
Bruno Fassino wrote: David Laakso wrote: I am seeking a pipe menu, or a border menu that does /not/ require images and works in all versions of IE including mac/IE5.2. If I have a choice I would prefer /not/ to hack IE7.0. David, I had some (now old) horizontal list tests not using inline elements but floats, exactly to overcome the problems that you are seeing now in IE 5.01/Win (missing borders), and maybe other problems in IE5/Mac. Some have extra hacks to simulate a min-width. I have now slightly revised them [1], have a look if you like. I'm sure you will find they are broken in some conditions :-)) Bruno [1] http://brunildo.org/test/NavBar8.php Absolutely superb! All of them. Looking good in /all/ versions of IE, including IE/Mac. Captures for the curious: NavBar8 http://www.browsercam.com/public.aspx?proj_id=337457 NavBar3 http://www.browsercam.com/public.aspx?proj_id=337462 NavBar5 http://www.browsercam.com/public.aspx?proj_id=337465 NavBar6 http://www.browsercam.com/public.aspx?proj_id=337468 NavBar7 http://www.browsercam.com/public.aspx?proj_id=337473 Thank you, Bruno! Best, ~dL -- http://chelseacreekstudio.com/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Pipe List
On Apr 5, 2007, at 7:54 AM, Bruno Fassino wrote: I had some (now old) horizontal list tests not using inline elements but floats, exactly to overcome the problems that you are seeing now in IE 5.01/Win (missing borders), and maybe other problems in IE5/Mac. Some have extra hacks to simulate a min-width. I have now slightly revised them [1], have a look if you like. I'm sure you will find they are broken in some conditions :-)) Bruno [1] http://brunildo.org/test/NavBar8.php You could of course minimise on hacking and use display:inline-block for everybody. Then use display:-moz-inline-box for Gecko =1.8 (up to Firefox 2.0 - Gecko1.9alpha, FX 3.0alpha support inline-block pretty well) if needed (more often than not, I don't really need it). IE 5.0 may need a little kick in the pants. Philippe --- Philippe Wittenbergh http://emps.l-c-n.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Pipe List
Fat Erik 5s Simple Pipe List http://css.maxdesign.com.au/listamatic/horizontal32.htm is missing its pipes in IE7.0. Suggestions? Thanks. Best, ~dL -- http://chelseacreekstudio.com/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Pipe List
-Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] Behalf Of ~davidLaakso Sent: 03 April 2007 17:00 To: CSS Subject: [css-d] Pipe List Fat Erik 5s Simple Pipe List http://css.maxdesign.com.au/listamatic/horizontal32.htm is missing its pipes in IE7.0. Suggestions? Thanks. Best, ~dL I commented out the border left stuff and it certainly works in IE6/7 on my machine. Now that is not a solution, I know but I guess it is something in IE hack that is messing up IE7 Ian -- No virus found in this outgoing message. Checked by AVG Free Edition. Version: 7.5.446 / Virus Database: 268.18.25/744 - Release Date: 03/04/2007 05:32 __ 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] Pipe List
From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] Behalf Of Ian Young Sent: 03 April 2007 17:21 To: ~davidLaakso; CSS Subject: Re: [css-d] Pipe List -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] Behalf Of ~davidLaakso Sent: 03 April 2007 17:00 To: CSS Subject: [css-d] Pipe List Fat Erik 5s Simple Pipe List http://css.maxdesign.com.au/listamatic/horizontal32.htm is missing its pipes in IE7.0. Suggestions? Thanks. Best, ~dL I commented out the border left stuff and it certainly works in IE6/7 on my machine. Now that is not a solution, I know but I guess it is something in IE hack that is messing up IE7 Ian Belay that folks. I now have double pipes in FF. So obviously not the solution. :- -- No virus found in this outgoing message. Checked by AVG Free Edition. Version: 7.5.446 / Virus Database: 268.18.25/744 - Release Date: 03/04/2007 05:32 __ 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] Pipe List
Ian Young wrote:
From: [EMAIL PROTECTED]
[mailto:[EMAIL PROTECTED] Behalf Of Ian Young
Sent: 03 April 2007 17:21
To: ~davidLaakso; CSS
Subject: Re: [css-d] Pipe List
-Original Message-
From: [EMAIL PROTECTED]
[mailto:[EMAIL PROTECTED] Behalf Of ~davidLaakso
Sent: 03 April 2007 17:00
To: CSS
Subject: [css-d] Pipe List
Fat Erik 5s Simple Pipe List
http://css.maxdesign.com.au/listamatic/horizontal32.htm is
missing its
pipes in IE7.0.
Suggestions?
Thanks.
Best,
~dL
I commented out the border left stuff and it certainly works in
IE6/7 on my
machine.
Now that is not a solution, I know but I guess it is something in IE
hack
that is messing up IE7
Ian
Belay that folks. I now have double pipes in FF.
So obviously not the solution. :-
Well, IE7 doesn't recognize the star hack, so the ie specific comments
aren't reaching it. You need an ie7 hack ...
I think you can just use a conditional IE ...
I did it thus:
!--[if gte IE 7]
style type=text/css
/*IE workaround*/
/*All IE browsers*/
html #navlist li
{
border-left: 1px solid black;
padding: 0 0.4em 0 0.4em;
margin: 0 0.4em 0 -0.4em;
}
/*Win IE browsers - hide from Mac IE\*/
html #navlist { height: 1%; }
html #navlist li
{
display: block;
float: left;
}
html #navlist li:first-child { border-left: 0; }
/*End hide*/
/style
![endif]--
But I think you can actually just make it if IE and remove the star hack
from the main style sheet altogether and be good. I don't have IE6
handy to test it.
__
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] Pipe List
~davidLaakso wrote: ~davidLaakso wrote: Fat Erik 5s Simple Pipe List http://css.maxdesign.com.au/listamatic/horizontal32.htm is missing its pipes in IE7.0. Suggestions? Thanks. Best, ~dL I think you can just use a conditional IE ... I did it thus: !--[if gte IE 7] [trimmed] But I think you can actually just make it if IE and remove the star hack from the main style sheet altogether and be good. Don, Both of the conditional comment fixes you provided will work. No question about that. I had hoped (and should have written) to find a solution that would /not/ require hacking IE7.0. Anyone? Or is this a pipe dream? Thanks. ~dL -- http://chelseacreekstudio.com/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Pipe List
Both of the conditional comment fixes you provided will work. No
question about that.
I had hoped (and should have written) to find a solution that would
/not/ require hacking IE7.0.
Anyone? Or is this a pipe dream?
Well you didn't say so David :-)
We hack ie6 in the existing solution, so why not ie7? It's a hack
solution to a problem -- that seems to work. If you just use one
conditional ie hack I think it works for both, so you aren't upping the
hack index. I think a non-hack true pipe solution is a pipe dream -- so
that should spur someone to a solution -- saying it cannot be done. The
reason I suggest this is that ie7 won't work if you simply remove all ie
specific code. In many cases I find that ie7 can work properly without
any hacks (not always pixel perfect, but often close enough), but it
appears that ie7 won't recognize:
#navlist li:before { content: | ; }
#navlist li:first-child:before { content: ; }
Here's one that apparently works all three ways in ie6, ie7 and in ff
using just borders ...
http://www.sitepoint.com/examples/pipe-delimiter/index.htm
Note that he is hiding the first pipe by using a negative left margin
even though it actually exists. One could of course argue that this
isn't a pipe solution at all, it is a border solution or faux pipe perhaps?
Don
__
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] Pipe List
snip Here's one that apparently works all three ways in ie6, ie7 and in ff using just borders ... http://www.sitepoint.com/examples/pipe-delimiter/index.htm Note that he is hiding the first pipe by using a negative left margin even though it actually exists. One could of course argue that this isn't a pipe solution at all, it is a border solution or faux pipe perhaps? Which leads me to this ... which appears to work everywhere ... faux pipe delimited list: http://htmlfixit.com/tutes/tutorial_CSS_Generated_Faux_Pipe_Delimited_Unordered_List.php Still fine tuning a bit ... but it works. __ 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] Pipe List
Don - HtmlFixIt.com wrote: Which leads me to this ... which appears to work everywhere ... faux pipe delimited list: http://htmlfixit.com/tutes/tutorial_CSS_Generated_Faux_Pipe_Delimited_Unordered_List.php Still fine tuning a bit ... but it works. Don, thanks. But I think we're beginning to sense the difficulty of the problem. It does work. Almost everywhere ;-) . And that is the crux of the problem. Please see: http://www.browsercam.com/public.aspx?proj_id=337107 Regards, ~dL -- http://chelseacreekstudio.com/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Pipe List
Don - HtmlFixIt.com wrote: ~davidLaakso wrote: Don - HtmlFixIt.com wrote: lol fun eh ... I won't clog up the list try it again if you would ... think I have it in ie6, 7 and ff http://htmlfixit.com/tutes/css/pipe_delimited_faux.html Forgot ie6 won't respect the first child ... but I think this might do it ... Nice job, Don. You are good to go in IE6 and IE7. I am seeking a pipe menu, or a border menu that does /not/ require images and works in all versions of IE including mac/IE5.2. If I have a choice I would prefer /not/ to hack IE7.0. For example, something like this http://www.nytimes.com/pages/todayspaper/index.html (the file folder tab is not a requirement, although it is charming :-) ). It is the look and feel I am after. Anyone? Regards, ~dL -- http://chelseacreekstudio.com/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
