http://www.contentwithstyle.co.uk/feeds/rss/comments/70 Wed, 10 Mar 2010 13:28:44 +0000 Zend_Feed http://blogs.law.harvard.edu/tech/rss http://www.contentwithstyle.co.uk/content/playing-nice-with-the-other-css-kids/#comment-290 http://www.contentwithstyle.co.uk/content/playing-nice-with-the-other-css-kids/#comment-290
I’m a little wary of sandboxing as I’ve seen it go wrong and make it very difficult to apply sitewide changes. That may have just been poor execution of the concept though ;-).]]>
I’m a little wary of sandboxing as I’ve seen it go wrong and make it very difficult to apply sitewide changes. That may have just been poor execution of the concept though ;-).]]> Mon, 31 Oct 2005 10:56:34 +0000 http://www.contentwithstyle.co.uk/content/playing-nice-with-the-other-css-kids/#comment-291 http://www.contentwithstyle.co.uk/content/playing-nice-with-the-other-css-kids/#comment-291 Mon, 31 Oct 2005 11:27:05 +0000 http://www.contentwithstyle.co.uk/content/playing-nice-with-the-other-css-kids/#comment-292 http://www.contentwithstyle.co.uk/content/playing-nice-with-the-other-css-kids/#comment-292
As to in-document information and sheet presentation I am in the process of redoing a huge number of sheets to improve this aspect and allow for others to maintain.]]>
As to in-document information and sheet presentation I am in the process of redoing a huge number of sheets to improve this aspect and allow for others to maintain.]]> Mon, 31 Oct 2005 12:45:55 +0000 http://www.contentwithstyle.co.uk/content/playing-nice-with-the-other-css-kids/#comment-293 http://www.contentwithstyle.co.uk/content/playing-nice-with-the-other-css-kids/#comment-293
http://www.bigbold.com/snippets/posts/show/42

It ssh-s into your server, checks out the latest copy and symlinks it to “latest’. And if you need to roll back you can just change the link.]]>
http://www.bigbold.com/snippets/posts/show/42

It ssh-s into your server, checks out the latest copy and symlinks it to “latest’. And if you need to roll back you can just change the link.]]> Mon, 31 Oct 2005 14:35:29 +0000 http://www.contentwithstyle.co.uk/content/playing-nice-with-the-other-css-kids/#comment-294 http://www.contentwithstyle.co.uk/content/playing-nice-with-the-other-css-kids/#comment-294
Also, i think !important shouldnt be used like you’ve mentioned, even for debugging. Like you mentioned, begin really specific from the start, stops this problem from occuring in the firstplace.

To get around your redundancy problems, I think simply resetting global atrributes saves everyone problems, and also allows you to use semantic XHTML better too ( for accessibility ).

You didnt mention anything about hacks, I hope your like us, in that creating proper XHTML and specifying css properly you can get around without using them :-)

CVS ftw.

Cheers]]>
Also, i think !important shouldnt be used like you’ve mentioned, even for debugging. Like you mentioned, begin really specific from the start, stops this problem from occuring in the firstplace.

To get around your redundancy problems, I think simply resetting global atrributes saves everyone problems, and also allows you to use semantic XHTML better too ( for accessibility ).

You didnt mention anything about hacks, I hope your like us, in that creating proper XHTML and specifying css properly you can get around without using them :-)

CVS ftw.

