Hi all, I have a serious problem with a website I'm making. All of a sudden, in firefox the css file just isn't being picked up or it appears to just suddenly disappearred!! It seems ok in i.e but I haven't tested it that much. The problem is solved if I re-upload the css file , for a little while, but then it disappears again. If anyone has the time to take a look for me, here are the links (I'm not charging much for the site because I'm only just starting to get to grips with css, so don't be too judgemental please ) .... http://www.kitchen-updates.com/natural.html css file - http://www.kitchen-updates.com/kitch-style2.css note: The index page has different css file which seems to be ok, it's the rest of the website where it's happening. If anyone could help me fix this issue I would be so grateful. I have to meet up with the boss on Friday
I was unable to replicate your issue. The pages seem to be fine, with style sheets applied. For IE's sake, I would not use any dotted borders as on the menu drop downs. cheers, gary
Hi Gary, thanks very much for taking a look. I've been fiddling around with it all night and found i had some validation problems, which I am still fixing. Maybe that caused a problem. I'll just have to keep my eyes peeled to see if it happens again. The trouble with getting someone to see my problem was that it was ok some of the time - and would then just suddenly behave as if the css file wasn't on the server at all very strange. I wondered maybe if it was because my css file was too big but you'd have spotted that straight away. Thanks again for taking a look - much appreciated PS Yeah it's a shame about the dotted lines but it was a bit too bland without them. Any suggestions on replacing the dotted borders with an alternative?
Use a solid border with less saturation to simulate the 50% coverage of the dotted. Or, use a color that is only slightly darker than the element's bg color. IE6's rendering is just awful and does not support the image created by the page(s) as a whole. cheers, gary
Thanks for your reply , that sounds intersting How do I manipulate the saturation? I've never heard of that before! Also, if anyone could possibly check this link out on ff and give me some feedback ... http://www.kitchen-updates.com/natural.html because right now - in my browser, it looks as if there isn't a stylesheet attached at all - again, sigh> It could be an issue with my pc browser, I'd love to know if anyone else gets the same problem because I haven't got access to another pc to check that possibility out.
I still cannot replicate your problem. In Firefox 2.0, the stylesheet is applied just fine. Saturation, very loosely, is the difference between the pure hue and the gray formed by its own self and the other colors. Here's a demo; each gradient has the same saturation as the other, end to end. The difference lies in the luminosity; one gradient is brighter than the other. The saturation is about 39 on the left, and 116 on the right. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" lang="en"> <head> <meta name="generator" content="HTML Tidy for Linux/x86 (vers 1st August 2004), see www.w3.org" /> <meta name="editor" content="Emacs 21" /> <meta name="author" content="Gary Turner" /> <meta http-equiv="content-type" content="text/html; charset=UTF8" /> <title>Messin' With Saturation</title> <style type="text/css"> /*<![CDATA[*/ html, body { margin: 0; padding: 0; } ul { margin: 20px auto; padding: 0; list-style: none; border: 5px solid #f77; display: table; } ul#a { border-color: #b33; } * html ul {width: 675px;} li { float: left; width: 75px; height: 50px; text-align: center; } #b1 { background-color: #f77; } #b2 { background-color: #f88; } #b3 { background-color: #f99; } #b4 { background-color: #faa; } #b5 { background-color: #fbb; } #b6 { background-color: #f66; } #b7 { background-color: #f55; } #b8 { background-color: #f44; } #b9 { background-color: #f33; } #a1 { background-color:#733; } #a2 { background-color:#833; } #a3 { background-color:#933; } #a4 { background-color:#a33; } #a5 { background-color:#b33; } #a6 { background-color:#c33; } #a7 { background-color:#d33; } #a8 { background-color:#e33; } #a9 { background-color:#f33; } /*]]>*/ </style> </head> <body> <ul id="b"> <li id="b5">#fbb</li> <li id="b4"><!----></li> <li id="b3"><!----></li> <li id="b2"><!----></li> <li id="b1">#f77</li> <li id="b6"><!----></li> <li id="b7"><!----></li> <li id="b8"><!----></li> <li id="b9">#f33</li> </ul> <p>As you move to the right, there is less gray. The amount of red is fixed.</p> <ul id="a"> <li id="a1">#733</li> <li id="a2"><!----></li> <li id="a3"><!----></li> <li id="a4"><!----></li> <li id="a5">#b33</li> <li id="a6"><!----></li> <li id="a7"><!----></li> <li id="a8"><!----></li> <li id="a9">#f33</li> </ul> <p>In this, the gray is fixed and red is increased as you move right.</p> </body> </html> Code (markup): cheers, gary