Re: [css-d] Best option for simple contact form?
On 12-Oct-07, at 11:42 PM, Allison Kelly wrote: I need to build a very simple email form for a contact page. Allison, I have had good results with this form. It seems well thought out. http://green-beast.com/blog/?page_id=71 Best, - Rahul. __ 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] Tips on style
On 12-Oct-07, at 2:14 PM, Sam Sutton wrote: Hi, I was wondering if anyone could point me in the direction of any tutorials or other resources on good writing well-formed css. For example, things like, how do you order your file or files? Would you group it in order of the structure of the associated document, or by typography etc? Do you split areas up into different stylesheets etc etc. Minor things really, but I think they all help towards better stylesheets, and it would be good to know what someone more experienced thought about it. Sam, Some interesting links: http://www.mezzoblue.com/archives/2003/11/17/css_best_pra/ http://css-discuss.incutio.com/?page=MaintainableCss The Wiki is an excellent place to hunt around before posting. Best, - Rahul. __ 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] Converting to EMs
At 9:47 PM -0400 10/13/07, Kenny Graham wrote:
I think the gimmick they're talking about is using
body {font-size:62.5%;}
in an attempt to give yourself the illusion of 1em = 10px.
An em is relative to the user's default font-size, whereas a pixel
is absolute*. So the 62.5% calculation only works with one specific
default font-size. The gimmick isn't using em's, it's the idea that
em's and px's can be converted back and forth. It's not like
converting inches to cm, it's like converting 5 lengths of the user's
thumb to inches. If you want to size your page in pixels, you should
use pixels, not em's. Em's are better, but the technique you were
using above is an attempt to make em's behave identically to pixels,
which is impossible since the size of an em is different for each
user. Only use a font-size of 1.5em's if you want the font size to be
one and a half times the size of the user's default font. Not if you
want it to be a specific pixel amount.
As for me, other than borders, I never use pixels for anything.
All dimensions for everything, including graphics, are in em's. I
simply use a conversion ratio of 16 pixels equal 1 em.
To prohibit any inheritance issues when defining size (height/width)
for graphics or widths of anything, I use font-size: 1em; at the
start of the rule.
This technique works for me in everything I've done and I would never
go back to using pixels for anything -- unless a more informed than
me client demands it.
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/
Re: [css-d] pure CSS drop-down menu
Jay Rabe wrote: Hi all, Anyway, I'm rebuilding a site that I inherited, and right now I'm stuck on the menu bar. I want a full-width bar with buttons that change background color on hover, with drop-downs on some of the buttons, and I'd rather do it with pure CSS (which I know almost nothing about but am learning fast) rather than java (which I know Absolutely nothing about). This works: http://sperling.com/examples/menuh/ 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] jumpy page/won't scroll down in IE
I'm having a problem on this site in IE : http://www.ripeforretirement.com/ Here is the CSS: http://www.ripeforretirement.com/css/ripe.css For some reason, I can't scroll down to the bottom of the page -- it just kind of jumps around when attempting to do so. I have a feeling it might be related to the javascript for the font enlargement, but not really sure. No one seems to be experiencing the problem in other browsers. Anybody have any ideas? Thanks, Peg ambientglow __ 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] jumpy page/won't scroll down in IE
Peggy Coats wrote:
I'm having a problem on this site in IE :
http://www.ripeforretirement.com/
For some reason, I can't scroll down to the bottom of the page -- it
just kind of jumps around when attempting to do so. I have a
feeling it might be related to the javascript for the font
enlargement, but not really sure.
The 'js/equalcolumns.js' is bugging IE/win ... it can't get past its
artificial bottom, and the footer is below.
Kill the script and IE/win will do fine, or check out the conditions
the script is supposed to work under and adjust your layout to it.
What do you need that script for? No visual columns to take care of on
that page, but you may have other reasons.
IE/win already has a 'hasLayout' trigger that keeps the center-column in
check width-wise, and other browsers will do fine with a suitable 'block
formatting'[1] trigger.
#outerWrapper #contentWrapper #content {
display: table-cell;
}
...seems to work fine, but have only checked it in Opera and Firefox on
windows.
You can of course also give that element the correct margin...
#outerWrapper #contentWrapper #content {
margin: 0 200px 0 230px;
}
...in which case neither 'hasLayout', 'block formatting' or
'equalcolumns script' seems to be necessary in any browser.
You just have to remember that IE6 doesn't respect any dimensions, and
at least kill its 'em font-resizing bug'[2] before anyone starts
resizing text in that browser.
The addition of
html {font-size: 100%;}
...will do.
regards
Georg
[1]http://www.w3.org/TR/CSS21/visuren.html#block-formatting
[2]http://www.gunlaug.no/contents/wd_additions_13.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] jumpy page/won't scroll down in IE
On 10/14/07, Gunlaug Sørtun [EMAIL PROTECTED] wrote: Peggy Coats wrote: I'm having a problem on this site in IE : http://www.ripeforretirement.com/ For some reason, I can't scroll down to the bottom of the page -- it just kind of jumps around when attempting to do so. I have a feeling it might be related to the javascript for the font enlargement, but not really sure. The 'js/equalcolumns.js' is bugging IE/win ... it can't get past its artificial bottom, and the footer is below. Kill the script and IE/win will do fine, or check out the conditions the script is supposed to work under and adjust your layout to it. regards Georg Thanks -- removing the equalcolumns.js did the trick. I had that in there originally and then decided not to use the js because the columns were working fine w/o, but neglected to remove it from the pages. Peg __ 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?
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 -- __ 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] Converting to EMs
At 9:47 PM -0400 10/13/07, Kenny Graham wrote:
I think the gimmick they're talking about is using body {font-size:62.5%;}
in an attempt to give yourself the illusion of 1em = 10px.
On Sun, 14 Oct 2007 08:51:15 -0400, tedd replied:
All dimensions for everything, including graphics, are in em's. I simply use a
conversion ratio of 16 pixels equal 1 em.
But be aware that the default font size at factory settings is 20 pixels
in IE and Opera this end. Only Gecko and Webkit see 16 pixels as default.
(Default DPI = 120 is the reason.)
Cordially,
David
--
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] center column on one page in site not aligning in IE
Got my no-scroll fixed on this site (thanks Walt and Gunlaug), but now have ONE page where the #content (middle column) drops down below the right and left columns: http://www.ripeforretirement.com/contact.php Not sure what is causing this (and it only seems to be happening in IE). Page is using the same stylesheet as the rest of the site. Any ideas? thanks, Peg ambientglow __ 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
On Sun, 14 Oct 2007 08:56:23 -0400, tedd wrote: Jay Rabe wrote: Hi all, Anyway, I'm rebuilding a site that I inherited, and right now I'm stuck on the menu bar. I want a full-width bar with buttons that change background color on hover, with drop-downs on some of the buttons, and I'd rather do it with pure CSS (which I know almost nothing about but am learning fast) rather than java (which I know Absolutely nothing about). This works: http://sperling.com/examples/menuh/ Hi Tedd, I could not get your menu to work in IE7 or Opera. I am a keyboard user. What am I missing? :( Cordially, David -- __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] jumpy page/won't scroll down in IE
On Sun, 14 Oct 2007 11:07:10 -0700, Peggy Coats wrote: I'm having a problem on this site in IE : http://www.ripeforretirement.com/ Here is the CSS: http://www.ripeforretirement.com/css/ripe.css For some reason, I can't scroll down to the bottom of the page -- it just kind of jumps around when attempting to do so. I have a feeling it might be related to the javascript for the font enlargement, but not really sure. No one seems to be experiencing the problem in other browsers. Anybody have any ideas? I am not seeing any scrolling problem this end, Peggy. Can you tell us which browser version and platform you are using? I tried IE6 and IE7 here on Windows xp pro. There does seem to be a layout problem in IE though. Here's a screen shot: http://webwiz.robinshosting.com/temp/images/ripe-ie7.png (Sorry about the 8-bit colors, though. Your actual page looks much nicer.) Cordially, David -- __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] jumpy page/won't scroll down in IE
On 10/14/07, David Hucklesby [EMAIL PROTECTED] wrote: On Sun, 14 Oct 2007 11:07:10 -0700, Peggy Coats wrote: I'm having a problem on this site in IE : http://www.ripeforretirement.com/ Here is the CSS: http://www.ripeforretirement.com/css/ripe.css For some reason, I can't scroll down to the bottom of the page -- it just kind of jumps around when attempting to do so. I have a feeling it might be related to the javascript for the font enlargement, but not really sure. No one seems to be experiencing the problem in other browsers. Anybody have any ideas? I am not seeing any scrolling problem this end, Peggy. Can you tell us which browser version and platform you are using? I tried IE6 and IE7 here on Windows xp pro. There does seem to be a layout problem in IE though. Here's a screen shot: http://webwiz.robinshosting.com/temp/images/ripe-ie7.png (Sorry about the 8-bit colors, though. Your actual page looks much nicer.) Cordially, David -- HI David, I got the jumping/no-scroll problem fixed by elminating a javascript call. It was only an issue in IE 6 and IE 7. thanks for the screenshot -- it looks like you've enlarged the font size (I hope it's not defaulting to that!) I know that on the largest font increase the text will sometimes hide behind the nav bar (as it appears to be doing here). Not sure how to get around that! Peg __ 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?
If you need a good form styling check out Khoi Vinh's good form: http://www.subtraction.com/pics/0508/050822/ On 10/14/07, 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 -- __ 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/ -- iron sharpens iron __ 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] center column on one page in site not aligning in IE
Peggy Coats wrote:
http://www.ripeforretirement.com/contact.php
Not sure what is causing this (and it only seems to be happening in
IE). Page is using the same stylesheet as the rest of the site.
Yes, but IE gets some extra styles in the page-head - on all pages.
Delete this...
#outerWrapper #contentWrapper #content {
zoom: 1;
}
...and IE will come somewhat to its senses.
That 'hasLayout' is a _damn_ IE/bug, and you're just seeing what damage
it can do when you don't know how to control it.
The solution I gave you earlier - correcting the margins, will work as
replacement...
#outerWrapper #contentWrapper #content {
margin: 0 200px 0 230px;
}
...and it'll work equally well in _all_ browsers - not just IE.
The problems you have with the menu overlapping the center-column on
large font-size, is caused by mixing em-sizes and positioning into a
pixel-sized layout. That requires rigorous testing and tuning to work.
A simple patch would be to make it move outwards instead of inwards,
which can be done by adding/correcting to something like...
#menu {
left: 32px; margin-left: -3em;
}
...to use the available space the best you can.
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] Pure CSS drop-down menus aren't *good*
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. 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. There are some massive accessibility gains that Javascript drop-downs provide: • You can animate opening and closing lists (not just eye-candy; it makes it very clear to the user when there is a change on the screen) • You can provide a suitable pause before the list collapses (your users are not necessarily skilled with a mouse or keyboard. They may have difficulty operating a mouse and I can tell you from experience that they have real difficulty changing movement from horizontal (along your list headings) to vertical (down your first level list items) to horizontal (across the list item to the sublist) to vertical again (down the sublist items) without accidentally moving the mouse out of the bounds of the list item. Javascript menus introduce a delay before actions are cancelled so that a slight movement of the cursor outside the bounds of a list item is not penalised against) • You can get identical behaviour in all the major browsers (all the CSS-only drop-down menus rely on CSS hackery to work properly in IE. Every sensible browser can handle the ulli selector; the basis of a simple, standards-based CSS solution, but IE doesn't. CSS hackery is no better for you as someone who doesn't understand JS but does understand CSS than JS hackery; CSS hacks commonly *don't make sense*. They're backward thinking and complex to write). 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. Cheers, Kit __ 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] jumpy page/won't scroll down in IE
HI David,
I got the jumping/no-scroll problem fixed by elminating a javascript call.
It was only an issue in IE 6 and IE 7.
thanks for the screenshot -- it looks like you've enlarged the font size (I
hope it's not defaulting to that!) I know that on the largest font increase
the text will sometimes hide behind the nav bar (as it appears to be doing
here). Not sure how to get around that!
Peg
__
I would change this:
#menu dt {
width: 11em;
To this:
#menu dt {
width: 140px;
That should force your top-level menu items to expand vertically by breaking
the lines rather than expanding the box horizontally.
Walt
__
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*
Kit Grose 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. Thanks for bringing it up. You're right of course, but CSS designers rarely want to know how *bad* CSS is in that respect. It is actually possible to create working solutions with CSS - one method mentioned in the original thread, but they tend to disappear amongst all can never work properly solutions. 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). Again: perfectly right, but the good Javascript menus also tend to disappear amongst the many bad ones, and too few know how to, or bother to, test any CSS or script solution across the board, and they rarely ever leave them in working conditions. Yes, warnings come up on the list almost as frequent as the requests for help with those drop-downs. I guess those warnings are ignored for a reason, but I can't think of a good one other than that the word accessible is a no-no in most design-circles, and more or less off-topic on this list. Both CSS and Javascript tend to be used in ways that are counter-productive when it comes to accessibility, and when did you last hear a client ask for accessible solutions? I just did, but that's probably because I won't accept to work with anything else. Can't prevent others from doing it though. 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] jumpy page/won't scroll down in IE
On 10/14/07, David Hucklesby [EMAIL PROTECTED] wrote: On Sun, 14 Oct 2007 11:07:10 -0700, Peggy Coats wrote: I'm having a problem on this site in IE : http://www.ripeforretirement.com/ Here is the CSS: http://www.ripeforretirement.com/css/ripe.css [...] There does seem to be a layout problem in IE though. Here's a screen shot: http://webwiz.robinshosting.com/temp/images/ripe-ie7.png [...] On Sun, 14 Oct 2007 15:55:43 -0700, Peggy Coats wrote: I got the jumping/no-scroll problem fixed by elminating a javascript call. It was only an issue in IE 6 and IE 7. That's good news. Perhaps you had fixed it by the time I looked at it. thanks for the screenshot -- it looks like you've enlarged the font size (I hope it's not defaulting to that!) ... I'm sorry to say that it is the default medium size in IE on my machine. Many, if not most laptops that have screens with more than a thousand pixels height are set to 120 DPI. To compensate for the smaller text size that results, both IE and Opera increase em sizes by 25%. High-definition laptops seem to be the new black. ;) Cordially, David -- __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] putting a link after a element using :after pseudo element
I have a faq page where I'd like to make every answer have be followed by a
link with the text did this answer your question? that goes to a feedback
page.
I've set my FAQ up as a definition list where dt's hold questions, and dd's
hold answers. I've also had no problems putting nice Q's and A's before the
questions using the before psuedo element. Though I've been able to get the
question did this answer your question to appear using the after psuedo
element, but I can't figure out how to create the link.
Here's the link to the faq:
http://preview.standrews-de.org/academics/cc/FAQ.cfm
Here's the CSS that styles the faq:
http://preview.standrews-de.org/academics/cc/faqstyle.css
Here's the css that styles the entire page:
http://preview.standrews-de.org/css/base.css
here's what I've tried to do to create the link so far:
dd:after {content: Did this answer your question?;
display: block;
white-space: pre;
clear: both;
float: left;
cursor:pointer;
link: url(http://www.standrews-de.org);
}
Thanks,
-John
__
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] CSS Flyout Menu Fails in IE7
Hi All, Hopefully, I posted this properly. I'm requesting assistance with a menu flyout problem which works fine in Mozilla, but not with IE7. Menus are displayed on a sidebar of the web page. When hovering over the menu choice, a block of sub-menus appears to the left or right depending on which side is hovered over. However, in IE7 the left side's flyout is hidden, while Mozilla displays it properly. I'm using a z-index to position the flyout submenu layer, and have tried many variations without success in IE7. I'm new to CSS, JS, and PHP which are the languages I'm using to build the site. The SideBar menus are created dynamically in PHP, and included in each page on the site. 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. I'd like to keep this as a CSS solution, and will redesign the layout if the latter is true. I presume the z-index is the culprit, but I'm not sure if reordering or adding elements might also work. I've developed a sample replica of the problem which displays the Sidebar on a blank page. The CSS is embedded. The page can be seen at http://marvelka.com/flyout.html Thanks in advance. I appreciate any assistance provided. __ 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
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. J This works: http://sperling.com/examples/menuh/ Cheers, tedd -- --- http://sperling.com http://ancientstones.com http://earthstones.com _ Peek-a-boo FREE Tricks Treats for You! http://www.reallivemoms.com?ocid=TXT_TAGHMloc=us __ 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
It's because of the child's (or sub-item's parent) box. They probably thought on give it some margin to make it safer and easier to select, meaning you can go a little out of the item's box and the menu won't disappear, so the issue you describe is caused by their top margin. Hope that helps. 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. J This works: http://sperling.com/examples/menuh/ Cheers, tedd __ 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] putting a link after a element using :after pseudo element
On Oct 15, 2007, at 10:26 AM, John Burk wrote: I have a faq page where I'd like to make every answer have be followed by a link with the text did this answer your question? that goes to a feedback page. I've set my FAQ up as a definition list where dt's hold questions, and dd's hold answers. I've also had no problems putting nice Q's and A's before the questions using the before psuedo element. Though I've been able to get the question did this answer your question to appear using the after psuedo element, but I can't figure out how to create the link. 1. You are aware, I hope, that the ::before and ::after pseudo- elements are not supported by IE... 2. you can insert _content nodes_ with those pseudo-elements, but not (html) mark-up. http://www.w3.org/TR/CSS21/generate.html http://www.w3.org/TR/CSS21/selector.html#before-and-after http://www.w3.org/TR/css3-selectors/#gen-content http://www.w3.org/TR/css3-content/#pseudo-elements and I would argue that your 'did this answer your question' is real content, and should be part of the html document, not the stylesheet. 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] Pure CSS drop-down menus aren't *good*
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. 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). 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? 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. 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. There are some massive accessibility gains that Javascript drop-downs provide: • You can animate opening and closing lists (not just eye-candy; it makes it very clear to the user when there is a change on the screen) Just like Flash... wouldn't really want to go more in-depth on this (another religious topic). • You can provide a suitable pause before the list collapses (your users are not necessarily skilled with a mouse or keyboard. They may have difficulty operating a mouse and I can tell you from experience that they have real difficulty changing movement from horizontal (along your list headings) to vertical (down your first level list items) to horizontal (across the list item to the sublist) to vertical again (down the sublist items) without accidentally moving the mouse out of the bounds of the list item. Javascript menus introduce a delay before actions are cancelled so that a slight movement of the cursor outside the bounds of a list item is not penalised against) Granted. I agree on this, the menu I mentioned before is actually a vertical-vertical variant instead of the common horizontal-vertical versions. • You can get identical behaviour in all the major browsers (all the CSS-only drop-down menus rely on CSS hackery to work properly in IE. Every sensible browser can handle the ulli selector; the basis of a simple, standards-based CSS solution, but IE doesn't. CSS hackery is no better for you as someone who doesn't understand JS but does understand CSS than JS hackery; CSS hacks commonly *don't make sense*. They're backward thinking and complex to write). Mhh... I can't see JS being more standard than CSS right now (I guess it depends on the versions). JS has been out there more than CSS, but it seems they're standardization isn't that far from each other. ECMA script and DOM implementations aren't quite well supported yet, not to mention the combination of CSS and dynamic elements. By the way, CSS hacks make sens to those who know and understand CSS, just like JS hacks (don't tell they don't exist, please) makes sens to those who know and understand JS. Yet again, a religious topic. 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
Re: [css-d] tabs don't float properly in IE6, IE7
Thanks guys for the headsup. Still having issues with IE as well On 10/14/07, Rahul Gonsalves [EMAIL PROTECTED] wrote: On 13-Oct-07, at 2:24 AM, H. Dean Hua wrote: On this page of mine; http://sachistudio.com/testing/cr/homepage.html My navigational tabs aren't showing up properly in IE6 and IE7. But it's fine in Firefox. Dean, On Camino your header image has a roughly 40px gap above it. Safari is available for Windows as well and seems to function similarly to the OS X version. http://www.apple.com/safari/ Best, - Rahul. __ 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
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/
