Mon, 2003-11-24 22:42
So my current job is to find a way to hide all my css from Netscape 4.x and similar non standard browsers.
Along with that I can't have a the "Flash of Unstyled Content" (FOUC) because the target audience is 98% IE 6.0.
I've been [url=http://www.csscreator.com/css-node/687 about this for some time and been working on it for longer than that.
I've done all the tricks like at the http://www.thenoodleincident.com/ and the one at the http://www.bluerobot.com/. I've done so many searches on this I think Google has me blacklisted and yet....nothing. I'm still getting the FOUC!
Anyone? Anyone? Any ideas? Please?
Thanks!
p.s. and not only all this, BUT the styles are leaking through to netscape 4.8!!!!!!!!!! (i think the paralysed brain thing is contagious.!)
Mon, 2003-11-24 23:03
#1
i can't stop the FOUC
Why not get rid of the @import and just have
<link rel="stylesheet" type="text/css" href="style-sheet.css" />
Regards
Day
Tue, 2003-11-25 09:05
#2
i can't stop the FOUC
becuase i must hide the css from non standard browsers
Tue, 2003-11-25 09:26
#3
i can't stop the FOUC
Hi moody,
Have you tried using link to link to a css page that imports the true styles?
Can you explain what you have tried so we might make other suggestions.
Mon, 2007-11-05 19:25
#4
i can't stop the FOUC
Ok, here it is, but please don't laugh. It's a hybrid and due to time constraints and having others on the development team who know nothing about standards, its partial tables and that is only on the right window. Iâve created this template for you: URL no longer available
That does not FOUC and that is what we're working with. But it's passing the css on to "non standard" browsers. Itâs minor stuff, but still it ought not to, yea? My test for this is Netscape 4.8 and URL no longer available doesnât pass the css but FOUCs me everytime.
Of course this is going to FOUC you:
<head>
<title>Webpage Title</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css" media="screen">
@import url("cssp.css"); /* this is ideally mosty for the layout */
@import url("main.css"); /* this is ideally mosty for fonts and formatting and such */
@import url("student.css"); /* this is server determiined based on login */
</style>
<!-- here is a some serverside code for cache demons -->
</head>
but if we change it to this:
<head> <title>Webpage Title</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <link rel="stylesheet" type="text/css" media="screen" href="fouc.css" /> <link rel="stylesheet" type="text/css" media="screen" href="student.css" /> <!-- here is a some serverside code for cache demons --> </head>
and add the fouc.css that Iâve brazenly taken from http://www.thenoodleincident.com and put in the style sheets like this:
@import url("cssp.css");
@import url("main.css");
then it ought to work. But no.
Before you reply and tell me âItâs not FOUCing me!â, keep in mind that there is a bit of server side code that I canât reproduce for you there. In the head tag this is what you don't see:
<!--- Bye-Bye Caching ---> <cfheader name="Expires" value="-1"> <cfheader name="Pragma" value="no-cache"> <cfheader name="cache-control" value="no-cache, no-store, must-revalidate">
This also repeats at the bottom of the page:
</body> <head> <!-- this is here as someone's idea as a double security to cache demons --> <cfheader name="Expires" value="-1"> <cfheader name="Pragma" value="no-cache"> <cfheader name="cache-control" value="no-cache, no-store, must-revalidate"> </head> </html>
And if any of you know what this is about and have a better idea how to get around the double header, then your thoughts are most welcomed.
(also if any one knows how's what it is about my links that doesn't make this page validate http://validator.w3.org/check?uri=http%3A%2F%2Firenology.org%2F001%2Fdebugfouc.html then great!)
So, what youâve learned here is that my requirements are not nice. No caching, no FOUCing, and no css passed on. Iâm in hell!
Iâve done the adding of the link elements. I added six of them once in-between and scattered all throughout the head element. I also spiced it up with some empty script tags. Yet, nothing.
O and hereâs a side ticker for you: I donât see FOUC on my machine, yet if I go to another machine I see the FOUC. (Yes, Iâm having fun with this acronym.) And to add to that the whole development team (eight of them) keep telling me each time they see the FOUC. Iâm the junior member on the team, yet Iâm the one responsible for the XHTML/CSS conversion. After reading blogs and articles from the likes of the http://www.mezzoblue.com/secondvoice and http://www.9rules.com/cssvault/, they say, âYea, we want that! And youâre going to give it to us.â Then they see the new Sprint PCS site and say, âHey Moody, why canât you being doing that kind of stuff for us?â (O and Iâm 5000 km away from them.) (O and I think Iâm going to start my own blog, soon.) (O, but then I have to start learning something like movabletype or something like PHP or something!)
Iâm sorry for venting on this forum like this. Itâs not yaâlls fault. But it is if you donât help me! (ad humour and jokeâ¦.haâ¦haâ¦haâ¦.just kidding.) This post is way too long to make sense anymore, so I will stop here and anxiously await the brilliance and the knack that exist in all you masterminds in the form of replies!
Cheers!
Tue, 2003-11-25 19:38
#5
i can't stop the FOUC
Moody
I would suggest changing the location of each import and link to see iff the read order of the browser helps
try
link
@import
and then
@import
link
If that does not work then you have to go back to basics and just use link with hacks with the stylesheet to hide from non standard browsers.
For example this- http://css-discuss.incutio.com/?page=CaioHack
At the end of the day, its the 95% that use IE that should be catered for.
Here is the whole list of different hacks http://css-discuss.incutio.com/?page=CssHacks
and somehting else that may help http://centricle.com/ref/css/filters/
Regards
Day
Tue, 2003-11-25 19:50
#6
i can't stop the FOUC
Hi moody,
Validating looks like the easy part, just change "&" in links to "&" that should get id of most of your errors.
Possibly it's not FOUC that your experiencing well at least I didn't when looking at your site. It may just be the tables waiting for all the content before loading. Try adding this to your CSS.
table{table-layout:fixed;}
That should help the tables load a little quicker in IE, as they don't wait for all the content just base their dimensions on the first row.
It may cause problems if other rows have wider content but give it a try.
Hope that helps
Tue, 2003-11-25 19:52
#7
i can't stop the FOUC
Hi moody,
Validating looks like the easy part, just change "&" in links to "&" that should get id of most of your errors.
Possibly it's not FOUC that your experiencing well at least I didn't when looking at your site. It may just be the tables waiting for all the content before loading. Try adding this to your CSS.
table{table-layout:fixed;}
That should help the tables load a little quicker in IE, as they don't wait for all the content just base their dimensions on the first row.
It may cause problems if other rows have wider content but give it a try.
Hope that helps
Tue, 2003-11-25 20:41
#8
i can't stop the FOUC
I'm not very up on N4 issues. I presume you're saying that import will not work in N4?
In that case use <link...> to link to your main css file. And in that file have no rules but link to all of the others with @import. That's what I use, and I have no FOUC on my site. And N4 should ignore those imports and will use an empty stylesheet.
edit: I see tony has already suggested this. Have you tried it?
- seb
Fri, 2003-11-28 12:04
#9
i can't stop the FOUC
Tony!
By god I think you've stuck a nail in my head. I won't be adding the selector just yet because I'll be getting rid of those tables.
In the meantime, I'm slapping my face from basic stupidity because my NN4 issue was caused by my server generated/decided CSS not being @import'ed.
Now I can work on getting rid of those right tables and ironed out in XHTML/CSS, and then my header will look something like this:
<head> <title>DEBUGGGGGGG</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <link rel="stylesheet" type="text/css" media="screen" href="/CSS/fouc.css" /> <style type="text/css" media="screen">@import "/CSS/<cfoutput>#stylesheet#</cfoutput>";</style> </head>
But what's this about changing "&"s in links to "&"s? Is this what everyone else does besides me? I tried this locally and it seems to work just great. Is there anything I need to know about this down the road?
Thanks for pointing things out to me, folks!
Fri, 2003-11-28 21:10
#10
i can't stop the FOUC
Hi moody,
Yes everyone will change "&" to "&" or it's numeric entity equivalent "&" if they want to validate their site.
They need to be used throughout the whole document not just links.
Here are a couple of other common ones
< : < less than. > : > greater than. " : " quotation mark. : space.There are many more, do a quick search on "character entities" and you will find pages with list of the entities to use.
Sat, 2003-11-29 15:27
#11
i can't stop the FOUC
This is a real easy way to clean up those URLs:
http://www.hivelogic.com/urlcleaner.php