CSS Hatred

[Andy]

It's crazy. I can code in all sorts of various languages such as PHP, SQL and C# but I always struggle with CSS. It's a real pain.

My F5 key is almost worn out from refreshing browser screens to check the effect of CSS in the various browsers.

For maximum fun I recommend styling some user input Forms.

Anyone else love CSS? 

[Queen Bee]

For maximum fun I recommend styling some user input Forms.

Haha, that is fun...

I have always had my complaints about CSS. The most frustrating part about all of it is, just when you think you've got the coding right, Firefox or IE go off on some incompatibility crusade. Padding is padding, isn't it? Apparently not in CSS. And don't except margins to appear the same way cross-browser. It just won't happen.

I've given up on making CSS load perfectly in the Opera browser. If it looks good in IE and Firefox, it's not supposed to look good in Opera...

It takes me nearly 200% more time to code something in CSS than it does in HTML. When a client asks me to code an entire design in XHTML/CSS format, I let out a deep sigh and get to work.

[donecweb]

Hey hey hey now! It is not CSS that is the problem as it doesn't change on you. It is the browsers and the companies that make them that is the problem. They don't try and follow the standard. If they did then CSS would work for all them the same.

I have never done a forum in CSS but I have done lots of websites and I don't have a problem using CSS and making it cross platform compatible. (I no longer concern myself with whether it works in a browser older than IE 6.) Of course I don't code by hand I use and editor that gives me menus to select from and I select the code I want to use and it creates the syntax for me.

Padding is padding, isn't it?

Rachel, padding is not padding in real life because IE handles padding different than other browsers. I try and not use padding much for this reason and instead I try and make it look the way I want it to using margins. But padding is padding if the standard is followed.

My F5 key is almost worn out from refreshing browser screens to check the effect of CSS in the various browsers.

Andy if you use Firefox or Swiftweasel and the Web Developer toolbar you can create a page load it to your test site and then make changes in the CSS and see the effect immediately without refreshing. Then just copy the CSS from Web Developer and past it into your CSS document.

[Andy]

Andy if you use Firefox or Swiftweasel and the Web Developer toolbar you can create a page load it to your test site and then make changes in the CSS and see the effect immediately without refreshing. Then just copy the CSS from Web Developer and past it into your CSS document.

Thanks for the tip! I have web developer installed and didn't know it made immediate changes. I also use the colorzilla plugin to check how web page elements are referred to in the style sheet.

[Queen Bee]

Rachel, padding is not padding in real life because IE handles padding different than other browsers. I try and not use padding much for this reason and instead I try and make it look the way I want it to using margins. But padding is padding if the standard is followed.

That's true. But I'm speaking from the perspective of an HTML/table coder. Padding in tables looks the same cross-browser. It's only when you work in CSS that things start to change. I realize that it's a problem with the browsers and not the CSS itself, but it's still frustrating.

It is not CSS that is the problem as it doesn't change on you. It is the browsers and the companies that make them that is the problem. They don't try and follow the standard. If they did then CSS would work for all them the same.

You make great points. I just resent the fact that everything has to be adjusted numerous times in order to compensate for faulty standards. I guess it's all part of the trade.

[donecweb]

You make great points. I just resent the fact that everything has to be adjusted numerous times in order to compensate for faulty standards. I guess it's all part of the trade.

You say "faulty standards" but is there really anything wrong with the standards? Or is it that some companies refuse to program their browsers to work within the standards. I mean if a person builds 2 houses and follows the standards required by the city on one but doesn't follow the standards on the other are you going to say the standards are messed up or are you going to sue the contractor for doing sloppy work?

[Andy]

I think the standards organizations are too slow, so the businesses cannot wait for them.

They are like the military contract proposals that take years to reach finalization.

[Queen Bee]

Or is it that some companies refuse to program their browsers to work within the standards.

I think that's exactly it. That's what I meant when I said "faulty standards."

[donecweb]

I think the standards organizations are too slow, so the businesses cannot wait for them.

They are like the military contract proposals that take years to reach finalization.

Andy you may have a point their at least for the old sites that have been around since before the CSS standards were ratified. However that is not an acceptable excuse now since the CSS standards don't really change that much.

[Andy]

Donec, if you put yourself in the shoes of the browser developers, do you think there is little ambiguity in the CSS standards to result in browser differences?

Either the developers are not following the standards or they can't interpret the standards. Or maybe management that will not give the developers enough time to validate their code against the standards. Dilbert springs to mind.

As a software developer myself, I can't imagine it being very difficult for a team of programmers to create a web browser application. It is maybe similar to writing a BASIC Interpreter since you get text-based code and parse it, then render the results to a screen.

Thinking about this gave me an idea why browsers render code differently, it's because if you took my approach and simply implemented a direct conversion of code to screen following the standards, many sites that don't validate would not display! So the browsers need a fuzzy interpretation to best guess what the web designer wanted to achieve. But that still doesn't excuse the differences between correctly validating website rendering.

