Most Common CSS Problems | August 3, 2004

I’m always surprised to see the same CSS issues coming up time and again on lists like CSS-Discuss. What, in your opinion, are the most common problems faced when moving to CSS based layout and what advice would you give? What issues left you pulling your hair out in frustration and what issues do you wish somebody had told you about right from the start?

I’m sure most people here have a GMail account by now, but I’ll be offering 3 free accounts to the best problems and answers (as judged by yours truly).

Posted at August 3, 2004 8:31 AM

Comments

Dan said on August 3, 2004 9:39 AM

The most common css problem? Internet Explorer.

jamblo said on August 3, 2004 9:45 AM

The main problem I see is how restricting from a design point of view CSS can be to a first time user. With this latest fad of making validating web logs, the number of great blog designs, in my eyes, have plumetted.

Until enough knowledge is gained, every tom dick and harry out there is creating a design with a rectangle header at the top, some links down the right hand side with some “zany” bottom-borders and a barrage of text on the left. And nine times out of ten, 5 more pages of empty space, cluttered with the page footer that has shot up to the end of the last chunk of text.

To me, this is far more of a problem than your floats not lining up or a table being used instead of a list.

Mike Stenhouse said on August 3, 2004 9:55 AM

Requests for filters and hacks to target specific browsers turn up daily. The problem is that a lot of these requests are misguided. I think that putting together a ‘definitive’ list of answers might, in the long run, hinder more than help people who are trying to learn. The great thing about a list like CSS-D is that you have REAL experts there, eager to donate their time to helping people to get their heads around CSS. Someone asks for a hack to get around Safari, they get a reply asking why and it turns out to be a box model problem that requires a different approach, not a hack at all. See what I mean? Having said that, it’d be nice if everyone checked the CSS-D wiki before posting… This isn’t the most helpful of comments, eh?

Oh, thought of one: vertical alignment. People accustomed to tables take vertical centering for granted but it’s one of the trickiest effects to work out with CSS.

Ben said on August 3, 2004 10:00 AM

I think as a whole, the language is not robust enough. I realise that the whole point is designing to standards, but in reality, when you are designing large scale apps which are populated with content by others, the language can fall over quite easily. An application I am currently developing went completely scew wiff becuase of a missed apostraphe.
This is a catch 22 situation, because we do not want to return to the days of IE rendering all and sunder, which resulted in the bastard child of HTML many now use. But it would be nice to have a language that can deal better with exceptions and errors, allowing large companies to be more confident that their apps will work better when designed with CSS, even if the untrained temps in the cellar are entering content.

Matthew Pennell said on August 3, 2004 10:23 AM

I don’t know about common problems I’ve faced, but one of the most common questions I see asked/answered is “how do I center the content column on the page?” (basically the first two CSS rules in most blog stylesheets).

David House said on August 3, 2004 11:30 AM

Well, I’m not pretending to be eloquent, but here are some of my writings on CSS:

Peter said on August 3, 2004 11:54 AM

Forgetting how to make your layout the way you wanted it to be was my problem… I always forget certain protions of my previous stylesheet, and mostly that’s the part I liked about it…

Andreika said on August 3, 2004 12:42 PM

IMO, the most popular questions lays in the field of positioning problem of CSS. There are too much tricks with JS or (more worth) with epxression (for IE) used to position elements on the page correctly.

Dave Mead said on August 3, 2004 1:10 PM

I think one of the most asked questions I come across (and struggled a little with when I started) is about floats. When/how should it be done and why doesn’t it work as I think it should :-)

chuck said on August 3, 2004 1:44 PM

I’ve been using CSS for a couple years now and I’ve been trying to transfer some of the knowledge I have to the 3 people that work for me. I can tell you the biggest hurdle for them is laying out the main block sections of a page (they’ve got tables on the brain) and getting the “boxes” to sit where they want them.

I also agree with jamblo’s comment above about how every site looks the same. It seems to limit people’s creativity some times - mine included. I have to force myself to think outside the “box”, no pun intended :)

JanW said on August 3, 2004 2:13 PM

Floats and the IE Doubled Float-Margin Bug
http://www.positioniseverything.net/explorer/doubled-margin.html

Joshua Cook said on August 3, 2004 2:19 PM

By far the most common problem I see is improper use of class and id attributes. Basically, every beginner’s CSS design that I have seen uses classes like class=”red10ptsans” or even, for the love of god, class=”plaintext”!

Every CSS book and tutorial should begin with an introduction to proper usage of these two attributes, which are arguably the most important in HTML when it comes to CSS design.

CSS designers should realize that:

Classes aren’t always necessary! If every <p> element is going to have the same style, adding a class to every paragraph is redundant at best.
IDs should be unique on a page. Let me repeat that: don’t reuse IDs! Remember that ID is an abbreviation for “identifier.” Use IDs to target specific, individual elements.
Classes are meant to be reused. They work great for things like alternating background colors in table rows. (Give every second row a class=”alt-bg”, for example.)

I could probably expand this rant into a good article, but this post is getting a little long-winded, for now.

Political rants and music. Propaganda. The Visitations.

Andy Cogbill said on August 3, 2004 2:22 PM

I think most of these responses revolve around one specific CSS problem without any one explicity recognizing the underlying issue. All of these “problems” have to do with rendering engine differences between browsers; it isn’t necessarily that Safari doesn’t do floats well, it’s more that it does it differently than, say, Firefox.

Though the first commenter chose to recognize one browser as a problem, it probably would have been best (if not at least more political) to say that the biggest differences lie between that browser and others.

