Web Design Topic
Welcome to the beta of the new saila.com. Send in your bugs.
CSS
Cascading Style Sheets is a standard supported by the World Wide Web Consortium that allows for absolute positioning of text and images on an HTML page. It also allows for more complex layout elements like leading, indents, character size, and uniform text styles. The primary purpose, however, is to remove presentational elements from the markup itself.
-
Simple CSS drop shadows, revisited
With improved support for complex scripting and CSS, simple CSS drop shadows are even easier to do. -
Mozilla’s multi-columns, and an IE7 update
There’s been a lot of news during the past week or so that has almost tempted me to break the posting silence, but only one managed to break the floodgates: the release of Mozilla 1.8 Alpha3. Forget the awkward name, this is, for me, the most important release since 1.0. -
Get off the table
Doug Bowman, after learning how many Web designers don’t use tables for layout, urges people to throw tables out the proverbial window. To bolster his case, he use the microsoft.com homepage to demonstrate the savings that can be achieved. -
Mutli-columns with Mozilla
One of my most desired CSS features is coming to a browser near you — Robert O’Callahan has checked a patch into Mozilla that implements the three-year-old CSS3 multi-columns working draft. -
New IE5/Mac filter
Doug Bowman tapped Tantek Çelik’s brain and out emerged the IE5/Mac Band Pass Filter. The result causes the former to eulogize the browser the latter helped build -
Mozilla offering page-specific CSS hooks
Asa points to a great soon-to-be feature for Gecko based browsers: a means to apply custom CSS based on the URL of the page loaded in the browser (vote for it). This has been bandied about on the www-style list, and there have been a number of suggested workarounds, including CSS signatures. Until this gets implemented, try Chris Neale’s extension, URIid -
Quoting and adjusting font sizes
The latest version of Firefox now supports nested quoting via q, meaning this renders correctly: There was a pause. This won’t work in IE, he said. That being said, I do have a script for rendering quotes in Internet Explorer — it’s not really production quality yet, though. -
IE7 update
Dean Edwards has a released a major update to the still alpha IE7, including a way to make it, theoretically, future compatible. Dean’s also released the heart of the IE7, its CSS query engine, as a separate JavaScript file. -
Interviewing Bowman
My pre-SXSW interview with Doug Bowman has been published over at Digital Web Magazine. He has also just published the details and slide shows for the two talks he mentions in the interview, “Hi-Fi Design With CSS” and “CSS: The Good, the Bad, and the Ugly” Continuing the SXSW presentation updates, Dan Cederholm has also posted his slide show for the former panel (incidentally, and quite coincidentally, Dan is only member of that panel I haven’t interviewed for Digital Web — perhaps we should remedy that…) -
Webmonkey’s last hurrah and other goodies
The last hurrah of Webmonkey is a good one. The cheekily named “The End-All Guide to Small-Screen Web-Dev” covers the history and the technology behind small-screen devices, while still managing to offer pages of design and development tips. -
IE7
I’ve been sitting on Dean Edwards’ incredible set of enhancements for Internet Explorer since last Wednesday. As you may be aware, word of his IE7 development is sweeping across the community, and it’s not surprising why. With a few lines of script, Edwards has found a way for Internet Explorer 5.5 and 6 to support complex CSS selectors. -
Big redesigns
The infrequent posts here are a result of the work I’ve been doing on the biggest CSS redesign I’ve been involved in. Though not a radical design, the underlying HTML has been completely re-worked to be both more semantic, more accessible, and less invalid. Look for it soon -
New and revised CSS proposals
The W3C released a bunch of CSS documents this week: -
Introducing Firefox; Pixies back; validator fixed
At what point does it just become silly? -
Fixing the CSS validator; CSS footers and JavaScript galleries
Following yesterday’s minor kerfuffle over the CSS validator and CSS hacks, Zeldman is asking people to request the W3C update its validator. In reply, the W3C’s Olivier Thereaux is asking the community to help fix the open-source validator. -
Problems with hacks
Due to changes with the W3C’s CSS Validator (as detailed by Dave Shea and Jeffrey Zeldman), a very popular hack doesn’t validate. Though frustrating, the situation perfectly illustrates why, if it all possible, CSS hacks should be avoided. Ideally, one should use what I refer to as CSS filters — those tricks that exploit holes in a browser’s support (like the langauge pseudo-class selector), not bugs in its rendering engine. -
Honderich resigns; CSS tooltips
And so ends a dynasty: John Honderich, and his trademark bow-tie, won’t be seen around the offices of the Toronto Star for much longer. The paper’s publisher is leaving his post “with regret” due to a “corporate desire for change.” -
Interviewing Shea; RCMP raid
Digital Web has published my interview with Dave Shea. His thougtful answers touch on his past and future, as well as offer insight into his own works. -
Better 404s and CSS illustrations
Help the lost and confused at your site by following the advice at A List Apart. (Yes, I know this site doesn’t have a proper 404 page — long story — but if it did, the page would look something like the one suggested in the article). -
CSS layout tutorial; CBC archives flooded
Russ Weakley has produced a well-written, step-by-step tutorial for creating CSS layouts. Great for beginners and veterans alike. -
Bell Globemedia break-up; Rebus Symbols;Nott’s hacks and filters
Earlier reports about the break-up of Bell Globemedia (my employer) are looking truer by the day. Over the weekend, the National Post reported that the company’s board has been dissolved. Could be another interesting Janaury/February here… -
CSS supports limit semantic mark-up; Internet as coffee-house
Dave Shea has a detailed breakdown of a stumbling block I’ve been climbing over while rebuilding this site. Strip-down mark-up to its semantically pure form, and it becomes almost impossible to access the needed elements with today’s CSS. As a result, the mark-up needs additional hooks. -
CBC (r)evolution; whatever:hover; hand-writing fonts
Could the CBC be in for some changes, too? CanWest reported at the end of 2003 that two internal studies found the public broadcaster too stuffy, and suggested a new anchor was needed to attract younger viewers, like, say, me. -
Beautiful blogs; Selectutorial; ID3; quote expreriment
Lars Holst lists some beautifully-designed Weblogs (if only I could design…). -
Mississauga’s new face and digital city rankings
Torontonians may love to mock our suburban 905 neighbours, but Mississauga’s new city site is incredible. Not only is it written in XHTML and uses a CSS-based layout that leaves Netscape 4 behind, it also provides a wide range of e-services. (It does, however, have ugly URLs and the site is impossible to validate, though a quick scan shows it comes close.) -
Advanced CSS ornamentation; four-column layouts; Chrétien profiled
The Literary Moose is known for his clever designs that push the limits of CSS (and also, though valid, tend only to work in Opera). And now, like a rule-breaking magician, he reveals a number of his tricks at the Nemesis Project to an awe-filled audience. -
Toronto votes; IE 3 and 4; PIE tutorials
Torontonians (and other Ontarians): don’t forget to vote today. -
OJA nominees; Floatutorial; Sympatico brought to its knees
The American government seems to have found a clever way around the freedom of the press: treat online journalists as ISPs. -
In-browser XHTML editor; testing CSS designs; ALA redesigns; Postman has died
A Toronto-based company called Belus Technology has developed an ActiveX-based WYSIWYG editor that produces valid CSS and XHTML 1.1 content. After a quick demo run, it looks to be good in-browser editor, and an excellent replacement for the typical mark-up produced by contentEditable interfaces. It could also be a solution to the problem Tom Gilder raised yesterday. -
System styles; stopping mega media mergers
A discussion on evolt’s thelist reverting forms to the system style introduced me to Jeff Howden’s chart of User-Defined Colors, Fonts, & Cursors. As I mentioned in a subsequent post, although system colours will be deprecated in CSS3 a new property called appearance will be introduced which allows, with one value, the author to specify the users default system’s “color, font, background, padding, border, and margin.” Also some of the values in Jeff’s table only IE6 currently supports have made their way into this draft (specifically the values in font and cursor). -
News.com does CSS; CSS 2.1, and Paged Media module drafts
News.com has followed Wired News’s lead and switched to a CSS-based layout. Although the mark-up doesn’t validate, it does seem to be semantically organized. A few people, however, have reported the design chokes when displayed in IE 5.x on the Macintosh and Windows. -
CSS filter results; screen readers study
Thanks to those who tested the CSS filters I posted here a couple of weeks ago, my initial tests are now confirmed. -
Sobig.F; Listamatic; Coupland interviewed, Gatenby resigns; Darwinian Poetry; BBC revolution
After returning from a week away, I find my Yahoo email has been (and is being) hammered by Sobig.F (given how the address is used, I think a Canadian journalist might have been patient zero for this outbreak). Although my anti-virus software and Mozilla prevented any damage, it has meant a delay in responding to genuine emails, so apologies if you haven’t yet received a reply. -
Styling legend; CSS filters for Opera
While trying to find a way to style fieldsets and legend, I stumbled across a CSS filter that looks to hide rules from Opera 7 and Safari — it could be a replacement for the *7 Hack. -
Clipping clip; new products from Macromedia
SimpleBits has a nice example of CSS-based zoom feature for images (based on Pixy’s rollover), and that in turn, inspired me to try to do use clip to create a thumbnail/zoom function. The results so far have been less than satisfying…CSS’s clip property is one of those things that never behaves as I think it should. -
CSS designs for finance sites
The second in a series of new products I’ve been working on has launched; like the first, it’s a financial service company’s mutual fund profile using an all CSS-layout. Read the related rant for more details about the process. -
Mutual funds get CSS layouts
A second Canadian financial services company converts its mutual fund profiles to CSS layouts. -
Inline lists and rounded corners
Old memes are burping to the surface, including inline lists and rounded corners. The former was inspired by a new article at evolt, the latter by a Adam Kalsey’s method for rounding corners. In both cases Eric Meyer shared some of his insight. -
The future of Web browsers; CSS design variations
Never fails post a message saying it will be quiet, and then post a bunch of links a few days later. -
CSS design competition; Meyer interviewed
Rudy alerted me (and thelist) to a new CSS design competition in the spirit of the CSS Zen Garden hosted by SitePoint. Nice to see this meme spreading. -
Meet Zeldman; CSS menus
Meet the Makers has a conversation with the always entertaining Zeldman. Interviews, especially of the Q&A variety, are never an easy thing to pull off well but somehow Brian Alvey manages to consistently produce engaging and informative ones of extraordinary length. My only complaint, and it’s a minor one, is that reading the interview means clicking through seven pages — it’d be great it there was a single-page option. -
Webstandards.TO site; Sympatico and MSN; CSS3 selector support
Joe’s got a page for Webstandards.TO, which meets again this Thursday at 7 West at 7. Unlike the meetups (and barring an ice storm) this won’t be cancelled, so if Web standards are your bag, come on by. -
Alpha transparency fix; IE improvements?
Bob Osala has created a simple and clever fix to get alpha transparency in PNGs working in Internet Explorer using one JavaScript call. There’s some catches, but it looks to be a fairly elegant solution. This is the type of thing we need more of if Microsoft isn’t going to update the standalone version of its browser. -
Top 5 CSS problems in IE; “dead” site still living
The top five CSS-related problems in Internet Explorer 6: -
CSS Zen Garden
I think after all the noise earlier this week over how hard CSS is, a lot of people who love CSS got to thinking. The truth is, CSS is not a computer language, it’s a graphic design language. In fact in my unpublished rant, this became a touchstone: -
Creating dotted borders in IE
Caio Chassot (of Caio’s Hack fame) has come up with a clever solution to create nice dashed and dotted borders for Internet Explorer using a repeating background graphic. Take a look at the page’s source to see how it works -
Responding to JWZ; XUL for Web apps
Just read Simon Willison’s reposnse to JMZ’s rant about Cascading Style Sheets, and both prompted me to elucidate my own feelings about CSS-based design. However, given the rant is not even close to being ready for publication, go (re-)read Owen Briggs’ Design Rant and my own piece on using tables or CSS. (and this is too funny). -
Firebird fight; position: fixed; RSS; CSS for handhelds
-
SARS; merits of CSS-based media filters
Everyone at work just got a personal santizer to use for washing our hands, as well as instructions on how to properly do just that. Thanks SARS! (Which, despite what some may read into the WHO’s announcement, is not even close being an epidemic in Toronto.) -
CSS support charts back
-
Flush borders with Netscape 4; Nando Times closes
I think I’ve found a solution to a problem that’s been bugging me for a long time: adding a border flush with the background in Netscape 4.x. Although it requires an extra element, it’s worth it: -
New Position Is Everything layout; blogging as reporting; Fast Company does CSS
Big John has released another template hosted on his new-ish site, Position Is Everything. The latest layout has three columns, which are all the same height no matter which is the longest. Although I couldn't load it in IE 5.5, it apparently works with IE 5+, Opera, and Gecko-based browsers. -
Style sheet guide gone with Webreview.com; screen rulers
Any request to webreview.com is now being redirected to ddj.com — home of Dr. Dobb’s Journal. Not only does the latter have almost no Web development content, the move has rendered Style Sheet Reference Guide Master Grid and everything else at WebReview.com’s Style Sheet Reference Guide unavailable except through Google’s cache or the Internet Archive’s. -
getElementsByClassName; CSS tabs; Mozilla Mail
Via Simon Willison: Andrew Hayward’s document.getElementsByClassName. -
FIR and DOM
My comment system is acting up, but a short-term fix is in the works. Will probably rewrite the comment script in another language. Of course this won’t be an issue when/if I switch to a new back-end system. -
Standing up for standards; background-image to replace text
Adrian Holovaty has posted two excellent new items, the first is an interview with Andy King on optimization as it relates to news sites; the second is an open letter to the OJR’s editor/columnist Staci D. Kramer about the need for those same sites to support standards. The latter is an excellent argument on why standards are important, and was spurred by a shockingly naïve post to online-news suggesting it’s okay to block non-IE browsers. -
Nemesis Project; CBC Home Delivery
Gary Bland’s “Nemesis Project” is up and running offering a good collection of links to CSS and XHTML resources. -
CSS rollovers; DOM’s range
For a while, I was planning on implementing a type of pure CSS rollover in way similar to Holovaty.com has. In the end, I didn’t do it for much the same reasons his readers are commenting about: the jumpy text. Nevertheless, I’m glad Adrian did follow through, if only to get responses to a usability issue I only speculated about. -
Guide to handheld style and a tutorial on CSS
The last couple of times I’ve gotten together with former co-workers at the Jersey Giant, the bar seems to be giving away free beer and related tchotchkes. Last time it was Guinness, this time, though, it was Canadian. Nevertheless, I did manage to have a good time. -
Lay-offs; list of three column layouts; Color Blender; DevEdge redesigns
Yesterday, a lot of good people lost their jobs (my own fate is still up in the air). It was, as one would suspect, a far from pleasant experience. -
Weekend hits
Brief hits to ease you (and me) into a much-needed weekend: -
Retire HTML; CSS 2.1; interviewing Christopher Schmitt
Is it time to retire HTML? That’s what a new piece in Boxes and Arrows argues — and I surprised myself by agreeing with may of the points. The essay says dHTML has reached its limits as a Web application development tool, and suggests some potential replacements like Flash and Curl. -
Clearing the link-backlog
A good estimate of my workload level is the density (or frequency) or my entries here. Normally, I run across a few link-worthy items a day. Often times, I grab the link, drop it on my desktop, and write up an entry when I have some downtime (usually lunch). -
Testing generated content; don’t use DOM 2
Gavin Laking is tabulating how browser’s display CSS-generated content (specifically Adrian Holovaty’s blockquote+cite trick). If you’re visiting the cite, send Laking feedback on how it works for your browser/OS. -
Vertical CSS play; introducing CSS
Talk about simple: Joe Gillespie has posted a clever way to vertically centre a block of a known height on a page (via Digital Web). -
Online newspaper design; linking style
A couple of weeks ago I was talking with an old print guy about the best looking newspaper sites. Both he and I agreed The New York Times does the best job representing the print edition’s feel and the Web’s experience. Over at Poynter.org, Anne Conneen has come-up with her own list — and an excellent one it is. The only addition I’d make is the nicely designed, extremely usable, and geek-friendly Sacramento Bee. -
Lowercase Internet; css-discuss Wiki
Hope everyone enjoyed a bit of a break — me I’m still fighting the cold that started just before my holidays began. By the way, rumour has it the latest CBC Radio 3 webzine is using a David Elfstrom photo… -
XSLT; styling headlines; fighting copyright tariffs
Although I’m extremely busy right now I have the opportunity to finally practice what I preach about the separation of presentation and structure, and am finally realizing how valuable XSLT would be in a real-world situation. -
CBC Radio 3 a masterpiece; W3C goes tableless
Not sure how I missed this, given my status as an unofficial CBC groupie, but its Web network has relaunched as weekly magazine gorgeously designed in, ahem, Flash. CBC Radio 3: Music and Modern Media looks to be what Shift once was — but with the design of a hip Wallpaper*. -
Fixing Trade by Numbers; Sun to unionize?
Mozilla 1.2.1 is out, and it fixes the problems that caused 1.2 to be pulled. -
CSS filters; better headings; WSJ stable
Kevin Smith has done a tremendous amount of organizational work to clarify where all the various CSS “hacks” work. While other sites are listed from it, his CSS Filters page will likely become my one-stop hack shop. -
Moving briefs; CSS menus
Some good reading I found over the weekend (unfortunately, since we’re moving in less than two weeks reading time is at a premium): -
CSS3 releases; the Content Provider’s Manifesto
The CSS3 modules are being churned out at a furious pace recently. Last calls were issued for the text and box-model Working Drafts. A second draft was published for lists and and a first one for borders. The latter has some interesting visual additions including implementations for drop shadows (which would render my CSS trick obsolete), rounded corners (which would render another CSS trick obsolete) and creating borders using images. -
IE 5/Mac tips; Asper rants
The Macintosh version of the Internet Explorer 5 was the best browser for rendering CSS when it first appeared in early 2000. Now, two-and-a-half years later, other browsers provide more consistent support and that browsers quirks have become more apparent. Thankfully Apple.com commissioned an excellent article detailing workarounds for the most common problems. (A thorough list of bugs is available from CodeBitch.) -
Hiding from IE5/Mac; titling pages
A new (?) CSS trick that serves styles only to IE 5.x on the Macintosh has been uncovered by Geoff Sheridan. (Get more CSS tricks using import.) -
New tableless Opera site
I’m coming down with a cold and have two big projects due this week, so postings may be rare. However, you may be cheered to know that Opera.com has also abandoned tables, and uses valid XHTML and CSS on its site -
Wired in style
Wired has done something very few big sites have the balls to do: abandon tables in favour of an all CSS-based layout (that even includes a text resizing widget). -
Google tweaks; link icons
Perhaps in an effort to prevent the news sites practising something like google-bombing, the search engine has tweaked its service. The Register offers a peak behind Google’s curtain. -
A box model fix and a JavaScript verifier
Thor Larholm wants to make sure every box is the same size. -
Spam cop and tiny fonts
-
CSS signatures
Inspired by one of Eric A. Meyer’s recent postings to css-discuss, saila.com now has a “CSS Signature” allowing you to re-style this site. -
CSS photos; libel online
Inspired by Steve Champeon’s experiments, R.Livsey posted to evolt’s thelist a PHP script that quickly accomplishes the same thing. -
In-house Web design; WCAG 2 draft; 100% height
Well, I’m another year older today and that coincides with someone finally hitting this site looking for the Saila-brand of licorice mints. (Apparently “Saila” is also the name of the chief or prophet of the Kuna people in Panama.) -
Broker Survey
For those of you wondering what I do for a paid job, The Globe and Mail’s 2002 On-Line Broker Survey is a good example (and those using Gecko-based browser will see a simple, CSS-based rollover effect on the tables). -
Mozilla 1.2 and box-sizing
The alpha version of Mozilla 1.2 is now available, with some helpful keyboard-based navigation improvements. -
WebWord.com style
WebWord.com is thinking about switching to a CSS-based layout, and is soliciting opinions. As an example of the potential of a CSS layout, I put together a mock-up of the WebWord.com homepage (with the exception of the ad, the JavaScript caused problems in Netscape 4). The design works in Netscape 4 and up, is valid, more accessible, works better for non-visual browsers, and is basically identical to the tabled version. -
Champeon and Kaiser interviewed, IE 5/Mac bug fixed
Digital Web magazine has a new issue out, and this one focuses on Web standards, specifically, an interview with Steve Champeon (List Mom for WebDesign-L) and Shirley Kaiser about the WaSP, as well as an excerpt from Zeldman’s forthcoming book, Forward Compatibility: Designing & Building With Standards. -
Tables and CSS
Zeldman’s words carry a lot of weight amongst a large group of Web designers. So when he wrote “To Hell With Old Browsers” sparked a heated debate. While the debate was healthy, it was often wrong-headed, and yesterday he tried to clarify the issue in regards to tables and CSS. -
XHTML 2 and CSS 3
-
csschallenge.com
Tim Parkin’s csschallenge.com plans to be a site to offer layouts for CSS evangelists (like me) and those favouring tables to work on. After he posted the link on css-discuss a number of people met the challenge. -
Rebuilding with, and without, CSS
Christopher Schmitt explains how to change table-based sites into CSS-based ones, using Digital Web as an example. Although the results aren’t pixel perfect (and in fact the navigation is a bit off), the techniques he uses are excellent. -
Email etiquette; CSS outliner menu
Scott Andrew LePera wishes Netscape 4.x a happy birthday. -
Tables, djc leaves
When the Ontario Science Centre needed a new homepage fast, I, ironically, found myself resorting to a table-based layout. -
Netscape 4 layouts, Dreamweaver, and ethics
Updated the list of Netscape 4.x CSS templates with a bunch from the CSS Colouring Book. -
Strike; CSS Masters Series
Well, I won’t be working for a while. -
AOL offers Mozilla a boost; tabless layouts
Last May, I quoted a StatMarket survey showing Netscape would jump to a 20 percent marketshare if AOL switched to the Gecko-based browser. That 14 percent gain looks to become a reality: AOL version 8 will reportedly switch from IE to Netscape. As I said then: -
Tables or CSS?
This article covers the benefits found in using style sheets instead of tables, and provides some questions to should ask before developing a CSS-based layout. -
Olympic hurdles; layout thanks
While in Ireland a year and a half ago, I went to one of the most western parts of Europe, Valentia Island. The early radio operators there were one of the only points of contact for ocean going vessels, thanks greatly to the work of Guglielmo Marconi. -
Saila CSS Layouts
A tableless CSS-based, liquid, three-column layout that works in Netscape 4, Internet Explorer 4 and up, Gecko-based browsers like Mozilla and Netscape 7, as well as Opera. -
Simple CSS drop shadows
There are a number of ways to create Web-based drop shadows; this article offers a way to do it that works in most browsers, while degrading in the rest — and graphics are not needed. -
Three-column layout tutorial coming
Been getting a few emails asking about how I do saila.com’s three-column, fluid layout with only CSS. -
Dynamic style sheets
A discussion on evolt.org’s thelist on using ASP to create a “customizable” style sheet using variables lead me to this article, “Creating Dynamic Style Sheets Using ASP”. Am in the process now of playing around with the concepts therein to see if I can find a solution to my ongoing style sheet battles with Netscape 4.x -
CSS Layouts
A collection of CSS-based layouts available on this site, as well as pointers to other resources. -
What are attribute selectors good for?
The attribute selector is a fantastic tool. A simple example of their benefit is when styling forms. Say you have this: -
What CSS selectors does a browser support?
In CSS 2, IE/Win doesn't support the following selectors: -
Are CSS hacks and filters necessary?
Depends on the site. For example, saila.com relies on conditional comments to serve styles to IE, and is designed to support Mozilla/Opera (fourth generation browsers are, essentially, ignored). -
Is there away to display a user’s system colours?
Yes, through CSS. In CSS2, there is a set of unique colours based on system features (such as InfoBackground and ButtonFace). These get deprecated in CSS3, in favour of even more specific values. The proposal calls for a new property called appearance which simultaneously affects a variety of values (colour, font, background, padding, border, and margin). There are also new values for font, drawn from the system settings. Finally, the cursor has a number of more specific values, too. The many of the values in the last two additions are currently supported by Internet Explorer -
How do I style links?
A linked anchor (a) element has a series of pseudo-classes that can be applied to it (:link and :visited) in addition to :active and :hover. For CSS-1 style sheets, this is the best way to style links: -
Why aren’t my style sheets showing up in Mozilla/Netscape 6+?
Your server likely has the wrong MIME type declared for your style sheets. According to the W3C, the file should be served with a content type of “text/css.” For more infomation, and how to fix the situation, read Netscape’s “Incorrect mime type for CSS files.” -
How can a page’s design be quickly changed?
The W3C has made it possible for a page’s entire design to be changed by switching the style sheet used. Although Internet Explorer doesn’t yet support this, both Mozilla-like browsers and Opera, do. Simply add a title and the words “alternate stylesheet” to the the link’s rel attribute: -
Does Internet Explorer on Windows support
As of Internet Explorer 6 for Windows, there is no support for position: fixed, however there are a couple of JavaScript workarounds:position: fixed? -
How I can serve different style sheets to different browsers?
Obviously, the best thing to do is detect the browser and serve the approriate style sheet, and the safest way to that is on the server-side using PHP, ASP, XSSI, or something similar. But, if that's not an option, it can be also be done on the client-side using JavaScript. A third option is more problematic, but can be successful: exploit a known bug in Netscape 4.x. Find out more -
How come the text gets smaller and smaller in Netscape 4.x?
Despite all the p elements being closed, Netscape 4.x treats each subsequent paragraphs (or other elements) as direct child of the first, thereby reducing the text sizes. -
What’s the difference between “visibility” and “display”?
The visibility property only affects the appearance of that node’s content (either by showing it, or not), but display affects the appearance of the entire node. This latter effect is often used in drop-down menus or outlines because the placeholder space created by visibility: hidden can ruin the illusion of a menu opening and closing. -
How can I create space between list items?
If it is a block of text, the best thing to do is wrap the text with a paragraph element (this is both valid and semantically correct, as Rudy pointed out on thelist): -
How are inline list created?
Using an inline list is a simple way to structure horizontal navigation. And unlike some elements of CSS, this only takes online and works even if the browser was rudimentary style sheet support (like Netscape 4.x): -
How do I indent lists using CSS?
There really isn’t a proper way. Both the Gecko-based browsers and Internet Explorer interpret the CSS specifications differently. To ensure consistency the best thing to do is clear the left padding and margin values, which brings the bullets flush to the edge of the box (i.e., there is no indent). -
How do I style an
Internet Explorer and most CSS-compliant browsers (e.g., Gecko-based ones—Opera has one quirk which Stefan M. Huber has documented) treat the styling of horizontal rules differently. Essentially, IE treats them as inline elements, while the others treats them as block elements.As such, to colour it red...hr? -
How can I have a liquid layout, with a maximum width?
The easiest thing to do is use the property max-width. Unfortunately, that’s not supported by most versions of Internet Explorer. -
How do I center a table using CSS?
The correct way to center block elements, like tables, in CSS is to set the margins to this: -
Why do my anchors change colour on hover?
This is because CSS-2 allows :hover (and :active) to be applied to any element. Conforming browsers (such as the Gecko-based ones) will apply a:hover to links and anchors. To avoid this, apply the link’s style rules with more specificity -
How do a remove the border around a linked image?
In HTML (and older browsers like Netscape 4.), it’s just a matter of adding border="0" to the img element. -
Why do images in tables have a white gutter on the bottom?
This is most noticeable in Gecko-based browsers like Netscape 6.x and some versions of Mozilla. The consensus seems to be that this is because the browser is treating <img> properly as an inline element. And easy fix is to put this line in your style sheet: -
How do I get text to wrap around an image?
Use the align attribute in the img element. To be forward compatible, also use the the CSS float property. -
How can I control the size of a text field/input box?
Unfortunately, Netscape 4.x displays form fields using different criteria than the other browsers (Internet Explorer, Opera, and Gecko-based ones). -
How do I make only one scrollbar appear when setting
Officially, you can’t. Microsoft, however, added some proprietary extension to its Internet Explorer for Windows that does allow for this kind of control. The overflow-y property controls the vertical scrollbar, and overflow-x controls the horizontal. Using these extensions though, will prevent the document from validatingoverflow? -
Why do form elements show through layers?
This is rendering quirk found in both Internet Explorer and Opera on Windows, and unfortunately there’s nothing that can be done about it short of redesigning the page. -
How do I get rid of the space around forms?
There are two easy ways to do this, the first is a invalid hack, the second uses style sheets. First the hack: embed the form in a table, placing the open and close form between the table elements: -
CSS Layouts for Netscape 4
A list of tableless CSS-based layouts that work in Netscape 4.