p.s. I discovered that w3.org have produced a web browser/editor. This must be the definitive browser to use: http://www.w3.org/Amaya/ It flags the errors on web pages. To navigate links, right click.

[SensoVision]

I don't hate CSS, actually I like to use it where it's possible I know it's not polished solution yet but it's better than nothing. I've had a lot of problems with different look in browsers trying to make design using pure CSS but with time come to conclusion that at current moment it's simply not possible without hacks in code, so decide to go on compromise and use tables where they would solve the task better than CSS and the rest of things leave for styles.
So I think it's just the point of find balance on where you need to use old HTML school and where CSS.

I have always had my complaints about CSS. The most frustrating part about all of it is, just when you think you've got the coding right, Firefox or IE go off on some incompatibility crusade. Padding is padding, isn't it? Apparently not in CSS. And don't except margins to appear the same way cross-browser. It just won't happen.

It's sounds so familiar and one of the most hated thing by me as well Anyway I've usually find some way to overcome this problem in my code. It's hard to give one solution which solve all problems, but if you or someone got problem with padding I may try to help out on particular example.

I've given up on making CSS load perfectly in the Opera browser. If it looks good in IE and Firefox, it's not supposed to look good in Opera...

can you specify what kind of problems you got with Opera?

It takes me nearly 200% more time to code something in CSS than it does in HTML. When a client asks me to code an entire design in XHTML/CSS format, I let out a deep sigh and get to work.

I think the key is convince person in what standards would follow design and why, and that it would be most effective and compatible with all browsers. This way most of people may listen to you and untie your hands, also you may try to charge more for such design
Also if person really wish something tricky on CSS there is always a way to use separate styles for each browser and it's not worst solution IMHO, just require some extra time which should be also paid IMHO.

p.s. I discovered that w3.org have produced a web browser/editor. This must be the definitive browser to use: http://www.w3.org/Amaya/ It flags the errors on web pages. To navigate links, right click.

have come across this browser before but didn't know it's from w3c so simply ignore it, as one more browser is just more headache
Thanks for link, now I'm already downloading as wish to check how it's actually render pages and what kind of editor is offered. It's good to see that there is native Linux version available.

[Queen Bee]

so decide to go on compromise and use tables where they would solve the task better than CSS and the rest of things leave for styles.

Ahh, so you too? I feel less guilty now.

It's sounds so familiar and one of the most hated thing by me as well  Anyway I've usually find some way to overcome this problem in my code. It's hard to give one solution which solve all problems, but if you or someone got problem with padding I may try to help out on particular example.

Thanks for the offer, Denis! I may come here next time I run into a problem. I'm usually short on deadlines, so I don't have much time to ask for help... but it's silly how many hours I have spent trying to figure out things on my own.

can you specify what kind of problems you got with Opera?

It's mainly the way that Opera displays margins. Or should I say, the way a standards compliant browser displays margins. If I code for IE (which I must do for clients) I have to make some sacrifices in the way it displays in Opera (and sometimes Firefox as well.)

Thankfully, I have managed a few of my own solutions. Sometimes I just give up on a certain style in place for something more "universally accepted."

Also if person really wish something tricky on CSS there is always a way to use separate styles for each browser and it's not worst solution IMHO, just require some extra time which should be also paid IMHO.

I have never thought about this before. I have considered hiding certain styles from browsers, but never making them separate. Do you have a particular tutorial to recommend?

[SensoVision]

Ahh, so you too? I feel less guilty now.

I've stop being guilty when this requirement was actually sent to me by coder who would lately use my design to build site around it, they work with this model for long time and there was no complains

Thanks for the offer, Denis! I may come here next time I run into a problem. I'm usually short on deadlines, so I don't have much time to ask for help... but it's silly how many hours I have spent trying to figure out things on my own.

same here I also have short deadline, but if you run in problems simply write me on GTalk and we'll try to find solution together. I'm know from experience that it's really help to thing on problem together, as even when you describe problem you look on it from different side and frequently find solution even before response

It's mainly the way that Opera displays margins. Or should I say, the way a standards compliant browser displays margins. If I code for IE (which I must do for clients) I have to make some sacrifices in the way it displays in Opera (and sometimes Firefox as well.)

familiar problem also

I have never thought about this before. I have considered hiding certain styles from browsers, but never making them separate. Do you have a particular tutorial to recommend?

sorry never seen any tutorial on this, maybe I need to write one. If I would select styles I'd do it via PHP and code wouldn't be very tricky, do you think PHP solution would be suitable most of times or JS would be more universal solution in this case?
In the meantime here is JS and conditional comments solutions to use different style selection for IE: http://www.roge.ru/?page_id=75