The only problem here is the difficulty of sameness and cross-browser compatability in CSS has become a list of hacks only because of the different rendering issues.

Laura said on August 3, 2004 2:36 PM

A very frequent cause of CSS problems is not fully understanding the “The Cascade.” This leads to the belief that a certain style rule should work when in fact the cascade rules make another style rule dominant. The only “fix” for this is to learn the cascade rules.

Laura said on August 3, 2004 2:39 PM

Requests for hacks are common. It is usually best to try to stay away from CSS hacks as much as possible because solving one bug by another is not a good method of keeping Web Design simple. Hacks go beyond bad coding style because with the next release of a browser you could end up with a hack that applies an extra rule you no longer need, or with a necessary extra rule that isn’t applied any more.

Laura said on August 3, 2004 3:15 PM

A common problem for some beginners is validating. Valid markup and CSS just aren’t just good for accessibility and web standards. Valid CSS and XHTML are good to help debug CSS. Nothing will work if you have improperly nested and unclosed elements. Always make sure markup is valid before writing the first style rule. Then validate as you work to help yourself reveal CSS problems. Many cases of ‘it works in one browser but not another’ are caused by silly author errors. Validation isn’t a magic bullet that will automatically solve all CSS problems. But validating eliminates many potential incompatibilities, leaving a more manageable subset of actual incompatibilities to work with.

Kevin Navia said on August 3, 2004 3:19 PM

The 3 pixel jog for IE when using a float and a margin. (This haunted me a lot before!) Reduce the offending floated div with a -3 pixel on its right margin.

Another is about float clearing! With its solution of adding an empty div with clear: both, it clears but it adds more coding glut.

True, hacks can be a crutch… I keep reminding myself to ‘not’ to use hacks as much as possible.

Laura said on August 3, 2004 3:19 PM

Giving serious attention to the logical structure of a web page is an issue when beginning to learn CSS and web standards. Not only will that attention make it inherently more accessible, it will help insure that you are correctly pinpointing what you really want styled. This allows a designer to target selectors to accomplish precise tasks.

Think very hard about the document tree and selector behavior. This is necessary (as painful as it may seem at first) to enable you to visualize a document’s structure mentally and determine what selectors can be used to address parts of it.

Charlie said on August 3, 2004 3:19 PM

I’ve jumped in over my head by making sites like this and Zeldman and Authentic Boredom a daily read - I’m fascinated by the “look” of these sites as well as the “mechanics”, underlying CSS, etc.

Currently, I use tables and all manner of other shoddy design practices because I have a “good enough for me” approach to design. After all, if it works “good enough,” it doesn’t have to be “excellent,” right?

There is a steep learning curve between “good enough” and “excellence” and quite frankly, it’s a dizzying height to look up at from below.

Where do I get on the train? How do I start converting my bad practices into good ones? I see lots of hacks and tricks and whatnot, but I don’t see anything that explains the mental, idealogical transition between thinking in TR’s instead of DIVS.

All these cool sites are in a folder in my favorites called “CSS Snobs” - not because I feel looked down upon, but I feel as though the world of “Excellence through CSS” is very difficult to introduce myself to.

Approaching CSS, I feel like a cowboy walking into an English tea party with mud on my boots and a three-day-ride’s worth of dust caked in my beard.

CSS is the party, and I forged my invitation.

Seth Thomas Rasmussen said on August 3, 2004 3:23 PM

Jamblo:

You can’t write off CSS as the cause of this creative rut you see. First, even assuming this rut exists, how do you suppose to blame it on CSS? It just happens that many sites touting standards and CSS-based design use the 2-3 column format because it’s a tried and true way to present information like that.

I feel like I can almost assume the answer is “no”, but have you seen http://www.csszengarden.com/ ???

Back on topic: my biggest problems were understanding the box model, floats, and just the general shift in mindset from grid-based layout to rules-based layout.

I dunno how my learning experience could have been better. I would suggest use of forums and lists like CSS-Discuss that were mentioned. One I am quite fond of is Coding Forums: http://www.codingforums.com/ This is also a great resource for other types of coding, as the name implies…

Bryant Cutler said on August 3, 2004 3:35 PM

I think the biggest problem with CSS design is not a problem with the language but with the designers. While there are frustrating bugs (IE+floats=ulcers) the larger issue is that developers are trying to create the same layouts with CSS that they would with a table. Vertical centering is difficult with CSS, especially without Javascript, and the hacks and tricks that go into even a simple three-column layout will frustrate a lot of first time users. The problem is not the CSS but the fact that CSS newbies are trying to pull off table layouts… why have we not yet created any page layout conventions that cater to CSS’s strengths instead of its weaknesses? I think when designers finally start emulating CSS designs instead of table-based designs the barrier to entry will disappear.

jamblo said on August 3, 2004 3:58 PM

@Seth:

You may have missed my point here. Having learnt CSS to a reasonable (yet far from exceptional) standard over the last few months myself, I feel very at home when using it, and hate to return to old methods now that I know the tricks of the trade.

The point I made, was that unless a great deal of time is spent learning the techniques that can be used to produce highly effective layouts, many are happy to stick to a bog standard and frankly boring way of design.

I don’t claim to be an expert on the issue, but I consider graphics to be my forte, rather than programming, and from this stance, I see the use of a CSS structure often leads to the stereotypical header/two panel layout, with little depth and to me, this is one of the problems CSS presents.

PS. Yes I have seen CSS Zen, a good e-friend of mine produced a style for it.

