Warning: file(milov_entryform.tmpl.php) [function.file]: failed to open stream: No such file or directory in /home/milo/domains/milov.nl/public_html/class.template.inc.php(282) : regexp code on line 1

Warning: implode() [function.implode]: Invalid arguments passed in /home/milo/domains/milov.nl/public_html/class.template.inc.php(282) : regexp code on line 1
milov.nl: by category: css

2-49 of 52 entries in category 'css'
pages: 1 2

new feeds view 

milov.nl/feeds/

I'm having a lot of fun styling my new simple and lean blo.gs-powered feeds view. Check it out in a browser that supports modern CSS (i.e. not IE) and observe li:hover, ::after and content: attr(href) in action...

Update:
Well, it seems blo.gs is offline for a bit after being sold to some unknown party, so the feeds view might not get updated for quite some time. Anybody know any other good centralized weblog update trackers? I tried BlogRolling for a while but it only seemed to indicate one new updated weblog per day.

Update 2:
blo.gs is back, yay! Turns out it's been acquired by Yahoo!.

1. posted by Ruben at 22:54 on June 13, 2005

Looking cool, Milo.

2. posted by Nick at 09:28 on June 14, 2005

Nicely done!

Cool pun by the way: 'i.e. not IE'.

3. posted by wchulseiee at 18:23 on June 14, 2005

what about http://www.bloglines.com? although it's owned by askjeeves, it seems to work pretty nicely.

4. posted by Milo at 18:37 on June 14, 2005

Ah, good point, I even have an account there already. But I'm having a hard time finding anything beyond the three-pane standard view... Do they offer a simple flat view of blog names and their last update time anywhere?

Basically I just want to be able to Ctrl-click the blog names to open them in new Firefox tabs, rather than being forced to read them via the bloglines interface.

5. posted by wchulseiee at 18:47 on June 14, 2005

there is something called 'blogroll wizard': http://www.bloglines.com/help/share. It generates a javascript or php code snippe t you can use

6. posted by wchulseiee at 18:54 on June 14, 2005

ok, not really php code, more like just an url :) and no update times either.

7. posted by Milo at 19:58 on June 14, 2005

That's something I could use, thanks.
add a comment
css Zen Garden, 1996 Geocities style [via]

1. posted by Kethinov at 20:19 on January 21, 2005

Disturbing.

2. posted by Mathieu 'P01' HENRI at 20:33 on January 21, 2005

^__^ it rocks.
add a comment
How to display <ul> elements as a flat comma-separated list (now in effect in the main menu and links list in the left-hand column):
ul.links { list-style: none; margin: 0; padding: 0; }
ul.links li { display: inline; }
ul.links li:after { content: ","; } 
ul.links li:last-child:after { content: ""; }

The advantage of this is that changing the default separator from a comma to | or - or whatever now means only having to change one character in the stylesheet.

Note: Internet Explorer doesn't support the css content attribute or :after and :last-child pseudo-classes, so the commas won't appear in IE.

1. posted by Low at 23:06 on January 12, 2005

This seems to be working in Firefox (that is to say, I just checked it with edit-css ^_^):

ul.links li:after { content: ","; }
ul.links li:last-child:after { content: ""; }

Now the commas aren't part of the hyperlink, which I prefer. :)

2. posted by Milo at 23:09 on January 12, 2005

Good point! That's what I was going for actually :)
I've updated the code sample (and my stylesheet).

3. posted by Low at 23:16 on January 12, 2005

I'd even consider using...

ul.links li:last-child:after { content: "."; }

...because of all the commas. I think it looks better with a full-stop at the end. But hey, that's just me.

4. posted by Anne at 08:02 on January 13, 2005

In that case you could even make it more fancy, work with ::before and add a & just before the end or 'and'.

5. posted by Milo at 09:02 on January 13, 2005

Hmm, I don't think either a '.' or an 'and' are fitting here, since this is not really a sentence, just a listing. I mean, "experiments and random", whazat??

6. posted by Milo at 11:17 on January 13, 2005

By the way Anne, to make your idea work, won't I need some sort of :second-to-last selector to prevent the comma appearing before the "and"? (note the 'Related categories' list, I just tried it there)