Cheers]]> Mon, 31 Oct 2005 19:47:05 +0000 http://www.contentwithstyle.co.uk/content/playing-nice-with-the-other-css-kids/#comment-296 http://www.contentwithstyle.co.uk/content/playing-nice-with-the-other-css-kids/#comment-296
I personally try to write self-documenting code as well, although I’m the first to admit in favor of speed it’s not always written for others to comprehend as easily as I can. I also break out my CSS as much as possible (declaring margins and paddings explicitly everwhere especially) but don’t follow the practice of sandboxing where everything is written out as div#content div#index p.intro like your example. I think that might be ultimately easier to understand but not as efficient – with the web developer extension for firefox and a search in the CSS file, it seems pretty easy to figure out the containing element and its code in the CSS.]]>
I personally try to write self-documenting code as well, although I’m the first to admit in favor of speed it’s not always written for others to comprehend as easily as I can. I also break out my CSS as much as possible (declaring margins and paddings explicitly everwhere especially) but don’t follow the practice of sandboxing where everything is written out as div#content div#index p.intro like your example. I think that might be ultimately easier to understand but not as efficient – with the web developer extension for firefox and a search in the CSS file, it seems pretty easy to figure out the containing element and its code in the CSS.]]> Mon, 31 Oct 2005 23:02:11 +0000 http://www.contentwithstyle.co.uk/content/playing-nice-with-the-other-css-kids/#comment-297 http://www.contentwithstyle.co.uk/content/playing-nice-with-the-other-css-kids/#comment-297
Ciao Marco]]>
Ciao Marco]]> Tue, 01 Nov 2005 02:17:32 +0000 http://www.contentwithstyle.co.uk/content/playing-nice-with-the-other-css-kids/#comment-298 http://www.contentwithstyle.co.uk/content/playing-nice-with-the-other-css-kids/#comment-298
Also for the hacks, I don’t think you raise a fair point here. I definetly favour a very clean XHTML with a hacked css (I use * html, html>body and the /**/ hack for mac IE) to a solution where you create more divs to get margin/padding consistent or insert clearing elements to get around the float problem.
Anyone with me here? Mike?]]>
Also for the hacks, I don’t think you raise a fair point here. I definetly favour a very clean XHTML with a hacked css (I use * html, html>body and the /**/ hack for mac IE) to a solution where you create more divs to get margin/padding consistent or insert clearing elements to get around the float problem.
Anyone with me here? Mike?]]> Tue, 01 Nov 2005 02:33:10 +0000 http://www.contentwithstyle.co.uk/content/playing-nice-with-the-other-css-kids/#comment-301 http://www.contentwithstyle.co.uk/content/playing-nice-with-the-other-css-kids/#comment-301 I think this can be a very emotional discussion. Essentially there’s 3 things:
– using hacks
– using extra markup
– adding extra markup via DOM

When you’re in the situation that you’re not designing the site, and your designer doesn’t know much about code or standards, you’ll quickly end up having to use at least one of these possibilities. I used to happily hack my way through css, but at some point I decided to ditch that approach in favour of extra markup (where possible).
Recent hints of MS to use conditional comments instead of *html seem to support that.

[edited] Now, lately the semantic markup-lovers seem to be in fashion. (Changed this, as it seemed inappropriate) [/edited]
Use the markup as a semantic structure and add everything else via DOM, and I’m not sure what to think of this. It reduces the total number of people getting a visually “correct” page, by taking out the no-javascript people. It possibly favours alternative views on the site (screenreaders? but they do the script as well, at least a little, right?), but, statistically speaking, who’s the winner, besides the coder’s eye?]]> I think this can be a very emotional discussion. Essentially there’s 3 things:
– using hacks
– using extra markup
– adding extra markup via DOM

When you’re in the situation that you’re not designing the site, and your designer doesn’t know much about code or standards, you’ll quickly end up having to use at least one of these possibilities. I used to happily hack my way through css, but at some point I decided to ditch that approach in favour of extra markup (where possible).
Recent hints of MS to use conditional comments instead of *html seem to support that.