david gee said on August 3, 2004 4:18 PM

I have a similar, if opposite view to Mr. Cutler above. The main problem with CSS, as I see it, is that it provides incomplete rendering abilities. While moving forward to CSS2.1 and even CSS 3, basic layout abilities have been dropped by the wayside. CSS advocates, by and large, whistle and look the other way when these are brought up, and at times even get downright snotty. Why should I not be able to accomplish any layout using CSS - especially one that I can easily accomplish using tables? CSS is meant to be a step forward - it should provide all of the functionality of previous techniques.

I picked up HTML and web-design in 1997. One of the things I have always prided myself on is being able to transform any design into web markup. I can do the same thing with CSS and Javascript, but very often it’s a lot more work.

The most obvious shortcomings with CSS are, of course, the things that tables handle very well:

These are basic design concepts - not an artifact of HTML markup influencing design decisions. Look at any magazine, poster, flyer, client-server application, etc and you will find examples of these techniques. There is no simple and robust way of accomplishing this with CSS.

Hacks and browser-bugs are not really CSS problems. Bookmark positioniseverything and a few other sites and you can learn to overcome these quirks in about a week. The real flaw is with the basic shortcomings of the model.

The lack of support for “display:inline-block” (floats without, well, the floating) is a major shortcoming. It’s part of the CSS2.1 spec, IE supports it, and it’s a very useful attribute. Not quite “display:column”, but a good start.

Also, whoever came up with the whole “float” and “clear” concept was smoking a whole lot of crack.

PS. It would be really great if you allowed users to disable/enable the “Comment Preview”. It slows entry down quite a bit.

Yvonne Adams said on August 3, 2004 4:41 PM

While specific browser bugs cause headaches, I think the biggest hurdle many face when switching to CSS based layout is learning to think of marking up their documents structurally.

As some experienced procedural programmers struggled in the switch to object-oriented programming, many visual designers have struggled when confronted with logical markup groups instead of visual grid blocks (table cells).

I’d advise the beginning CSS learner to forget about graphics for a while, and just focus on working with structural layout. Either add borders to block-level groupings in the CSS, or use one of Firefox/Mozillas extensions to do it for you.

Why not think about a print stylesheet first? While I don’t ordinarily do this, it might help a beginner think about page structure. If you’d want a print document to look like an outline, or magazine article, you’d think of heading priorities, lists of useful references (links), and what items belong in a header, footer, or sidebar.

How should things be grouped together? Just as you might move a group of items as a block by putting the layers into a Photoshop folder, you might put a markup group into a containing div. Navigation, sidebar, footer, pull-quote etc.

Look at your groupings. Does a page have more than one heading? Not likely. Make it have an id, not a class, then style the contained blocks using inheritence to avoid classitis.

A page could have more than one pull-quote. You might also have blockquotes used in the traditional form. Put the pull-quotes in a blockquote with the class .pull-quote and you can easily style them differently. Alternatively, if all the blockquotes in the #article section will be pull-quotes, you could just use
bq. #article blockquote {}
to set the style.

Once you’ve begun to understand how to work with grouped markup, then go back and look at graphics. You’ll probably find that the table style of slicing up a Photoshop file is no longer the best approach. You many turn layers on and off and output background images seperately from foreground areas. You may decide to repeatedly crop the image and only output the needed images, ignoring a grid entirely.

“Play” with CSS layouts before actually attempting to do one for a client, where time and money crunches will tempt you to look for a quick fix that might create headaches later.

Ask questions on CSS-discuss, or elsewhere, but only after you’ve validated your markup and tried to look for the answer first. When you ask for help, let others know what steps you’ve taken to solve the problem. What search terms did you Google with? Perhaps you need help with terminology to find it yourself.

Scott Plumlee said on August 3, 2004 4:53 PM

Two pet peeves, both of which I have been guilty of before. Mea culpa.
1. (Not really a CSS problem, but…) The unwillingness of people to actually read a spec/book/written expanantion of how and why a CSS property/feature works before asking the entire web “how do I….”.
2. The total control of CSS makes it almost too easy to miss the forest for the trees when designing a page/site. It’s hard to take a breath and make the big things right before getting caught up in tweaking the small things, because it’s so much fun to be able to make those minute tweaks.

Seth Thomas Rasmussen said on August 3, 2004 6:42 PM

Jambo:

The whole point then is that the very existence of Zen Garden alone, not even to mention any other worthy designs, proves that the limitations are not in CSS.

I think you have a point about design, but it isn’t linked to CSS or any specific implementation of design at all. It just so happens that some of the best CSS sites out there also happen to be some of the best sources of information for CSS. And when conveying information like they do, the same layouts pop up because they work well for that information.

I’ve just seen comments like yours before, and it’s a tired comment based in next to nothing. I’d hate to see it actually influence somebody’s opinion of CSS, so I have to comment… ;*

Greg Veen said on August 3, 2004 7:35 PM

The biggest hurdle for me was the ability to reliably achieve certain layout effects that were simple using the old-school nested table approach but seemed needlessly complicated when switching to a more semantic/CSS-based approach.

I’m thinking of things like centering a fixed-width layout, as this site currently does. What, you mean I can’t just tell my content div to be centered? Oh, I have to use the margin-left and margin-right “auto” value. Ok. But wait a minute, that doesn’t work in Win IE 5 — still a big chunk of my audience! What now? I have to add text-align:center to the content div’s parent, but then override it with text-align:left for its descendants? Grrrrrr. Why is this getting so complicated?!