7. posted by Arve at 12:07 on January 13, 2005

ul.links li::before { content: ","; }
ul.links li:first-child:before { content: ""; }
ul.links li:last-child::before { content: " and "; }

Example output:

One, two, three and four

8. posted by Milo at 12:15 on January 13, 2005

I considered that, but it actually results in

One ,two ,three and four

which is not quite the same.

9. posted by Frenzie at 13:13 on January 13, 2005

It wouldn't appear as

One ,two

but as

One,two

which would be easy to solve by

content: ", "

10. posted by Milo at 13:58 on January 13, 2005

It'll always look like "One, two" or "One ,two" unless I remove all whitespace from between the <li>-elements (which I don't intend to do), or "white-space-collapse: discard;" was actually possible. http://fantasai.inkedblade.net/style/specs/css3-text/scratchpad

11. posted by Low at 14:04 on January 13, 2005

> unless I remove all whitespace

I was gonna say that; you beat me to it. Anyway, if you _would_ remove the whitespace or if the css3 rule would work, my vote would go out to:

ul.links li:before { content: ", "; }
ul.links li:first-child { text-transform: capitalize; }
ul.links li:first-child:before { content: ""; }
ul.links li:last-child:before { content: " and last but not least: "; }
ul.links li:last-child:after { content: "."; }

I was going for something like "ul.links li:first-child:first-letter { text-transform: uppercase; }", but that didn't work.

:)

12. posted by Milo at 14:12 on January 13, 2005

Strange, trying to make your last example work, I thought

ul.links li:first-child a:first-letter { text-transform: uppercase; }

*would* work, but it also doesn't.

13. posted by Low at 14:40 on January 13, 2005

Yeah, tried that too...

14. posted by Mathieu 'P01' HENRI at 14:53 on January 13, 2005

ul.links:first-letter { text-transform: uppercase; }

works ;)

15. posted by Anne at 15:22 on January 15, 2005

Quite bad that you can't locate my favicon Milo ;-)

Re #6, I'll post an example later if I can get it to work.

16. posted by Milo at 15:40 on January 15, 2005

Re: http://annevankesteren.nl/img/favicon.png
Your favicon is black-on-transparent, and too large (32x32) to be visible as a background-image in your name-link, meaning it won't even show now that I've fixed the detection! :)
add a comment

1. posted by Rob Mientjes at 11:51 on October 19, 2004

Wow, you really found that article _via_ me? Let's make this clear, it's all mine. So the via is somewhat strange. But the thing you link to is the article, so do whatever you like.

2. posted by Milo at 12:04 on October 19, 2004

There's two links here, they both point to your site; I don't see how it could be any clearer that it's all yours :)

I wanted the main link to point to the example, since your article only links to it with a tiny 'this' link that's easily missed. My [via] simply indicates the js document.referrer of the main link (it's filled automatically even).

3. posted by Rob Mientjes at 15:34 on October 19, 2004

It's okay. I just thought you assumed that I linked to some testcase page or something. To me, it's now clear enough too.
add a comment
Negative(!) text-indent is in effect in the quicklinks list (over there on the left of the front page). Handy... applying a style like padding-left: 10px; text-indent: -10px; to an element makes all lines of that element appear indented except the first one.

1. posted by Arthur! at 16:26 on October 12, 2004

That's exactly the style of referencing according to the APA (psychiatry crap) and I've been wondering how to implement that in HTML. Thanks for teh tip.

2. posted by Brent Dady at 09:17 on October 15, 2004

that's the sexiest non-flash interface thingy i've ever seen.
add a comment

1. posted by Low at 22:37 on September 08, 2004

Whoa! Check out that panorama information thingie! How cool is _that_! Oh, and I agree with the "big is beautiful" idea.
add a comment

fixed width font in Gmail 

Does Gmail have a setting somewhere to make message text appear in a fixed width font? 'Cause if it does, I sure can't find it...

To force it to use a fixed width font anyway, I added the following to userContent.css in my Firefox profile:

div.msg div.mb {
  font-family: monospace !important;
  font-size: 12px !important;
}
(Firefox's 'View Selection Source' came in real handy trying to figure out these classnames; regular View Source is a pain on Gmail because the whole thing's Javascript-generated.)

1. posted by P01 at 23:19 on July 21, 2004

Per user style sheets have been popular these days.

Though the chances that that CSS rule may interfere with another site are small, I suggest you to try one of these extensions :

* URIid ( http://extensionroom.mozdev.org/more-info/uriid ) which adds an id of the form www.milov-nl to the body tag of every page you visit.


* MyOwnCSS ( http://www.raphinou.com/cgi-bin/myowncss/main.cgi ) does the same as URIid, except that the CSS are stored on an external server and shared between the users. In a way, it the del.icio.us of the CSS customization.


Notice, that I haven't tried them yet, but I gonna install URIid and give it a try.

2. posted by milov at 00:04 on July 22, 2004

Neato... And add these two extensions to really make the most of it:
http://extensionroom.mozdev.org/more-info/chromedit
http://extensionroom.mozdev.org/more-info/editcss

3. posted by P01 at 00:11 on July 22, 2004

Yep, EditCSS is a must.
damn, I love FireFox.

4. posted by milov at 00:18 on July 22, 2004

*sniff* I've known Firefox since it was just a little Phoenix, standing no taller than 0.1... It's certainly grown up to be one fine browser. http://milov.nl/1594

5. posted by huphtur at 09:48 on July 22, 2004

Web Developer Extension comes with it's own "Edit CSS".
http://www.chrispederick.com/work/firefox/webdeveloper/

6. posted by yahoo.com,rwoudsma,Woudloper at 09:16 on July 23, 2004

As I do not have a qmail account and I am a regular reader of your blog I would like to know what the use is of a 'fixed font size' for the mail?

And indead 'EditCSS' is a must for everyone who is editing (and doing other stuff) with websites!

7. posted by milov at 09:25 on July 23, 2004

Woudloper: It's not about the size, it's about the width. I like the characters in my mail to be evenly spaced; I'm used to that from way back, when every mail reader used a fixed width font, that way ascii art etc. doesn't get all squished together.

I even forced Outlook Express to use fixed width by setting its 'Proportional font' to 'Courier New'.

8. posted by yahoo.com,rwoudsma,Woudloper at 11:50 on July 23, 2004

milov: you are absolutely right. I was reading 'size' in-stead-of 'width'. My mistake...

Does this fix (or tweak) also works for HTML email messages or did you set your presence (if that is possible within QMail) to ignore HTML messages?

9. posted by Mathieu 'P01' HENRI at 12:22 on July 23, 2004

fixed font size is a must to make CODE pasted as is in the body of emails readable. Not to mention, in text editors. Damn, it always scares the s**t out of me when I see some body using a proportionnal font in a text/code editor.

10. posted by gmail.com,gillamhall,g. at 03:52 on August 26, 2004

used your code above in Firefox's serContent.css with no luck (Mac OS X, Firefox 091). Idea as to what I could have done wrong? Seemed so straightforward ...

11. posted by gmail.com,crazymagsters,Maggie at 18:17 on May 20, 2005

i waz just wondering how can u change the color or size or font of the typing if u no plz email to me how crazymagsters@gmail.com

12. posted by gmail.com,sysprv,ohshady at 08:18 on October 07, 2005

Just thought I'd give something back :-)

http://lists.w3.org/Archives/Public/www-style/2004Aug/0135.html

@-moz-document url-prefix(mail.google.com/mail/), domain(mail.google.com)
{
div#rc {
display: none !important;
}
font, div#mb_0 {
font-family: monospace !important;
font-size: 12px !important;
}
}

13. posted by ohshady2 at 06:50 on November 12, 2005

We can do much better;

@-moz-document url-prefix(mail.google.com/mail/), domain(mail.google.com) {
/* the cell that contains the message, utils, ads */
td#fi {
padding: 0px 0px 0px 0px !important;
}
font[size="-1"] /* print view */, div#msgs /* conversation view */ {
font-family: monospace !important;
font-size: 1.2em !important;
}
}