[edited] Now, lately the semantic markup-lovers seem to be in fashion. (Changed this, as it seemed inappropriate) [/edited]
Use the markup as a semantic structure and add everything else via DOM, and I’m not sure what to think of this. It reduces the total number of people getting a visually “correct” page, by taking out the no-javascript people. It possibly favours alternative views on the site (screenreaders? but they do the script as well, at least a little, right?), but, statistically speaking, who’s the winner, besides the coder’s eye?]]> Tue, 01 Nov 2005 05:34:07 +0000 http://www.contentwithstyle.co.uk/content/playing-nice-with-the-other-css-kids/#comment-302 http://www.contentwithstyle.co.uk/content/playing-nice-with-the-other-css-kids/#comment-302 !important can save hours while debugging and I can not see any reason for not using it for that purpose… Care to expand on why you think it should be avoided ALL the time?

The global whitespace reset wouldn’t help with the redundancy problem – that’s caused by inheritance through the cascade, not default settings. I tend to avoid the whitespace reset anyway because when handing templates over to clients you can guaruntee that they will use an element that you didn’t think of in a content area that never occurred to you. With all whitespace reset you will get them on the phone complaining every time; with defaults in place things might just look okay.

Simon & Pascal:
The only hacks I use are * html and /* */. As a result of my accessibility background I am a semantic purist and those two hacks allow me to avoid the wrapper divs and other extraneous markup that some people use to get around box model problems. Basically, what Pascal said!]]> !important can save hours while debugging and I can not see any reason for not using it for that purpose… Care to expand on why you think it should be avoided ALL the time?

The global whitespace reset wouldn’t help with the redundancy problem – that’s caused by inheritance through the cascade, not default settings. I tend to avoid the whitespace reset anyway because when handing templates over to clients you can guaruntee that they will use an element that you didn’t think of in a content area that never occurred to you. With all whitespace reset you will get them on the phone complaining every time; with defaults in place things might just look okay.

Simon & Pascal:
The only hacks I use are * html and /* */. As a result of my accessibility background I am a semantic purist and those two hacks allow me to avoid the wrapper divs and other extraneous markup that some people use to get around box model problems. Basically, what Pascal said!]]> Tue, 01 Nov 2005 05:42:59 +0000 http://www.contentwithstyle.co.uk/content/playing-nice-with-the-other-css-kids/#comment-303 http://www.contentwithstyle.co.uk/content/playing-nice-with-the-other-css-kids/#comment-303 I totally agree that sandboxing can lead to less efficient code. I use it as a trade off with maintainability… I have found that overspecified rules are a lot easier to (re)familiarise myself with at a later date, making maintenance a less painful process. It’s up to you how much extra code you need versus how quickly you want to get bug fixing months or years down the line.]]> I totally agree that sandboxing can lead to less efficient code. I use it as a trade off with maintainability… I have found that overspecified rules are a lot easier to (re)familiarise myself with at a later date, making maintenance a less painful process. It’s up to you how much extra code you need versus how quickly you want to get bug fixing months or years down the line.]]> Tue, 01 Nov 2005 06:51:28 +0000 http://www.contentwithstyle.co.uk/content/playing-nice-with-the-other-css-kids/#comment-304 http://www.contentwithstyle.co.uk/content/playing-nice-with-the-other-css-kids/#comment-304
@Matthias: WTH [edited /]]]>
@Matthias: WTH [edited /]]]> Tue, 01 Nov 2005 09:18:07 +0000 http://www.contentwithstyle.co.uk/content/playing-nice-with-the-other-css-kids/#comment-305 http://www.contentwithstyle.co.uk/content/playing-nice-with-the-other-css-kids/#comment-305 Tue, 01 Nov 2005 09:32:36 +0000 http://www.contentwithstyle.co.uk/content/playing-nice-with-the-other-css-kids/#comment-306 http://www.contentwithstyle.co.uk/content/playing-nice-with-the-other-css-kids/#comment-306
There are designs, that don’t allow for lean code on its own. In the end I work in a job where I can’t choose the design (or, for a fact, the interface altogether) that I’ll build. If I’m lucky, I’m not up to my neck in work while the design-phase for the next project happens, so I can comment on it.