Or there’s the annoying issue of containing floats. I’m remembering a search results page that I worked on near the beginning of my transition into CSS-based layouts, where each entry includes a floated image. Grrrr. Why don’t the entries’ borders fully contain larger images? That was SIMPLE using tables! Oh, I see, I have to worry about properly clearing elements and concluding with block-level elements and…

But it got easier. And better and better and better.

Florent said on August 3, 2004 8:15 PM

First let me excuse myself for my bad english.

I am a webmaster of a small french company running games (such as a lottery)on the internet. Being the project manager for the next redesign of our websites i’d like to give a try to xhtml and css.

My main concern is about the “look and feel” of the website designs : they have be cartoonish…and one of the issues of these types of website are poor text content. It all relies on images. so my question is: does it worth it ? How could I implement a lottery grid with css ? should i use UL’s and LI’s ? Lots of question an no answer… maybe some people here could help.

Thanks

Tom said on August 3, 2004 9:41 PM

One of my biggest frustrations is the amount of browser testing CSS layouts entail and the sacrifices you have to make to ensure it works in every browser.

CSS is clean, tidy and accessible but a real pain when your boss uses IE5 on a Mac and doesn’t understand why it doesn’t look exactly like the mocked-up JPEG screen-shot you showed him earlier.

Sometimes it’s very tempting to revert back to using tables to ensure your site looks the same on every browser.

Joshua E Cook said on August 3, 2004 10:24 PM

Florent:

Don’t shun the use of tables for data of a gridded or tabular nature. That is exactly what they are for! When designers talk about replacing tables with CSS, they are talking about the tables which are used strictly for layout, such as dividing the page into columns. If your data resembles a spreadsheet in any way, you should definitely use a table for markup.

CSS can be used to give your tables style, such as borders, backgrounds and hover states in the browsers which support the :hover pseudo-class on arbitrary elements.

Political rants and music. Propaganda. The Visitations.

Christopher Bourque said on August 3, 2004 11:44 PM

Getting started with CSS, I felt like Adam must have after eating that apple. My first thoughts were - wow, I can do all that with CSS? My markup should be lean, make sense, and have meaningful structure? None of these things occured to me before. I just cranked out sliced and diced sites that looked good and didn’t care about what was under the hood. My second thought was - I’m ashamed - of my code!!

What CSS introduced me to was a whole new world of design principles, information architecture, semantics, meaningful structure, accessibility, usability, and a plethora of other little disciplines that should be adhered to when designing and building sites.

Now I’m standing here on the path having eaten that apple and realize - oh crap - I can’t unknow what I now know. I’m locked in an uphill battle against the other %99 of web developers that hadn’t nibbled any fruit. How can I get them to open their eyes?

CSS isn’t evil. Quite the contrary - it’s just a no going back kind of scenario. Once you start down the path, it only makes sense to go forward. I can’t imagine starting a site now without digging into all these topics - so CSS became the tripping point for me that dislodged an avalanche of good practices. I’m glad I did it, but I sure thought I related to old Adam there for a little while.

Tino Novellino said on August 4, 2004 1:53 AM

i’m not out for any GMail accounts or anything, but i’m sure everyone will agree that the problem is browser compatibility (that means you IE). :)

Stephane said on August 4, 2004 4:56 AM

A little off subject but…

The biggest problem with CSS - imho - is designer, I should know I am one. The thing is that we are not programmers and both Dreamweaver and GoLive do horrible CSS. I guess we will have mostly variation on the two columns layout until great software enable more people to do CSS layout.

The second reason is that it can take a while to get around the fact that everything is square in CSS, there are ways to change that but it’s a little bit harder and you must know your CSS pretty well.

The designers I know that want to convert to CSS always ask me how to do positioning. Working with float and getting them where you want is my most asked question. Fortunately most problem get answer by showing first how to properly code your html.

Richard Tallent said on August 4, 2004 7:07 AM

The biggest problem I’ve seen is developers not understanding the difference in CSS rendering between quirks and standards modes in IE and Mozilla.

Using the right doctype to make sure both are in standards mode, I rarely have to use any sort of browser tricks or sniffing. Theoretically that means I’m sending XHTML-transitional under the MIME type text/html, but “frankly my dear” is the appropriate respone to the standards snobs at that point.

jamblo said on August 4, 2004 8:26 AM

@Seth:

Yet once again, you have missed my point. The question asked was “What, in your opinion, are the most common problems faced when moving to CSS based layout…”. Not, ‘what are the problems CSS creates for someone who’s been using it for 6 months?’.

I fully understand that CSS has a lot to offer and once you know how to use it, great things can be achieved, such as CSS Zengarden, but to someone stepping into the area for the first time, it can seriously dampen the end result.

You could argue that someone who ends up making a mediocre design may not have had any design flare to start with, and on some levels I could agree with this, but at the end of the day, many sites end up taking 1 step forward and 2 steps back as they try and fit their styles into a new way of thinking.

Sue said on August 4, 2004 10:49 AM

A specific problem:
The lack of good CSS resources & tutorials in French. I’m lucky enough to understand English but not all French speaking people are. Hopefully, this is starting to change and I can now give references. Here are a few examples:
Pompage.netthey translate articles from A List Apart
L’altruistegood tutorials, XHTML, CSS, Javascript and more
SelfHTMLThey have added a French version
CommentCaMarche.netA good introduction to CSS
La Grange.netA translation of the W3C recommendation

Andy Smith said on August 4, 2004 1:11 PM

