[css-d] Nav broken in IE6, but not...
Hi List, I have a strange IE6 issue where the #nav a's seems to have collapsed into a vertical list of block As, seemingly ignoring the float: left; applied to the LIs... http://svitavice.blakehaswell.com/ However (!!), this is not happening on the English version of the site which is using image replacement and applying a width to the As. http://svitavice.blakehaswell.com/en/ Any help would be appreciated. Lost in a world of IE6 bugs I'd forgotten about, Blake -- Australian Web Designer - http://www.blakehaswell.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] Nav broken in IE6, but not...
Blake wrote:
I have a strange IE6 issue where the #nav a's seems to have collapsed
into a vertical list of block As, seemingly ignoring the float:
left; applied to the LIs...
http://svitavice.blakehaswell.com/
Caused by the 'display: block' on the anchor.
You can add...
* html #nav li a {display: inline-block;}
...and get a more cooperative IE6.
('display: inline-block' acts as a 'hasLayout' trigger btw.)
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] Pure CSS drop-down menus aren't *good*
Rafael wrote: I think this is yet another religious topic. Accessibility on most JS menus (actually all I've seen so far) is inexistent, some of them are so poorly done than they even throw an error on this or that browser and the whole menu stops working. If you ask Joe Clark about his opinion... maybe he would trash both of them :) Personally, I think CSS menus are better (or less bad) than JS menus. In both cases you must know what you're doing and have accessibility on mind (and hoy many of us do really do this?). If you ask me, a combination of both is the best solution, which means a lot more work than current / typical implementations --and the client's can't see a reason to spend on that, and the guy doing the front-end has a lot of things to think on before spending some extra time on the minor details. Javascript is a security threat to visitors' computers. CSS is not. Not a religious issue but a well documented fact. -- David [EMAIL PROTECTED] authenticity, honesty, community __ 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] em or %, pros and cons?
1. Could you please explain why you choose one over the other? 2. Only for font-size or for the complete layout? Thanks Magnus Fahlström __ 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] IE6 3 column problem
Thank you so much, Georg, I really appreciate your help.
Best regards,
Christian
Directmedia Publishing GmbH · Möckernstraße 68 · 10965 Berlin
www.digitale-bibliothek.de
AG Berlin-Charlottenburg · HR B 58002 · USt.Id. DE173211737
Geschäftsführer: Ralf Szymanski · Erwin Jurschitza
-Ursprüngliche Nachricht-
Von: Gunlaug Sørtun [mailto:[EMAIL PROTECTED]
Gesendet: Samstag, 13. Oktober 2007 04:25
An: [EMAIL PROTECTED]
Cc: css-d@lists.css-discuss.org
Betreff: Re: [css-d] IE6 3 column problem
Let me see your IE6-stylesheet then, as I'm too busy to locate 'CC'
files on other people's sites. I never use any.
http://www.digitale-bibliothek.de/Downloads/CSS-Test/zenoIE60Fixes.css
(additionally used by IE6)
Effect depends on specificity, and therefore _where_ those
styles are added.
Adding some importance...
* html .zenoCOFooter {
float: left;
width: 95%!important;
margin-right: -99%!important;
}
...will keep IE6 under control until the window becomes so
narrow that it can't hide its 'auto-expansion' bugs anymore.
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/
[css-d] should I worry about the warnings?
Hi, My CSS validates, however I get loads of warning http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fwallacewhittle.comwarning=1profile=css21usermedium=all Generally they are Same colors for color and background-color in two contexts Should I be looking to eliminate the warnings if so how because I want the text and the container div to be white? R. __ 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] :: ie 6 7 :: collapse on click bounce on scroll ::
In this photoshop nightmare [1] the slideshow (top right col) collapses in IE 6 7 when any horizontal nav link is clicked (in compliant browsers clicking 'home' does it). And IE 6 7 the left col is exhibiting vertical bounce on a full scroll. What to do? [1] http://www.chelseacreekstudio.com/ca/cssd/un/ css embedded Thanks, ~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/
Re: [css-d] should I worry about the warnings?
Ross Hulford wrote: Hi, My CSS validates, however I get loads of warning http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fwallacewhittle.comwarning=1profile=css21usermedium=all Generally they are Same colors for color and background-color in two contexts Should I be looking to eliminate the warnings if so how because I want the text and the container div to be white? R. Generally, one can ignore machine check warnings, with the important caveat you have gone to the ends of earth testing your site cross-browser to make sure there is no issue whatsoever. Best, ~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/
Re: [css-d] :: ie 6 7 :: collapse on click bounce on scroll ::
On 10/15/07, David Laakso wrote: In this photoshop nightmare [1] the slideshow (top right col) collapses in IE 6 7 when any horizontal nav link is clicked (in compliant browsers clicking 'home' does it). I suspect an interference between of the menu js and the slide show. The behaviors related to the dropdown are attached to all LI in the document, including the ones in the slide show. And when an element of the dropdown gets focus the cleanUp function alters the className of all LI, again including the slideshow. I would change the occurrences of: var LI = document.getElementsByTagName(li); with var me = document.getElementById(menu); var LI = me.getElementsByTagName(li); so to affect only the LI inside the drop down menu. (The difference in behavior between IE and other browsers is caused by the use of firstChild and white-space interpretation in building the DOM.) And IE 6 7 the left col is exhibiting vertical bounce on a full scroll. The left column seems stable to me, probably I haven't understood the problem, what do you mean with full scroll? [1] http://www.chelseacreekstudio.com/ca/cssd/un/ Best regards, 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] pure CSS drop-down menu - Sperling
At 3:12 AM + 10/15/07, Jay Rabe wrote: This is certainly a nice-looking solution, however I'm curious about one thing. If I put my cursor tip in a top-level box, it drops down the sub-menu just fine, but the highlighting in the top-level box is only on if the tip of the cursor is somewhere above (ie vertically) the midline of the box. Clearly not a functional issue, but just curious. http://sperling.com/examples/menuh/ Jay: First, thanks for looking. Second, your observation is correct -- but only for menus that have sub-menus. Third, I am clueless as to what causes that effect. It seems that adding a background image to the menu causes the hover state to act oddly. This can be seen in both the top-parent menu, where it preforms as you describe, and also in the sub parent-menus where the effect is noted immediately about the image (the hover state turns off at the image). This is one of two css questions I have that have never been answered. Cheers, tedd -- --- http://sperling.com http://ancientstones.com http://earthstones.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] Drop down menu and float problems
Could somebody please offer me some advice to solve problems I have. The first being a drop down menu I have developed won't display the appropriate links. I seems the the drop down works but the links won't appear. the second problem is I'm trying to float six different div elements side to side but after the fourth element the next two clears to the bottom of the page. You can see the page here: http://www.irn2000.com/public/ (dropdown = the Information tab) Many Thanks. Lyn __ 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] em or %, pros and cons?
Magnus Fahlström wrote: 1. Could you please explain why you choose one over the other? 2. Only for font-size or for the complete layout? Thanks Magnus Fahlström There are, in my twisted little mind, no hard and fast rules about much of anything including either or both of your points. My /personal/ preference is to use percent throughout for setting fonts-- I just find it easier, more reliable, and more consistent cross-browser. But sure, no problems with em based fonts as long as you set percent on html to kill the em font-scaling bug in IE. When it comes to layouts, again it is a personal choice borne of my own experience. I prefer layouts that use the entire arsenal available-- a combination using percent/em/pixel combined with min/max width. Fixed with layouts are appropriate in some instances. Percent based layouts work well as long as you mind IE's rounding errors (and I prefer to hold the horizontal scroll bar in check); and em based layouts work fine (I prefer to hold the horizontal scroll bar in check); It is your call. Best, ~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/
Re: [css-d] :: ie 6 7 :: collapse on click bounce on scroll ::
Bruno Fassino wrote: On 10/15/07, David Laakso wrote: In this photoshop nightmare [1] the slideshow (top right col) collapses in IE 6 7 when any horizontal nav link is clicked (in compliant browsers clicking 'home' does it). O.K. I understand the js fix you provided and will modify the script accordingly this afternoon. Thank you! And IE 6 7 the left col is exhibiting vertical bounce on a full scroll. The left column seems stable to me, probably I haven't understood the problem, what do you mean with full scroll? Bruno, in my versions of IE 6 and 7 (parallels/os x 10.4.10) when using either the scroll bar /or/ mouse wheel to vertically scroll to the very bottom of the footer, that the background images bounce (like striking the keys of a piano) and some text bounces vertically. This noticeable on the left third of the page. [1] http://www.chelseacreekstudio.com/ca/cssd/un/ Best regards, Bruno 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/
Re: [css-d] :: ie 6 7 :: collapse on click bounce on scroll ::
On 10/15/07, David Laakso [EMAIL PROTECTED] wrote: Bruno, in my versions of IE 6 and 7 (parallels/os x 10.4.10) when using either the scroll bar /or/ mouse wheel to vertically scroll to the very bottom of the footer, that the background images bounce (like striking the keys of a piano) and some text bounces vertically. This noticeable on the left third of the page. [1] http://www.chelseacreekstudio.com/ca/cssd/un/ It doesn't happen in my (native) IE6 and IE7 on XP. Regards, ~dL Best regards, 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] em or %, pros and cons?
Fixed with layouts are appropriate in some instances. How have you decided between fixed and fluid? On 10/15/07, David Laakso [EMAIL PROTECTED] wrote: Magnus Fahlström wrote: 1. Could you please explain why you choose one over the other? 2. Only for font-size or for the complete layout? Thanks Magnus Fahlström There are, in my twisted little mind, no hard and fast rules about much of anything including either or both of your points. My /personal/ preference is to use percent throughout for setting fonts-- I just find it easier, more reliable, and more consistent cross-browser. But sure, no problems with em based fonts as long as you set percent on html to kill the em font-scaling bug in IE. When it comes to layouts, again it is a personal choice borne of my own experience. I prefer layouts that use the entire arsenal available-- a combination using percent/em/pixel combined with min/max width. Fixed with layouts are appropriate in some instances. Percent based layouts work well as long as you mind IE's rounding errors (and I prefer to hold the horizontal scroll bar in check); and em based layouts work fine (I prefer to hold the horizontal scroll bar in check); It is your call. Best, ~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/ -- Stan Baptista State of Hawaii DAGS/ICSD eGovernment Team Specialist __ 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] :: ie 6 7 :: collapse on click bounce on scroll ::
Bruno Fassino wrote: On 10/15/07, David Laakso [EMAIL PROTECTED] wrote: Bruno, in my versions of IE 6 and 7 (parallels/os x 10.4.10) when using either the scroll bar /or/ mouse wheel to vertically scroll to the very bottom of the footer, that the background images bounce (like striking the keys of a piano) and some text bounces vertically. This noticeable on the left third of the page. [1] http://www.chelseacreekstudio.com/ca/cssd/un/ It doesn't happen in my (native) IE6 and IE7 on XP. Regards, ~dL Best regards, Bruno That is /good/ news. As always, thank you for your time and effort on my behalf... Best, ~david -- 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/
Re: [css-d] em or %, pros and cons?
Stan Baptista wrote: Fixed with layouts are appropriate in some instances. How have you decided between fixed and fluid? On 10/15/07, David Laakso [EMAIL PROTECTED] wrote: Magnus Fahlström wrote: 1. Could you please explain why you choose one over the other? 2. Only for font-size or for the complete layout? Thanks Magnus Fahlström There are, in my twisted little mind, no hard and fast rules about much of anything including either or both of your points. My /personal/ preference is to use percent throughout for setting fonts-- I just find it easier, more reliable, and more consistent cross-browser. But sure, no problems with em based fonts as long as you set percent on html to kill the em font-scaling bug in IE. When it comes to layouts, again it is a personal choice borne of my own experience. I prefer layouts that use the entire arsenal available-- a combination using percent/em/pixel combined with min/max width. Fixed with layouts are appropriate in some instances. Percent based layouts work well as long as you mind IE's rounding errors (and I prefer to hold the horizontal scroll bar in check); and em based layouts work fine (I prefer to hold the horizontal scroll bar in check); It is your call. Best, ~dL As previously stated, when it comes to layouts, again it is a personal choice borne of /my/ own experience. I prefer layouts that use the entire arsenal available-- a combination using percent/em/pixel combined with min/max width. There are, nevertheless, situations where a fixed width layout is an appropriate solution. This depends on the situation, the content, and the problem at hand. For example, if the content is made up of large images (or contains other elements that must be of a fixed width) /and/ one does not wish to draw an horizontal scroll bar (or drop floats in narrow windows), a fixed width layout /might/ be a logical choice. Name of the game,/for me/, is to maintain a war chest and to pull weapons of choice from it determined by what will win the battle-- rather than a preconceived notion that any one layout resolves all given issues for all situations. These, of course, are personal opinions. How you (or anyone else) plays war is up to you... Best, ~dL PS FWIW, for a number of reasons (archive maintenance/and reading logic among them) it may be best to reply below rather than above those to whom you reply on this list. -- 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/
Re: [css-d] em or %, pros and cons?
PS FWIW, for a number of reasons (archive maintenance/and reading logic among them) it may be best to reply below rather than above those to whom you reply on this list. Ah yes, sorry about that. It's all gmail's fault;-) (http://css-discuss.incutio.com/?page=GmailAndCssDiscuss) -- Stan Baptista State of Hawaii DAGS/ICSD eGovernment Team Specialist __ 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] Best option for simple contact form?
On 10/14/2007 at 3:59 PM, David Hucklesby [EMAIL PROTECTED] wrote: | Hi Jenn and Alison, | | On 12-Oct-07, at 11:42 PM, Allison Kelly wrote: | | I need to build a very simple email form for a contact page. | | | On Sun, 14 Oct 2007 13:38:21 +0530, Rahul Gonsalves replied: | | I have had good results with this form. It seems well thought out. | http://green-beast.com/blog/?page_id=71 | | After building my own PHP-driven form that got spammed within a week, | I came across the form script that Rahul refers to. I agree with | his recommendation. | -- | | On Sat, 13 Oct 2007 20:42:15 -0700, Jenn Mears wrote: | Hi David, | I have been looking into web form handling companies for a client that uses | a hosting | company which doesn't offer cgi-bins(who knew?) I came across a company | called Web | Form Buddy and they offered a pretty good range of services for $40 per | year. They | seemed like the best company I could find after quite a search, but I | couldn't find any | online reviews about them. Have you heard anything about them? | http://www.web-form-buddy.com/ | | | Sorry, no. I am fortunate in that someone I helped paid me by | giving me free hosting. :) So I have little experience in that regard. | | Cordially, | David | -- How about this feedback form? http://www.thesitewizard.com/wizards/feedbackform.shtml AnnR __ 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] 3-col layout but with FIXED width centre col
Hi, Okay, here goes! I want to achieve this layout freelancealot.co.uk/test/Retreat_Wellness_Centre.jpg Which would be easy if I were going for a fixed-width layout, however I want the layout to be full-width (100%), also easy enough, but then I want the left-col and right-col to be liquid and the centre col fixed to the width of the picture and it's border. Am I being too optimistic here... or maybe missing an obvious solution to the layout requirement. From the point of SEO, I'd like the left-col and right-col to appear first, if possible - I'm thinking of the markup looking similar to below: div id=container div id=content div id=left-col text /div -- liquid div id=right-col text /div -- liquid /div div id=centre-col main image /div -- fixed-width (max-width?) div id=footer ... div id=left-footer /div div id=right-footer /div /div /div Any help/pointers much appreciated - I seem to be having a brain freeze on this one. Thanks, Tracy __ 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 I worry about the warnings?
Ross Hulford wrote:
My CSS validates, however I get loads of warning
- -
Generally they are Same colors for color and background-color in two
contexts
That's a somewhat odd and confusing warnings. I'd suggest using the
interface at
http://jigsaw.w3.org/css-validator/ with More Options clicked and
Warnings set to All. Then you get messages like
You have no color set (or color is set to transparent) but you have set a
background-color. Make sure that cascading of colors keeps the text
reasonably legible.
That's somewhat tough too, but makes more sense. You need to understand the
cascade in order to see the point.*) Or you might decide just to take the
expert advice and follow the simple rule of always setting background, in
the same rule, when you set color, and vice versa. This should also remove
the warnings you have seen.
Quick intro:
Suppose a user style sheet contains
* { color: white; background: black; }
What will happen in an author style sheet contains, say,
#foobar { background-color: white; }
?
Jukka K. Korpela (Yucca)
http://www.cs.tut.fi/~jkorpela/
__
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] Pure CSS drop-down menus aren't *good*
G'day Rafael, On 15/10/2007, at 2:01 PM, Rafael wrote: I think this is yet another religious topic. Accessibility on most JS menus (actually all I've seen so far) is inexistent, some of them are so poorly done than they even throw an error on this or that browser and the whole menu stops working. If you ask Joe Clark about his opinion... maybe he would trash both of them :) I think in the authentic meaning of the word 'Accessibility', well- produced JS menus far outshine CSS-only ones, if only for point 2 of my previous email (introducing delays before collapsing submenus). As for handling errors and browser support, of course that's all down to implementation (any good JS is totally unobtrusive and so only users with support get the advantages of the Javascript). Personally, I think CSS menus are better (or less bad) than JS menus. In both cases you must know what you're doing and have accessibility on mind (and hoy many of us do really do this?). If you ask me, a combination of both is the best solution, which means a lot more work than current / typical implementations --and the client's can't see a reason to spend on that, and the guy doing the front-end has a lot of things to think on before spending some extra time on the minor details. I like to think I keep accessibility on the mind throughout every phase of a frontend design job. I do testing in text browsers, and in upwards of 10 desktop browsers (including the big four; IE 6, IE 7, Firefox 2 and Safari 2). When you say a combination of both, that's exactly the behaviour I'm talking about when I say 'Javascript menus'. I don't believe in pure Javascript implementations of anything. It must be loaded unobtrusively as a supplement (rather than replacement) of CSS-based menus. As a full-time 'frontend guy', navigation is around about number 3 on my list of priorities when putting together a website; I think part of calling ourselves professionals is treating every part of each job as worth our time. Plus drop-downs tend to feature in around 90% of the designs our Art Director puts together, so getting it right once helps us with subsequent jobs. I myself should be redoing part of a menu I'm planning on using, but is for a personal site so the time I have spent on it is... a message I sent to this list (and that Georg kindly replied), that's all. Oh, well... real life again. In case you're curious, the link I sent was http://dev.rsalazar.name/css.d/menu.html By the way, the best solution for the accessibility issue I asked help for seems to be a re-implementation of the CSS behavioral part combined with a little JS to make things look better (ironic? yes, it is). I like the way that's looking, but it shows off exactly what problems pure CSS menus always (necessarily) show: say you expect another level of navigation to drop down, or you're just not particularly good with a mouse. You go to Groupo D, Groupo D.2, Enlace D.2.a and slide your mouse off the bottom (just a pixel) and instantly all progress is lost and you have to start from the top-level again. This is more important still when you have many items in each menu level (since there is more cognitive thought required to decide a menu item). Here are some opinions, if you mind... Kit Grose wrote: G'day Jay, I've heard the request for pure CSS drop-down menus quite a lot, and rarely see people getting told what they should about how *bad* they are. Can you say better things on JS menus? Aren't basically the same things? No! Javascript adds some more desktop-level comforts to the way things work (like menu hide-delays). CSS is designed as a method for styling visible items and laying them out relative to one-another. Drop-down menus are behavioural, and thus should be taken care of with Javascript (not Java; there's a huge difference, worth noting). Of course, accessibility means keeping in place a series of fall-backs which allow non-JS enabled users to view the list. So would CSS fall-backs to do exactly the same. Yes, but they're fall-backs. Just as the fall-back for no CSS is a simple nested unordered list, we have to draw the line somewhere. We lose some usability, but it still works. It's hard (for me, at least) to agree on using JS solely on the fact that their behavioral and, therefore, should be done with JS. It's kind of the same as saying that changing the colors is a behavior, not a style (which would be correct), or saying that pseudo-elements and pseudo-classes have no reason to exist, since they're referring to a behavior or somehow altering the DOM. Changing the colours based on user interaction (like hover/mouseover) is indeed a behaviour, but unless we need animation, we're able to hand that job off to the stylesheet (via :hover). Pseudo-classes and elements should exist for purely
[css-d] Site Check
Dead Css-D, I would appreciate any comments from people who have time to take a look at http://tnhtest.grubbyconsulting.com especially in browsers other than FF/Ubuntu. TIA, Tom __ 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 Flyout Menu Fails in IE7
Georg, Thank you for the quick response, informative answer, and stacking resolution. I will also look into the font-sizes. I appreciate your time and effort in providing the coded changes. This was my first listing, and it has been a very positive experience. Thanks again, Al -Original Message- From: Gunlaug Sørtun [mailto:[EMAIL PROTECTED] Sent: Monday, October 15, 2007 12:47 AM To: Al Marvel Cc: css-d@lists.css-discuss.org Subject: Re: [css-d] CSS Flyout Menu Fails in IE7 Al Marvel wrote: I investigated several search hits throughout the Web discussing similar problems with IE, z-index, and menus, but many are dated or don't exactly match this problem. I'm asking for assistance in determining if my design is flawed, or if it definitely cannot work in IE7. http://marvelka.com/flyout.html IE/win (any version) can't re-stack anything from within absolute or relative positioned containers, and '#sidebar .inner' '#sidebar .outer' are absolute positioned. That old IE problem hasn't changed for the last 8-9 years, so earlier notes on it are probably pretty accurate. Reordering and/or adding elements to source-code will only move the problem around, and the flyouts on one or the other side will get hidden in IE7. IE6 (and older) doesn't support :hover on anything but anchors, so it won't show flyouts on either side without help of a 'whatever:hover.htc'[1] file or something. IE6 also has its 'auto-expansion' bug (not respecting given dimensions) that may break the line-up. As with most CSS menus: it definitely doesn't work without a mouse or similar, in any browser. It is fine as a demo-case for how to fix such a stacking-problems in IE7 though... http://www.gunlaug.no/tos/alien/am/test_07_1015.html (I have commented necessary style-changes in the page-head.) I have un-positioned the containers - floated them in place, and change z-index - re-stack the relevant list-item - to 1 level higher than the surroundings - only on :hover. That lifts the relevant flyout visibly on top, regardless of side and source-order. Note: pixels for font-sizes and line-heights don't work well other than to potentially break your page under certain conditions in certain browsers, and the one you have problems with is one of them. regards Georg [1]http://www.xs4all.nl/~peterned/csshover.html -- 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] BG Image not displaying
Mike A Wrote: BTW, do you find nbsp; works better cross-browser than !-- blank --? Hello, I use both, nbs; for block element, and !-- blank -- for inline elements.. Not sure if it's really necessary, but it's how I do it? Kind Regards Dave __ 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] Pure CSS drop-down menus aren't *good*
I've heard the request for pure CSS drop-down menus quite a lot, and rarely see people getting told what they should about how *bad* they are. Cause people don't search archives? http://archivist.incutio.com/viewlist/css-discuss/78948 -- Chris Heilmann Book: http://www.beginningjavascript.com Blog: http://www.wait-till-i.com Writing: http://icant.co.uk/ __ 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] BG Image not displaying
[EMAIL PROTECTED] wrote:
Hello,
I have this:
#masthead {
height:105px;
width:100%;
background: #f5f3dc url(bg/header-new-11-rev.gif);
}
and div id=mastheadnbsp;/div,
The bg image will not display, is there a reason for this?
Kind Regards
Dave
Dunno. The image is not on the host/server? The image is on the
host/sever but the path to it is incorrect? The image is corrupt?
Provide a uri if you are unable to resolve it.
Best,
~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/
Re: [css-d] Best option for simple contact form?
On 10/15/2007 at 11:00 AM, David Hucklesby [EMAIL PROTECTED] wrote: | Hi Ann, | | You asked: | | How about this feedback form? | http://www.thesitewizard.com/wizards/feedbackform.shtml | | | From the sample page, it looks very old school - tables and font | tags. :( Yeah, I did my own formatting. | The other forms mentioned use a technique to defeat spam that | has a dummy field that lead spam bots to fill it in, but humans | will not. This has proven pretty effective at reducing spam. The | form you refer to does not have this feature. Ah, good point. Thanks for pointing this out! This would reduce or eliminate spam to the site administrator, wouldn't it. Don't know why I didn't consider that sooner. Thanks. | On other thing you need to guard against - so-called injection | attacks. This is quite hard to guard against, but is taken care | of in Wufoo and in Mike Cherim's solution. I did not look at the | code in the site you referenced, so cannot advise you on that. This, actually, was what led me to the sitewizard feedback form. It is specifically set up to defeat injection attacks, which I was having at the time. | Cordially, | David | -- Thanks for the comments. -- AnnR -- __ 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] Pure CSS drop-down menus aren't *good*
Christian Heilmann wrote: I've heard the request for pure CSS drop-down menus quite a lot, and rarely see people getting told what they should about how *bad* they are. Cause people don't search archives? http://archivist.incutio.com/viewlist/css-discuss/78948 LOL. I agree, we should search the archives a lot more. On the other hand, if the same topics pop up again every now and then, and they came to same conclusions, then we're reaffirming this knowledge, right? ;) __ 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] Pure CSS drop-down menus aren't *good*
I changed my mind. I just read this article and I don't find it useful. I think it lacks in-depth knowledge or he simply didn't took the best approach for this topic. I don't think he's wrong (solely in the point that hybrid menus are better), but anyone with some knowledge could think of this article as poorly-done or not being objective --he seems to be some sort of JS expert. The way he uses to expose his point of view looks more like saying CSS is plain wrong, it also shows a lack of understanding of it and seems to believe there's no common sense (which could easily be applied to both CSS and JS). Anyway, it's good to have it as a reference, but I do believe people should investigate a little more. Christian Heilmann wrote: I've heard the request for pure CSS drop-down menus quite a lot, and rarely see people getting told what they should about how *bad* they are. Cause people don't search archives? http://archivist.incutio.com/viewlist/css-discuss/78948 __ 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] 3-col layout but with FIXED width centre col
Tracy Shorrock wrote: I want to achieve this layout freelancealot.co.uk/test/Retreat_Wellness_Centre.jpg Which would be easy if I were going for a fixed-width layout, however I want the layout to be full-width (100%), also easy enough, but then I want the left-col and right-col to be liquid and the centre col fixed to the width of the picture and it's border. Something along these lines, maybe... http://www.gunlaug.no/tos/moa_27.html 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] Pure CSS drop-down menus aren't *good*
Please, for your users' sake: use a Javascript drop down menu (but make sure it's one that is fully accessible, and that reverts to a pure-CSS menu when JS is not available). I use TwinHelix Designs' excellent FreeStyle Menus (http://www.twinhelix.com/dhtml/fsmenu/) personally, but it's donationware for commercial use. But what about keyboard users? One example I've seen in this thread is not accessible to keyboard users and the other forces these users to go through every single item in the menu :-( The solution below addresses this issue, it also adds some room for error for people who are a bit mouse-challenged. http://www.tjkdesign.com/articles/keyboard_friendly_dropdown_menu/ It is not the perfect solution, but it tries to fix most common issues related to these menus. And I'm not sure if this URL as been posted recently: http://www.tyssendesign.com.au/articles/css/dropdown-low-down/ -- Regards, Thierry | http://www.TJKDesign.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
Tom Lancaster wrote: Dead Css-D, I would appreciate any comments from people who have time to take a look at http://tnhtest.grubbyconsulting.com especially in browsers other than FF/Ubuntu. TIA, Tom Safari 3.0.3 Opera/mac ver 9.23 XP ie 6 7 on parallels desktop The content text-size may be a little small for some @116.5 dpi (might not be so much of a problem if the nav did not break at +1/+2. This appears at the bottom at left rail (compliant browsers ie 6 and 7): Array ( [last_page] = /housing ) Sign In is broken right. (compliant browsers ): A nuisance markup css error could be corrected. IE 7. Fonts are frozen (and not a real pretty picture when your font sizes are ignored). IE 6. Fonts are frozen (but a better picture than IE7 when your font sizes are ignored). Best, ~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/
Re: [css-d] Best option for simple contact form?
On Sun, 14 Oct 2007 13:38:21 +0530, Rahul Gonsalves replied: I have had good results with this form. It seems well thought out. http://green-beast.com/blog/?page_id=71 After building my own PHP-driven form that got spammed within a week, I came across the form script that Rahul refers to. I agree with his recommendation. My .02: I'd not seen M. Cherim's solution (link in above quoted text) but it's not only elegant, well documented and simple, it really does all it says it will. I'll be forwarding that to any client who asks about forms and security and putting it in my bi-monthly design promo/newsletter to clients. Thank you Rahul, for the link...and, as always, to this list for the amazing amount of knowledge shared. Kind regards, ~Ray -- Non scholae sed vitae discimus __ 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] Links on menu won't go to the bottom
Hi all. I have a site I'm working on right now and need some help with the menu. The images are doing fine (current and hover) but the links are at the top and they're supposed to go on the bottom. I have added padding, margin...just about everything I can think of and it doesn't work. I've looked at it all day. Maybe someone with a fresh perspective can help me sort this out. Thanks in advance. http://www.5pts-interactive.com/sarantopoulos/index.asp Jeralyn Tonight's top picks. What will you watch tonight? Preview the hottest shows on Yahoo! TV. http://tv.yahoo.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] Pure CSS drop-down menus aren't *good*
EXCELLENT review by Tyssen Design. It'll take me a week or so to get through it, but thanks much. J From: [EMAIL PROTECTED] And I'm not sure if this URL as been posted recently: http://www.tyssendesign.com.au/articles/css/dropdown-low-down/ -- Regards, Thierry | http://www.TJKDesign.com _ Boo! Scare away worms, viruses and so much more! Try Windows Live OneCare! http://onecare.live.com/standard/en-us/purchase/trial.aspx?s_cid=wl_hotmailnews __ 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] Links on menu won't go to the bottom
You're a genius!!! It worked! Thank you so much for getting back to me so
quickly.
I love this list :-)
Jeralyn Merideth
5 Points Interactive
Creative Design Solutions for Web and Print
[EMAIL PROTECTED]
[EMAIL PROTECTED]
- Original Message
From: Thierry Koblentz [EMAIL PROTECTED]
To: Jeralyn Merideth [EMAIL PROTECTED]; css-d@lists.css-discuss.org
Sent: Monday, October 15, 2007 4:22:59 PM
Subject: RE: [css-d] Links on menu won't go to the bottom
Hi all. I have a site I'm working on right now and need some help
with the
menu. The images are doing fine (current and hover) but the links are
at
the top and they're supposed to go on the bottom
Thanks in advance.
http://www.5pts-interactive.com/sarantopoulos/index.asp
Try this:
#navbar li a {
color:#225AA0;
display:block;
float:left;
/* remove this height:62px; */
padding:45px 10px 0pt;
text-align:center;
text-decoration:none;
}
HTH
--
Regards,
Thierry | http://www.TJKDesign.com
Be a better Heartthrob. Get better relationship answers from someone who knows.
Yahoo! Answers - Check it out.
http://answers.yahoo.com/dir/?link=listsid=396545433
__
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] Links on menu won't go to the bottom
Hi all. I have a site I'm working on right now and need some help with the
menu. The images are doing fine (current and hover) but the links are at
the top and they're supposed to go on the bottom
Thanks in advance.
http://www.5pts-interactive.com/sarantopoulos/index.asp
Try this:
#navbar li a {
color:#225AA0;
display:block;
float:left;
/* remove this height:62px; */
padding:45px 10px 0pt;
text-align:center;
text-decoration:none;
}
HTH
--
Regards,
Thierry | http://www.TJKDesign.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] content div dropping down in IE
I am working on the layout of a site which involved a scrolling (when the content allows it) div that is supposed to align to the right of a side column (floated left). here is the url: http://warriorsarise.org/ appears fine to me in FF and Safari. in IE the content col (named #content_area in the CSS) drops down below the side nav (named #announcements). It appears there should be enough pixel space in the container div, so I am not sure ehat is going on with IE. Any assistance is greatly appreciated. CSS is located at : http://warriorsarise.org/CSS/layout.css -- ::Bruce:: __ 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] php
Colleagues: Does anybody have recommendations for a good book and/or websites for beginning php? Thanks Raumin Ray Dehghan __ 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] layout issue with background image
I recently asked about how to resolve having both a gradient background and a background image. It is now close to what I want but not there yet. http://www.grandconnections.com/buttercup/index.htm and http://www.grandconnections.com/buttercup/ApplicationStyle.css There is a center-aligned main area with a flower behind the top right corner. I would like to have the main area always in the centre and the same amount of flower displayed at the top right but I don't want the horizontal scroll bar. The bigger the screen, the more the flower would be revealed. Any suggestions? Also, ideally the outside border would be semi-transparent. When I added transparency to that div (#inner), the whole content area inherited the transparency. Is it possible to limit the transparency to the outer border only? Thank, Kathryn __ 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] php
PHP Cookbook by O'Reilly Original Message --- Colleagues: Does anybody have recommendations for a good book and/or websites for beginning php? Thanks Raumin Ray Dehghan __ 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/
[css-d] widening center content
Colleagues: I want to thank everyone for the help on widening the center content. I was able to line things up at least for the time being. I'm using static positioning on the template I'm using now. Sincerely, Raumin Ray Dehghan West Chicago Public Library West Chicago, Illinois __ 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] layout issue with background image
Kathryn Crutcher wrote: I recently asked about how to resolve having both a gradient background and a background image. It is now close to what I want but not there yet. http://www.grandconnections.com/buttercup/index.htm and http://www.grandconnections.com/buttercup/ApplicationStyle.css There is a center-aligned main area with a flower behind the top right corner. I would like to have the main area always in the centre and the same amount of flower displayed at the top right but I don't want the horizontal scroll bar. The bigger the screen, the more the flower would be revealed. Any suggestions? I would suggest to let the images do the trick. I didn't fully test it nor did I put much attention to the details (it was so you could grasp the idea), but you can check this... http://dev.rsalazar.name/css.d/buttercup.html Also, ideally the outside border would be semi-transparent. When I added transparency to that div (#inner), the whole content area inherited the transparency. Is it possible to limit the transparency to the outer border only? Not that I'm aware of. The element and its children will have, at most, that opacity, being able to make it more transparent but unable to revert it. Again, as far as I know. Hope it helps. __ 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/
