colored scrollbars only work in IE, and then probably dependant on the doctype declaration (I'd hope anyway ). same way as with the body element where it (used to be) most commonly used... see the gurusnetwork colored scrollbar generator widget thingie, which is no longer findable apparently, so hows about this then :http://www.maketemplate.com/scrollbar/
Really? Thanks, I'll check it out.
Say, I am having more troubles with the following selector(s)...
A DIV, a DIV within this DIV. Outer DIV ID = HEADER. Inner DIV class = bg_image1. The bg_image1 class is not effective. Here is this HTML followed by the CSS:
Reason for the DIV within DIV, is HEADER is defined with a background and so is DIV with class of bg_image1 (i'm creating layers). The following selector does not work for class bg_image1 (no background appears)
No, your link was great! I needed more information, and I'm still not sure which is the correct one to use, but I wandered over there for more information. I think I linked there from the W3C site...
I don't understand your previous message, quoting my code... Is that a solution of some sort?
..Inner Div was sqwashed, it needed height definition! (problem solved).
New Problem:
How do you select a div element who's ID is "MIDDLE" with a class of "bg_Image1"?
Reason? CSS has 2 definitions for #MIDDLE, first definition when #MIDDLE has class of "bg_Image1" and second definition when #MIDDLE has class of "bg_Image2".
I am dynamically setting the class for this element, the consistent part is that the element's ID is #MIDDLE.
Why don't you simply put the header and footer parts in position:fixed; and add the margin-top and margin-bottom of the content area accordingly ? then add a few lines of JavaScript for the browsers that fail to support that 8yo standard.
FWIW Opera apply IE's proprietary scrollbar styling.
I just tried your page in O9, the footer is at the bottom of the page, not at the bottom of the window. In FF 1.5.0.4 there's a small gap after the footer, which makes the page have 2 vertical scrollbars : 1 for the whole page and 1 for the content area .... teh horror.
quote: Karl said:
How do you select a div element who's ID is "MIDDLE" with a class of "bg_Image1"?
Reason? CSS has 2 definitions for #MIDDLE, first definition when #MIDDLE has class of "bg_Image1" and second definition when #MIDDLE has class of "bg_Image2".
I am dynamically setting the class for this element, the consistent part is that the element's ID is #MIDDLE.
Let's clarify: There are *not* 2 definitions for #middle; there is one definition for #middle, and also a definition for .bg_Image1 and one for .bg_Image2.
#middle in the CSS defines the attributes for anything with id="middle" in the HTML.
.bg_Image1 in the CSS defines the attributes for anything with class="bg_Image1" in the HTML. And so on.
So define the basic attributes for #middle in the CSS - the things that won't need to change depending on the class.
Then define the things specific to the classes using the .bg_Image1 and .bg_Image2, making sure they are listed after the definition of #middle in your CSS.
You don't actually determine in the CSS that the element will have both an ID and class, or that it will have multiple classes. You define each separately, and if both are declared in the HTML, then both sets of attributes will be applied (with those listed last in the CSS superceding any conflicting setting which precede them).
For the record: those are terrbile id and classnames. They offer no meaningful hint as to their purpose, and the combination of underscores and capital letters is just begging for typo's
As for the semantic names, that's simple : If an ID/className does not make sense or say where the content is instead of what it is, it is wrong, wrong, wrong.
I've seen an ID used several times in your markup. ID are unique.
You should download the specifications of HTML or XHTML, and CSS. They all are available in HTML, and PDF. Having them within hand range proved to be usefull.
To expand slightly: the less mark-up you have, the better off you are. Adding an extra div for the sake of specifying addtional styles is pretty inefficient.
To make sure I'm being clear: in your markup, you would have soemthing like:
code:
<div id="myId" class="myClass">content...</div>
in your CSS, you would have:
code:
#myId {
styles...
}
.myClass {
styles...
}
Ok, as far as class and id names -
#head/#header, #foot/#footer, are IMO perfectly suitable. Though they do imply position, they are also standard terminology which communicates prupose. In this particular case, something more like #logo and #navigation might be more suitable though.
#middle is no good. It tells you nothing of purpose or structure, only position. This is bad because the goal of having HTML and CSS is to separate your style and your content. "middle" in this context is meaningless. A name of #content would be far more suitable.
.bg_Image1 is totally useless. It tells us nothing at all. What is the purpose of the two separate background images? Take that purpose and incorporate it into the class name.
Following these kind of guidelines will help ensure that 1) your markup makes sense and 2) in the future, your markup will remain valid even if the styling needs to change drastically.
Sorry for getting back to scrollbars when everyone's long done with them, but I thought I'd give the missing link to this fwiw:
quote: JKMabry said:
colored scrollbars only work in IE, and then probably dependant on the doctype declaration (I'd hope anyway ). same way as with the body element where it (used to be) most commonly used... see the gurusnetwork colored scrollbar generator widget thingie, which is no longer findable apparently
DL-44: I was hoping to reuse the class .bg_Image1 and .bg_Image2 names (not the actual image). And based on the ID'd element they were grouped with, the class would be different - in this case, I'd have a different background image for the class. So (example):
The CSS markup for each would define a different background. And then (the magic) based on the state of the web application, the next time the user views the page each of the above element are defined with "bg_Image2"... (this is what is currently happening on the site listed).
However, what I am hearing is that my class names should be named better, so how about for bg_Image1 we call it "Bright_Background", and then for bg_Image2 we call it "Dull_Background" for this is exactly the purpose of these two, a bright "vivid" display and then a very dull display....
EXAMPLES: (page is a bit whacked) bright bg dull bg
Semantic Naming Conventions: I kinda get it... there needs to some sort of a semantic name validator! I'm big on reuse, so the names I chose above stem from the intent to "reuse" the background name. I will continue to work on these naming conventions, there are some great tips here!
DLL, taking your advice and nameing the MIDDLE region to MAIN_CONTENT. How's that sound? I'll rename the backround images to bright_background and faded_backround.
Kuckus... I think I gave up on coloring the scrollbar... next I'll be looking for the javascript to wire this up!
Karl..
Karl, have you tried setting all the scrollbar styles for the <html> tag instead of the <body>?
Certain doctypes seem to prevent it from working with <body>, but not with <html> -- I know I had to do this on a "XHTML transitional"-doctyped site of mine.
Kuckus, I did have success with previous scrollbar coloring, but chose to not persue this, since it is IE only. Instead, I'm not worrying about the color, but eventually will dig up the code (javascript) necessary to write my own.
I gave up on the attempt to "reuse" class names... and I'm happier for it! (but was fond of the idea)... have a look at the page(s) now and let me know what you think!
Notice, that all the transparent images are in 32bits PNG thus they'll look like poop in the user agents that don't support the 10 years old PNG open standard.
Using a pattern matching selector eliminates the need for a class. Add to that that the alt attribute is mandatory and used in case images are disabled in the user agent, so why not using it ?
I haven't added any quircks for non standards browsers, except the attribute:value !important; attributetherValue; trick to fix the IE6- broken box model.
Also, I've not used any Image Replacement technique. I didn't see any real need for it in this very case. But normally it should have been used on the AH! images and the navigation, to make sure the markup is proof to any alteration of the design/visual identity. I haven't found yet a technique that doesn't require extra markup to remain accessible with CSS on and Images off. There must be one.
If you haven't yet, I encourage you to download the specs of CSS2 and XHTML. They are really really really useful. They, as well as the specs of ECMAScript and JavaScript are ALWAYS on my desktop. ... heck and if I still miss something I can ask the developers/QA people who have worked on their implementation in Opera
posted 07-11-2006 06:56
). same way as with the body element where it (used to be) most commonly used... see the gurusnetwork colored scrollbar generator widget thingie, which is no longer findable apparently, so hows about this then :http://www.maketemplate.com/scrollbar/
therValue; trick to fix the IE6- broken box model.