Two of the most common problems I’ve seen people have are related to things that IE does in non-standard ways - people tend to think IE is behaving correctly and there’s a bug in Mozilla or other standards-compliant browsers.

One is the gap that can appear under images in table cells in Mozilla. The reason for the gap is explained well in an article on Netscape DevEdge and one solution is simple: give the affected images display: block.

The other problem is float containment. I think this article by Eric Meyer explains it well although these days an answer to this question could also mention this article at Position is Everything .

Josh Hogeterp said on August 4, 2004 1:47 PM

The biggest probelm I faced was that I had become lazy. I hadn’t hand coded anything in probably two years. I didn’t have to think about the way things were layed out semantically because dreamweaver did that for me. Sure I have come across bits of css where I am just lost, but as a whole, trying to get my mind to think in a new way is the hardest thing so far. But the difficulty is worth it for I aways feel more in “tune” with my designs now because of the amount of detail that has to go into building a site with css. I haven’t been at it for long, and I haven’t played around with any overly difficult layouts in css, so I will probably have a float problem or a browser problem to cry about later, but for now I am just trying to wrap my head around a totally new way apporaching my designs.

Kevin Leitch said on August 4, 2004 2:47 PM

The biggest transition for me was ensuring I had a thorough knowledge of the box model. I foun that once I had this concept under control, CSS became a total joy as oppose to slow, cluttered tables.

There was no one solution to me grasping the box model concept but the usual suspects (ALA/Meyer/etc) helped solidify the concept and sites like positioneverything helped me understand the way IE works.

Stephanie Leary said on August 4, 2004 3:23 PM

Q: Why does my CSS show up in IE but not in Netscape/Mozilla/Firefox/etc.?

A: You’re serving up the CSS file as text/plain instead of text/css. Fix your server.

I’m astonished at how many people are still tripped up by this one.

I agree with Yvonne that the biggest problem with CSS is learning structural markup. Most of us just weren’t taught that way.

Blake Scarbrough said on August 4, 2004 4:04 PM

One problem I had recently is working with third party developers that don’t know CSS at. Check out my story about it.
Other than that I would have to say working with IE is can always be a struggle, especially when they don’t support certain properties or pseudo elements.

I already have a gmail account, but I wanted to pitch in my two cents.

ant said on August 4, 2004 4:10 PM

I get this question all the time: What’s the difference between “id” and “class”? (If I had a nickel…)

Mitchell Stokely said on August 4, 2004 5:40 PM

Andy, thanks for the forum. After 8 weeks of hell evaluating all available XHTML/CSS migration solutions, I have come up with a pretty solid cross-browser architecture for css and xhtml layout. You can see that here as templates for expanding and frozen sites using floats in CSS. Test these and let me know how well (or poorly) they work on your OS and browser. (The stuff I have at my domain www.stormdetector.com is a rush job and butt-ugly. Just raw text right now….look for a prettier css site later!)

Expanding CSS Template: http://www.stormdetector.com/layout1.html
Frozen CSS Template:
http://www.stormdetector.com/layout2.html

The CSS code and architecture is pretty intense, if you try and download it, but I have my reasons I will explain elsewhere. It basically has to do with the browsers and all the ways they interpet and support CSS, as we all know.

If you use my code and architecture for building your own CSS site, all I ask is give me credit in the code, or simply reference my site and link to it. Or better, send me problems and solutions to make it better. I will have it in an actual designed page at some point, so everyone can see that its viable as a web architecture. My personal site at www.stormdetector.com I promise it will be much nicer soon, and chocked full of CSS and xhtml code and support, as well as solutions. Im a designer and my work is here: www.aztecsystems.com. Its just plain black text right now till complete the redesign. You can email me here if you have any questions: wildranger222222@aol.com

I will try and post a decription of the CSS problems I had and solutions as well as the concept I have for using CSS correctly elsewhere in this blog. Its not easy stuff to resolve and you will have many late nights debugging and testing till you come up with a solution that works for you….but so was HTML in 1997 with Netscape 4 and IE 4….yuck!

You can see my first attempt at an all CSS site commercially (for the most part) here: http://demo2.aztecsystems.com. This is a test site so may be moved later.

-Mitchell Stokely, Texas, USA

Mitchell said on August 4, 2004 6:01 PM

It took me some weeks of testing on allot of browsers, but you CAN use CSS and design a layout that will support your web initiative. But as everyone seems to reflect, its not easy and not for the uninitiated.

The most common problem will be the browsers…not CSS. Keep in mind, you have two issues you have to address…..learning CSS 1 and CSS 2 and how to use it, then secondly, how each of the major browsers use it. Those are two separate issues. Also, remember, just like html and tables, we are all still coders, and finding the magic combinations of characters on the screen that performs your circus trick is the same in CSS as it is with html, ActionScript in Flash, JavaSCript, ASP.NET, PERL….whatever. Its our job to find out what that combination is. Unfortunately, in CSS, its a bit harder and actually forces you to abondon the simple 2-d table cell logic and think 3-d, using Floats and positioning and then, how to address the issues between Internet Explorer, Mac versions, Netscape, and Mozillla-based agents. With XHTML, it throws into the mix the issue where some html is not supported, plus the idea that if your page does not validate correctly as xhtml, the browser drops into what is know as “quirksmode” (www.quirksmode.org). All kinds of little things start happening with CSS once that unfolds.

The solution I found and that worked for me, since I do feel strongly its important to move to the new CSS/XHTML standard (not only for reduced development time and repurposing of your web content), was to actually research the topic in depth, and read as much as you can on the different ways the browsers support your CSS. CSS is not the problem, its the software companies. Internet Explorer seems to be a major culprit, but actually helps poor css design work. So its an illusion. Anyone seriously intersted in making the move now to CSS, rather than waiting, will have to invest some time copying and coding hacks for the browsers and a solid css architecture using divs, floats and positioning, in order to make that leap. I recommend you download IE 3-6, Opera 3.6-7.5, Netscape 1-7.2, Firefox, Mozilla, Konqueror on Linux, and find an old MAC with both IE 4-5, Netscape, and new Safari. If you can get a solution that works, or delivers plain text to the older ones but full layout to the newer ones, you have reached 99.99 of the market. Be prepared to see layouts that work well in Netscape and Mozilla, but fail in Opera 6, etc., and work through the issues carefully. Alst resort, apply the hacks in your code, and eventually you will have a solution. It takes time.

One last comment, Ive heard the Internet Explorer 7 team is assembling at Microsoft this summer to review and begin work on the next browser. You should login for free at channel9.msdn.com and give them your positive input on their browser and any issues since its a thorn in our side not supporting the w3c recommendations for css. Its not all IE, but really all browsers, but it will get there and once you see how fast and easy it is to deliver css-based sites, and the huge time saved in the end plus prettier pages), Im sure most of you will make that jump.

Mitchell S
www.stormdetector.com
www.aztecsystems.com

tswan said on August 4, 2004 8:19 PM

CSS problems that I wish I could remember from job to job (in no particular order):

1) Broken box model (in IE) & the hacks to fix it (without adding unnecessary divs just for structure.

2) 3 pixel shift on adjacent floats (in IE)

3) Collapsing margins

4) Vertically centering content isn’t possible without hacks/javascript

5) Lack of support for min-width in IE

6) Font sizing: nothing works perfectly in every browser except pixels, which won’t re-size in IE. Keywords require hacks, %’s and em’s inherit improperly in lists, etc.

7) Link hover rule order — why should I have to remember a:link, a:visited; a:hover; a:active?

8) Gaps between vertical Nav elements when styled as a list (in IE)

9) Floated elements width being added to the containing divs width (in IE Mac)

10) IE 5/5.5 ignoring font sizes within tables if font size has only been applied to the body tag

11) Etc.

(btw, I think I’m the only one without a GMail account.)

Yvonne Adams said on August 5, 2004 7:40 AM

Tim, you’re not the only one without a GMail account.

That said, I think I’ll add the comment following yours to my MT-Blacklist (it may have been deleted by the time anyone reads this)

m a r t i n said on August 5, 2004 8:15 AM

I think the most missing feature in css/html is the ability to make a text flow in two or more columns without splitting it up in the HTML.

Small Paul said on August 5, 2004 10:14 AM

I really get annoyed how even IE6 doesn’t get positioning right.

Absolutely positioned elements are positioned in relation to their containing block. This is either the body tag, or the nearest ancestor element that has its positioning set to something other than static.

So, you should be able to set an element’s positioning to relative (meaning it’s positioned relative to where it would appear in the content normally), give it no other positioning attributes, and then get its children to be positioned relative to it, rather than the body tag.

Is this the most elegant way the CSS spec writers could have made this happen? No. Should it work? Yes. Does it work in IE6? NOOOOOO.

So web developers are, for the most part, going to be unable to use ths useful feature until IE6 is little used anymore. Which I don’t expect until 2010.

Grrr.

Eric said on August 5, 2004 2:44 PM

I’m with most people here in saying the problems are mostly browsers and not CSS.

But, one of the biggest problems mentioned IS a CSS problem; that of floats.

Floats are a pain in the butt because we are trying to make them do something they weren’t designed to do…make divs line up horizontally.

Floats were designed to put images or little pullquote blocks in a larger block of text, with the text wrapping around the little image.

Because the CSS-writers gave us no other choice, and design goes on (the same reason tables began to be used for layout!), we use floats for a lot of other things, and have to hack them with dummy cleared elements to make them work.

Don’t try to tell beginners that float is how these things really should be done. Float is a hack for display block horizontally, which we can’t really use yet.

David House said on August 5, 2004 4:34 PM

“Tim, you’re not the only one without a GMail account.”

No, I don’t have one either ;) And I haven’t forgotten the promise of an invite for the best ‘best problems and answers’. When are the results announced? I’m one of the only people I think that’s actually posted a solution, rather than just stating the problem.

Phil said on August 6, 2004 4:16 PM

The most frustrating thing I’ve found when trying to write standards compliant code is that it is not interpreted by browsers in a standard way.

The ultimate frustration has to be reading books on “designing without tables” and finding layout hacks like or worse still script based browser sniffing!

Hello?! I thought the point of standards was that they were interpreted in a standard way so hacks and cheats were no longer necessary.

I do see the benefits in css and semantic markup etc. and continue to use it, but it is SO frustrating to read website after website full or hacks and browser bug fixes.

If our css code is still full of browser sniffing then I have to ask how far we’ve really come. For this reason I always try to find another way to solve a problem without resorting to hacks.

A lot of the work I do (through client choice not mine), involves pages being displayed in a frameset - and lo and behold an IE bug which causes a horizontal scroll bar when displaying xhtml in standards mode within a frame. The workaround - switch to quirks mode. The trade off = the quirks mode box model bug! Whats the point in writing standards compliant code if it can’t be interpreted as such. I think we’re in a mess and due to the legacy of buggy browsers which is likely to be around for years, I’d suggest text only layouts from now on!