The luckier ones either design and build the site, or have designers that are aware of web standard-friendly design; and sadly that can come with a bit of a non-understanding attitude.]]>
There are designs, that don’t allow for lean code on its own. In the end I work in a job where I can’t choose the design (or, for a fact, the interface altogether) that I’ll build. If I’m lucky, I’m not up to my neck in work while the design-phase for the next project happens, so I can comment on it.

The luckier ones either design and build the site, or have designers that are aware of web standard-friendly design; and sadly that can come with a bit of a non-understanding attitude.]]> Tue, 01 Nov 2005 12:14:28 +0000 http://www.contentwithstyle.co.uk/content/playing-nice-with-the-other-css-kids/#comment-307 http://www.contentwithstyle.co.uk/content/playing-nice-with-the-other-css-kids/#comment-307
Pascal, hacks are nasty, thats why i beleive there called hacks. If you resolve the problem that nessecitates a hack ( generally IE6 box model problems or mac IE float / clear issues ) and follow w3c standards, you actually don’t run into issues, and don’t need them. I’ve made several sites which run on the most popular browsers ( IE6, 5.5, 5, firefox, mac IE, safari, opera etc) without using one hack. The sites even work on cellphone browsers, screen readers and the like. Its all about careful use of css, and the application of semantic XHTML. using it the way it was intended. :-)

The best way to acheive this I believe is to first develop your layout css, and browser test at this stage. Globally resetting margins, padding, font-size, and list style will let you develop your layout css, without the need for hacks. Also the knowledge about why the problems occur, and avoiding them can also help.

Most of the time were in the same boat as Matthias, we only get to choose the technical side, markup and server code for a particular design, so choosing the correct way to do it is definitly important.]]>
Pascal, hacks are nasty, thats why i beleive there called hacks. If you resolve the problem that nessecitates a hack ( generally IE6 box model problems or mac IE float / clear issues ) and follow w3c standards, you actually don’t run into issues, and don’t need them. I’ve made several sites which run on the most popular browsers ( IE6, 5.5, 5, firefox, mac IE, safari, opera etc) without using one hack. The sites even work on cellphone browsers, screen readers and the like. Its all about careful use of css, and the application of semantic XHTML. using it the way it was intended. :-)

The best way to acheive this I believe is to first develop your layout css, and browser test at this stage. Globally resetting margins, padding, font-size, and list style will let you develop your layout css, without the need for hacks. Also the knowledge about why the problems occur, and avoiding them can also help.

Most of the time were in the same boat as Matthias, we only get to choose the technical side, markup and server code for a particular design, so choosing the correct way to do it is definitly important.]]> Tue, 01 Nov 2005 16:10:43 +0000 http://www.contentwithstyle.co.uk/content/playing-nice-with-the-other-css-kids/#comment-308 http://www.contentwithstyle.co.uk/content/playing-nice-with-the-other-css-kids/#comment-308
In most cases, you can actually avoid this problem by being careful with your css :-)]]>
In most cases, you can actually avoid this problem by being careful with your css :-)]]> Tue, 01 Nov 2005 16:17:49 +0000 http://www.contentwithstyle.co.uk/content/playing-nice-with-the-other-css-kids/#comment-309 http://www.contentwithstyle.co.uk/content/playing-nice-with-the-other-css-kids/#comment-309 Either you nest two elements, one with a set width and one with padding inside, or you HACK the css to make it work. In that case I’d rather save one element and hack the css. Wich by no means affects the validation though.
The same thing goes for boxes that have floated elements in them. I’d rather use the “holly hack” than find myself using something like a clearing div.