14. posted by orcon.net.nz,hl,Hugh at 02:45 on December 02, 2005

Re: oshady2,

Thanks for the great code! How would one go about getting the composition textarea to also display in monospace?

Thanks again,
Hugh. ;)

15. posted by mash at 16:51 on December 06, 2005

Very useful modification. I have had trouble making this work. I have copied the relevant text and used the mozilla chrome editor extension to insert it (I've tried both userContent.css and userChrome.css) but to no avail.

Do I need to tell Firefox to check these files?

Is the code still working for you all?

16. posted by orcon.net.nz,hl,Hugh at 07:10 on December 09, 2005

Hi,

Yes it still works for me. Try editing the files manually:

Go to Start > Run and type "%AppData%" without the quote marks.

Navigate to \Mozilla\Firefox\Profile\Chrome and edit/create userContent.css, filling it with the code in post #13 above.

Hope this helps,

Hugh. :-)
mailto:hughlilly##NOSPAM@GMail##NOSPAM.com

17. posted by gmail.com,prehor,Petr Rehor at 17:11 on December 24, 2005

Thanks for your idea. There is my userContent.css:

@-moz-document domain(mail.google.com)
{
body,td,input,textarea,select,button {
font-family:verdana,arial,sans-serif !important;
}

.ab,.cd button {
font-size: 100% !important;
}

.mb {
font-family: monospace !important;
font-size: 100% !important;
}
}

18. posted by Stephan Walter at 21:40 on January 13, 2006

I played with the CSS a bit and came up with some code that also makes the compose window have a fixed-width font.

For easier cut&paste, get the code from

http://stephan.walter.name/Gmail_CSS_tweaks

19. posted by martynov.info,sergey,Sergey Martynov at 17:24 on November 24, 2008

There's a greasemonkey script, which adds a button in gmail interface and allows you to turn fixed font on and off easily: http://userscripts.org/scripts/show/37471

20. posted by essay writing at 16:01 on October 18, 2010

"Does Gmail have a setting somewhere to make message text appear in a fixed width font?" - It does!

21. posted by ,a,Eduardo at 08:10 on May 05, 2011

How would one go about getting the composition textarea to also display in monospace?
add a comment

1. posted by drunkmen at 00:03 on July 22, 2004

textarea {overflow:visible} is nice too in IE, used it in breedster.

2. posted by milov at 00:13 on July 22, 2004

Whoa.... That's cool.

3. posted by Calm_Pear at 10:27 on July 25, 2004

Whoa! that is very cool indeed...

4. posted by oLvMtFUHoaefbsrsg at 15:18 on June 05, 2008

tickets_5.txt;2;2
add a comment

colour subdomains updated 

Rather than appearing as blank pages of a single colour, the colour subdomains now have an info footer showing calculated dec/hex/percentage values, as well as a row of lighter/darker variations.

test: purple, 144.200.180, cc9966, f0f, activecaption

1. posted by P01 at 01:08 on June 20, 2004

That's a really cool improvement. May I suggest you to add a saturation gradient below the brightness one, and eventually a hue one.

2. posted by Daniel Talsky at 01:58 on June 20, 2004

This is becoming dangerously close to actually being useful.

3. posted by milov at 02:03 on June 20, 2004

Heh.

4. posted by Morg at 11:41 on June 21, 2004

And how about a matching palette for the color? :)

5. posted by milov at 14:54 on June 21, 2004

If you happen to know the algorithm for generating such a thing, I can give it a try :)

6. posted by morg at 19:27 on June 21, 2004

How about http://www.colormatch.dk/?

Nice 5k js tool that makes a decent color set

7. posted by Thiemo at 19:24 on June 29, 2004

Looks much better than my color converter[1]. Some details I want to suggest: Crop the percentages to whole numbers. The decimal places aren't needed. Nobody can see the difference. - Display both web-safe and non-safe hex shorts and sample rectangles for them. I found this very usefull (to keep my styles small). In many cases the differences to the original color are very small.
[1]http://maettig.com/?page=PHP/CSS_Color_Converter&c=144,200,180
add a comment

using :visited and expression() to detect any visited link 