Mitchell said on August 6, 2004 5:14 PM

I think there are some great comments on here. But I think most of us are complaining about the state of CSS in the same way we complained about Netscape 4 at the end of the last decade. Its no different and plenty of people stepped up to deal with the problem. My advice….stop complaining and deal with it! Its up to you as a web designer to get “creative” and make CSS work for you, or remain stuck managing thousands of lines of table code in all your projects.

I also just finished a simple print sheet for a CSS site I completed, and WOW, it so easy to design printable pages with CSS. My point of that comment being, there are tons of very good reasons to switch to CSS-based and XHTML markup, despite the headaches and the hacks.

SOLUTIONS: The best solution Ive found include the following:
The best way to create an expanding column in your code, is to create all your columns as floating divs with set widths and drop into your page. Then create your “expanding” floating div and give it a negative left and right margin equal to the width of the left and right columns. This is cool as it makes room for any columns to the left and right. But it doesnt fix the overflow of content in that expanding div which overflows to the right. You then put another floating div inside that with the same margin values but positive values this time, and this pushes your content in to match the outer box margin. Thats it! Very subtle but works in nearly all the browsers. No positioning required or really any hacks.

Second problem Ive seen is expanding vertical columns that stretch the length of the page. Mozilla/Netscape needs height: auto to make sure content doesnt flow past the end of the screen, and IE needs height 100% to stretch the full length…so there is a conflict. The solution Ive found is to use, for your column div, height:100%,min-height: 100% and a small hack like html>body #yourdiv {height:auto}, and you have great 100% height stretching sites that work well in nearly all browsers. Of course there are allot of subtle little issues and fixes you can stack onto those solutions, but combining the two, you can create any layout you essentially had in table-based solutions, and they work, cross-browser.

Ive tried all the positioning solutions and as some have stated, its not mature yet as a solution, I feel. There are all sorts of problems when absolute columns are taken out of the context of the page flow when trying to design “intellgent” layout that stretches, or collapses with headers and footers based on content and layout needs….I dont recommend it, except for the really simple layouts. I think in the future, when the browsers come together on positioning rules, you will see the full power positioning as the end-all solution to all layouts and see the advantage of being able to give any content block a simple x-y axis reference point in the page. When the tools mature to support that as well, you will be able to move around all your images and text pixel by pixel on the page and we can say goodbye to all this flow-level stuff, tables, and hacks. Game over….

Until then, I recomend floating divs.

I dont know why it takes so long to find the right solution in CSS…..thats the challenge with this stuff, you have to dig through lots of information before you combine them into the magic code and it should be that way. Keep the faith guys, you can make the move and trust me, it will be worth it. Just start out simply using a few tricks and you will do fine.

-MS

John said on August 6, 2004 6:20 PM

The most common CSS problem for me is lack of sleep!

Back in the good old days of tables, spacer gifs and the slice tool I was able to get a good 8 hours a day, sadly no longer.

nick santilli said on August 6, 2004 7:27 PM

after the first 15 or so comments, my ADHD kicked-in and I just scrolled down to add my own comment. So forgive me if I duplicate too many of the other things said already.

i’m not a css pro by any stretch. but I’m getting the hang of it.
I think the most difficult thing (as many others have said), is the positioning of ‘stuff’ on your page. going from a visual layout, to a largely mental calculation of where things will come to lie, is a strange new process (for some).

I’ve been moving further and futher from straight HTML. My first attempt, is a mutant of invalid HTML (tables) and CSS (phbz.org/ - my personal site). My second attempt is much more of a victory for me (vulio.com - my design oriented site)

all in all, people need to spend more time trying it all out. it takes HOURS. sleep will be a thing of the past, because while it’ll make you pull your hair out, you won’t stop till it’s just right.

nick santilli said on August 6, 2004 7:33 PM

oh, and I forgot one other thing - a HUGELY helpful tip:

If you’re not using Firefox as your browser, START NOW. Equip it with the WEB DEVELOPER extension, and use the EDIT CSS feature. See what everyone else is doing with their CSS based site design, and then through the power of EDIT CSS, change your local view of THEIR design to see how each piece of the CSS is responsible for the look/feel of their site.

IMO, this is a teffific way to easily see what’s going on, and toy with it, before you ever start on your own page.

DISCLAIMER - don’t blatently steal others work (as I know Andy had happen recently)…and if you do, give credit where it’s due!!!!

Ezku said on August 7, 2004 4:01 PM

Why should I not be able to accomplish any layout using CSS - especially one that I can easily accomplish using tables? -david gee

That is remarkably true. When learning CSS (somewhat still am), I ventured into numerous shortcomings and wondered - how can it be this hard / impossible to implement via CSS, when by tables it’s a matter of seconds?

With table layouts, I was easily able to stretch an element from the top of the viewport to the bottom - that ain’t happening with CSS and divs. It’s possible to emulate the effect by other means to a certain extent, but you can’t have the same dynamic aspect that tables provide.

I, too, believe that with CSS it should be possible to create virtually any layout. This isn’t the way it is today. There’s a lot of room for development.

Bob Easton said on August 8, 2004 3:46 AM

One of the most commonly asked questions is “Why doesn’t my floated something or other work? Looks OK in IE, not in Mozilla / Firefox / u-name-it standards compliant browser.”

The problem is with how IE incorrectly expands containers to shrink wrap floats. The coder thinks it’s OK, but then finds the floated material hanging out the bottom of the container in Moz and other browsers.

Learning to contain floats is a lesson that’s tough for some to learn.