Another recommandation that you gave, resetting margins, padding, font-size and so on can lead to serious trouble as well.
If you ever used relative font-sizes (em or %) you’ll find that you’ll have to be damn carefull about where you specify the font size, since they will be inherited, and 75% of 75% is not what you thought it should’ve been anymore.
Also when you work with content-driven CMS engines you’ll get to the point where the client inserts markup in places where you didn’t expect them, like a list or a p and so on. A general reset of margin and padding will let those appear in a way that will be percieved as broken, unless you overwrite the reset for every element that could contain user defined markup.]]> Either you nest two elements, one with a set width and one with padding inside, or you HACK the css to make it work. In that case I’d rather save one element and hack the css. Wich by no means affects the validation though.
The same thing goes for boxes that have floated elements in them. I’d rather use the “holly hack” than find myself using something like a clearing div.

Another recommandation that you gave, resetting margins, padding, font-size and so on can lead to serious trouble as well.
If you ever used relative font-sizes (em or %) you’ll find that you’ll have to be damn carefull about where you specify the font size, since they will be inherited, and 75% of 75% is not what you thought it should’ve been anymore.
Also when you work with content-driven CMS engines you’ll get to the point where the client inserts markup in places where you didn’t expect them, like a list or a p and so on. A general reset of margin and padding will let those appear in a way that will be percieved as broken, unless you overwrite the reset for every element that could contain user defined markup.]]> Tue, 01 Nov 2005 16:54:39 +0000 http://www.contentwithstyle.co.uk/content/playing-nice-with-the-other-css-kids/#comment-310 http://www.contentwithstyle.co.uk/content/playing-nice-with-the-other-css-kids/#comment-310
This is mostly true where both designers and developers are involved. You can for instance give a designer the “theme” template to work with, thus shielding them from complex structural CSS. On the flip side, developers can forget about the pretty colors, concentrating on just the structure of the interface.

It is a technique that’s paying dividends where I work.

I’ve explained in more detail in a recent article.]]>
This is mostly true where both designers and developers are involved. You can for instance give a designer the “theme” template to work with, thus shielding them from complex structural CSS. On the flip side, developers can forget about the pretty colors, concentrating on just the structure of the interface.

It is a technique that’s paying dividends where I work.

I’ve explained in more detail in a recent article.]]> Tue, 01 Nov 2005 17:13:04 +0000 http://www.contentwithstyle.co.uk/content/playing-nice-with-the-other-css-kids/#comment-311 http://www.contentwithstyle.co.uk/content/playing-nice-with-the-other-css-kids/#comment-311 Tue, 01 Nov 2005 17:16:45 +0000 http://www.contentwithstyle.co.uk/content/playing-nice-with-the-other-css-kids/#comment-312 http://www.contentwithstyle.co.uk/content/playing-nice-with-the-other-css-kids/#comment-312
I understand where your coming from. I guess we need to make the desicion to either use slightly duplicate markup ( to control the box model problems), or use hacks in css.

There are many browser bugs that can be solved by other, non hack means, eg. adding a line-height to a parent element to solve IE 6’s Peak-a-boo bug instead of the holly hack etc. – Thats more what i was meaning with the other IE hacks and things not related to box model problems.

:-)]]>
I understand where your coming from. I guess we need to make the desicion to either use slightly duplicate markup ( to control the box model problems), or use hacks in css.

There are many browser bugs that can be solved by other, non hack means, eg. adding a line-height to a parent element to solve IE 6’s Peak-a-boo bug instead of the holly hack etc. – Thats more what i was meaning with the other IE hacks and things not related to box model problems.

:-)]]> Tue, 01 Nov 2005 20:08:27 +0000 http://www.contentwithstyle.co.uk/content/playing-nice-with-the-other-css-kids/#comment-313 http://www.contentwithstyle.co.uk/content/playing-nice-with-the-other-css-kids/#comment-313 Wed, 02 Nov 2005 10:38:10 +0000 http://www.contentwithstyle.co.uk/content/playing-nice-with-the-other-css-kids/#comment-316 http://www.contentwithstyle.co.uk/content/playing-nice-with-the-other-css-kids/#comment-316
Looks like you’ve reached an amicable agreement on hacks, which is nice! Thought I’d wade in with one more point. The cleaner your HTML the easier your code is to understand. I’ll explain…

