Re: [css-d] Flex question
Just for the hell of it, try this:
Item 1
Item 2
Item 3
Item 4
CSS:
ol{
display: flex;
flex-direction: column;
margin: 0px;
padding: 0px;
}
ol li {
display: inline-flex;
justify-content: center;
}
ol li:nth-child(odd) {
background-color: red;
}
ol li:nth-child(even) {
background-color: green;
}
ol li a{
color: #000;
}
.fubar {
line-height: 600%;
}
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Flex question
On 5/22/2017 12:50 PM, Tom Livingston wrote:
Hello list,
Given the following:
Item 1
Item 2
Item 3
Item 4
ol{
position: absolute;
display: flex;
flex-direction: column;
height: 100%; /* 100% of taller parent */
}
ol li{
display: flex;
flex:1;
}
ol li a{
flex:1;
}
the OL is absolute and 100% height of a taller parent, so the LIs are
taller than the text inside them.
This gets me very close to where I want to be except the text needs to
be centered vertically. What's the best way to accomplish this? Am I
missing a flex method that will do it?
Hi Tom,
I know you're very advanced in your CSS skills, so looking at the
structure and CSS we're deploying on our home page should give you some
clues:
http://www.projectseven.com/
You need to be careful with height as it is really not necessary if you
structure the markup correctly, and height on any element not a direct
child of the flex element will not work on Safari.
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Flexbox question
See if you can work with this: http://www.projectseven.com/csslab/flexbox/tom-cssd/ It's all in the head. This looks good. I think I might be able to run with this. Thanks Al. Seems like the key to what I was after was flex-direction: column (as opposed to row) - to keep the last two items to the left. Actually, it's a combination of "grow" being set to zero and the flex-basis (suggested width). The default position for a flexbox element is left. Study up on inline-flex too as that opens the door to vertical positioning options. Thanks again. NP. __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Flexbox question
On 4/10/2017 4:01 PM, Tom Livingston wrote: List, I haven't used flex at all basically, but have an opportunity to. I have rows of 3 items. I would like them evenly spaced, but if the last row has only 2 items, I'd like the same amount of space between but I want them aligned to the left (like text-align:left). I can't seem to get this. Is it possible? I've gotten close, but last two items are far left and far right. See if you can work with this: http://www.projectseven.com/csslab/flexbox/tom-cssd/ It's all in the head. __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Ham Menus
On 3/31/2017 10:12 PM, Crest Christopher wrote: I don't follow ? Why have a ham menu for a site that isn't responsive as the one you linked too ? Well, the site is responsive, but I guess you mean that the menu is always a hamburger. That's a very difficult question to answer for obvious reasons :-) However, perhaps this will hurt your brain less: http://www.projectseven.com/products/tools/sop/guide/ __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Ham Menus
On 3/31/2017 9:54 PM, Crest Christopher wrote: I'll think of something that is obviously, then again as you mention; You can use both: http://www.projectseven.com/ __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] thoughts on bootstrap and is bootstrap a good approach to setting up a website that fits in different viewport sizes?
On Sunday, May 10, 2015, MiB digital.disc...@gmail.com wrote: I respectfully disagree it’s enough to ”understand” CSS or media queries. Designing for different sizes is Design first and foremost. You need a process to build a great design and in that process you need to address multiple concerns, especially concerning how your design ideas translate to different sizes. Media Queries is but a tool to put those across. On 5/10/2015 8:20 AM, Tom Livingston wrote: Agreed. While I can't speak for Al, my similar comment was directed towards implementation of design. Not a replacement of. The work you speak of still has to happen. Yes. That is what I meant. -- Al Sparber - PVII http://www.projectseven.com The Finest Dreamweaver Menus | Galleries | Widgets Since 1998 __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] thoughts on bootstrap and is bootstrap a good approach to setting up a website that fits in different viewport sizes?
On 5/9/2015 4:37 PM, Erik Visser wrote: Al Sparber schreef op 09-05-15 om 18:30: On 5/9/2015 7:25 AM, Erik Visser wrote: Bootstrap (getbootstrap.com) was brought to my attention. Is this a good bas/general approach? What are your thoughts on and experiences with bootstrap. Or is there another / better / simpeler / leaner / cleaner approach ? In my opinion--yes. CSS is very logical and easy to learn. Learn CSS and your site(s) will be far more efficient, and future-proof. Hi Al, Thanks for your thoughts. Can you explain what are the specific cons of using bootstrap? It's good for folks who do not understand CSS to the point of being able to create media queries. For anyone else, it is overkill (in my opinion). It has been a while since i was working on a regular basis on websites. But I'am quite familiar with css and html/php/and more. If you understand CSS, then all you need to create a responsive site is understand media queries. It is a series of actions/counteractions, at one or more breakpoints. You also need to research and get your head around the differences between responsive and mobile-friendly sites. It is not a one-to-one relationship. Point is that at this stage i don't have an overview of which items need to be taken care of when developing a responsive website. Were a responsive website stands for: a website that fits all viewport sizes. Where all viewport sizes might be best defined as all major/most used viewport sizes. From smaller mobile devices to bigger screens. Bootstrap tries to cover all viewport sizes, which is one reason why I consider it overkill. You need to understand the difference between a fixed viewport and a viewport whose width is chiefly determined by a web designer playing with window size to see what cute things happen as the window is made narrower or wider. I guess that issues that need to be taken care of contain: menu positions and menu-types, viewport size, rearranging text and lay-out, resizing (background) images, ...(more)...? All these issues depend on and/or are related to actual viewport-size of the screen that is used. Modern menus, whether automated tools such as ours, or copy/paste jQuery widgets, are responsive by nature. That is, give them a breakpoint and they will alter how they render to make them usable on phones. -- Al Sparber - PVII http://www.projectseven.com The Finest Dreamweaver Menus | Galleries | Widgets Since 1998 __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] thoughts on bootstrap and is bootstrap a good approach to setting up a website that fits in different viewport sizes?
On 5/9/2015 5:15 PM, de...@littlegent.com wrote: But i'am also glad if you have some good articles or a series of articles that breaks down the task of building a responsive website into a series of issues that need to be taken care of. Where this could be seen as succeeding steps of the issues to address, also a kind of roadmap. You're aware of the Google tool, right? https://www.google.com/webmasters/tools/mobile-friendly/ It will tell you your navigation links are too close, screen viewport not set and other things that are 'problems' by Google's standards. It also tells you what to do to fix them. The Google tools are crazy. If you do not pass the mobile-friendly test, then it will tell you of a whole plethora of things you might want to fix (few of which are actually important). If you pass the test, it simply congratulates you. The punchline here is that passing the test simply involves having a viewport meta tag and that your page scales to fit inside a smartphone viewport. That's it. Pass that and you get no further info. The entire implementation is not what it seems, although the mobile-friendly test is valuable as a snapshot of your your page in a phone. And that is all it really is. -- Al Sparber - PVII http://www.projectseven.com The Finest Dreamweaver Menus | Galleries | Widgets Since 1998 __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] thoughts on bootstrap and is bootstrap a good approach to setting up a website that fits in different viewport sizes?
On 5/9/2015 7:25 AM, Erik Visser wrote: Bootstrap (getbootstrap.com) was brought to my attention. Is this a good bas/general approach? What are your thoughts on and experiences with bootstrap. Or is there another / better / simpeler / leaner / cleaner approach ? In my opinion--yes. CSS is very logical and easy to learn. Learn CSS and your site(s) will be far more efficient, and future-proof. -- Al Sparber - PVII http://www.projectseven.com The Finest Dreamweaver Menus | Galleries | Widgets Since 1998 __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] media queries chaos for smart phones
On 6/14/2013 9:14 PM, weblist99 wrote: I'm running into a chaos with responsive design targeting many devices. The main issue is with different resolutions for smart phone. A year ago below sizes works fine. • 320 px Mobile portrait • 480 px Mobile landscape • 600 px Small tablet • 768 px Tablet portrait • 1024 px Tablet landscape/Netbook • 1280 px greater — Desktop But now we have smart phones with these sizes: • 480 px Mobile portrait (goodbye 320px!) • 720 px Mobile landscape (Samsung Galaxy S2 for example) • 780 px Mobile landscape (Samsung Galaxy S3 I think) • 800 px Mobile landscape (quite many phones are with this size) My media queries for tablets and phones are: @media only screen and (max-width:800px) @media only screen and (max-width:720px) @media only screen and (max-width:600px) @media only screen and (max-width:480px) If your site requires more than a couple of media queries, there could be a benefit in re-thinking the layout. In may cases, a single structural query for smartphones is all that's really necessary. If you use a viewport meta tag in this way: meta name=viewport content=width=device-width Then this might be all you need: @media only screen and (min-width: 0px) and (max-width: 700px) It would help if you posted a link to your page as media queries are not strictly theoretical ;-) -- Al Sparber - PVII http://www.projectseven.com The Finest Dreamweaver Menus | Galleries | Widgets Since 1998 __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] responsive not being responsive with images
On 1/22/2013 6:40 PM, Greg Gamble wrote: For what it's worth, the main menus sub-menus are not usable on an HTC 8x Windows Phone. Taping or a short press causes a flash then it collapses, Long press works, but the phones context menu overrides it so again it's not accessible. I suggest a tap to open and a tap to close. Good point. That issue is not restricted to your Windows 8 phone, but to all modern mobile devices. Rob is using an outdated script on his pages. Apparently he missed several updates: http://www.projectseven.com/support/updatepages/pmm2.htm -- Al Sparber - PVII http://www.projectseven.com The Finest Dreamweaver Menus | Galleries | Widgets Since 1998 __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] responsive not being responsive with images
On 1/18/2013 10:05 AM, Rob Emenecker wrote:
Okay. Errors resolved. Still the same issues with the display on some mobile
devices. :-S
http://hairydogdigital.com
To ensure nothing is overriding your rules, add this to your page and test:
img {
height: auto !important;
width: auto !important;
max-width: 100% !important;
}
Just as a note, you might want to consider a reponsive approach that is
not device-specific. Makes it easier to test ;-)
--
Al Sparber - PVII
http://www.projectseven.com
The Finest Dreamweaver Menus | Galleries | Widgets
Since 1998
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] responsive not being responsive with images
On 1/18/2013 11:00 AM, Rob Emenecker wrote:
Just as a note, you might want to consider a reponsive approach that
is not device-specific. Makes it easier to test ;-)
Thanks Al! I was going for device width's rather than viewport sizing. When
I originally did the size, I had the width's based on viewport and it tested
out okay.
Hi Rob,
No matter what you might hear or read to the contrary, if you want your
site to logically respond to a mobile device's viewport, your page needs
to have this meta tag:
meta name=viewport content=width=device-width
Do not use initial-scale or you will have problems when switching
orientation.
Without the meta tag, your iOS device, and some Android devices, will
attempt to shrink the page - while other Android devices will render in
what is called Overview mode. The results are not pretty.
When using the meta tag (looks like you are, albeit with initial scale),
you do not have to declare for device width in your media queries. You
can use:
@media only screen and (min-width: 0px) and (max-width: [xxx]px) {}
The added benefit here is that your page will also be responsive in
traditional devices - and will be far easier for folks on this list to
help you debug :-)
--
Al Sparber - PVII
http://www.projectseven.com
The Finest Dreamweaver Menus | Galleries | Widgets
Since 1998
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] responsive not being responsive with images
On 1/18/2013 12:51 PM, Markus Ernst wrote: This would actually shrink the image. Anyway, hardcoding the image width does not seem to be very elegant, and the fact that Al's declaration does not work in Firefox does not seem to make sense to me. Nor to me. The only thing I did not have time to check was the image slider script to see if it is globally redefining the img tag somehow. But as it is, it would be physically impossible that the test rule I provided would not work - unless the images are in tables or in DIVs set to display as table cells. In that case, you would need to use table-layout: fixed. -- Al Sparber - PVII http://www.projectseven.com The Finest Dreamweaver Menus | Galleries | Widgets Since 1998 __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Droid Razr CSS problems again
On Tue, Nov 13, 2012 at 7:54 PM, bho...@aol.com wrote: I've had trouble with my css on the Droid RAZR in the recent past, and I'm having trouble again with it again on a different website. Again, all my text is pushed to the left at less than half its intended width. If you have any suggestions, please let me know. _http://www.sportsmansresource.com/canaryislandsfishing/test/index.htm_ (http://www.sportsmansresource.com/canaryislandsfishing/test/index.htm) I'm only focusing on the index page right now. Start by adding the following viewport meta tag: meta name=viewport content=width=device-width / For Android, this tag will prevent it from displaying your page in Over View mode. Test again and then others will be able to help you tweak it further. Also, you should get rid of the XML prolog above your DOCTYPE. -- Al Sparber - PVII http://www.projectseven.com The Finest Dreamweaver Menus | Galleries | Widgets Since 1998 __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Equal length columns?
On 10/23/2012 5:14 AM, Joergen Lang wrote: Am 22.10.12 20:13, schrieb Al Sparber: Our home page, as well as most of our new products all use EHC and there are no crashes. Try these page: http://www.projectseven.com/ http://www.projectseven.com/products/templates/pagepacks/adaptations/examples/layout-01.htm Not sure if advertising commercial products on this list is a good idea... Just my 2 cents. Your 2 cents isn't worth the pomposity it is minted with. The original poster cited a FREE script, from a free tutorial on our Web site. I have also been corresponding with him offlist and unfortunately am not able to help him as he cannot get an example page online. And, yes, I did mean negative margin. By the way, you might want to get an email client that has a Reply to List feature so that when you answer a question, the subscribers here get only one email from you :-). -- Al Sparber - PVII http://www.projectseven.com The Finest Dreamweaver Menus | Galleries | Widgets Since 1998 __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Equal length columns?
On 10/23/2012 5:57 AM, Tim Arnold wrote: Borders are only necessary if you use the negative margins and borders technique described here, though faux columns works best for me: http://www.vanseodesign.com/css/equal-height-columns/ All CSS methods, except for all-natural CSS 3 methods, are hacks that come with potential consequences such as the inability to support same-page links or design limitations. Faux columns are usually the safest method for beginner-to-intermediate level designers. In this the age of ubiquitous JavaScript support, a good script is a good solution that can provide stability along with total design freedom. Our script does not, in and of itself, cause crashes - but this is a CSS list, which is why I steered the original poster off-list to discuss any problems he is having with it. Google can be your friend too ;-) Only if you're a stockholder - otherwise it's a tool :-) -- Al Sparber - PVII http://www.projectseven.com The Finest Dreamweaver Menus | Galleries | Widgets Since 1998 __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Equal length columns?
On 10/22/2012 1:59 PM, J.C. Berry wrote: Hello all, I would like to extend one column of our site all the way to the bottom of the varying middle column (first column always same length). I had a JS that someone recommended, but it seems to be crashing IE (using P7EHC script). Is there a CSS-only way to do this or better script? Hi J.C., CSS-only methods would essentially be hacks like negative padding or using borders. Each would have it s limitations. The display property (table) is another option if you are not concerned with IE7 and under, but using the display property to make a DIV display as if it were a table cell is going to bring with it some the problems inherent in actual tables. Another option is to use background images. The best solution would be easier to give you, however, if you would provide a link to your page. The EHC script will not crash IE. The most it can do is cause a recursion if deployed incorrectly. Our home page, as well as most of our new products all use EHC and there are no crashes. Try these page: http://www.projectseven.com/ http://www.projectseven.com/products/templates/pagepacks/adaptations/examples/layout-01.htm If you want help in fixing a problem, email us directly and include a link to your page. If you want the good folks on this list to guide you further in a pure CSS solution, you should post a link to your page here. -- Al Sparber - PVII http://www.projectseven.com The Finest Dreamweaver Menus | Galleries | Widgets Since 1998 __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Menu centering
On 8/24/2012 4:20 PM, Ursula Pieper wrote: Greetings, I can't figure out how to center the top menu in: http://salilab.org/salilab_drupal/ I have tried to add: margin-left: auto; margin-right: auto; width: 100%; I aded this to a number of places in the stylesheet, and can't figure out why it's not working. I'd greatly appreciate, if somebody could have a look, and let me know what's wrong. Hi Ursula, There really is no excuse for the amount of CSS being used for that site. The bottom line is that you need to set the UL to display inline-block and its parent to text-align center. This is quite easy when the CSS is efficiently written, but in your case you will need to wade through all of the excess and duplicate CSS to deploy the above menu where it will work without specificity issues or cascade conflicts. -- Al Sparber - PVII http://www.projectseven.com The Finest Dreamweaver Menus | Galleries | Widgets __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Extending border to height of tallest column.
On 7/31/2012 11:16 PM, J.C. Berry wrote: Hi everyone, I have a layout that has three columns with two of them of varying heights, i.e. one is taller than the other. I need to have a 1 pixel border extend to the height of the taller of the two columns. Any directions or tutorials would be welcome. I would like to also learn this as compared to just getting an answer. Thanks so much! In this day and age, the safest and simplest way to do it is with a CSS-driven script: http://www.projectseven.com/tutorials/css/pvii_columns/ The tutorial can be done and the script used without Dreamweaver. -- Al Sparber - PVII http://www.projectseven.com The Finest Dreamweaver Menus | Galleries | Widgets Since 1998 __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE Destroys Website
On 6/19/2012 4:15 PM, Brett Goodrich wrote: Check out http://ccbci.org/the-courses/ No idea on this one. It seems to work perfectly on Chrome, but collapse in on itself completely in IE. The latest version of IE is 9. It displays identically in IE9 and Chrome. If you have IE9, read this little article about how to force standards view: http://www.pviiforums.com/topic.php?id=9 If you have an old version of IE, then it is going to display the way it was coded to display in old versions of IE, which seems to be narrower. -- Al Sparber - PVII http://www.projectseven.com The Finest Dreamweaver Menus | Galleries | Widgets Since 1998 __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE10 Preview button weirdness
On 6/14/2012 11:15 PM, Philippe Wittenbergh wrote: Does any have access to the latest Windows 8 - IE 10 preview (aka the 'release preview') ? How does the first of the buttons look like ? test file: http://dev.l-c-n.com/_temp/button-test.html Both buttons _should_ look identical (they share all the same styles). On the previous beta releases of IE 10 (seen on two installations), the leftmost button had some ugly blueish inner border (and that could even be seen if the button is left un-styled). The only difference between the two buttons is the classname. The first one has the classname 'publish', the second one 'not-publish'. I don't have IE10 but wouldn't it be better to wait for the shipping release? An awful lot of changes were made to IE9 between the last preview and its shipping version. Just saying :-) Have you checked the MSDN blog: http://blogs.msdn.com/b/ie/ By the way, it seems to be fine in IE9. -- Al Sparber - PVII http://www.projectseven.com Dreamweaver Menus | Galleries | Widgets Since 1998 __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] question about vendor specific prefix
On 5/8/2012 1:20 PM, meera kibe wrote: Hello, Can someone elaborate on why all the vendor specific prefixes have to be written first then the native property; Thanks In addition to the good explanations you've already received, there is also a school of thought (mine) that prefixes should not be used. Those people not using the default browsers that come with their OS are going to be keeping their Firefox, Chrome, or Opera up-to-date. I wouldn't bother with the prefixes. -- Al Sparber - PVII http://www.projectseven.com Dreamweaver Menus | Galleries | Widgets __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] should i use css3
On 4/10/2012 10:42 PM, meera kibe wrote: Hi I'm fairly new to website designing, and to css. Just finished an online course on css3 and loved it. I'm very keen to use it css3 for a website but i also want to cater to IE people. I'm veering towards writing a separate css file for IE8 and IE9. What is the best solution. It depends on the CSS3 properties you intend to use. IE9 actually has pretty good support - at least for the designer-oriented properties such as box-shadow, border-radius, stretched backgrounds, and more. IE10, which is close to release, looks like it will have full support. This is a good read: http://www.impressivewebs.com/css3-browser-support/ -- Al Sparber - PVII http://www.projectseven.com The Finest Dreamweaver Menus | Galleries | Widgets Since 1998 __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] menus going bezerk in i8
On 4/5/2012 10:59 PM, Stuart King wrote: EXAMPLE URL: http://pinanapavalley.com/screenshots.html WEBSITE URL: http://pinanapavalley.com I have tried everything I could think of - nothing seems to work, All block-level formatting needs to be assigned to the ul a - never ul a:visited or a:active - and usually not a:link. Modern browsers will not be affected, but older browsers will. Restrict properties other than colors or backgrounds for the pseudo classes and you'll be fixed. -- Al Sparber - PVII http://www.projectseven.com The Finest Dreamweaver Menus | Galleries | Widgets Since 1998 __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] A Holiday Treat from PVII
Happy Holidays from PVII Save time this holiday season with a free productivity booster from PVII Equal Height CSS Columns Learn how to make your CSS columns automatically adjust to the height of the tallest column in just a few minutes. This free productivity booster includes a tutorial, and a bonus 3-column CSS layout all decked out for the holidays with rounded corners and inset shadows! Instead of using background images, CSS hacks, or CSS that is not yet supported by all browsers, PVII Equal Height Columns uses modern DOM Script to work its magic. Go to Tutorial: http://www.projectseven.com/tutorials/css/pvii_columns/index.htm Key Features Supports dynamic content height If the height of any column ever changes, PVII Equal Height Columns will make all necessary adjustments—instantly. The script monitors your page every few milliseconds to see if the height of any column needs adjustment. Your column height will always be perfect. If your page includes a panel widget (like an accordion) that causes column height to change when you move from panel to panel, the system will adapt to the new height seamlessly. Deploying PVII Equal Height Columns Deployment is as easy as linking the PVII Equal Height Column script and assigning a class to a set of columns. Nested Groupings You can deploy the PVII Equal Height Columns script on your outer column structure, as well as column structures nested inside. Best Regards, -- Al Sparber - PVII http://www.projectseven.com The Finest Dreamweaver Menus | Galleries | Widgets Since 1998 __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] A Holiday Treat from PVII
On 12/22/2011 12:19 PM, Ghodmode wrote: display: table-cell box-shadow: inset ... border-radius: ... This tutorial was published in 2009: http://www.projectseven.com/tutorials/css/3-column-flex-display/ A.K.A. JavaScript? Doesn't that make this not the CSS solution that the title implies? The layout is part of the download package. I checked the demo page with JavaScript disabled. It doesn't work. Accessibility... Portability... Security... anyone? Security ;-) Obviously you are confused over what accessibility means. Accessibility means access to content. For instance, the gray links in this particular site (which happens to be yours): http://www.ghodmode.com/blog/ That's an accessibility problem. Not the height of columns :-) Every few milliseconds seems inefficient. I looked at the code. It's every 20 milliseconds. I'm afraid you are very wrong. Count to twenty milliseconds then look at this page: http://www.projectseven.com/tutorials/css/pvii_columns/examples/widget.htm PVII, it's time to update your site rather than promoting it by posting outdated JavaScript-dependant solutions on a CSS mailing list. Update our site? OK. I'll start working on that immediately :-) You have a very Merry Christmas or whatever it is that you celebrate this time of year and make sure you scrutinize the motives behind every gift you get. -- Al Sparber - PVII __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Unexplained behavior IE7 - menu floating?
On 10/27/2011 10:17 PM, Kym Costanzo wrote:
I have a situation I have not been able to figure out on my own, and so
hoping the brilliant minds out here can give me a hand.
The site: www.thevineyardscommunity.net
Wow that's bloated CSS and script. Remove height: 100%, overflow-x:
hidden and overflow-y: scroll from your body element.
Then remove height height: 100% from your HTML element.
Then, if you want to have a persistent vertical scroller gutter, add
this new rule:
html {
overflow-y: scroll;
}
I would suggest some major surgery on your CSS and a serious look at the
scripts you are running.
--
Al Sparber - PVII
http://www.projectseven.com
The Finest Dreamweaver Menus | Galleries | Widgets
Since 1998
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] CSS3 Opacity Inheritance
On 10/20/2011 11:04 PM, Elli Vizcaino wrote:
On 10/20/11 12:28 PM, Elli Vizcaino wrote:
What I'm getting at is, if a box element gets an opacity property with
a value of 0.5 for a semi transparent effect, do child elements such as text
then display in the browser at that same semi-transparent value?
Yes. The better approach is to use rgba colors for elements containing
text. That way only the box is affected and the text (or any other child
elements) remain unaffected.
RGBA stands for red, green, blue, and alpha. So this declaration renders
a box 80% opaque, while stuff inside the box is fully opaque:
#elli-box {
background-color: black;
background: rgba(255,255,255,.8);
}
The background-color property is a fallback for older browsers lacking
support for RGBA.
255,255,255 is white
0,0,0 is black
Most code editors now have the ability to let you easily set colors like
this.
Here is a quick example:
http://www.projectseven.com/csslab/css3/rgba/quick-test.htm
The styles used on the example are:
#elli-box {
background-color: #3CF;
background: rgba(51,204,255,.8);
/*Light Blue*/
}
And some design extras:
.elli-styles {
padding: 40px;
width: 400px;
font-size: 14px;
line-height: 1.5;
border-radius: 11px;
box-shadow: inset 0px 0px 40px #0080AA;
border: 2px solid #FFF;
}
--
Al Sparber - PVII
http://www.projectseven.com
The Finest Dreamweaver Menus | Galleries | Widgets
Since 1998
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] CSS3 Opacity Inheritance
On 10/20/2011 11:26 PM, Elli Vizcaino wrote: Philippe Wittenbergh http://l-c-n.com/ Just took a loot at the opacity sample. And of course I used, Firebug to inspect code and firebug says that the opacity of 0.5 on the img has been inherited from div.a - this is why I'm confused and unsure then of what inherit means if the opacity is getting applied to it's descendants and yet I am being told it is a property that is not inherited. Philippe used RGBA for the box on the right b. So the image and the text in that second box is not transparent at all. Make sure you are using an up-to-date version of Firefox. __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] CSS3 Opacity Inheritance
On 10/20/2011 11:33 PM, Al Sparber wrote: On 10/20/2011 11:04 PM, Elli Vizcaino wrote: On 10/20/11 12:28 PM, Elli Vizcaino wrote: What I'm getting at is, if a box element gets an opacity property with a value of 0.5 for a semi transparent effect, do child elements such as text then display in the browser at that same semi-transparent value? Yes. Just to clarify, this is not an inheritance issue (as Phillippe explained). It can better be described as an occupancy issue :-) The reason why RGBA works is because it is applying an alpha transparency to the color - not the box. __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] I must be a moron, How to reply to messages
On Oct 17, 2011, at 8:15 PM, Michael Fokken wrote: you have to insert css-Discusscss-d@lists.css-discuss.org manually into the To field, else it will go to the person who sent the message you're replying to.* don't feel bad...I do it all the timetakes some getting used to. If you use a client like Thunderbird, there is a convenient Reply List button :-) -- Al Sparber - PVII http://www.projectseven.com The Finest Dreamweaver Menus | Galleries | Widgets Since 1998 __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Text width jumping in accordion
On 8/17/2011 12:08 PM, Ian Piper wrote: Hi all, I have a problem with the text within an accordion on this test page: http://www.ianmathie.com/reviews_accordion.htm The first four review headings, when clicked, open up to display the body text first at one width, and then, when the accordion is open, jump to another width. It is only the first few, and I'm pretty sure that the problem is to do with the picture_left style that I'm using for the thumbnail book cover to the left. The jump in width seems to be the same as the width of the image, and it is only the headings displayed within the height of the image that do the jumping (i.e. lower reviews open immediately at the correct width). Can anyone suggest what I have done wrong here? The jumping occurs even if every CSS rule on your page is disabled, which indicates the problem is with your script. jQuery accordions are strange beasts and typically not very refined unless considerable custom scripting is added. Apparently it is a known issue: http://dev.iamntz.com/40/jquery-ui-accordion-jump-bug For the heck of it, try out this custom-scripted accordion (ours) and you'll likely see a bit more refinement: http://www.projectseven.com/products/tools/accordion2/examples-options/cat03-01.htm I'm fairly certain we are not the only outfit with high quality standards for CSS and scripting, so you might be able to find a more refined free accordion. Perhaps a third-party jquery plugin, or mootools. -- Al Sparber - PVII http://www.projectseven.com The finest Dreamweaver Menus | Galleries | Widgets Since 1998 __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Centering the nav: EASY one.
On 7/17/2011 12:22 PM, Geoff Lane wrote: On Thursday, July 14, 2011, 11:20:18 PM, Ghodmode wrote: Since its (default) display is block, it takes up the full width of the containing element. This might be helpful: http://www.projectseven.com/csslab/lists/inline-block/horizontal/ -- Al Sparber - PVII http://www.projectseven.com The Finest Dreamweaver Menus | Galleries | Widgets Since 1998 __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Centering the nav: EASY one.
On 7/17/2011 11:35 PM, David Hucklesby wrote: On 7/17/11 9:52 AM, Al Sparber wrote: On 7/17/2011 12:22 PM, Geoff Lane wrote: On Thursday, July 14, 2011, 11:20:18 PM, Ghodmode wrote: Since its (default) display is block, it takes up the full width of the containing element. This might be helpful: http://www.projectseven.com/csslab/lists/inline-block/horizontal/ Interesting, Al. I make the list items inline, and put inline-block on the links. No IE hack needed, and IE 7- behave similarly to other browsers (including the word-spacing between links). FWIW. :) Hi David, Most appreciated, but I test in a native version of IE7 and it most certainly does not handle inline-block. Of course, I could be wrong, but it's also one of those CSS issues that's been embedded in my brain - which has been known to have a bad day :-) Peter Paul seems to come to same conclusion as me. http://www.quirksmode.org/css/display.html In any event, targeting IE7 and under for the hack should not be a problem. -- Al Sparber - PVII http://www.projectseven.com Dreamweaver Menus | Galleries | Widgets http://www.projectseven.com/go/hgm The Ultimate Web 2.0 Carousel __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Centering the nav: EASY one.
On 7/18/2011 12:11 AM, Al Sparber wrote: On 7/17/2011 11:35 PM, David Hucklesby wrote: On 7/17/11 9:52 AM, Al Sparber wrote: On 7/17/2011 12:22 PM, Geoff Lane wrote: On Thursday, July 14, 2011, 11:20:18 PM, Ghodmode wrote: Since its (default) display is block, it takes up the full width of the containing element. This might be helpful: http://www.projectseven.com/csslab/lists/inline-block/horizontal/ Interesting, Al. I make the list items inline, and put inline-block on the links. No IE hack needed, and IE 7- behave similarly to other browsers (including the word-spacing between links). FWIW. :) Hi David, Most appreciated, but I test in a native version of IE7 and it most certainly does not handle inline-block. Of course, I could be wrong, but it's also one of those CSS issues that's been embedded in my brain - which has been known to have a bad day :-) ... like today :-) Of course your method works in IE7 without hack, though I'd have to check to see how older versions do. Sorry for confusing your statement. __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Centering the nav: EASY one.
On 7/18/2011 12:34 AM, Philippe Wittenbergh wrote: IE 7 and 6 support display:inline-block for those elements whose initial display value is inline - likea (the MS doc used to say something along the lines of 'natural display' whatever that would mean). On other elements display:inline-block triggers 'hasLayout' but nothing else, and certainly not what display:inline-block should do per the spec. Fwiw, last time I did something along he lines of your sample, I had to trigger 'hasLayout' on the parentli else IE 7 6 wouldn't play nice. Hi Philippe, I tested my example down to IE5. Seems to work fine as is. David's method would likely have whitespace issues in all browsers. The combo of inline-block and 0 font-size on the same element, solves that. -- Al Sparber - PVII http://www.projectseven.com Dreamweaver Menus | Galleries | Widgets http://www.projectseven.com/go/hgm The Ultimate Web 2.0 Carousel __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Rotated text issues
On 5/10/2011 1:16 PM, Alex Marino wrote: If text is rotated using transform, unless rotated 90 degrees, looks pretty bad. Uneven kerning, jagged edges, uneven horizontal position. I have tried in vain to play with background colors and text-shadow to make improvements. Any pointers? Hi Alex, The results vary among browsers and based on screen resolution. IE9, for instance, on a good computer, shows little distortion - while Firefox is a mess. It's a cool property to use, but I would make sure that you use large font sizes to ensure that it is readable. -- Al Sparber - PVII http://www.projectseven.com Dreamweaver Menus | Galleries | Widgets __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] change in height of navigation bar
On 3/21/2011 10:05 PM, John Hannon wrote:
Hello,
I am writing because of a change in the height of a navigation bar.
The navigation bar appears to display properly in Firefox 3.6.15 on a
Mac and in Safari 4.1.3, there is extra space underneath of the nav
bar.
The web address is: http://bwbcontractors.com/
Never, ever, ever use fixed height on an element that contains text.
Change your menu container rule to this:
#mainNav {
background-color: #736357;
padding-bottom: 1px;
padding-left: 42px;
height: auto;
overflow: hidden;
}
--
Al Sparber - PVII
http://www.projectseven.com
Dreamweaver Menus | Galleries | Widgets
http://www.projectseven.com/go/hgm
The Ultimate Web 2.0 Carousel
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE8 Problem with background in Zen Cart revisited
On 3/21/2011 12:01 AM, Carol Swinehart wrote: Included an IE7 emulate script in the head of the document and all the problems with IE8 backgrounds went away. That is usually not a good solution ;-)...especially for IE9 users. Better to fix the problem in IE8 when it is in standards mode. And you meant meta tag and not IE7 emulate script I hope? -- Al Sparber - PVII http://www.projectseven.com Dreamweaver Menus | Galleries | Widgets http://www.projectseven.com/go/hgm The Ultimate Web 2.0 Carousel __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE9 Question from XP user.
On 3/16/2011 1:53 PM, Barney Carroll wrote: If you hit F12, IE9 8 will bring up their DOM inspectors: to the right of the topmost menu is a Browser Mode button. You can switch this to IE7, IE8, and compatibility modes and get perfect emulation without having to modify the markup. Absolutely. Since I usually carry the meta set to edge, it's often quicker for me to adjust the value in the tag. But that's just my workflow. -- Al Sparber - PVII http://www.projectseven.com Dreamweaver Menus | Galleries | Widgets http://www.projectseven.com/go/hgm The Ultimate Web 2.0 Carousel __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE vertical spacing problem
On 2/9/2011 12:32 AM, Carol Swinehart wrote: Disclaimer -- I have NOT finished the side navigation or the text in the header. This problem deals with the extra vertical space in the main content area. This is in html5 and parses looks right in other browsers. http://www.umcommin.org/index4finalize.php What is causing all this extra space in ie and not in other browsers. IE5? IE6? IE7? It looks identical to me in IE8 and Firefox 3.6. -- Al Sparber - PVII http://www.projectseven.com Dreamweaver Menus | Galleries | Widgets http://www.projectseven.com/go/hgm The Ultimate Web 2.0 Carousel __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] stacked nav in IE7
On 1/6/2011 2:48 PM, Shanna Cramer wrote: Ok, I had a similar issue to this on two websites. I thought finding an answer on one would help with the other. Not so. This is driving me nuts. IE7 the menu is all bad, IE8 only the home page menu is bad. Site: http://www.fargoparks.com/ css: http://www.fargoparks.com/css/home.css Hi Shanna, fist of all, you are using a version of Pop Menu Magic that was retired over 2 years ago. The stacked menu is an IE7 and under problem. The home page of your site has an IE compatibility meta tag set to emulate IE7. You can contact us directly, even via telephone, for support or you can upgrade to PMM2. To fix your current menu you simply need to follow the instructions in the user guide for what to do in older versions of IE when you set your root menu items to auto width. I would suggest you contact us directly since we are talking about an obsolete product. -- Al Sparber - PVII http://www.projectseven.com Dreamweaver Menus | Galleries | Widgets http://www.projectseven.com/go/hgm The Ultimate Web 2.0 Carousel __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Web typography with CSS3
On 12/31/2010 2:00 PM, Guy K. Haas wrote: On Fri, December 31, 2010 10:49 am, Chris F.A. Johnson wrote: On Sat, 1 Jan 2011, Alan Gresley wrote: On 1/01/2011 4:27 AM, Gabriele Romanato wrote: I know but I'm in a hurry... preparing for the New Year night :-D http://css-class.com/test/css/3/css3-menu-tipsy.htm Very rushed transforms with transitions, hiccup. Nice and snappy in Firefox, but slow as molasses in Opera. I'm not sure if CSS animations or transforms will ever be viable unless and until browser rendering engines are re-written from the ground up to support them smoothly. Some folks might not care that a design looks rough around the edges, but it would never pass muster with a good designer. We've been playing around with CSS3 effects, but not transitions/transformations. Here's a quick example: http://www.projectseven.com/peeks/tpm2/demos/ And another: http://www.projectseven.com/peeks/tpm2/demos/page5.htm -- Al Sparber - PVII http://www.projectseven.com Dreamweaver Menus | Galleries | Widgets http://www.projectseven.com/go/hgm The Ultimate Web 2.0 Carousel __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Expanding tabs effect
On 12/23/2010 12:14 PM, Gabriele Romanato wrote: Hi! Sometimes CSS is better than jQuery: http://onwebdev.blogspot.com/2010/12/css-expanding-tabs-effect.html HTH :-) Very nice and I'm sure a lot of folks will find it very useful. As for jQuery - it's the most misused, misunderstood, and abused script in the history of the internet :-) -- Al Sparber - PVII http://www.projectseven.com Dreamweaver Menus | Galleries | Widgets http://www.projectseven.com/go/hgm The Ultimate Web 2.0 Carousel __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Expanding tabs effect
On 12/23/2010 1:15 PM, Al Sparber wrote:
On 12/23/2010 12:14 PM, Gabriele Romanato wrote:
Hi!
Sometimes CSS is better than jQuery:
http://onwebdev.blogspot.com/2010/12/css-expanding-tabs-effect.html
HTH :-)
Very nice and I'm sure a lot of folks will find it very useful. As for
jQuery - it's the most misused, misunderstood, and abused script in the
history of the internet :-)
Something like this might work better - at least it does in Firefox,
Opera 11, Chrome, and IE8
body {
margin: 0;
padding: 0;
font: 100% Arial, Helvetica, sans-serif;
background: #fff;
color: #333;
}
#nav-wrapper {
border-bottom: 1px solid orangered;
overflow: hidden;
}
#navigation {
font-size: inherit;
margin: 1em 0;
padding: 0 0 0 1em;
list-style: none;
}
#navigation li {
float: left;
height: 100%;
margin-right: 0.5em;
}
#navigation a {
height: 1.5em;
line-height: 1.5;
display: block;
padding: .5em 1em;
text-decoration: none;
background: #d40;
color: #fff;
font-weight: bold;
-moz-border-radius: 6px 6px 0 0;
border-radius: 6px 6px 0 0;
margin-top: 0.5em;
}
#navigation a:hover {
background: orange;
height: 2em;
line-height: 2;
margin-top: 0;
}
Markup:
div id=nav-wrapper
ul id=navigation
lia href=#Tab 1
/a
/li
lia href=#Tab 2/a/li
lia href=#Tab 3/a/li
lia href=#Tab 4/a/li
lia href=#Tab 5/a/li
lia href=#Tab 6/a/li
/ul
/div
--
Al Sparber - PVII
http://www.projectseven.com
Dreamweaver Menus | Galleries | Widgets
http://www.projectseven.com/go/hgm
The Ultimate Web 2.0 Carousel
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] A question on CSS compression and minifcation
On 11/6/2010 2:51 PM, Gabriele Romanato wrote: Hi all. Since the overwhelming majority of my clients own websites hosted on shared hosts, I was wondering if there's a straight way to compress CSS without taking into account the oddities of the default configuration of the web server , which varies greatly from hoster to hoster. Almost a year ago I switched to YUI Compressor for minification and it really works. Now I want to use compression on shared hosts, but I'm afraid of getting thorugh all the tests with the .htaccess file that, by the way, it's limited in some ways on a shared host. And yes, there's no way to access the infamous httpd.conf file on such hosts ! . Did you find a solution to this problem? A couple of months ago I stumbled on a PHP script that performs minifcation using the ob_ function group and includes. Nice, but what about compression? I know that I could activate the gzlib compression via PHP, but I don't know if this will succeed on a shared host. Hope you have some answer, as always. I don't have a suggestion, but I have an opinion... I think minification is unimportant unless you have a horrendously complex and verbose CSS file such as, for example, Yahoo developers tend to write :-) Perhaps if CSS authoring was where it has evolved now, back in the age of dominant dial-up connections, it would be somewhat useful. -- Al Sparber - PVII http://www.projectseven.com Dreamweaver Menus | Galleries | Widgets http://www.projectseven.com/go/hgm The Ultimate Web 2.0 Carousel __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Image placement issue in IE
On 11/5/2010 12:04 PM, Dipesh Parmar wrote: Hello everyone, i'm trying out yet another idea for my new website! The accordion menu works fine on all browsers but i'm having a problem with the images not floating correctly, for example on the About link, on the right and text not sitting side by side to it on the left in Internet Explorer. Works fine in Safari, Chrome, and Firefox, just not IE. Anyone have any advice on how i can rectify this problem? Any thoughts on the website itself would be greatly appreciated as well if anyone is interested. http://dvpwebdesign.com/ You need to validate your CSS. You have problems. You also have: A script error Accordion not working very well in IE 8 and under Accordion leaving artifacts in modern browsers Accordion not accessible to keyboard users Accordion content DIVs are set to overflow hidden and it seems floated images inside are floating. -- Al Sparber - PVII http://www.projectseven.com Dreamweaver Menus | Galleries | Widgets http://www.projectseven.com/go/hgm The Ultimate Web 2.0 Carousel __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] z-index issue in IE7
On 11/5/2010 1:10 PM, Debbie Campbell wrote:
On this site:
http://www.redkitecreative.com/projects/performance/contact-us/
if you hover on Browse Our Inventory, in IE7 the hovered menu is hidden
behind the #maincontent div.
I tried this:
!--[if IE 7]
style type=text/css
#maincontent {z-index: 10;}
ul.menu li:hover ul, ul.menu ul li:hover ul, ul.menu ul ul li:hover ul
{z-index: 1000;}
/style
![endif]--
But no. Can someone please help?
IE7 and under create a stacking order based on position, even
relative, being assigned downstream. If your main content element is
positioned relatively, it needs a z-index and the menu's parent element
needs both position relative and a higher z-index. It is usually best to
only use position relative when it is absolutely needed. If you wish to
fix this, a conditional comment is not necessary as the work around will
not adversely affect modern browsers.
--
Al Sparber - PVII
http://www.projectseven.com
Dreamweaver Menus | Galleries | Widgets
http://www.projectseven.com/go/hgm
The Ultimate Web 2.0 Carousel
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Image placement issue in IE
On 11/5/2010 1:50 PM, Thierry Koblentz wrote: Hello everyone, i'm trying out yet another idea for my new website! The accordion menu works fine on all browsers but i'm having a problem with the images not floating correctly, for example on the About link, on the right and text not sitting side by side to it on the left in Internet Explorer. Works fine in Safari, Chrome, and Firefox, just not IE. Anyone have any advice on how i can rectify this problem? Any thoughts on the website itself would be greatly appreciated as well if anyone is interested. http://dvpwebdesign.com/ This is because you're styling the P with a width which triggers hasLayout. In IE, you end up with two block formatting contexts next to each other; so because of its width, the second one can't fit next to the other. I must have been distracted by all the flashing and didn't even notice the gaps - I just saw the images on the right and got out of there ASAP. Good catch and call. -- Al Sparber - PVII http://www.projectseven.com Dreamweaver Menus | Galleries | Widgets http://www.projectseven.com/go/hgm The Ultimate Web 2.0 Carousel __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] setting z-index on a lightbox in WordPress
On 11/2/2010 9:56 PM, Claude Needham wrote: I work hard on my websites that contain a drop-down menu to make sure the drop items show over the top of any elements in the page. Normally you want the viewer to have access to those menu options. Unless I misunderstand your situation, I'd say that everything is working the way it should. Hi Claude, This seems to be a problem in IE7 (or IE8 in compat mode) only. The fix is to set the parent container of the menu to position relative and assign it a z-index higher than your gallery. You also realize, I'm sure, that your drop-down menus are not going to be functional in the fashionable touch devices that everyone seems to be using these days. You can either use a scripted menu that supports touch devices (ours do and most newer jQuery implementations do, as well) or make sure your landing pages contain the links that appear in their relevant drop-down menus in the content flow. In other words, on this page: http://www.greyrockconcretedesign.com/concrete-for-colorado-homes/ Make sure that the content contains clear links to Bathroom Remodeling and Kitchen remodeling. -- Al Sparber - PVII http://www.projectseven.com Dreamweaver Menus | Galleries | Widgets http://www.projectseven.com/go/hgm The Ultimate Web 2.0 Carousel __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] shadow and blur pitfalls?
From: Philippe Wittenbergh e...@l-c-n.com
On Oct 19, 2010, at 5:05 AM, Al Sparber wrote:
So 3 duplicate rules, all with the same values are needed:
box-shadow
-moz-box-shadow
-webkit-box-shadow
Hmm. Al. Care to put that in the correct order so that you can leverage the
cascade ? First the vendor-pefixed properties !
-moz-box-shadow {}
-webkit-box-shadow {}
box-shadow {}
(Fx 4 will suport the non-prefixed property with some small changes since the original -moz-box-shadow landed. All for the better,
it is assumed)
http://emps.l-c-n.com/notebook/css-vendor-prefixes-and-the-cascade
(linking to my own rants :-))
You might also want to visit the W3.org web site and read the box-shadow spec.
for people who have a hard time to find those things:
http://www.w3.org/TR/css3-background/#the-box-shadow
- your friendly neighbourhood grumpy old nitpicker….
Thanks Grumps ;-)
You're right. I was sloppy. It is duly noted and hopefully the original poster
has noted it as well.
--
Al Sparber - PVII
http://www.projectseven.com
Dreamweaver Menus | Galleries | Widgets
http://www.projectseven.com/go/hgm
The Ultimate Web 2.0 Carousel
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] shadow and blur pitfalls?
From: John j...@coffeeonmars.com Will I be ok provided I assign the shadow-casting object to the top Z layer? Or, are there more tricks to know, or booby traps waiting for me? I assume you are talking about the box-shadow property. If so, the shadow is glued, z-index and all, to the element you assign it to. Are there some browsers which (A)don't handle it well and (B) show something heinous instead? Nothing hideous. Browsers that do not support it simply show the element as if the property were not assigned. To support Firefox and Webkit you need to us proprietary versions of the property. So 3 duplicate rules, all with the same values are needed: box-shadow -moz-box-shadow -webkit-box-shadow You might also want to visit the W3.org web site and read the box-shadow spec. -- Al Sparber - PVII http://www.projectseven.com Dreamweaver Menus | Galleries | Widgets http://www.projectseven.com/go/hgm The Ultimate Web 2.0 Carousel __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] shadow and blur pitfalls?
From: John j...@coffeeonmars.com On Oct 18, 2010, at 1:04 PM, Al Sparber wrote: I assume you are talking about the box-shadow property. If so, the shadow is glued, z-index and all, to the element you assign it to. Thank you, Al...and since the shadow belongs do the item to which it's assigned, then can I trust that it will properly fall onto all items beneath it properly, too? Yes. __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] border radius
From: David McGlone da...@dmcentral.net Hi everyone, I'm having a slight problem with rounded corners in IE and need a little help. I have added this property to my stylesheet but I am not getting the expect behavior with IE. Here is the property: behavior: url(include/styles/border-radius.htc); Hi David, We have very thoroughly analyzed the use of hacks for rounded corners in IE, and concluded that it is simply not worth the trouble - nor the potential instability. Some folks will have differing opinions but I really, really feel we're right on this. A better approach would be to forget about the HTC file, concentrate on CSS 3, and allow IE8 and under to gracefully render rectangular elements, while modern browsers display the curves. This is sometimes called progressive enhancement. The good news is that IE9, due out by year end, should support border-radius. If rounded corners are absolutely necessary, then I would use a single, background-image based solution that will work in all browsers. It's interesting this question came up today as we are in the process of prototyping a layout making significant use of border-radius and shadows, while allowing IE to just display what it knows how to display: http://www.projectseven.com/products/staging/mirage/columns-four.htm Good luck! But do stay away from rounded corner hacks ;-) -- Al Sparber - PVII http://www.projectseven.com Dreamweaver Menus | Galleries | Widgets __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Safari 5 / Win XP crashing ?
From: Philippe Wittenbergh e...@l-c-n.com
Does this test case crashes Safari 5 on Win XP for anyone, or is it just me ?
http://dev.l-c-n.com/webkit/c.html
This combination causes the issue:
p, dt, dd, li {text-rendering: optimizeLegibility;}
p {margin: .5ex 0 0;}
(and: does it crash Google Chrome 5 as well ?)
It crashes both browsers (Win Vista 64-bit). I assume on Windows 7, as well.
--
Al Sparber - PVII
http://www.projectseven.com
Dreamweaver Menus | Galleries | Widgets
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Test on box-shadow and border-radius
From: Gabriele Romanato gabriele.roman...@gmail.com Hi all! Just finished this: http://onwebdev.blogspot.com/2010/06/test-on-css3-box-shadow-and-border.html Very nice. You should take it further to show more looks, such as different treatments for different corners, shadow lengths, etc. Could be a real valuable tutorial. We like the idea of using CSS3 like that, so long as authors understand IE8 and under don't support it. So if curves and shadow are considered an enhancement, rather than a design mandate, it's cool. Here's something we've been working on lately, which might prove interesting as it illustrates outer/inner curves: http://www.projectseven.com/peeks/tooltips/example4.htm Good job! -- Al Sparber - PVII http://www.projectseven.com Dreamweaver Menus | Galleries | Widgets __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] semantic accessible animated drop up menu
From: Ido dekkers idekkers@gmail.com does anyone know about a drop down/up menu with JS animation that is also accessible and semantic? i have this : http://test2.dekkers.net/test.html which is semantic and accessible, but each drop-down script add to it makes it not accessible. i don't care which JS library to use, as long as it works. Menu accessibility is often misunderstood. Simply making it so that it works when script disabled does not make it accessible. If you follow the practices listed in this article, any list-based menu can be accessible if you make it so: http://www.projectseven.com/products/menusystems/pmm2/ug-examples/accessible/index.htm -- Al Sparber - PVII http://www.projectseven.com Dreamweaver Menus | Galleries | Widgets http://www.projectseven.com/go/hgm The Ultimate Web 2.0 Carousel __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] semantic accessible animated drop up menu
From: Chris Blake ch...@3pointdesign.com I've used this before. Small and easy: http://www.leigeber.com/2008/11/drop-down-menu/ When using the tab key, tabbing goes through all hidden sub-menus, which is not good. IOW, to tab from the first root item to the second root item, one must tab through multiple items that are hidden, and for which there is no focus outline, and so the menu's accessibility and usability are greatly diminished. Additionally, the timers are too quick so it is very easy to lose your desired menu when moving a mouse or pointing device on the diagonal - which is the natural path. And one thing to keep in mind for any multilevel menu is that the root items should always be real links. -- Al Sparber - PVII http://www.projectseven.com Dreamweaver Menus | Galleries | Widgets http://www.projectseven.com/go/hgm The Ultimate Web 2.0 Carousel __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] rounded corners problem
From: Rory Bernstein r...@rorykerber.com Hi All, http://rorybernstein.com/roundcorners/ On this page, the light blue box that surrounds the horizontal grey graphic has rounded corners with the help of a little css. It's working great in a lot of browsers, but not in IE8. I have not been able to test it on IE7 or lower yet... In IE8, the light blue box with the rounded corners has an ugly dark border all the way around it. Can anyone tell me how to alter the CSS to get rid of this? I used this page as a guide to get the rounded corners working on all browsers: http://jonraasch.com/blog/css-rounded-corners-in-all-browsers Hi Rory, If you do not understand JavaScript (what's in the HTC file) and Microsoft VML (Vector Markup Language, which was proposed to the W3C but not accepted) then stick to pure CSS border-radius in terms of progressive enhancement [1]. These rounded corners for IE hacks and tricks are dangerous to play with unless the situation is precisely controlled. The major flaws are: The secret container that carries the curves does not properly reflow. So if text is resized, or if the container is horizontally flexible, its contents will escape the box. If the hack is applied to an element whose visibility, size, or position is manipulated dynamically, the contents will escape the container or the container will remain where the actual content was before it was moved or re-positioned. Other so-called curved corner solutions, such as jQuery's are even worse as they add scores of DIVs (or other elements) that use transparent pixels to erase the square edges. The result is bloat and very ragged edges. IE9 supports border-radius so over the next several years, folks can use it - but in a progressively enhanced scenario only. The best solution if rounded corners are a client requirement is, and will continue to be for some time, CSS-assigned background images. -- Al Sparber - PVII http://www.projectseven.com Dreamweaver Menus | Galleries | Widgets http://www.projectseven.com/go/hgm The Ultimate Web 2.0 Carousel [1] http://en.wikipedia.org/wiki/Progressive_enhancement __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] rounded corners problem
From: Thierry Koblentz n...@tjkdesign.com The four corner technique is great for flexible layouts, but since yours has a fixed width I think you could do this with just two nested containers. One contains the top image, the other the bottom image. Create a sprite that has both these images next to each other, that will reduce the HTTP requests from 4 to 1. Yes, for a fixed layout, a top, a bottom, and a y-tiling middle is all that's needed. I would use adjacent elements that are already there to carry the backgrounds. Should be doable without any additional markup. -- Al Sparber - PVII http://www.projectseven.com Dreamweaver Menus | Galleries | Widgets http://www.projectseven.com/go/hgm The Ultimate Web 2.0 Carousel __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Gap in IE7
Locate this code: . !-- Begin site navigation sidebar -- Before the comment, there is a period. Remove it. Then remove the paragraph with 3 exclamation points (though it's not causing the gap): h1Test-academics.boisestate.edu/h1 p!!!/p Then use an HTML 4 or xhtml DOCTYPE instead of HTML 5. While it's very cool to play with experimental stuff - it's not a good idea for a live site as behavior in older browsers could be unpredictable. -- Al Sparber - PVII http://www.projectseven.com Dreamweaver Menus | Galleries | Widgets http://www.projectseven.com/go/hgm The Ultimate Web 2.0 Carousel __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Fraction bar
This page might be of help: http://www.cs.tut.fi/~jkorpela/math/#fractions Just remember that in the quest to make fractions that look like they are from a math book you might succeed visually but fail miserably in terms of accessibility - not to mention what would happen if someone tried to copy and paste the text - into an existing sentence - which would yield: So let's talk about fractions - In the fraction 6 18 6 is the numerator and 18 is the denominator. A little confusing, no? -- Al Sparber - PVII http://www.projectseven.com Dreamweaver Menus | Galleries | Widgets http://www.projectseven.com/go/hgm The Ultimate Web 2.0 Carousel __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Why JavaScript and CSS can work well together
From: Gabriele Romanato gabriele.roman...@gmail.com To: css-discuss css-d@lists.css-discuss.org Sent: Thursday, January 07, 2010 10:42 PM Subject: [css-d] Why JavaScript and CSS can work well together Eric Meyer once said: JavaScript will save us all. I started to effectively work with JavaScript almost a year ago, when I discovered the powerful features of jQuery and the DOM. I have to say that JavaScript and CSS can work well together, especially when dealing with browsers inconsistencies and automating some repetitive tasks. Did you know, for example, that with jQuery you can automatically clear floats without manually adding the infamous .clearfix class? Of course I'm talking about unobtrusive JavaScript, but you get the idea. Sometimes on this list I see people who try to fix some problems with long and tedious CSS procedures that could be easily solved with a single JavaScript statement... and in a cross-browser way! Even if you were right, this is a CSS mailing list. Clearing floats can be done very simply. What you are saying, unfortunately, makes no sense - which I say for the benefit of beginners who might otherwise take your opinions to heart. -- Al Sparber - PVII http://www.projectseven.com Dreamweaver Menus | Galleries | Widgets http://www.projectseven.com/go/hgm The Ultimate Web 2.0 Carousel __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE dropdown menu problem Any suggestions to correct this?
From: Carol Swinehart c...@ckfswebservices.com
Just a preliminary menu but as you will see in IE 7 and probably in all
the IEs the menu does not function correctly.
It is hard to keep the menu open as you go down over the menu.
Here is the example: http://www.ckfswebservices.com/menutest/Menu/
Works in Safari, Firefox, Opera
No problems on the page
Have no idea where to tweek this so it will work in IE
There is a gap between the root menu item and its child UL. I see this in
the style sheet:
ul#cssmw8 ul.level-1 {
left: 15px;
top: 99%;
z-index: 200;
}
That's a very poor approach. If you remove the height from your a selector
ul#cssmw8 li a you can probably remove the top position from the ul
selector and everything will fall into place. You do have many other issues
with that menu - though. Some caused by unbalanced box attributes triggered
on hover and others inherent to all pure CSS menus. See if the above
works, though.
--
Al Sparber - PVII
http://www.projectseven.com
Dreamweaver Menus | Galleries | Widgets
http://www.projectseven.com/go/hgm
The Ultimate Web2.0 Carousel
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Problem With Menu
From: Victor Subervi victorsube...@gmail.com
Hi;
I've got a css menu here:
http://angrynates.com/nrelectric.com/
This works fine in FF but in IE, if you mouseover Services the font
turns
black and you can't mouseover the dropdown! It disappears before you can
get
there. What do? Please advise.
In the future it would be helpful if you mentioned specific versions of IE
you having problems with.
Change this:
!--[if IE]
style type=text/css media=screen
#menu ul li {float: left; width: 100%;}
/style
![endif]--
To this:
!--[if lte IE 7]
style type=text/css media=screen
#menu ul li {float: left; width: 100%;}
/style
![endif]--
Then fix these errors:
http://validator.w3.org/check?verbose=1uri=http%3a%2f%2fangrynates.com%2fnrelectric.com%2findex.py
and especially deal with the comment markers scattered about your menu
markup. What were you thinking there?
--
Al Sparber - PVII
http://www.projectseven.com
Dreamweaver Menus | Galleries | Widgets
http://www.projectseven.com/go/apm
An Accessible Elegant Accordion
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Trouble with drop down navigation tabs in IE 6/7
From: Rod Castello flashju...@sbcglobal.net Subject: Re: [css-d] Trouble with drop down navigation tabs in IE 6/7 Rod Castello wrote: I'm using Chromestyle from Dynamic Drive for my Navigation Drop Downs. -- Thanks for your response. I was hoping to avoid making the change, but you may be right. I'll try your method, I'm sure it will work fine. Do you have any idea why the down arrows wouldn't display properly in IE6/7? Did you see it in IE? I know it's not semantic, but I'd sure like to find a quick fix and leave it as it is: - I would post on Dynamic Drive's forums and/or contact the author. The technique (a list for the root menu and disjointed submenus) is not necessarily non-semantic or inaccessible. That's actually a similar technique to the one used by Opera for several years on its web site. That said, I would also not fall for the trap that because the sub-menus do not appear when script disabled it's bad. It's not, and so long as you organize your site correctly, it's arguably more accessible to prevent the sub-menus from being available without script and without a mouse. Scripted menus have many more advantages. You can Google christian heilman, javascript menus for more info and you can read this brief article: http://www.projectseven.com/products/menusystems/pmm2/ug-examples/accessible/index.htm Note that the article involves one of our products but the concept is applicable to any menu. Good luck. -- Al Sparber - PVII http://www.projectseven.com __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE8 conditional styles bug ??
From: Allen Beach cmkbh...@ymail.com It appears that the new IE8 (when in IE8 standards mode) will not work correctly when you have both inline and linked style sheets...if you're in quirks or ie7 mode its fine, but the moment you switch to IE8 standards mode (for both broser and docMode) your linked styles are gone! !--[if gte IE 8] !-- Not recognized unless in quirks/ie7 mode -- link href=css/ie8.css rel=stylesheet type=text/css title=ie8 ![endif]-- test example --- http://mtroadwines.com/ie8test.htm Seems to work fine for me. Given IE8 rendering in standards mode there would not seem to be much reason for using conditional comments - in most cases. -- Al Sparber - PVII http://www.projectseven.com Dreamweaver Menus | Galleries | Widgets http://www.projectseven.com/go/apm An Accessible Elegant Accordion __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE8 conditional styles bug ??
From: Al Sparber aspar...@roadrunner.com From: Allen Beach cmkbh...@ymail.com It appears that the new IE8 (when in IE8 standards mode) will not work correctly when you have both inline and linked style sheets...if you're in quirks or ie7 mode its fine, but the moment you switch to IE8 standards mode (for both broser and docMode) your linked styles are gone! !--[if gte IE 8] !-- Not recognized unless in quirks/ie7 mode -- link href=css/ie8.css rel=stylesheet type=text/css title=ie8 ![endif]-- test example --- http://mtroadwines.com/ie8test.htm Seems to work fine for me. Given IE8 rendering in standards mode there would not seem to be much reason for using conditional comments - in most cases. Try View Styles IE8 Then remove the id from the link tag in your IE8 conditional comment. -- Al Sparber - PVII http://www.projectseven.com Dreamweaver Menus | Galleries | Widgets http://www.projectseven.com/go/apm An Accessible Elegant Accordion __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE8 conditional styles bug ??
From: Allen Beach cmkbh...@ymail.com You should see 2 boxes, one with inline and one with linked styles... Al Sparber - I disagree, IE8 in standards mode still is far from perfect, and when creating a corporate site that works in IE6/7/8 and going forward, its important to have a seperate style sheet that takes certain items into account. Regardless, if you agree, this still appears to be a bug. I disagree, but just follow the steps in my previous email. For the second step, I apologize for a typo... Instead of removing the ID, remove the Title. -- Al Sparber - PVII http://www.projectseven.com Dreamweaver Menus | Galleries | Widgets http://www.projectseven.com/go/apm An Accessible Elegant Accordion __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Problem with all Mac browsers according to BrowserCam
From: Reese howel...@inkworkswell.com I agree with you that your suggestion is the preferred option, but the menu items range from 5 to 20 characters (with spaces, some of them). The text of those items is not negotiable with the client so I don't see that getting very far. I suppose the other option is to use images instead of text, I don't like that option. It isn't as SEO-friendly as text links and SEO-friendliness is important. That images are an SEO liability is a debatable issue (at worst). Image replacement is another option. -- Al Sparber - PVII http://www.projectseven.com Dreamweaver Menus | Galleries | Widgets http://www.projectseven.com/go/apm An Accessible Elegant Accordion __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Tab layout problem
From: Tim Snadden li...@snadden.com Really? I just tried a few searches: 'CSS tabs', 'CSS tabbed interface', 'CSS tabs rounded corners'. It's a very common design that has been done by many people before. Have another look. Here are a couple of the links that came up. http://www.smashingmagazine.com/2007/04/18/14-tab-based-inferface-techniques/ This one is a classic - http://www.alistapart.com/articles/slidingdoors/ Here's one that goes beyond what the sliding doors article teaches - allowing a full rollover effect: http://www.projectseven.com/tutorials/css/qtabs/ Not as famous, but a bit tastier :-) -- Al Sparber - PVII http://www.projectseven.com Dreamweaver Menus | Galleries | Widgets http://www.projectseven.com/go/apm An Accessible Elegant Accordion __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE8 is it a improvement over IE7?
From: Christopher R majes...@thecreativesheep.ca To: CSS-D css-d@lists.css-discuss.org Sent: Tuesday, May 05, 2009 11:57 AM Subject: [css-d] IE8 is it a improvement over IE7? I would just like to know if IE8 is an improvement over IE7? It is. -- Al Sparber - PVII http://www.projectseven.com __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] ie/8 max-width
From: David Laakso da...@chelseacreekstudio.com
When the page is dragged to a 640 window, the large image should reduce
in both width and height.
Our new found standard compliant friend, IE/8 does not seem to go along
with the program in PC XP on a relatively fast dsl modem (the image in
IE/8 at 640 is more square than rectangular).
IE/7 is cooperating with this declaration:
#d img {display : block; max-width : 96%; height: auto!important;
margin-bottom : 16px;}
http://chelseacreekstudio.com/ylaakso/yar/projects/k2.html
Can anyone please confirm?
Get the page out of quirks mode (remove the xml prolog) and check again.
--
Al Sparber - PVII
http://www.projectseven.com
Dreamweaver Menus | Galleries | Widgets
http://www.projectseven.com/go/apm
An Accessible Elegant Accordion
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] ie/8 max-width
Al Sparber wrote: From: David Laakso da...@chelseacreekstudio.com Get the page out of quirks mode (remove the xml prolog) and check again. Makes no difference whatsoever, Al. If you remove both the width and height attributes from the img tag, it works. Remove just the height and it doesn't. Looks like a remnant of haslayout :-) http://www.projectseven.com/csslab/ie8/min-max-height-width/ -- Al Sparber - PVII http://www.projectseven.com Dreamweaver Menus | Galleries | Widgets http://www.projectseven.com/go/apm An Accessible Elegant Accordion __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] strange issue with suckerfish menu and firefox webdeveloper plugin
From: Ryan Oswald rya...@suddenlink.net This is driving me INSANE! Best way to explain this is to just show the site we are working on... http://www.createtwo.com/villager/shopvillager/ So... the category lists at the bottom... some will have suckerfish hover menus to display a sub menu. If you hover over Story People... a sub menu will rollout... however, it should have a right arrow image next to Story People and the whole sub menu should have a nice dropshadow background image. Now... in firefox web developer plugin... click edit css, there it is. WTF? It's a known bug. The developer toolbar CSS editor makes image paths relative to the document instead of the style sheet. -- Al Sparber - PVII http://www.projectseven.com Dreamweaver Menus | Galleries | Widgets __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Javascript code - firefox vs explorer and spry menu bars
From: Tarah - Dome Cleaning, Inc. ta...@domecleaning.com Hey - I have this code %...@language=JAVASCRIPT CODEPAGE=65001% that is appearing on the top of my site when opened in firefox - but not explorer. The code is unnecessary and should be removed. It was suggested to remove the tag from my code, but when I do that, the background on my spry menu bar on the drop down changes from a box around the text, to being a jagged end - ending at where the text ends. Does anyone know how to hide this code so that it won't appear in firefox? Remove the Code, then get customer support from Adobe to fix your menu. -- Al Sparber - PVII http://www.projectseven.com Dreamweaver Menus | Galleries | Widgets http://www.projectseven.com/go/apm An Accessible Elegant Accordion __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] make accordion box open on mouseover
From: Anne McKinsey anne...@charter.net I am building a site in Dreamweaver CS3 and am using its Spry accordion widget for a navigation bar and would really like to have the panels open when the header tabs are moused-over rather than when clicked. Does anyone know of a way to make this happen? I can't find anything in Adobe Help, the css, or the js pages that controls this function. Any help would be much appreciated. Here is the site I am working on Hi Anne, The question you have concerns JavaScript and should be asked on Adobe's spry forum: http://www.adobe.com/cfusion/webforums/forum/categories.cfm?forumid=72catid=602 I'm not fluent in their script, but it should be possible. It has nothing to do with CSS though. -- Al Sparber - PVII http://www.projectseven.com Dreamweaver Menus | Galleries | Widgets http://www.projectseven.com/go/apm An Accessible Elegant Accordion __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Equal heights solutions
I just posted this got some wonderful answers, but I'm still looking for an ideal solution to equal heights problem I finally chose to use another javascript: script type=text/javascript src=/includes/p7_eqCols2_10.js/script body onLoad=P7_equalCols2(0,'left','p','main','p') which I don't like very much as you can always see the leftnav catch up with the content area. We are also considering some expandable menus in the content area and so far they didn't work in Firefox. Our script is a bit long in the tooth, though you could write the event handlers in the script (and the animation can be turned off). The better solution, especially if you want expanding stugg in the columns is to use CSS faux columns. -- Al Sparber - PVII http://www.projectseven.com __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Sliding Door and Drop Downs
From: Erik Zettersten ezetters...@hotmail.com Example: The sliding door techniques requires two wrapping elements to make it work. In the example above I've used the li as the main wrapper and the a as the inner wrapper (common in most cases). When adding a drop down action by manipulating the child ul, how do I contain the hover affect while my mouse cursor is hovering the child li? I you've tried my example, then you'll notice that I do actually contain the hover state for the parent li but no the parent a. Logically I'd need something in the child ul to call the hover on the parent a. If that's the case then I'm stuck and looking for a better solution to me testing. You need script for that. If I read you correctly, you are looking to do something like the Topaz menu example on this page? http://www.projectseven.com/products/menusystems/pmm2/topaz.htm With pure CSS menus and sliding doors you will usually find that the only thing that changes and sticks on hover is the text in the root menu. -- Al Sparber - PVII http://www.projectseven.com The Finest Dreamweaver Menus | Galleries | Widgets http://www.projectseven.com/go/pop The Ultimate DW Menu System __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Firefox Weirdness
From: Philippe Wittenbergh e...@l-c-n.com
And on OS X there are no problems either.
I think that is a known issue/bug with this:
.contentBlock {
/*...*/
opacity: 0.9;
}
in combination with cleartype.
---
https://bugzilla.mozilla.org/show_bug.cgi?id=363861
--
Al Sparber - PVII
http://www.projectseven.com
The Finest Dreamweaver Menus | Galleries | Widgets
http://www.projectseven.com/go/pop
The Ultimate DW Menu System
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Line Height IE7 problem with PVII TMM
From: Bill Brown macnim...@gmail.com I just want to second what Virgil said here. I actually downloaded your page and set about translating the P7M div-heavy code into a more semantic assembly, but I got winded. ;) If you'd like some help re-writing the menu into a more semantic, less obtrusive setup, please let me know off-list and I'll be happy to help with some HTML, CSS and JS re-coding for you. Thanks for the offer Bill, but we've been around since 1998 and have a very good handle on things. I can't disagree with your underlying points, but it does work :-) Tree Menu Magic (original release 2001) will soon be upgraded to a more modern codebase. Prototype here: http://www.projectseven.com/products/menusystems/tmm2/folders/ We are a fairly large operation and have to work by a schedule. All things in good time ;-) Appreciate your comments, though. -- Al Sparber - PVII http://www.projectseven.com The Finest Dreamweaver Menus | Galleries | Widgets http://www.projectseven.com/go/pop The Ultimate DW Menu System __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Line Height IE7 problem with PVII TMM
From: Jo w...@sparrowdog.com To: 'css-d' css-d@lists.css-discuss.org Sent: Wednesday, January 07, 2009 6:12 AM Subject: [css-d] Line Height IE7 problem with PVII TMM I did ask this question over at the PVII forum, but I haven't heard back, so I thought I'd ask in here. http://www.waterfrontvenuesnewcastle.com.au/new/ Add display: block to the root a selector #p7TMnav div a. To control box height, edit the padding declarations on the .p7plusmark, .p7minusmark, .p7defmark rules. -- Al Sparber - PVII http://www.projectseven.com Dreamweaver Menus | Galleries | Widgets http://www.projectseven.com/go/pop The Ultimate DW Menu System __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Menu-issue
From: Ib Jensen ibkjen...@gmail.com 2008/12/28 Al Sparber aspar...@roadrunner.com: From: Ib Jensen ibkjen...@gmail.com 2008/12/28 David ker...@abbottdavid.com: You would be better off with a nice single-level CSS menu across the top with sidebar context menus. You mean, just a single-level drop-down menu. And sub-menus in the sidebar. As the one in : ikjensen.dk Yes. That approach is more usable. The menu you have is extremely unusable - even in the browsers in which it works. For that type of menu you really should be using a scripted one. Any suggestions in this direction. UDM: http://www.udm4.com/ PMM2: http://www.projectseven.com/products/menusystems/pmm2/ -- Al Sparber - PVII http://www.projectseven.com The Finest Dreamweaver Menus | Galleries | Widgets http://www.projectseven.com/go/pop The Ultimate DW Menu System __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Menu-issue
From: Ib Jensen ibkjen...@gmail.com
2008/12/28 David ker...@abbottdavid.com:
Ib Jensen wrote:
I got it to validate if it helps any :)
http://dwabbott.com/iktest.html
-david
Me too.
I don't know if you read my answer to Benjamin Hawkes-Lewis.
Now, only the Menu-issue is left back. ;-{
You would be better off with a nice single-level CSS menu across the top
with sidebar context menus. The menu you have is extremely unusable - even
in the browsers in which it works. For that type of menu you really should
be using a scripted one.
--
Al Sparber - PVII
http://www.projectseven.com
The Finest Dreamweaver Menus | Galleries | Widgets
http://www.projectseven.com/go/pop
The Ultimate DW Menu System
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Dreamweaver and min-width/height
From: Joseph Sims metronom...@yahoo.com however I recall that there is a properties *link* somewhere possibly in styles section when you activate styles in right panel. just click on that and add the min-width or min-height there. Next time it should bring it up for you. davoud http://cssfreelancer.awardspace.com Ugh... that's easy. I never use that to put properties in with Dreamweaver, I always use the dialog box. The dialog box is a vestige left in, I presume, for beginners - and sorely limited. The CSS Panel is what you want to be using. -- Al Sparber - PVII http://www.projectseven.com Dreamweaver Menu Systems | Galleries | Widgets http://www.projectseven.com/go/pop The Ultimate DW Menu System __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] vertical Suckerfish menu in a table column
From: Joseph Sims metronom...@yahoo.com Here's my issue: I'm trying to fix a client's rollover dropdown menus, 'cause they are made with some awful GoLive Plug-in that uses javascript and inline CSS to throw these images and menus on top of a table with z-index and absolute positioning. I don't want to remake the whole site with CSS layout, because I'm trying for a quick smash n' grab kludge and maybe later after I explain the benefits they'll let me redo in CSS. So I'm using a vertical Suckerfish menu that goes in a left side table column. I made the menu in a new document and it works great, I placed it into the table and it doesn't work. The main rollover buttons work, but the menus won't pop up on :hover they just remain display:none. Are there some serious problems when using tables and css together? I don't have a URL prepped because I'm working locally, but I can make it available if necessary. I expect there might just be something about being in a table column that breaks the functionality. Generally speaking, vertical Suckerfish menus are often less usable and accessible than even the worst JavaScript menus. That said, an example page would really be needed to diagnose your issue. -- Al Sparber - PVII http://www.projectseven.com Fully Automated Menu Systems | Galleries | Widgets http://www.projectseven.com/go/Elevators __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Anyone Know of Hover Drop Down Menus?
From: Tim Arnold tim.arn...@gmail.com After using the stripped-down suckerfish CSS + very light JS for IE6 for the past few years, I've started using the Suckerfish jQuery menu solution ( http://users.tpg.com.au/j_birch/plugins/superfish/) primarily because it is based on the Suckerfish menus, uses very clean XHTML/CSS, and provides a wealth of JS fanciness without getting in the way of accessibility. The only problem with Superfish approach is the Suckerfish part :-) Seriously, the examples here [1] become highly unusable and fairly inaccessible when script is disabled [1] http://users.tpg.com.au/j_birch/plugins/superfish/#examples Since this is a CSS list, and Suckerfish-type menus are CSS powered, it bears repeating that when you go beyond a straight and single-level dropdown, to a flyout scenario, it is very difficult for people to open the menu they want to open, and keep it open. The natural tendency of people is to move their mouse diagonally from a trigger link in one menu level to a target link in the next (flyout) level. Able-bodied folks have problems with this. Impaired folks often find it nearly impossible. If one must have a flyout scenario (for whatever reason), a scripted solution that does not fall back to pure CSS is the better choice. As for accessibility, consider this: http://www.projectseven.com/products/menusystems/pmm2/ug-examples/accessible/ -- Al Sparber - PVII http://www.projectseven.com Fully Automated Menu Systems | Galleries | Widgets http://www.projectseven.com/go/Elevators __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Anyone Know of Hover Drop Down Menus?
From: Geoff Hoffman [EMAIL PROTECTED] Unless I missed it, I am surprised nobody mentioned these: http://www.cssplay.co.uk/menus/ Pure CSS flyout menus, no Javascript, vertical and horizontal, to any depth level. Pure CSS flyouts are extremely unusable in the real world. It's a matter of a straight line being the shortest path from root link to trigger and, without a scripted timer, usability is very poor. The more levels, the worse it becomes. And it validates. That's debateable if you are looking at the menu I think you are :-) -- Al Sparber - PVII http://www.projectseven.com Fully Automated Menu Systems | Galleries | Widgets http://www.projectseven.com/go/Elevators __ 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] Anyone Know of Hover Drop Down Menus?
From: Elli Vizcaino [EMAIL PROTECTED] Need resources on hover drop down menus that hopefully work across FF, Safari, IE so far I have this: http://elliv.nbcuxd.com/health_article.html - works in IE 7 FF3, Safari and IE6 there are problems, haven't tested FF2. Any resources, suggestions welcomed. Pure CSS is fine to use for a horizontally oriented root with a single drop-down sub-level. If, however, you require flyout levels, then a scripted menu should be used. Here is a free pure CSS dropdown that we offer for use: http://www.projectseven.com/tutorials/navigation/auto_hide/workpage.htm If you opt for a scripted solution, here is an article that may prove helpful no matter which script you use: http://www.projectseven.com/tutorials/accessibility/pop_integrated/index.htm Good luck and happy menu hunting. -- Al Sparber - PVII http://www.projectseven.com Fully Automated Menu Systems | Galleries | Widgets http://www.projectseven.com/go/Elevators __ 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] drop down menus/flash
http://www.projectseven.com/support/answers.asp?id=127 -- Al Sparber - PVII http://www.projectseven.com Fully Automated Menu Systems | Galleries | Widgets http://www.projectseven.com/go/Elevators __ 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 Round Corners
Rounded boxes are an interesting issue. Some of the methods discussed here are fine, but there are folks who require smoothness or efficiency - it's a designer thing - and so the decision often need to be made to introduce extra markup. For those people, a method such as this might better achieve the design goal: http://www.projectseven.com/csslab/faux/flexcurve/ Or this: http://www.projectseven.com/csslab/faux/flexcurve/index-shadow.htm Or this: http://www.projectseven.com/products/templates/pagepacks/curvitude/Layout01b.htm -- Al Sparber - PVII http://www.projectseven.com Fully Automated Menu Systems | Galleries | Widgets http://www.projectseven.com/go/Elevators __ 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] workaround to inherited opacity
From: Bill Brown [EMAIL PROTECTED] In the past, I've used a combination of RGBA, IE's gradient filter and PNGs (for Opera and FF2) to achieve this effect. Hedger Wang has a similar experiment out there somewhere on the same thing. Here's my experiment with it: http://www.webdevelopedia.com/better_opacity.html and http://theholiergrail.com/sandbox/rgba-cross-browser.php Not good. Whenever you expose IE7 to a filter you kill font-smoothing. That's a showstopper. Best to go purely with PNGs for IE7 and forget about older browsers in the name of progressive enhancement. -- Al Sparber - PVII http://www.projectseven.com Fully Automated Menu Systems | Galleries | Widgets http://www.projectseven.com/go/Elevators __ 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] workaround to inherited opacity
From: Bill Brown [EMAIL PROTECTED] Al Sparber wrote: From: Bill Brown [EMAIL PROTECTED] Not good. Whenever you expose IE7 to a filter you kill font-smoothing. That's a showstopper. Best to go purely with PNGs for IE7 and forget about older browsers in the name of progressive enhancement. Not good? Seems harsh. Hi Bill, I apologize if I came off as harsh. I was stating a point in a direct manner. In any event, I was merely trying to offer a different perspective for the original poster. It would seem, however, that this is off-topic for this list and so the discussion should end - at least it will for me :-) Cheers, -- Al Sparber - PVII http://www.projectseven.com Fully Automated Menu Systems | Galleries | Widgets http://www.projectseven.com/go/Elevators __ 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] IE7 bug - scroll bar extends w/ floated italics
From: fat graffix [EMAIL PROTECTED] hi all... seems because of a floated italicized paragraph in IE7, the scroll bar at bottom of page extends beyond the window width — only happens in IE7, not IE6. i remember seeing something about this bug on this list... anybody know what's up ??? - http://www.fatgraffix.com/2008-test-02/ --- overflow: hidden on either the DIV or the P should fix it. -- Al Sparber - PVII http://www.projectseven.com The Ultimate Lightbox: Lightshow Magic __ 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] 100% height over existing page
From: Seona Bellamy [EMAIL PROTECTED] Hi guys, I need to create an absolutely positioned div that will float on top of the existing page layout, and be 100% of the height of the rendered page, not the viewport. Something similar to what Lightbox does - greying out the page and displaying a box over it. The trouble is, because it's to display some legal stuff (of the this site contains medical information that some people might find offensive or disturbing variety) I don't want to use Lightbox because it relies on JavaScript. Anyone who doesn't have JS simply won't see the warning and that just doesn't seem like a good idea. I've had no trouble making the div that sits on top of everything extend to the height of the viewport, but if the page extends beyond that then you see normal (and clickable) page as soon as you scroll. Don't want that, if possible. Is there a CSS way of doing this? No - and the Lightbox scripted method is flawed to boot :-) Our Lighshow widget would do exactly what you need to do and be accessible if script is disabled. It's not free, though. I think one of the J-Query-based Lightbox clones might also work with some tweaking. If it is possible with CSS, it would be mightily hacked and probably not practical. You can also post this on a script or DOM-based mailing list or forum as it would be more appropriate. -- Al Sparber - PVII http://www.projectseven.com The Ultimate Lightbox: Lightshow Magic __ 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 css menu question
- Original Message - From: Shanna Korby [EMAIL PROTECTED] To: css-d@lists.css-discuss.org Sent: Sunday, June 15, 2008 2:59 PM Subject: [css-d] IE6 css menu question http://www.fargoparks.com/TEST/ http://www.fargoparks.com/TEST/css/home.css IE6 - The navigation is stacked, not horizontal as it should be. How can I fix it? Hi Shanna, Actually, the reason for the IE6 issue is that you are setting the root menu items to an auto width value. To do that, you need to follow the technique in our user guide - both steps: http://www.projectseven.com/products/menusystems/pmm/user_guide/styling/menu_widths/hz_root_varwidth.htm -- Al Sparber - PVII http://www.projectseven.com Fully Automated Menu Systems | Galleries | Widgets http://www.projectseven.com/go/Elevators __ 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] Which is the best solution min-width and max-width in ie6 ?
From: Dal [EMAIL PROTECTED] To: css-d@lists.css-discuss.org I have never used min-max---width-height properties before, but I need to use it now. I have found many solutions on web for ie6 and I am confused now. Which is the best solution to impliment these properties in ie6 ? See if this is helpful: http://www.projectseven.com/csslab/testing/minmax/index.htm -- Al Sparber - PVII http://www.projectseven.com Fully Automated Menu Systems | Galleries | Widgets http://www.projectseven.com/go/Elevators __ 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] horizontal menu centering issue
From: Ray Leventhal [EMAIL PROTECTED] Hi all, I'm continuing to work on a project: http://www.swhidevel.com/ The project uses a lovely horizontal menu structure from Project7. My issue is I cannot seem to get it to center. Any ideas on the subject would be greatly appreciated. Because the root menu items are set as blocks and floated, the only way to center the menu would be to assign a width to each root menu item, then assign a width to the root UL based on the aggregate widths of the menu items, then use auto left and right margins. Not a good solution. Menus like that tend to look very nice as they are. It would take some complex hacking to center the entire menu. -- Al Sparber - PVII http://www.projectseven.com Fully Automated Menu Systems | Galleries | Widgets http://www.projectseven.com/go/Elevators __ 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/