Bob Easton said on August 8, 2004 3:50 AM

The single most common problem, similar to my previous post, is designing with IE, thinking that IE is OK.

Eveyone should begin design work with a compliant browser, like Mozilla or Firefox. Get the design right in a compliant browser, then adjust for IE’s many quirks.

Oli said on August 8, 2004 11:31 AM

My problems are the same as everyone else’s

Advice for others taking the plunge

re: the same basic comments in forums; remember that for beginners they might not even know how to phrase a search. We all know and love FOUC, the 3pix shift, etc but for a beginner typing in “why is IE killing my CSS layout!?” isn’t going to get them far ;-) Maybe

Of course it’d be nice if W3 actually published human-readable versions of their specs, for the few of us not directly connected to the machine core ;-)

PS Andy you’re missing a “(Required)” becide the email form field

Oli said on August 8, 2004 11:36 AM

PS Very important advice to beginners - don’t design with IE as your base browser! Start with something that can actually do CSS (MOSE), then hack it so IE doesn’t choke too bad. Firefox/Mozilla recommended because of the above-mentioned Web Dev toolbar, but recent versions of Safari, Opera, or other modern browsers are all good.

Alex said on August 9, 2004 6:30 AM

Lots of people seem to point to the design limitations of CSS layout when they are really pointing to their own limitations.

Have a look at the web archives (http://www.archive.org/) of table-based sites from 1996/97/98. NBC, Microsoft, Sony. They’re awful because people hadn’t really yet understood what you could do with tables.

Worst case scenario, those ‘boxy, boring’ layouts actually work most of the time. As bloggers who are presenting written content as their product, I would think that was more important than experimental layout technique to most of them.

Alex said on August 9, 2004 6:31 AM

Oh, and as far as CSS problems go - the IE Peekaboo bug is king.

Mitchell said on August 11, 2004 12:12 AM

Great posts everyone!

The newest XHTML 2.0 recommendation just got released at the W3C and from what I can see, we are definately all being taken down a path with CSS and xhtml site architecture that will require some forethought in how we use CSS now and in the future. And that effects people moving from tables to CSS today and how they approach that in their own unique way to solve their personal design issues and style. What I would tell designers getting into CSS based on that, is start learning two things/skills:

1. Understanding separation of your design in CSS from your structural markup and content completely
2. Get very very familiar with CSS and cascades, more so than even specific solutions as found at ALA and other sources online, including use of specific layout structures, floating div’s, unordered list buttons, etc. Buld on CSS knowledge rather than tricks.

Looking at the new tags developed in xhtml 2.0 to replace things like how we use image tags, div tags, and unordered lists for navigation, I think learning to architect your content correctly on the page, in terms of blocks of content styled with CSS, getting familiar with any set of markup tags and how they work with yoru styles is going to put you ahead of the game. As much as we need to rely on some easy solutions that others are developing at alistapart.com for example, in todays crazy environment, I would use those solutions with a grain of salt and instead learn CSS like the back of your hand now, as what the future probably will show, is we are moving to a web that eventually abandons html tags completely, and where you will be using CSS to completly redesign your content using your own custom xml tags. That may be premature, but if I was new to CSS (as most of us are), I would sit down and read about xml, what it means, how to hand-code in it, its relationship to xhtml and html, and then and only then, start building a layered custom CSS solution you can really build on in applying it to not only layout and expanding and frozen site layouts, but also raw xml pages. That knowledge and skill will pay off big-time later when we move away from things like image tags and link tags and div tags which xhtml 2 kinda abondons anyway, and allow you to control all that for any tag, really using CSS. Those CSS skills are going to be key!

For now, no doubt browser “hacks”, CSS tricks, and correct placement and use of semantic markup, is vital to your solution in more ways than you can imagine (repurposing content, print, mobile devices, search engines, ease of maintenance, speed of download, cross-browser rendering, etc.) in todays world. Use and build on the tricks many people are finding, like floating divs. Its hard at first to build really good css and layout now, because of the browsers and the hacks, but what choice do you have in todays browser world? But if you want your sites to look great, duplicate or improve on your table layouts, and push you into the future, though, your core CSS skills and page structure skills will be key.

-Mitchell

Andy Budd said on August 12, 2004 8:45 AM

Thanks everybody for the input. It’s been really interesting reading your comments, and really difficult to pick the best 3. Please bare in mind that it’s all very subjective. With so many great replies, If I was asked to pick again, I’d probably come up with a completely different list. However after reading through your comments a couple of times, these were the ones that sparked my interest.

I’ve decided to give the first GMail account to Joshua Cook for his comment on classes vs. id’s. I’ve been looking at lots of ‘transitional’ sites recently and I’m constantly amazed how misused classes are. As such, I think one of the first ‘eureka’ moments for any new CSS designer/developer is when they finally realise the correct way to use id and class selectors.

I’ve decided to give the next GMail account to Laura for highlighting the problems people have understanding the cascade, the over reliance on hacks, and not validating their CSS/XHTML. These basic issues do trip a lot of people up and account for a large proportion of help requests on mailing lists.

Yvonne Adams gets the final GMail account for pointing out that people moving to CSS need to change the way they think about web pages, taking a structural as well as visual approach. I always start by thinking about a pages structure and then marking it up accordingly. Only then to I start applying a layer of style. However so many people are used to building up design visually, block by block, that the underlying code is often forgotten. Switching to CSS forces you to think about your (X)HTML, something many developers haven’t done in years thanks to WYSIWYRG editors.