CSS I Wish I Could Use

and just maybe I do...

[papabaer]

A point that is sometimes obscurred in the "Why I Hate NN4 Diatribes" is the elegance that CSS brings to coding.

It is not so much that something "can't be done" in NN4, it is the amount of convoluted coding to accomplish it. For certain layouts, CSS allows elegant solutions, while NN4 requires complicated "hacks."

Other things, just simply cannot be done... in NN4 that is.

So, this thread is NOT about "browser bashing," instead look at it as a sort of "CSS wish list" of techniques you would love to use, but do not because of NN4's lack of support. You can even list CSS techniques you DO use regardless of NN4, after all, perhaps your target audience responds favorably to advanced techniques, they may even demand it.

Here are a few of my favorite CSS snippets:

.news {
float:right;
font:11px georgia, palatino, serif;
color:#600;
background:#ffc;
border:1px solid #000;
padding:5px;
margin-left:3px;
}

Float is the NN4 killer. Using float:right or float:left allows the creation of a nice "textbox" that flows with the page and can be used to highlight news, comments or links. I like it... AND I do use it. Sorry NN4.

body {
background: #(some color) url(assets/bk_context_logo.gif) no-repeat fixed bottom left;
}

The abbreviated body style above contains one of my favorite "background" styles:fixed bottom left (or fixed top right). Nothing allows an easier solution to a background image that works at any resolution or window-size and dispalys as you want it. (please - I don't want to hear about "resolution-independent-javascript" solutions for placing images!) Netscape..? Sorry.

.rightmenu {
position:absolute;
right:0;
width:180px;
height:auto;
padding:0 5px;
border:2px solid #000;
}

The NN4 killer is right...
as in position:absolute; right:0; - NN4 can't handle the pressure, "right" is out of it's league. It is also one of the key elements for multi-column "liquid-css" layouts. Do I use it? My position is... ABSOLUTE! Right?

Okay, these are just three of my favorite "CSS-bytes" so now... tell me, what are some of yours?

[Duckula]

Operators like "+" or ">".

div.foo > p { border-style: none; }

that allows to set only the paragraphs that depend on the div.foo directly with no borders, and the paragraphs that are enclosed into another tag (inside of the same div) would show them.

div.foo p + div.foo p { margin: 0.5em 0em }

would let to set the margins of a p if and only if it follows another p inside a div.

Flexibility, indeed.

[tedster]

The one I'm dying to use (and it has more support problems that just NN4) is positon:fixed. With it I could create frames-like navigation divs that always stay on screen.

[papabaer]

>>> positon:fixed <<< The holy grail! Fixed navigation <divs> made simple, VERY SIMPLE... one day! ;)

[madcat]

:hover on any element at all...please hurry!

[mivox]

pseudo classes in general... :hover, :active, etc., and whatever. (I use them anyhow. NN4 can't see the nifty mouseover button effects, oh well.)

Having a background color declaration actually extend to the declared margins of a "display: block" <div> instead of just looking like a bad "highlighter" job behind the div content. (Then I wouldn't have to use those stupid 1x1 gifs to create a background color... see also the comment about nifty mouseover effects, above.)

FLOAT! I want floating elements that work! (Last float I used, I included in the page via a background image & block size declaration for an 'empty' <p>, on an @import style sheet. There's one photo NN4 users won't be seeing)

Maybe if NN4 was an M$ product, they could issue an auto-download update patch for it... ;) As it is, I just have to continue sacrificing my HTML on the altar of NN4's deathbed.

[Birdman]

bottom: 10px;
right: 10px;
max-height: 200px;
min-height: 150px;
text-shadow: 5pt 5pt red;
visibility: collapse;

Mostly the first two, but would like to play with text-shadow for sure.

[madcat]

Mivox-

Having a background color declaration actually extend to the declared margins of a "display: block" <div> instead of just looking like a bad "highlighter" job

-For NN4?

If so, I believe if you just add a border attribute it will fill in the entire background. If not, then nevermind ;)

Nice additions you guys, no doubt.

[c3oc3o]

Whoa, I just saw position:fixed in place and working for the first time just a minute ago with Mozilla 1.1 at [gashu.org...] (no affiliation)

The page also nicely demonstrates the use of the Link toolbar (shows buttons to go to the Top of the page, the Previous, Next, any Chapter, Section, Table of Contents, Glossary, Index, and the webmaster's Bookmarks). Nielsen will like that, it could mean unified navigation for all websites (if all webmasters implement the <link> tags that is)!

Amazing.

[tedster]

Re NN4: "I believe if you just add a border attribute it will fill in the entire background."

It's true - except that NN4 still doesn't fill in the very last pixel before the border. Nevertheless, it looks a whole lot better.

Watch our for links, however. With a border, the link is dead on NN4 and then it starts to get complicated (you need to put the <a> tag inside a <p> tag and style the <p>)

[starway]

Duckula, can you please explain what's the difference between
div.foo > p {}
and
div.foo p {}

Also, are there any (good) site about CSS selectors? I didn't find anything impressive so far.

[ukgimp]

Starway

Have you seen

w3schools.com/css/

[starway]

Yes I did. W3school is for beginners.
I'm looking for the advanced CSS selectors info.

I found this recently:
[gallery.theopalgroup.com...] (press "Explain this" button to get the translation of selectors expressions into "human" language),
but I'd like to get more detailed and complete information.

[joshie76]

There is a trick I've been playing with (it's just some clever use of the overflow property) that allows you to create a silky smooth position:fixed in both IE and Netscape 6+. Rather than post the code here's a link [hrmsoftware.com] to an example.

Unfortunately it doesn't work in Opera (though I have no idea why, maybe someone can look into that) or NN4 (no surprise there then).

Josh

[rewboss]

can you please explain what's the difference between
div.foo > p {}
and
div.foo p {}

The first one will only match a p element that is a child descendent of div.foo, while the second will match any p element that is descended from div.foo.

For example, take this piece of HTML:

<div class="foo">
<p>This is a child of div.foo</p>
<div>
<p>This is a descendent of div.foo, but not a child</p>
</div>
<p>This is another child of div.foo</p>
</div>

The rule div.foo > p will only match the first and third p elements, because they are direct children of div.foo. It will not match the second p element, because although it is also descended from div.foo, it is nested inside another div, so it's not a child, it's a grandchild.

All three p elements, however, will be matched by div.foo p.

[mivox]

If so, I believe if you just add a border attribute it will fill in the entire background.

As tedster mentions, that created problems with links... and leaves a weird gap between the background and border. In some cases, that's not a problem... in other cases, it's more trouble than it's worth.

[starway]

Thanks a lot rewboss for explanation, it's more clear now.

However, I'd still appreciate any good link on the subject.

[Crescendo]

before and after would be good if they worked.

[madcat]

Starway:

Check out this hodge podge of links:

w3 Schools [w3schools.com]
WestCiv [westciv.com]
The only book you'll ever need:
Cascading Style Sheets: Separating Content from Presentation (Briggs, Champeon, Costello, Patterson) [amazon.com]
w3 Contextual Selection [w3.org]

M