There's been some talk (see Anne, CollyLogic) about it being possible to use the :visited pseudo-class and background-image urls to detect if a user has visited a particular link.

Luckily for Internet Explorer users, they are unaffected because IE doesn't support the [href=] selector. Unfortunately, there's another method that does work in IE and is even more dangerous...
read more »

1. posted by Thiemo at 16:02 on May 26, 2004

What's so dangerous about this? You can do the same since HTML 1.0:

<a href="tracker.php?url=slashdot.org">

2. posted by P01 at 16:02 on May 26, 2004

It's possible too extract all the URLs of the HTML markup to create the corresponding CSS rules for the standard compliant browsers, and finally throw the HTML + the extra CSS rules to the client.

Indeed, if the tracker.php script goes recursively through the pages visited by the user it can reveal some really valuable infos ( imagine the extra incomes an ad system could ask if it implements that sort of sniffer ) and eventually set a breach for the sites using an authentication via the parameters sent in GET ( which is whatever, a security no-no ).

The violation of privacy could reach an higher scale if the spamming companies used that exploit ( if don't already do ) in their mails.

3. posted by milov at 16:07 on May 26, 2004

Thiemo, the big difference is is that with this technique, the visitor doesn't *click* on a link at all. Simply loading a page of links is enough to alert the site owner of which of those links the current visitor has visited before.

4. posted by Jan! at 16:12 on May 26, 2004

Also, if you're serving dynamic pages anyway, you can just as well add an id attribute to every link, and style it in CSS with: #link857456 { background: url(tracker.php?id=link857456) }

Apart from that, I don't get why everyone's upset all of a sudden when this has been known (and applied) for years.

5. posted by Thiemo at 16:20 on May 26, 2004

If a particular URL is in my browsers history or not does not mean anything. (What's important here: You can't read the history. Instead, you have to know the URL first!) Turn off your internet connection if you are afraid of being tracked.

6. posted by milov at 16:36 on May 26, 2004

Jan!: You're right, with a dynamic site this whole expression() trick isn't really needed. And I wouldn't say I'm 'upset' or worried, just disappointed I didn't discover this cool (and indeed rather obvious) trick earlier ;)

7. posted by Andrew Clover at 12:32 on May 27, 2004

Indeed known about for some time. I mentioned this issue in a post to Bugtraq a few years ago:

http://www.doxdesk.com/personal/posts/bugtraq/20020214-css.html

There is no obvious good solution.
add a comment

integrating javascript into stylesheets 

Ben Nolan's non-link element hovering trick for Internet Explorer (that normally only allows :hover styles on links) is pretty handy, but what really impressed me about it is his way of integrating arbitrary Javascript functions into the stylesheet itself:
body {
  background: url("
    javascript:
      document.body.onload = function(){
        ...custom js here...
      }
  ");
}
By specifying a rule like this in the browser's user stylesheet, it might even be possible to run a custom set of Javascript commands on opening of any visited website. (Although my brief attempt at making this work proved unsuccessful.) [via webgraphics]

1. posted by Ruben at 13:26 on January 07, 2004

It is really interesting indead. I already read the discussion thread in the forum of Tweakers.net, see:

http://gathering.tweakers.net/forum/list_messages/831654/last

The interesting part is that it is somehow specified in the W3 specs of CSS2, see:
http://www.w3.org/TR/REC-CSS2/generate.html#content
http://www.w3.org/TR/REC-CSS2/media.html

2. posted by Richard Soderberg at 01:01 on January 13, 2004

The spec also specifies that "Generated content does not alter the document tree. In particular, it is not fed back to the document language processor (e.g., for reparsing)".

It seems IE is ignoring this directive, which I think is right.

3. posted by Richard Soderberg at 01:13 on January 13, 2004

IE is right, that is. Not the directive. I think the directive is shor-sighted and limiting -- but in the face of embedding active content in CSS, well, maybe I can see their point of view.

4. posted by bob at 17:51 on May 27, 2006

cool

5. posted by A to Z of World at 10:32 on January 15, 2007

I did try it and indeed is handy. But as expected I'm not finding a situation to put it in real time usage as I rarely need something which works only with IE :)

6. posted by hotmail.com,ddrmax4ever,Derek at 17:48 on January 18, 2008

i cant seem to make it work for the way i thought of. I was trying to embed onmouseover and onmouseout functions to work. Anyone is willing to give me insight?Just send me an email, thank you
add a comment

the house that css built 

3D Border Demo 2 - LEGOish drawing of a house, built entirely using css borders. Impressive! Made by Design Detector. [via DeWalick.com]

1. posted by Kethinov at 05:52 on October 18, 2003

Wow! Looks like something that should be on i.am/bald

2. posted by huphtur at 17:55 on October 18, 2003

yeah, whatsup milov, we slackin?
just kidding. dont hit me!

3. posted by bas at 00:22 on October 26, 2003

OMG that's fast...
If this is possible...
why is the internet so slow...

4. posted by yahoo.com,saintjulian,Saint Jude at 04:47 on December 12, 2003

That really is most inspirational.
add a comment
Speaking of stylish <ul> listings, check out IF THEN ELSE (who also caught the redesign bug this week)'s take on it; scroll down a bit and hover over the leftside menus. By already showing a tiny border in the default link state, and increasing the border size on hover, it looks like LEDs lighting up. Pretty colours!

Update: check out his newly added HOW-TO.

1. posted by Ruben at 17:09 on October 14, 2003

Caught, milo, caught.

2. posted by milov at 17:26 on October 14, 2003

Hey I don't mind if he copied my idea, he made it look much better anyway :)

3. posted by Ruben at 17:39 on October 14, 2003

Not exactly what I meant. I was talking about your typo :-)

4. posted by milov at 17:48 on October 14, 2003

Argh. That's what I get for quickly trying to write a post (and post a comment) while at work.

5. posted by Ruben at 11:34 on October 15, 2003

Some people get fired for blogging at work.

6. posted by milov at 11:43 on October 15, 2003

You're not speaking from experience, I hope? Maybe webdesign companies are less strict about it than insurance companies.

7. posted by Ruben at 17:19 on October 15, 2003

Oh, I don't blog at work. I only comment at work :-)
add a comment
svendtofte.com - max-width in Internet Explorer - using the IE expression() syntax to simulate the css max-width property, which works in Mozilla/Opera but not in IE.

1. posted by Tom Lee at 21:56 on March 16, 2006

add a comment
Listamatic - css examples for styling basic <ul> lists. I like this trick where a fat border-left is used to create a neat hover effect. [via kottke.org]
Creating slanted edges with CSS borders - neato; there's even an animated example of a vector-like pattern: by overlaying the "slant" with a slightly offset slant of similar size but coloured like the background, it's possible to create lines of any angle or length in regular DHTML -- without having to resort to IE-only VML code. [via Arthur is verweg!]

1. posted by P01 at 13:04 on July 07, 2003

That kind of tricks makes me love DHTML even more.

Thank you for sharing.

2. posted by milov at 13:10 on July 07, 2003

You're probably anxious to use this in a next 256b compo as well :)

3. posted by P01 at 14:18 on July 07, 2003

^__^ using this in 256b and make something visually acceptable seems pretty hard, but I rather thought to a polygon routine I have in mind which is/was based on slope images stretching.

4. posted by milov at 15:29 on July 07, 2003

> using this in 256b and make something visually acceptable seems pretty hard

That's the challenge, eh? ;)

First thing that came to my mind while reading this article was to create a grid or line of a bunch of these slants/pyramids and making them point or "look" at the mouse cursor, in a sort of organic wavey grass-in-the-wind motion.

5. posted by P01 at 16:07 on July 07, 2003

Your "Filter > Extrusion > Pyramid" idea is neat. ATM I don't see how to deal efficiently with the grid, but I guess you'll have to assign the whole updated grid at each frame.
add a comment
Simon Willison has been posting a couple of interesting CSS tutorials lately. [via web-graphics.com]
KLEUREN

1. posted by Mario at 03:11 on December 04, 2002

Does that word mean "rainbow" in your language, Milov?

2. posted by Tuuur at 11:29 on December 04, 2002

Just means 'colors'...

3. posted by Mario at 03:16 on December 05, 2002

Aw...
add a comment
Wow, I just came across a <font>-tag in a script of my own from december 2000. Possibly the last time I ever used one...
Hmm... My adding of body{overflow:hidden;} to the stylesheet of various dhtml animations of late is causing Phoenix (and probably any Gecko-based browser) to display a blank page... Removing the overflow-property makes them work again.

Could it be this trick of hiding the scrollbars has the nasty effect of altering the width/height of the body- or html-object, thereby messing up my dhtml item placement routines?

Update:
Aha, adding height:2000px; (or another pixelvalue that's sure to be higher than the window height) to the body{...} style seems to fix things. Still, weird; I don't remember having to do this in earlier Mozilla versions.

1. posted by [unknown] at 21:38 on October 26, 2002

Does "height: 100%;" work as well? It's funny you mention this problem, seeing how I just ran into problems with "overflow: hidden;" on IE5Mac (applied to the html node)...

2. posted by milov at 21:48 on October 26, 2002

No, height:100% didn't have any effect, because (I'm guessing) that would be 100% of 0px = 0px.
add a comment
Idea: faking css attribute selectors in Internet Explorer by using IE's special Javascript expression() properties

Example: setting the background of all <input>-tags to yellow, but only if they're of type 'text':

/* standards-compliant; works in Mozilla */
input[type="text"]
{
background-color:yellow;
}


/* alternative for Internet Explorer */
input
{
background-color:expression(
    this.type=='text' ? 'yellow' : 'transparent');
}

1. posted by braincast.nl,marc,marc at 15:10 on August 09, 2002

Nice!! I like it!

2. posted by Jan! at 15:11 on August 09, 2002

Nice, didn't know about this yet. Be sure to include those hacks in a conditional comments section inside your (X)HTML to ensure CSS validity! :-)

This is about all I could find about expression(): http://msdn.microsoft.com/workshop/author/dhtml/reference/methods/setexpression.asp

For those interested in conditional comments:
http://msdn.microsoft.com/workshop/author/dhtml/overview/ccomment_ovw.asp

3. posted by [unknown] at 06:52 on August 24, 2002

do you need logic to deploy (sniff) or can u just include both in same css file?
i very much need this, thanks

4. posted by no.com,no,Stone at 14:43 on September 05, 2002

Neat, tried:
background-color:expression( this.type=='text' ? 'red' : (this.type=='submit' ? '#e0e0FF' : (this.type=='password' ? '#e0e0e0' : 'transparent')));
that worked too

5. posted by Aaron at 15:48 on September 12, 2002

You don't need logic, since expressions are proprietary and not understood by anything other than IE5. Simply put the expression'd statement /after/ the normal CSS2 one so that it overrides it properly.

This is also a great way to override the broken IE box model, something Dave does over at http://www.stilleye.com/scripts/marginfix/
add a comment
One example and another example of positioning custom top/right/bottom/left corners with css. [via Simon Willison]

1. posted by huphtur at 19:32 on July 18, 2002

not css, thats gifs!

2. posted by milov at 20:01 on July 18, 2002

true dat. I changed my description to something less ambiguous.

3. posted by milov at 22:25 on July 18, 2002

...or should that be 'more'
add a comment
Apparently, IE5.0 Mac doesn't support multiple classnames if you start the param with whitespace, like so:
<div class=" class1 class2">
(discovered after forgetting to trim some php-vars.)
To the person Googling for "removing line break after h1", try adding h1{margin-bottom:0px} or h1{display:inline} to your stylesheet.

1. posted by skynet.be,grazia.giordano,spoutnik at 13:01 on May 17, 2002

try negative margins
h1 { margin : -0.5em 0em ; }
work in IE6/win

2. posted by merloc at 13:52 on July 27, 2002

Man, it creeped me out I typed "removing line space after h1" into google, and this comment popped up...

I tried padding, and line spacing, etc. The only thing that works in IE6 seems to be display:inline

3. posted by Little Pear at 23:00 on May 11, 2003

Hallelujah. I googled for "space after H1" and found this solution. Thank you!But... Where am I? What is this place? And what's that faint smell of patchoulli in the room?

4. posted by Frank at 22:14 on November 25, 2003

I was having the same problem today. But I had two headings in one document and noticed that one had a spacing problem after it, but the other didn't. The one without the problem had a table in front of it. So I took an "/table" all by itself and put it in front of the other heading. Bingo. It worked. I hope this orphan code doesn't cause me a problem later though.
add a comment
If your site has a white background, please also indicate so in your stylesheet. Don't assume people have their default browser background set to white (mine's #C0C0C0 - making plenty of pages look unintentionally gray).

1. posted by JoG at 15:49 on January 26, 2002

Ik kom dit inderdaad veel te veel tegen!

2. posted by huphtur at 15:51 on January 26, 2002

the worst one is yahoo.com

3. posted by milov at 16:02 on January 26, 2002

Actually, I like Yahoo a lot better on grey than on white. Yahoo doesn't set any colours, so you always get your preferred defaults.

4. posted by huphtur at 20:01 on January 26, 2002

5. posted by milov at 20:14 on January 26, 2002

Looks perfectly fine on gray to me...
add a comment
I actually sorta like the Flash of Unstyled Content (= the delay before a linked stylesheet is applied to a loading page). It can be very satisfying to see a page 'jump' from unstyled oldskool plaintext to pretty modern design. [via Weblog Wannabe and others]
overflow-y:scroll;

1. posted by Low at 00:01 on December 10, 2001

IE only;
add a comment
The CSS equivalent of <nobr> is white-space: nowrap;
[via Wouterd]

1. posted by pup at 20:10 on November 09, 2001

excellent tip.

2. posted by google at 10:22 on April 15, 2005

Thanks, the first page on google now shows this in the description! so a 'css nobr' search found it at place 8 I think. Good work!

3. posted by john at 12:44 on June 27, 2005

Thanks for this! I waste some time with other websites that have the WRONG answer until I found this one. Other searches mentioned an extra hyphen between "no" and "wrap" which doesn't work on my browser (IE 6).

4. posted by studio fotograficzne at 21:21 on September 21, 2005

Great, thanks.

5. posted by Razvan at 13:51 on November 16, 2005

Hi,


It is working on Firefox and Opera on <td> tags:

<td class="nobr">...</td>

but it is not working in IE6 !
The div version seems to work on all browsers:

<div class="nobr">...</div>



Regards,
Razvan

6. posted by Razvan at 13:52 on November 16, 2005

Oooopps... I forgot to define the "nobr" class:

.nobr
{
white-space: nowrap;
}


Regards,
Razvan

7. posted by gmx.net,frontend,Andrej Becker at 14:15 on May 22, 2006

Only works for block level elements, specification says it won't work for inline elements.

8. posted by Frank Butcher at 12:22 on June 09, 2006

"Only works for block level elements, specification says it won't work for inline elements."

According to the W3C recommendations, it applies to block level elements only in CSS1. In CSS 2 it applies to all elements.

A case of trial and error for which browsers support it I guess.

9. posted by Mike at 18:27 on September 20, 2006

Google preved rodnoy!
<a href=http://apcserviceder.com>apcservicder </a>

10. posted by noid at 19:51 on May 31, 2007

nice... and easy to find in google.
thanks!

11. posted by aidan at 11:44 on February 09, 2008

I've been trying to get a header element and an input text box on the same line but none of these seem to work.
add a comment
Couldn't get this to work in Mac IE5:
clip:rect(0 100 100 0);

Turns out I had to use 'px' unit indicators:
clip:rect(0px 100px 100px 0px);
A List Apart has more CSS goodness today. [via Low]

1. posted by huphtur at 22:17 on August 17, 2001

whats the use of the / in <br />?
same with the / in <img src="image1.gif" />

2. posted by huphtur at 22:22 on August 17, 2001

wait.. prolly cuz <br> and <IMG> dun have a closing tag
right?

3. posted by milov.nl,milo,milov at 22:28 on August 17, 2001

you got it... it's to conform to the xhtml standard that all tags should be closed. / is a way to close non-closing tags.
add a comment

pages: 1 2