[WSG] CSS Rollover Flicker
Hi everyone, happy after holiday, I have a CSS rollover flickering problem that not just occurs in IE but all browsers. The problem only happens when I have different images for link and hover, and a background image for the #menu. The problem has been there for a long time with other sites, due to the busy schedules and deadlines I decided to ignore it because, after all, the menus are working - sites were up for months and nobody complaints. Nonetheless, I know how annoying it is. Was working on a new site using the same menu code, the annoyances suddenly becomes so big that I can't stand it anymore. I suspect it's something to do with caches yet I don't seem able to find what causes the problem. Symptoms are random: empty gap, hover image disappears or white space occurs, when either of these happens, I move the cursor to the next menu item, come back again and it gets back to normal state. Can you be so kind look at my code? http://gb.lotusseeds.com/menutest.html http://gb.lotusseeds.com/menu_test.css THANK YOU tee ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] CSS Rollover Flicker
I would do a preload images on the body tag for the over state images since as it is they seem to load for the first time when you do a mouse over. bob Hi everyone, happy after holiday, I have a CSS rollover flickering problem that not just occurs in IE but all browsers. The problem only happens when I have different images for link and hover, and a background image for the #menu. The problem has been there for a long time with other sites, due to the busy schedules and deadlines I decided to ignore it because, after all, the menus are working - sites were up for months and nobody complaints. Nonetheless, I know how annoying it is. Was working on a new site using the same menu code, the annoyances suddenly becomes so big that I can't stand it anymore. I suspect it's something to do with caches yet I don't seem able to find what causes the problem. Symptoms are random: empty gap, hover image disappears or white space occurs, when either of these happens, I move the cursor to the next menu item, come back again and it gets back to normal state. Can you be so kind look at my code? http://gb.lotusseeds.com/menutest.html http://gb.lotusseeds.com/menu_test.css THANK YOU tee ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help ** ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] CSS Rollover Flicker
tee, you need a preloader (javascript) or better use css rollovers: http://wellstyled.com/css-nopreload-rollovers.html http://www.alistapart.com/articles/slidingdoors2/ and the flicker will disappear. regards Martin ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] CSS Rollover Flicker
G'day I have a CSS rollover flickering problem that not just occurs in IE but all browsers. Two options I can think of: 1. Pre-load the hover images (using javascript) 2. Use a single background image with both states for each button and shift the background-position on hover. I prefer the latter option. Regards -- Bert Doorn, Better Web Design http://www.betterwebdesign.com.au/ Fast-loading, user-friendly websites ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] CSS Rollover Flicker
Hello
IMHO i think Bob has a good idea. I usually use a method called Farner
image replacement,which works great in such cases.
I`ve put an example below. You need two graphics, one for the normal
state ( home.png ) and one for the hover state ( home-red.png).
html
head
title/title
style type=text/css
#bannerlogoban {
margin: 0;
padding: 0;
border: 0;
width: 100px;
height: 50px;
background: url(home-red.png) no-repeat;
}
.alt {
display: none;
}
#logoban {
display: block;
padding: 0;
border: 0;
margin: 0;
background: url(home.png) no-repeat;
width: 100px;
height: 50px;
}
a#logoban:hover {
background: url(home-red.png) no-repeat;
}
/style
/head
body
div id=bannerlogoban
a id=logoban href=YOUR LINK title=YOUR LINK
span class=altYOUR LINK/span
/a
/div
/body
/html
It`s only an example and not very well formated.
I've read about this on www.alistapart.com and in a book from Jeffrey
Zeldmann designing with web standards.
Hope this helps.
Stefan Gaertners
Bob Schwartz wrote:
I would do a preload images on the body tag for the over state
images since as it is they seem to load for the first time when you
do a mouse over.
bob
Hi everyone, happy after holiday,
I have a CSS rollover flickering problem that not just occurs in IE
but all browsers.
The problem only happens when I have different images for link and
hover, and a background image for the #menu.
The problem has been there for a long time with other sites, due to
the busy schedules and deadlines I decided to ignore it because,
after all, the menus are working - sites were up for months and
nobody complaints.
Nonetheless, I know how annoying it is.
Was working on a new site using the same menu code, the annoyances
suddenly becomes so big that I can't stand it anymore. I suspect
it's something to do with caches yet I don't seem able to find what
causes the problem.
Symptoms are random: empty gap, hover image disappears or white
space occurs, when either of these happens, I move the cursor to the
next menu item, come back again and it gets back to normal state.
Can you be so kind look at my code?
http://gb.lotusseeds.com/menutest.html
http://gb.lotusseeds.com/menu_test.css
THANK YOU
tee
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
RE: [WSG] CSS Rollover Flicker
Hi Why not make the background image of the li the same as the hover. That way it preloads itself? E. -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of tee Sent: 27 December 2005 09:36 To: wsg@webstandardsgroup.org Subject: [WSG] CSS Rollover Flicker Hi everyone, happy after holiday, I have a CSS rollover flickering problem that not just occurs in IE but all browsers. The problem only happens when I have different images for link and hover, and a background image for the #menu. The problem has been there for a long time with other sites, due to the busy schedules and deadlines I decided to ignore it because, after all, the menus are working - sites were up for months and nobody complaints. Nonetheless, I know how annoying it is. Was working on a new site using the same menu code, the annoyances suddenly becomes so big that I can't stand it anymore. I suspect it's something to do with caches yet I don't seem able to find what causes the problem. Symptoms are random: empty gap, hover image disappears or white space occurs, when either of these happens, I move the cursor to the next menu item, come back again and it gets back to normal state. Can you be so kind look at my code? http://gb.lotusseeds.com/menutest.html http://gb.lotusseeds.com/menu_test.css THANK YOU tee ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help ** ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] CSS Rollover Flicker
Thanks all for the pointers, I am trying the sliding doors method now. For other sites, I may have to use javascript preloader as going back to recreate images for menus can be quite a hassle. tee On Dec 27, 2005, at 1:48 AM, Bob Schwartz wrote: I would do a preload images on the body tag for the over state images since as it is they seem to load for the first time when you do a mouse over. bob ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] CSS Rollover Flicker
On Dec 27, 2005, at 3:03 AM, Web Man Walking wrote: Hi Why not make the background image of the li the same as the hover. That way it preloads itself? E. Hi mysterious E. Interesting approach! It seems to work and a real quick fix. I have tested on PC/Mac: Safari, FF, Netscape, Mozilla, iE and Opera. Can you guys confirm? http://gb.lotusseeds.com/menutest_2.html Honestly I wasn't too crazy to try out sliding doors or preloader scripts method (nonetheless it has to be done so that I can get over with the whole annoying moment before stepping into a fresh new year :) ), had wasted some 4 hours trying out one of the Stu Nicholls' method (http://www.webreference.com/programming/ css_flicker/) and it broke quite badly in IE andI didn't feel like fixing yet another IE bug. If this truly works (sorry for my skeptism! Base on life' experience, when thing is too easy to solve/fix, I have the tendency to cast doubt), you'd just saved me hours of frustration for trying out sliding doors (by the way, I read that article a couple of time, for some reason I never really like the approach and therefor didn't think of trying). Best, tee ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] CSS Rollover Flicker
tee,
on Tuesday, December 27, 2005 at 13:03 wsg@webstandardsgroup.org wrote:
Hi mysterious E. Interesting approach! It seems to work and a real
quick fix.
I have tested on PC/Mac: Safari, FF, Netscape, Mozilla, iE and Opera.
Can you guys confirm?
http://gb.lotusseeds.com/menutest_2.html
This one will work if the a covers 100% of the li's area, otherwise
the li's background could shine through. But for this menu it's real
quick and simple fix.
Honestly I wasn't too crazy to try out sliding doors or preloader
scripts method (nonetheless it has to be done so that I can get over
with the whole annoying moment before stepping into a fresh new
year :) ), had wasted some 4 hours trying out one of the Stu
Nicholls' method (http://www.webreference.com/programming/
css_flicker/) and it broke quite badly in IE andI didn't feel like
fixing yet another IE bug.
It should work in IE = 5.0. If you define other pseudo-classes, you
have to put them in the correct order in your stylesheet:
:link
:visited
:focus
:hover
:active
Or one will override the others. This might be your problem.
Another thing. You use:
#siteOption li a span {
display: none;
}
This way, the text inside the span is hidden from screen readers. See:
http://css-discuss.incutio.com/?page=ScreenreaderVisibility
It would be better to position the span off left:
#siteOption li a span {
position: absolute;
left: -1000px;
font-size: 1px;
}
Like that it will be invisible for css-browsers, but visible for
screen readers.
regards
Martin
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
Re: [WSG] web developer toolbar for IE!!!!
Any good? Is the better version reliable enough? - Original Message - From: sam sherlock [EMAIL PROTECTED] Sent: Tuesday, December 27, 2005 4:00 AM I have just installed the web developer tool bar for internet explorer http://www.microsoft.com/downloads/details.aspx?FamilyID=e59c3964-672d-4511-bb3e-2d5e1db91038displaylang=en ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
RE: [WSG] CSS Rollover Flicker
Hello Seems to work fine now in FF1.5. One thing, your About button still seems to flicker, don't know if there is a problem or you just forgot to do that one :-) had wasted some 4 hours trying out one of the Stu Nicholls' method (http://www.webreference.com/programming/ css_flicker/) and it broke quite badly in IE andI didn't feel like fixing yet another IE bug. I had a look at his article and it seems to be more or less what I suggested (in more detail). This looks like it should work but I havent tested. Glad I could help. E. -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of tee Sent: 27 December 2005 12:04 To: wsg@webstandardsgroup.org Subject: Re: [WSG] CSS Rollover Flicker On Dec 27, 2005, at 3:03 AM, Web Man Walking wrote: Hi Why not make the background image of the li the same as the hover. That way it preloads itself? E. Hi mysterious E. Interesting approach! It seems to work and a real quick fix. I have tested on PC/Mac: Safari, FF, Netscape, Mozilla, iE and Opera. Can you guys confirm? http://gb.lotusseeds.com/menutest_2.html Honestly I wasn't too crazy to try out sliding doors or preloader scripts method (nonetheless it has to be done so that I can get over with the whole annoying moment before stepping into a fresh new year :) ), had wasted some 4 hours trying out one of the Stu Nicholls' method (http://www.webreference.com/programming/ css_flicker/) and it broke quite badly in IE andI didn't feel like fixing yet another IE bug. If this truly works (sorry for my skeptism! Base on life' experience, when thing is too easy to solve/fix, I have the tendency to cast doubt), you'd just saved me hours of frustration for trying out sliding doors (by the way, I read that article a couple of time, for some reason I never really like the approach and therefor didn't think of trying). Best, tee ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help ** ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
RE: [WSG] CSS Rollover Flicker
This one will work if the a covers 100% of the li's area, otherwise the li's background could shine through. But for this menu it's real quick and simple fix. Sorry, I neglected to mention that, I was thinking it, just not typing it. That what you get when you come into the office to find your landlord has had the heating off since the 23rd! E. ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] CSS Rollover Flicker
On Dec 27, 2005, at 4:45 AM, Martin Heiden wrote:
This one will work if the a covers 100% of the li's area, otherwise
the li's background could shine through. But for this menu it's real
quick and simple fix.
Thanks Martin, I'll keep this in mind when fixing other sites. It
looks like I will have to use Bert' suggestion for the fix in other
sites.
:link
:visited
:focus
:hover
:active
Or one will override the others. This might be your problem.
The above psedo classes won't be needed for this particular menu.
Another thing. You use:
#siteOption li a span {
display: none;
}
Learned this from CSS Zen Garden and it remains my favourite as I
other methods use hacks.
This way, the text inside the span is hidden from screen readers. See:
http://css-discuss.incutio.com/?page=ScreenreaderVisibility
It would be better to position the span off left:
#siteOption li a span {
position: absolute;
left: -1000px;
font-size: 1px;
}
This obviously is much better.
tee
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
Re: [WSG] Yet Another Float Problem
On 12/26/05, Paula Petrik [EMAIL PROTECTED] wrote: Well, the problem is solved--for the time being. It still does not work on Win98 with IE4, but I think that I have to draw the line. As Drew suggested, it was a rounding problem, but I did get a lot of practice writing if statement for the IE family. I do have question. Drew, when you say you will clear to get height, what will I be clearing? I have a 3-column page coming up and want to forestall any further angst. Paula PetrikPaula PetrikProfessorDepartment of History Art HistoryAssociate DirectorCenter for History New Media George Mason Universityhttp://www.archiva.net What to clear. That's always the question with IE. If you are using a multiple float, the clear usually works best after the last float. If the floats are in a container that would be after the last float and before the container is closed. Sometimes an additional clear is necessary within the last float. And additional clears as always necessary in nested floats. Looking at a copy of a 3 column template I did when learning css, there is a header, container with 3 columns, footer structure. The clear is between the container and footer. Be glad to send it to you off list if you like. In diagnosing these kinds of problems, it works best for me to give the main elements a visible border. It shows me where in fact things don't fit right, which if often different than where I think they shouldn't fit when it doesn't work right the first time. If you use a fair number of clears you may well get accused of divitis. Just weigh having to change nothing against having to rework all of the clever hacks for IE should IE7 contain even a small portion of the rumored changes in support for css and xhtml. drew
[WSG] Re: ScreenreaderVisibility issue - (was) CSS Rollover Flicker
Hi Martin, thought you might want to know, further browsers testing
shows that
#siteOption li a span {
position: absolute;
left: -1000px;
font-size: 1px;
}
causes entire menu disappears in Mac IE, because my site holds up
quite nicely in this browser with no single hack used, therefore I
would really like to get it fix.
http://gb.lotusseeds.com/menutest_2.html
http://gb.lotusseeds.com/macie_1.jpg
and this is the cure (without causing problem in PC' IEs):
#siteOption li a span {
text-indent: -16000px;
font-size: 1px;
}
http://gb.lotusseeds.com/macie.html
http://gb.lotusseeds.com/macie.jpg
However, Safari, Firefox and Oprea won't honor it no matter what.
Working on this site, I notice that there is an isue with class, span
class specificities that the above three browsers wont' honor and
which never happened before with other sites I did.
For example:
#content {}
#content p {padding: 10px; }
say, I wanted the last paragraph to have 20px padding-bottom instead
of 10px.
I added this:
.lastpara {padding-bottom: 20px; }
It won't works (note, didn't test it on PC' IEs at that stage ), but
if I change my code to :
#content p.lastpara { padding-bottom: 20px; }
Safari, Firefox and Opera honored my request.
div id=content
p first paragraph/p
p class=lastparalast paragrap/p
Despite the lower specificities for class, I would think the world
three most advanced browsers would honor my simple request without
telling them specifically that the '.lastpara' is the child of the
'p' element of descendant of 'content' div.
But I am too fatigue to figure out why.
tee
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
Re: [WSG] Re: ScreenreaderVisibility issue - (was) CSS Rollover Flicker
A speculative thought: Would it be that the universal margin and
padding declaration get in the way because it has highest specificity?
* {margin: 0; padding: 0;}
I only started using it very recently in three sites but two of them
didn't require me to use extra classess for padding and margin.
tee
Working on this site, I notice that there is an isue with class,
span class specificities that the above three browsers wont' honor
and which never happened before with other sites I did.
For example:
#content {}
#content p {padding: 10px; }
say, I wanted the last paragraph to have 20px padding-bottom
instead of 10px.
I added this:
.lastpara {padding-bottom: 20px; }
It won't works (note, didn't test it on PC' IEs at that stage ),
but if I change my code to :
#content p.lastpara { padding-bottom: 20px; }
Safari, Firefox and Opera honored my request.
div id=content
p first paragraph/p
p class=lastparalast paragrap/p
Despite the lower specificities for class, I would think the world
three most advanced browsers would honor my simple request without
telling them specifically that the '.lastpara' is the child of the
'p' element of descendant of 'content' div.
But I am too fatigue to figure out why.
tee
***
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
Re: [WSG] Re: ScreenreaderVisibility issue - (was) CSS Rollover Flicker
tee,
on Tuesday, December 27, 2005 at 18:19 wsg@webstandardsgroup.org wrote:
and this is the cure (without causing problem in PC' IEs):
#siteOption li a span {
text-indent: -16000px;
font-size: 1px;
}
http://gb.lotusseeds.com/macie.html
http://gb.lotusseeds.com/macie.jpg
However, Safari, Firefox and Oprea won't honor it no matter what.
This should work in those browsers too. But if not, you can safely use
the commented backslash hack for ie mac. The browser is dead and using
hacks for dead browsers is somehow safe.
maybe you need to set overflow:hidden; ?
Take a look at: http://phark.typepad.com/phark/2003/08/accessible_imag.html
Working on this site, I notice that there is an isue with class, span
class specificities that the above three browsers wont' honor and
which never happened before with other sites I did.
For example:
Despite the lower specificities for class, I would think the world
three most advanced browsers would honor my simple request without
telling them specifically that the '.lastpara' is the child of the
'p' element of descendant of 'content' div.
These browsers are right. And yes, it is because of the specificity.
#content p is more specific than .lastpara and therefore overrides the
padding value. You already found the cure, so simply use it, it's
correct.
regards
Martin
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
[WSG] Vertical align problem
Vertical align, it really works ? Example:style#box{widht:200px;height:200px}#box span{float:left}#box img{vertical-align:middle}/stylediv id=box
spanSome text/spanimg src="">/divAny idea ?Thanks
Re: [WSG] CSS Rollover Flicker
Hello Tee, You wrote: Thanks all for the pointers, I am trying the sliding doors method now. For other sites, I may have to use javascript preloader as going back to recreate images for menus can be quite a hassle. If that's the case, there's no need to use JS. Long ago, I had this problem and solved it by putting the background images in an insignificant part of the page, and giving the IMG tags attributes of width=1 height=0. It seemed to work. Cordially, David -- David Hucklesby, on 12/27/2005 http://www.hucklesby.com/ -- ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
[WSG] Dean Edwards IE7... just PNG support?
Hi all, Just wondering if anyone's had any luck with using JUST the PNG component of Dean Edwards' IE7 JavaScript? The full thing seems like overkill, because that's the only feature I really need. Alternatively, how does one go about getting alpha support for CSS background images? Not having a great deal of luck with this... Regards, Josh ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Dean Edwards IE7... just PNG support?
Joshua Street wrote: Hi all, Just wondering if anyone's had any luck with using JUST the PNG component of Dean Edwards' IE7 JavaScript? The full thing seems like overkill, because that's the only feature I really need. Alternatively, how does one go about getting alpha support for CSS background images? Not having a great deal of luck with this... Regards, Josh Josh, According to the specs for DE-IE7, you can specify a specific module: !-- compliance patch for microsoft browsers -- !--[if lt IE 7] script src=/ie7/ie7-core.js type=text/javascript/script script src=/ie7/ie7-graphics.js type=text/javascript/script ![endif]-- http://dean.edwards.name/IE7/usage/configure.html Pick and mix as you want. The graphics JS file should just be the PNG fix. Lawrence -- Lawrence Meckan Absalom Media Mob: (04) 1047 9633 ABN: 49 286 495 792 http://www.absalom.biz ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Dean Edwards IE7... just PNG support?
Josh asked: Alternatively, how does one go about getting alpha support for CSS
background images? Not having a great deal of luck with this...I could not get alpha support for CSS background images to work in IE. I tried pngbehaviour.htc (
http://webfx.eae.net/dhtml/pngbehavior/pngbehavior.html ) and various versions of Dean Edwards' IE7.Instead I use an alternative method.I use condional comments to feed IE6 and below an extra css which has
#DivWithBackground { background-image: none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enable=true, sizingMethod=scale, src='');
}Advatange you do not need _javascript_ or your server set up to serve .htc files as the correct mime type.You can find the method discussed in detail:
http://subtlegradient.com/articles/2005/11/30/get-ie-5-5-to-support-transparent-pngs-using-microsoft-chowhttp://www.daltonlp.com/daltonlp.cgi?item_type=1item_id=217
Read the comments sectionsFor alternative methodshttp://www.alistapart.com/articles/pngopacity/ also read the commentsFor more on MS Alpha image filter
http://msdn.microsoft.com/workshop/author/filter/reference/filters/alphaimageloader.asp-- Nick Cowie
http://nickcowie.com
Re: [WSG] Dean Edwards IE7... just PNG support?
Joshua, you wrote: Just wondering if anyone's had any luck with using JUST the PNG component of Dean Edwards' IE7 JavaScript? Aaron Boodman published Sleight a good while back. It has reportedly been adapted for background images by Drew McLellan: http://allinthehead.com/retro/69/sleight-of-hand (Google is your friend :-) Cordially, David -- David Hucklesby, on 12/27/2005 http://www.hucklesby.com/ -- ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Dean Edwards IE7... just PNG support?
Hmm, thanks. Should learn to RTF... website... or something :P HOWEVER! When I do that, IE6 with XPSP2 gives me security warnings and blocks it by default... then, it kills my typography (though positioning and image replacement and backgrounds all stay okay) whilst doing absolutely for PNG support (aside from breaking background-position: on one PNG-powered background image! but that's documented so no problems) Anyone else got security warnings from IE when loading individual modules of DE-IE7? Or is it just me/draconian security settings here? Can post example if desired... Josh On 12/28/05, Absalom Media [EMAIL PROTECTED] wrote: Joshua Street wrote: Hi all, Just wondering if anyone's had any luck with using JUST the PNG component of Dean Edwards' IE7 JavaScript? The full thing seems like overkill, because that's the only feature I really need. Alternatively, how does one go about getting alpha support for CSS background images? Not having a great deal of luck with this... Regards, Josh Josh, According to the specs for DE-IE7, you can specify a specific module: !-- compliance patch for microsoft browsers -- !--[if lt IE 7] script src=/ie7/ie7-core.js type=text/javascript/script script src=/ie7/ie7-graphics.js type=text/javascript/script ![endif]-- http://dean.edwards.name/IE7/usage/configure.html Pick and mix as you want. The graphics JS file should just be the PNG fix. Lawrence -- Lawrence Meckan Absalom Media Mob: (04) 1047 9633 ABN: 49 286 495 792 http://www.absalom.biz ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help ** -- Joshua Street http://www.joahua.com/ +61 (0) 425 808 469 ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Dean Edwards IE7... just PNG support?
Just tried with Sleight (which, incidentally, I'd read about before but forgotten existed!) and got the same security warning from IE6/XPSP2. =( Any suggestions welcome at this point! (Except for using GIFs/indexed transparency :P) On 12/28/05, Joshua Street [EMAIL PROTECTED] wrote: Hmm, thanks. Should learn to RTF... website... or something :P HOWEVER! When I do that, IE6 with XPSP2 gives me security warnings and blocks it by default... then, it kills my typography (though positioning and image replacement and backgrounds all stay okay) whilst doing absolutely for PNG support (aside from breaking background-position: on one PNG-powered background image! but that's documented so no problems) Anyone else got security warnings from IE when loading individual modules of DE-IE7? Or is it just me/draconian security settings here? Can post example if desired... Josh On 12/28/05, Absalom Media [EMAIL PROTECTED] wrote: Joshua Street wrote: Hi all, Just wondering if anyone's had any luck with using JUST the PNG component of Dean Edwards' IE7 JavaScript? The full thing seems like overkill, because that's the only feature I really need. Alternatively, how does one go about getting alpha support for CSS background images? Not having a great deal of luck with this... Regards, Josh Josh, According to the specs for DE-IE7, you can specify a specific module: !-- compliance patch for microsoft browsers -- !--[if lt IE 7] script src=/ie7/ie7-core.js type=text/javascript/script script src=/ie7/ie7-graphics.js type=text/javascript/script ![endif]-- http://dean.edwards.name/IE7/usage/configure.html Pick and mix as you want. The graphics JS file should just be the PNG fix. Lawrence -- Lawrence Meckan Absalom Media Mob: (04) 1047 9633 ABN: 49 286 495 792 http://www.absalom.biz ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help ** -- Joshua Street http://www.joahua.com/ +61 (0) 425 808 469 ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help ** ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
[WSG] Negative margins questions
I'm experiencing an issue with using negative margins that I've never had before, and it's only occurring in IE. I basically have a div container with a small padding added to it (.8em to be exact), and inside of it I have a series of paragraphs. I wanted to add horizontal rules between each paragraph and give the rules the effect of separating the paragraphs completely by giving it a negative left and right margin to break out of the padding. This worked nicely in FF, and doesn't work at all in IE. I also tried using an h1 instead of an hr (as a test) with basically the same CSS rules and the negative margins work beautifully in both browsers. Oddly though the the negative margin required on the h1 is half the size of the padding added to the container element, which I have no idea why that is? (Mainly because I'm an idiot) I've setup a test case for the issues I'm having: http://www.epiphanize.com/NegativeMarginsTest.htm You'll notice both the hr and h1 separators work nicely in FF, and only the h1 works in IE while the hr doesn't want to cooperate. If anyone could tell me the following: 1) Why isn't the negative margins working on the hr in IE while it works on other elements? 2) Why is the negative margins neccesarry for the h1 half the parent's padding, when the hr requires the full measurement to achieve the same effect? Thanks for your time, any help would be greatly appreciated. P.S. I've received answers from people saying to simply set the hr's position to relative, but that doesn't work. - Jonathan Carter ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
[WSG] Fieldset/legend semantics
I have recently been re-evaluating my thinking on the subject of designing semantic forms and the use of fieldsets has raised a few questions for me. What I'd like to know is: at what point does it become semantically correct to include a fieldset? (Presentational effects aside) My first thought is that any time you have two or more related fields, a fieldset could be effectively used to group them together so that the browser knows what goes with what, therefore making it more accessible for future cases. If this assumption is true, does that mean a fieldset element should ALWAYS be used anytime two or more form fields exist in association? That seems slightly overkill, but if it's semantic benefits are as aforementioned, then the extra work would be merited and certainly not in vain. This leads into my next question: should a legend always be included inside a fieldset, even if it's not going to be displayed (via display: none)? It seems like it would only make sense to provide the browser with an explanation of what the collection of form fields were purposed for, regardless if you're leveraging the default rendering it provides. I'd imagine audio browsers could use the legend element to provide a blind user with an explanation to what they could potentially fill out, and if such was the case, that would make the use of legends a great accessibility tool. I'd hate for the fieldset and legend elements to become abused to the point where they're carelessly thrown into markup without any second guessing, much like divs can be. But if their semantic purpose is close to what I've stated above then I'd certainly like to review how I could increase the overall accessibility of my form designs. If anyone could please provide some assistance in this matter, I would be extremely appreciative. Thanks so much. - Jonathan Carter ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Negative margins questions
G'day
I've setup a test case for the issues I'm having:
http://www.epiphanize.com/NegativeMarginsTest.htm
You'll notice both the hr and h1 separators work nicely in FF, and
only the h1 works in IE while the hr doesn't want to cooperate.
If the hr is only there for decorative purposes (i.e. no semantic
meaning), why not put 0 padding on the container and apply the
padding (and border-top or border-bottom) to the paragraphs
instead? No need for the hr element or negative margins that way.
CSS along these lines:
#Container {
padding: 0;
border: 1px solid #999;
}
#Container h1 {
background-color:#999;
font-size:1.5em;
margin:0;
padding:.6em;
}
#Container p {
margin:0;
padding:1em .8em;
border-top:1px solid #999;
}
Regards
--
Bert Doorn, Better Web Design
http://www.betterwebdesign.com.au/
Fast-loading, user-friendly websites
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
Re: [WSG] Negative margins questions
Thanks Bert,
I had a feeling someone was going to reply with that suggestion, and
you're right :) The whole test case I setup was merely to display the
point that the hr element was no cooperating with the negative margins.
I'm hoping more specifically for an explanation on why that is, not on
how to get the desired effect.
Bert Doorn wrote:
G'day
I've setup a test case for the issues I'm having:
http://www.epiphanize.com/NegativeMarginsTest.htm
You'll notice both the hr and h1 separators work nicely in FF, and
only the h1 works in IE while the hr doesn't want to cooperate.
If the hr is only there for decorative purposes (i.e. no semantic
meaning), why not put 0 padding on the container and apply the padding
(and border-top or border-bottom) to the paragraphs instead? No need
for the hr element or negative margins that way.
CSS along these lines:
#Container {
padding: 0;
border: 1px solid #999;
}
#Container h1 {
background-color:#999;
font-size:1.5em;
margin:0;
padding:.6em;
}
#Container p {
margin:0;
padding:1em .8em;
border-top:1px solid #999;
}
Regards
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
Re: [WSG] Dean Edwards IE7... just PNG support?
Joshua Street wrote: Hmm, thanks. Should learn to RTF... website... or something :P HOWEVER! When I do that, IE6 with XPSP2 gives me security warnings and blocks it by default... then, it kills my typography (though positioning and image replacement and backgrounds all stay okay) whilst doing absolutely for PNG support (aside from breaking background-position: on one PNG-powered background image! but that's documented so no problems) Anyone else got security warnings from IE when loading individual modules of DE-IE7? Or is it just me/draconian security settings here? Hi Joshua: I haven't tried using just individual modules but when i use the whole thing I get the warning locally (very aggravating - and, of course, its an IE issue, nothing wrong with Edwards' stuff). anyway, when its loaded on the web, i don't get the warnings - for me, and i assume, anyone else. Can post example if desired... i wonder if its different for individual modules though, somehow. would like to see your example. best Donna ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Negative margins questions
G'day I had a feeling someone was going to reply with that suggestion, and you're right :) The whole test case I setup was merely to display the point that the hr element was no cooperating with the negative margins. I'm hoping more specifically for an explanation on why that is, not on how to get the desired effect. Ah, OK. Well, can't help you on the first question - maybe Microsoft can. But the question about h1 is easy. You use relative padding (0.8em) - relative to the text size of the element it is applied to. So the margins on the h1 are calculated by the (larger) text size of the h1, not its parent's text size. Hope that makes sense - it does to me :-) Regards -- Bert Doorn, Better Web Design http://www.betterwebdesign.com.au/ Fast-loading, user-friendly websites ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
