Hey all. As far as I know, you can't set the scrollbar colors of Gecko-Based browsers like FireFox. However, I did set these colors in IE, and it worked fine. At some point, I made some links that open pop-up-like windows, and here is my problem: Whereas in IE everything was perfect, FireFox generated an error, telling me all the 'Scrollbar-Face-Color' and other scrollbar coloring commands were illegal. This happened only in javascript pop-up windows - in the main window, FireFox simply ignored these commands. How can I fix this? Thanks in advance, Dan.
Don't try to set those values in javascript. You didn't post your js source, so how are we supposed to answer? This topic belongs in a javascript forum rather than css. cheers, gary
The following link: <A Class="Mlink" Href="javascript:" onClick="window.open('Archive/IV.Html','IV','width=750,height=500,resizable=0,scrollbars=Yes,status=0')"> Code (markup): opens a window (IV.Html) with the following code: <Link Href="../../Design.Css" Type="Text/Css" Rel="Stylesheet" /> Code (markup): which is related to a stylesheet with the following commands: Body { Scrollbar-Face-Color: #404040; Scrollbar-Track-Color: #252525; Scrollbar-Arrow-Color: #252525; Scrollbar-Highlight-Color: #404040; Scrollbar-3dlight-Color: #252525; Scrollbar-Shadow-Color: #404040; Scrollbar-Darkshadow-Color: #252525 } Code (markup): I think it's a css issue, since the problem happens because of a css code, and only in a specific broswer.
It's a css issue only in that you're using invalid properties and values. I haven't had this problem because, 1) I keep my css valid (with rare exception due to compelling reason), and 2) I would never, ever use a javascript expression to replace an html link. If you just must trick up the scrollbar, feed it to IE only in a conditional comment. You did not post the exact javascript error that you're receiving. That's basic debugging 101. cheers, gary
That's exactly what I'm trying to do. Any further explanation as of how to do it would be great. And for the record: 1) I have no idea what's not valid with my css. Everything but FireFox either reads it or ignores it. 2) I replace HTML links with javascript expressions because I want to set the exact size of the pop-ups. The error, if it's important, is this: Warning: Unkown property 'Scrollbar-Face-Color'. Declaration dropped. Code (markup): ... A thousand times.
There are two ways to feed CSS to IE. The way Gary mentioned, IE Conditional Comments, might be the easiest way since the hacks for IE6 and 7 are different... the advantage to using hacks in the CSS is they ony get mentioned once. Otherwise you have IE-only stylesheets (I personally don't like extra stylesheets when one will do). Microsoft recommends the Conditional Comments. They are HTML comments and look like this: <!--[if lte IE 7]> stuff, either html or using <style> tags and then CSS inside them like normal <![endif]--> Code (markup): You can in your case just say "if IE" but in my example I'm making sure I don't affect the future IE8 since it's supposedly going to understand the display: table property... anyway the bad thing is that they need to be on very HTML page or if this page is being generated in chunks like PHP includes then you'll just have them in the part containing your <head>. Most people stick these in the <head> of the HTML document if they are listing IE-only CSS styles. Otherwise, your styles could sit in the normal CSS with IE hacks in front of them: * html body { Scrollbar-Face-Color: #404040; Scrollbar-Track-Color: #252525; Scrollbar-Arrow-Color: #252525; Scrollbar-Highlight-Color: #404040; Scrollbar-3dlight-Color: #252525; Scrollbar-Shadow-Color: #404040; Scrollbar-Darkshadow-Color: #252525; } *+html body { Scrollbar-Face-Color: #404040; Scrollbar-Track-Color: #252525; Scrollbar-Arrow-Color: #252525; Scrollbar-Highlight-Color: #404040; Scrollbar-3dlight-Color: #252525; Scrollbar-Shadow-Color: #404040; Scrollbar-Darkshadow-Color: #252525 } Code (markup): (IE6, then IE7) Your scrollbar styles are invalid. it doesn't mean that they don't work. It means they were never entered into the Standards which every browser should follow. Proprietary (works for one company) values will never validate. An example of a Firefox/mozilla one is the "-moz-inline-box" property. Also, CSS3 things do not validate with validators that are looking for CSS2.1 features. it doesn't mean that they dont work or that you can't use them, but one has to always be careful that they don't fux0r with working code. It's a Bad Form thing to replace the href in a link with Javascript. It basically disables the link. Not everyone in the world can or wants to use Javascript, and a page that cannot fuction without JS is either broken, or actually an application (like many bank login pages). Since there are more accessible ways to do what you want, we will always recommend those. Html should do what HTML does: mark up the content (and perform basic browser functions that have been built into HTML-reading browsers, like following an href). CSS should be kept separate and used for styling pages and adding some presentational behaviours ( :hovers like tooltips and whatnot, including the addition of generated content with :after and :before). Javascript should also be kept separate, and referenced as external files in the <head> of the document (if you have Event listeners and a loader) or they could sit referenced in script tags in the HTML somewhere after the element you're targetting (since it's multiple links on your page, you could set it at the bottom of the page: <a class="Mlink" href="Archive/IV.Html">name of link</a> ... <script type="text/javascript" src="annoyingpopups.js"></script> </body> </html> anoyingpopups.js (which is stored in the same folder as the HTML) will have everything you had in the href: set the a's as variables add your onclick stuff (btw, while I still don't know any Javascript, I know you don't HAVE to say window.open cause open already works in the document so you CAN just "open" if you want) like that, so the HTML you're affecting is surely already loaded onto the page. This way, those without or with limited Javascripting abilities still have use of the link, just not with all the pretty BS everyone else gets.
Use conditional comments to hide the IE stuff from modern browsers, and the main stylesheet from IE. In IE's stylesheet, you'll import the common stylesheet. For example, the common stylesheet might look like this: /** test-common.css **/ html, body { font: 100% verdana, free-sans, sans-serif; margin: 0; padding: 0; background-color: white; color: #040; } p { font-size: 1em; margin: 1.2em 1.2em 0; } h1 { font-family: serif; text-align: center; } hr { margin: 1.2em 1.2em 0; } address, #ts { font: italic .8333em/1.44 serif; margin: 1.44em 1.44em 0; } address { float: left; } #ts { text-align: right; } Code (markup): The IE stylesheet will look like this: /**ie proprietary overrides**/ @import url("test-common.css"); html, body { Scrollbar-Face-Color: #404040; Scrollbar-Track-Color: #252525; Scrollbar-Arrow-Color: #252525; Scrollbar-Highlight-Color: #404040; Scrollbar-3dlight-Color: #252525; Scrollbar-Shadow-Color: #404040; Scrollbar-Darkshadow-Color: #252525; } Code (markup): Notice the @import at the top. Notice, too, in the demo html (target page) below, the conditional comments around the links to the stylesheets. The parent page uses only the common css. The javascript is moved out of the html. In this demo, I left it in the head, but in practice, it would live in its own file. The js walks through the page looking for all "a" elements. It then asks if the anchor has a class named "popup". If it does, an onclick event handler is added to the link, and the normal html handling is overridden. As Kat has said, you must make any bells and whistles degrade gracefully for anyone not supporting your favorite thingy. Further, it is simply good practice to separate structure, presentation and behavior (html, css and javascript) as much as possible. Ideally they would be orthogonal, crossing paths only in the DOM. Parent page: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta name="generator" content= "HTML Tidy for Linux (vers 6 November 2007), see www.w3.org" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>test</title> <link href="test-common.css" type="text/css" rel="stylesheet" /> <script type="text/javascript"> //<![CDATA[ function popUp (winUrl) { window.open(winUrl,"IV","width=750,height=500,scrollbars=yes,status=0"); } window.onload = setupLinks; function setupLinks() { if (!document.getElementsByTagName) return false; var links = document.getElementsByTagName("a"); for (var i = 0; i < links.length; i++) { if (links[i].className == "popup") { links[i].onclick = function() { popUp(this.getAttribute("href")); return false; } } } } //]]> </script> </head> <body> <h1>CC Test</h1> <p>Opens a popup in javascript enabled browsers. Non-js browsers will simply follow the link. <a href="test-target.html" class="popup">Target page</a></p> <p>The pages will read an IE stylesheet + the common stylesheet if user has IE. Users with modern browsers will get only the common stylesheet.</p> <hr /> <address> gary turner <br /> czar at <a href="http://gtwebdev.com/">gtwebdev.com</a> </address> <p id="ts"><!-- hhmts start --> Last modified: Mon Sep 8 02:55:02 CDT 2008 <!-- hhmts end --></p> </body> </html> Code (markup): And, the popup page: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta name="generator" content= "HTML Tidy for Linux (vers 6 November 2007), see www.w3.org" /> <title>popup target page</title> <![if !ie]> <link href="test-common.css" type="text/css" rel="stylesheet" /> <![endif]> <!--[if ie]> <link href="test-tricked-up.css" type="text/css" rel="stylesheet" /> <![endif]--> </head> <body> <h1>Target page</h1> <hr /> <p id="ts"><!-- hhmts start --> Last modified: Mon Sep 8 01:17:43 CDT 2008 <!-- hhmts end --></p> </body> </html> Code (markup): cheers, gary