On the HTML side you have less chance of missing a closing div if you only have a handful of them. I only mention this because the development version of my new site has wrapper divs everywhere and I keep breaking it by forgetting to close them. In the final version they will be added with a little DOM script.

In the CSS, wrapper divs tend to come with generic names like ‘wrapper’ ,’content’ , ‘extra’, etc. I’ve had trouble in the past with nesting these. For example, if your ‘page’ div needs one and your ‘content’ div also need one then you can get unexpected cascade/inheritance issues.

I much prefer clean HTML and minimal hacking on the CSS. I find it much easier to keep all my compromises are in one place – the CSS, instead of being split between HTML and CSS.

That said though, I’ve also had my share of trouble with the * html hack, in particular, when I’ve changed the width on the original rule and forgotten to reflect the change in the hack and then spent ages trying to track down what had gone wrong… Yet again, it’s a trade-off.]]>
Looks like you’ve reached an amicable agreement on hacks, which is nice! Thought I’d wade in with one more point. The cleaner your HTML the easier your code is to understand. I’ll explain…

On the HTML side you have less chance of missing a closing div if you only have a handful of them. I only mention this because the development version of my new site has wrapper divs everywhere and I keep breaking it by forgetting to close them. In the final version they will be added with a little DOM script.

In the CSS, wrapper divs tend to come with generic names like ‘wrapper’ ,’content’ , ‘extra’, etc. I’ve had trouble in the past with nesting these. For example, if your ‘page’ div needs one and your ‘content’ div also need one then you can get unexpected cascade/inheritance issues.

I much prefer clean HTML and minimal hacking on the CSS. I find it much easier to keep all my compromises are in one place – the CSS, instead of being split between HTML and CSS.

That said though, I’ve also had my share of trouble with the * html hack, in particular, when I’ve changed the width on the original rule and forgotten to reflect the change in the hack and then spent ages trying to track down what had gone wrong… Yet again, it’s a trade-off.]]> Thu, 03 Nov 2005 05:59:24 +0000 http://www.contentwithstyle.co.uk/content/playing-nice-with-the-other-css-kids/#comment-319 http://www.contentwithstyle.co.uk/content/playing-nice-with-the-other-css-kids/#comment-319 Thu, 03 Nov 2005 16:10:51 +0000 http://www.contentwithstyle.co.uk/content/playing-nice-with-the-other-css-kids/#comment-320 http://www.contentwithstyle.co.uk/content/playing-nice-with-the-other-css-kids/#comment-320
Ive delivered templates to 3rd parties and used to endure banging-head-against-the-wall emails to developers trying to change the font-color in a div.

Ive been using ‘sandboxes’ in my css for a while now and I can estimate about a 95% reduction in headaches. Its proven kids.]]>
Ive delivered templates to 3rd parties and used to endure banging-head-against-the-wall emails to developers trying to change the font-color in a div.

Ive been using ‘sandboxes’ in my css for a while now and I can estimate about a 95% reduction in headaches. Its proven kids.]]> Mon, 07 Nov 2005 09:54:27 +0000 http://www.contentwithstyle.co.uk/content/playing-nice-with-the-other-css-kids/#comment-325 http://www.contentwithstyle.co.uk/content/playing-nice-with-the-other-css-kids/#comment-325
I might try your ‘framework’ Mike on our next project, and we’ll see what happens :-)

Cheers!]]>
I might try your ‘framework’ Mike on our next project, and we’ll see what happens :-)

Cheers!]]> Tue, 08 Nov 2005 15:00:28 +0000 http://www.contentwithstyle.co.uk/content/playing-nice-with-the-other-css-kids/#comment-2012 http://www.contentwithstyle.co.uk/content/playing-nice-with-the-other-css-kids/#comment-2012 Fri, 16 Mar 2007 17:09:30 +0000