homepage Welcome to WebmasterWorld Guest from 54.166.53.169
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
CSS I Wish I Could Use
and just maybe I do...
papabaer

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 140 posted 4:28 pm on Apr 25, 2002 (gmt 0)

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

10+ Year Member



 
Msg#: 140 posted 5:18 pm on Apr 25, 2002 (gmt 0)

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

WebmasterWorld Senior Member tedster us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 140 posted 12:09 am on Apr 26, 2002 (gmt 0)

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

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 140 posted 1:00 am on Apr 26, 2002 (gmt 0)

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

madcat

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 140 posted 12:32 am on Aug 31, 2002 (gmt 0)

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

mivox

WebmasterWorld Senior Member mivox us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 140 posted 12:43 am on Aug 31, 2002 (gmt 0)

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

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 140 posted 2:39 am on Aug 31, 2002 (gmt 0)

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

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 140 posted 4:11 am on Aug 31, 2002 (gmt 0)

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

10+ Year Member



 
Msg#: 140 posted 5:03 am on Aug 31, 2002 (gmt 0)

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

WebmasterWorld Senior Member tedster us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 140 posted 7:25 am on Aug 31, 2002 (gmt 0)

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

10+ Year Member



 
Msg#: 140 posted 10:52 am on Sep 2, 2002 (gmt 0)

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

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 140 posted 11:34 am on Sep 2, 2002 (gmt 0)

Starway

Have you seen

w3schools.com/css/

starway

10+ Year Member



 
Msg#: 140 posted 12:35 pm on Sep 2, 2002 (gmt 0)

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

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 140 posted 1:14 pm on Sep 2, 2002 (gmt 0)

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

10+ Year Member



 
Msg#: 140 posted 6:57 pm on Sep 2, 2002 (gmt 0)

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

WebmasterWorld Senior Member mivox us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 140 posted 10:34 pm on Sep 2, 2002 (gmt 0)

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

10+ Year Member



 
Msg#: 140 posted 6:57 am on Sep 3, 2002 (gmt 0)

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

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

Crescendo

10+ Year Member



 
Msg#: 140 posted 9:23 am on Sep 3, 2002 (gmt 0)

before and after would be good if they worked.

madcat

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 140 posted 4:45 pm on Sep 3, 2002 (gmt 0)

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

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved