CSS Q&A Part 1
I often answer CSS questions for people on yahoo. Here are some of the more interesting questions, I thought I'd share. Hopefully some of them may help you as well. Also if you have a specific question you'd like to ask me, feel free to do so here. Who knows, I might even add to a future Q&A article if the question is interesting enough.
Q: I have a website on freewebs that i've made completely myself in HTML, the only problem is i'm using frames (a header, sidebar, and main page), which i'm personally okay with; it give the site uniqueness. But i need some help making CSS coding for getting the same effect all on one page. CSS for can I use for non-scrolling header and sidebar menu?
A: I believe the property your looking for position:fixed;
For example, if you have <div id="leftnav"></div> in your code, then you can put #leftnav { position:fixed; } in your CSS, and then that div will not scroll when the rest of the page does.
So people use this to emulate frames. Only problem is, IE6 and lower doesn't support the "fixed" value for the position CSS property. But it'll work in IE7, Firefox 1.5, and Firefox 2.
Q: Not being particularly Windows savvy (I design and develop on a Mac), how do I test websites in IE6 now that I have IE7 installed? Unlike my Mac, it seems like I can't run different versions of browsers. I've got Firefox (of course), but has anyone found a way running both IE browsers without resorting to buying two Windows machines?
A: Downlaod Trendosoft's Multiple-IE installer. It's highly recommended, and works well. I use it myself. with it you can run IE5, IE5.5, IE6, and IE7 all side-by-side.
http://tredosoft.com/Multiple_IE
Q: How do i change the border color of the <select> tag? It only seems to change the color of the input text.
A: This depends upon the browser and/or OS which your using. For some browsers, the <select> element may be rendered by the clients OS, and not the browser at all.
Sometimes, certain elements appearance can not be controlled by CSS at all. But these "widgets" as they're called, vary from browser to browser. For example, you can alter the look of your <select> fields in Firefox (and to some degree in IE) on windows, but you can't do anything to them in Safari on Mac OS X.
Q: Hi there. I'm learning CSS at the moment and need some help with the lingo. (Been looking at tuts on the net and can't find an answer to this one!) :o(
Say for example I've got the following defined:
.buttonbanner{
position:absolute; top:20px; left:50%;
width:250px;height:100px; z-index:2;
/* snipped, for brevity */
}
- any way of turning the div itself into a clickable link? and
- any line I can add to make it change colour when the mouse is rolled over it?!? or does that happen in the
part in the body text?
A: Keep in mind, that the :hover pseudo class only works on anchors <a> inside IE6 and lower. So for people who still use IE6 (and there are millions) .buttonbanner:hover may not be the best solution, unless you have <a class="buttonbanner"> in your code.
As far as semi-transparency goes, use this:
.buttonbanner {
-moz-opacity: 0.8;
opacity:0.8;
filter: alpha(opacity=80);
}
-moz-opacity is proprietary to mozilla (firefox) and filter is proprietary to IE. The opacity property is the W3C recomendation, but was not supported in the older versions of IE and Firefox.
Q: Why can't you use CSS to redefine tags? What if I wanted to have a table and use to immitate the <TD> tag? Style sheets sure can be fickle.
A: You can't use CSS to redefine tags because thats not what its for. CSS is supposed to be used to display "presentational" aspects of a page. borders, background-images, margins, padding, width, heights, etc.... things like this.
Now, in the future, you will be able to use it to "replace" elements, but this is not redefining anything.
For example, <h1> element will always be a <h1> element. Unless you write your own DTD. It's a XHTML (or XML's) Document Type Definition that tells a browser *HOW* to render certain elements/attributes, and how they should behave.
CSS is not "fickle", its just that different browsers have all these varying "quirks" which make the life of CSS coders, such as you and I, a little more difficult. Not all browsers fully support the W3C standards or DOM. IE6 especially, has its own proprietary way of rendering stuff, with various degrees of ugliness like hasLayout and so forth.
Mar 30, 2007
Comments
This article hasn't been commented yet.
Write a comment
* = required field