CSS question (yes, again)

[Debitt]

I haven't coded a CSS stylesheet in what seems like an eternity, and like I told my friend "it's amazing how many things you forget in 5 months." I've gone from being able to code a stylesheet with my eyes closed to forgetting how to put in even the easiest parts of the code. T_T; Right now I can't get my links to flip vertically when you mouse-over them.

I've always had a bit of trouble with "filter" and "text-transform" properties, and I usually just work about them, but right now I REALLY want these to work. My code's below. T_T; any help would be appreciated.

Code: Select all

<style type="text/css">
<!--
DIV{font-family:verdana; font-size:10pt; color:#696E5F;}
A:link{font-family:verdana; font-size:10pt; color:#696E5F; text-decoration:none;}
A:active{font-family:verdana; font-size:10pt; color:#696E5F; filter:flipv; font-style:none}
A:visited{font-family:verdana; font-size:10pt; color:#696E5F; text-decoration:none}
A:hover{font-family:verdana; font-size:10pt; color:#696E5F; filter:flipv; font-style:none;}--></style>

[shooraijin]

Well, what are you trying to accomplish with filter? Filter is an IE extension, and not standard CSS. There might be a more standards-compliant way of accomplishing it.

[Jman]

*Twitches* Too much...CODE!,
Sorry I just had to say that as I have no understandment of CSS but its great your trying to Learn Kokoro

[Debitt]

I was trying to get the text in a link to flip upside down when you hover a mouse over it. I did manage to figure out what was wrong with my code

Code: Select all

A:hover{font-family:verdana; font-size:.7em; color:#696E5F; filter:flipv; height:5; font-style:none;}

It was supposed to look like the above, and I wasn't aware you had to add a height to tell the filter what to do until AFTER I had nearly thrown my computer out the window. Regardless, I'm still curious if there's a more "correct" way to achieve this same effect, as I'd hate to leave Mozilla/Netscape/Opera users out (I'm a Firefox person myself). I'm not holding my breath, though. =/ Stupid M$ making all us web designers use IE to get all the cool effects.

EDIT: I'm also trying to convert myself to using em for my font sizes instead of pt or px. ^^; I looked up some quick overviews, but putting "1em" into my code doesn't seem to have the same effect on my text as it does in other places. Any suggestions there?

[shooraijin]

How do you mean, not the same effect? Do you have an example page of how you're using it?

pt isn't the end of the world, but px should really be deprecated (especially as we get to displays with resolutions different than 72dpi -- IE, for example, likes 96dpi).

[anime4christ]

CSS3 should support the flipping, but none of the browsers have implemented it yet.
I think px is still usefull in a few places, and pt definetely is.

[shooraijin]

I repeat: px on one monitor, with one dpi setting, does not translate into px on another. Absolute and pixel-precise positioning should have never emerged in the specification. Change your default font settings, or go to a higher resolution display (same geometry but greater dpi), or even simply indicate you like your fonts a bit bigger (think visually impaired), and pages break. That is very poor HTML practise.

[anime4christ]

I know, I've noticed that, they don't work in most places, but I think I've seen them do something useful before. But oh well, doesn't matter, I don't think that was part of the orginal question.

[anime4christ]

*cautiously approaches shoorijin*
*looks around nevously* *noone's looking*
say, would you say this is a bad use of px? http://chudosok.info

[shooraijin]

Well, some of it is and some of it isn't. Pixels are more convenient for images, which are pixel-based, and that site does seem to use it mostly that way. I'm not as happy with its use of pixel-based measurements for margins and gutter space, but I can live with it and sometimes it's necessary (I even admit I do it from time to time myself when I can't accomplish it any other way).

It's pixel usage for font sizing and absolute positioning of elements and CSS objects that I'm thoroughly against.

[Debitt]

It's pixel usage for font sizing and absolute positioning of elements and CSS objects that I'm thoroughly against.

Absolute positioning? Ah, I've run into that problem before. What unit would you use instead of px? pt? em? ^_^; Sorry for the rather illterate questions, but I've never been taught to absolute position with any other unit.

[shooraijin]

It's not just the units; absolute positioning should be avoided entirely. If you can, rather than saying such-and-such an object must *always* be at (580,390), you should say that such-and-such an object should be at the right margin, or 50% of the width of the screen (and let the browser sort out where to put it), or at the right margin - 400px (which is using pixel addressing, but at least it allows the browser to attempt to compensate for when people change the size of the window).

The symptom of inappropriate positioning is when people insist that a page be only viewed with a particular resolution. Rather than forcing the user to look at the page with only a particular window and screen size, your page should be able to resize itself if they use a different resolution, or at least not look ugly (within reason; if someone is being pathologic and looking at your page in 320x200, well, probably they'll have to scroll ^_^;; ). If you change the window size and your elements aren't moving, that's a bad sign. They should be able to contract and expand.

People forget that HTML is not a page description language; it's a text markup language. The browser is supposed to do the heavy lifting of where things go on the page, and absolute positioning defeats this purpose. You can suggest (which is what relative positioning is for), but you shouldn't ordain.

As an example of my own code, look at http://www.floodgap.com and try changing resolution and window size. You'll see how everything rewraps and reflows to compensate without me hardly having to do anything code-wise.

[anime4christ]

Although chudosok.info has absolute positioning, it streches and contracts. Besides, the W3C says "don't use tables for page layouts, use css" which is talking about absolute positioning, using div's.

[Debitt]

Ah ha! Wakarimashita! ^-^ Domo arigatou gozaimasu, Shooby-sensei!

I'm excited. Watch your back, you don't know what you've unleashed. I think I'm going to go home and recode all my pages now!

[shooraijin]

Although chudosok.info has absolute positioning, it streches and contracts. Besides, the W3C says "don't use tables for page layouts, use css" which is talking about absolute positioning, using div's.

No. http://www.w3.org/TR/WCAG10-HTML-TECHS/ is the document you're referring to. In particular, section 5.2 ( http://www.w3.org/TR/WCAG10-HTML-TECHS/#tables-layout ) says (bold face mine),

Do not use tables for layout unless the table makes sense when linearized. Otherwise, if the table does not make sense, provide an alternative equivalent (which may be a linearized version).

In other words, if you take out the <td> tags, as if the table weren't there at all, it should still be legible and make sense. The easiest way is to run it through Lynx, and see if your page still works. Go ahead and do it with http://www.floodgap.com and you'll see that when the table is linearized, it still reads properly to screen readers and text-only browsers. (Furthermore, by using <table> tags for layout, it works in browsers that don't understand CSS, although this is something I'm only worried about here since the site is about older technology]http://www.w3.org/TR/WCAG10-TECHS/#tech-relative-units[/url] which says,

Use relative rather than absolute units in markup language attribute values and style sheet property values.

http://www.w3.org/TR/WCAG10-CSS-TECHS/#units has other guidelines on that. Like I've said, absolute positioning only works if you precisely know the dpi and resolution of the display medium. Since you can't possibly know this on a web page because of the variation between computers, it should simply be avoided (EDIT: although, in fairness, bitmap images are an exception because you *do* know how large those are in exact pixel dimensions).

[anime4christ]

http://www.w3.org/TR/WCAG10-HTML-TECHS/#tables-layout

Authors should use style sheets for layout and positioning. However, when it is necessary to use a table for layout, the table must linearize in a readable order. When a table is linearized, the contents of the cells become a series of paragraphs (e.g., down the page) one after another. Cells should make sense when read in row order and should include structural elements (that create paragraphs, headings, lists, etc.) so the page makes sense after linearization.

http://www.w3.org/TR/WCAG10-CSS-TECHS/#style-alignment

Layout, positioning, layering, and alignment should be done through style sheets (notably by using CSS floats and absolute positioning):

Tables are not ilegal for layouts, but css and absolute positioning is recommended.

[shooraijin]

Then there's a contradiction between the two which needs to be resolved, because they state absolute positioning shouldn't be used elsewhere in the document. Possibly this is resolved by this statement under heading 3.4,

Use relative length units and percentages. CSS allows you to use relative units even in absolute positioning. Thus, you may position an image to be offset by "3em" from the top of its containing element. This is a fixed distance, but is relative to the current font size, so it scales nicely.

However, there are certain forms of alignment which are better done with tables (particularly grids), and it's worth noting that tables are not a deprecated portion of HTML 4.0. I'm not pushing this much because tables are an old method, but they are definitely not discouraged, and you'll note that I didn't push the issue of using tables for layout in my post above (I use them because I target older browsers).

[anime4christ]

Well, grids is basically what tables were meant for at the beginning. That's what they are for and I still use them for that purpose. But for a page layout (like put the links on the left, content in the middle, banner at the top) I use div's and css. That's how the W3C recommends you make layouts.

[shooraijin]

... which doesn't work for older browsers, and in that case, that's what I'm targetting my site at (see my post above). However, note that I didn't make the recommendation to Kokoro that she use tables; the CSS will work just fine. My final statement on this topic.

[anime4christ]

It's ok, don't sweat it. I'm just saying what W3C said, I'm not trying to argue. I don't kill people with table layouts. The CSS way is just easier and makes cleaner html. ^_^

[blkmage]

In the case of older browsers, the CSS formatted site should degrade to a plain site with all the content still intact. Sure, it's not pretty, but everything you need is still there.

[anime4christ]

well, we're getting off the main subject here. Besides, what Kokoro wants to do isn't possible in most of the newest browsers yet.