Web Development

16-Aug-07 3:21

(I thought I'd spare the soapbox.. besides, this is particulary a web development rant...)

I hate CSS

I really, really, hate CSS....

Wasted a whole effing day farting around trying to get my CSS layout to behave across all browsers - it was fine in IE but not FF - margins around images weren't right... tried all possible combinationsa of border, margin and padding settings, and "hacks" for the different browsers.... finally discovered that by simply changing the first line of my page from

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

(my VS2003 default)

to

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

it works fine!

But even so, I've got a stylesheet a mile long to do something which, were it not for the style fascist police threatening me with everlasting exile for using tables to layout my page, I could have done in half an hour on day one with barely 20 lines of HTML.

I don't object to standards per se, and the idea behind separating style from content obviously makes sense... but the implementation, the way CSS has developed, is just plain godawful. It's a mess. I hate it.

grr

fred

Michael Sync16-Aug-07 3:55

Michael Sync

16-Aug-07 3:55

for me, I love CSS Smile | :)

Thanks and Regards,
Michael Sync ( Blog: http://michaelsync.net)

If you want to thank me for my help, please vote my message by clicking one of numbers beside "Rate this message". Why vote? Plz Read it here. Thank you.

Shog⁹16-Aug-07 6:29

Shog⁹

16-Aug-07 6:29

Yeah, i gotta tell ya, CSS is great. I write the code to spew out bare-bones HTML, check that the content is correct, tweak the generator for speed / flexibility / whatever, and then spend the rest of the day hanging styles off of it all 'till it looks pretty.

It's so much better than the mouldering piles of HTML i was putting together eight years ago that... well, it just ain't even funny.

But, uh, yeah - about your problem. You made one big mistake - and it wasn't the doctype thing: you didn't make it work in FF first and then add hacks for IE. Trust me, it's much easier to add the hacks for IE to make it act somewhat proper (there are many, many good sites dedicated to collecting and disseminating such hacks) than it is to find hacks to make FF act improper. The hack you did use just threw it into "quirks" mode, which - trust me - will come back to bite you...

every night, i kneel at the foot of my bed and thank the Great Overseeing Politicians for protecting my freedoms by reducing their number, as if they were deer in a state park. -- C^hris L^osinger, Online Poker Players?

Fred_Smith16-Aug-07 6:40

16-Aug-07 6:40

Shog9 wrote:
The hack you did use just threw it into "quirks" mode, which - trust me - will come back to bite you...

Oh... What that a hack then? Is it somehow less valid than the doctype definition VS put in? How and why will it come back to haunt me?

I do understand the argument for CSS - I just wish it could have been made a little more intuitive, and (more importantly) actually work consistently...

George L. Jackson16-Aug-07 12:54

George L. Jackson

16-Aug-07 12:54

Fred_Smith wrote:
I do understand the argument for CSS - I just wish it could have been made a little more intuitive, and (more importantly) actually work consistently...

The browsers aren't consistent! CSS is a standard and the makers of the browsers come close to the standard. However, each browser is not consistant in formatting HTML elements on a page and this also creates problems with CSS. CSS actually exposes a browser's non-standard behavior.

"We make a living by what we get, we make a life by what we give." --Winston Churchill

Shog⁹16-Aug-07 13:55

Shog⁹

16-Aug-07 13:55

Fred_Smith wrote:
Is it somehow less valid than the doctype definition VS put in? How and why will it come back to haunt me?

The one you're using now will trigger "Quirks mode" - essentially a rendering mode where browsers (including IE) try to match the rendering of older versions of IE... It's working for you now, because you wrote to IE... but if you're looking for consistency, you'll find yourself badly disappointed: as poor as most browsers are at implementing the CSS standard, they're generally a bit worse when trying to match the (*ahem*) organic standard that is classic IE rendering... So next time you find a discrepancy between IE and FF, or IE and Opera, or IE and Safari, you'll have no choice but to delve into the realm of browser-specific hacks - and, as those ironically ironic kids are fond of saying, "here there be dragons". Wink | ;)

----

I don't care what you consider witty, but at least I do not blather on posting nonsense like Jim Crafton.
-- Stringcheese, humbled by Crafton's ability to string together multiple sentences

Fred_Smith16-Aug-07 14:37

16-Aug-07 14:37

well.. no doubt.... perhaps you can explain why the below is only consistemt with the "quirks mode" doctype then.. and suggest what I should do to achieve my aim with the "proper" doctype set - which is to have a 17px space between the image and the boxes below (which should also have a 17px between them, and (incidently) a 17px "inner-padding" where some text will be)

Simple task, eh?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<HEAD>
<title></title>
<style>
#rightcolumn {
color: #333;
border-style: none;
border-width: 0;
background: #ffffff;
margin: 0 0 0 0;
padding: 17px 0 17px 17px;
width: 154px;
float: left;
}
#rightcolumn img {
margin : 0 0 17px 0;
padding: 0;
}
.rhOrange {
width : 120px;
background-color : #dd8833;
padding: 17px 17px 17px 17px;
margin : 0 0 17px 0;
border-style:none;
.rhSky {
width : 120px;
background-color : #ccddee;
padding: 17px 17px 17px 17px;
margin : 0 0 17px 0;
border-style:none;
border-width Blush | :O

;
}
</style>
</HEAD>
<body>
<div id="rightcolumn">
<img src="image.gif" width="154" height="172" border="0" alt="">
<div class="rhOrange">
abc
</div><div class="rhSky">
xyz
</div>
</div>
</body>
</HTML>

Shog⁹16-Aug-07 15:45

Shog⁹

16-Aug-07 15:45

Ugh.
Ok, so, i was wrong. Blush | :O

The doctype you're using now doesn't put either browser into quirks mode, so... that's good. Ignore my dire warnings. Wink | ;)

The effect you saw from changing it has to do with something else... Apparently, <img> elements are considered, strictly-speaking, to be inline elements, and thus FF will reserve a bit of space below them unecessarily... The second doctype you used triggers - in FF - an "almost-strict" mode that doesn't do this little bit of madness for images.

So, yeah. I understand your frustration now. Smile | :)

Fred_Smith16-Aug-07 22:26

16-Aug-07 22:26

PAH! Do I feel vindicated or what?

A pox on CSS! A pox on Firefox!

(Sorry - and btw, thanks!)

I want to start a new self-help group for all who are suffering under this torture in the name of standards and uniformity. Think I'll call it:

"Fighting Under CSS or Friendly Fire" - known as FUCSS OFF for short...

Smile | :)

JimmyRopes17-Aug-07 3:49

17-Aug-07 3:49

Fred_Smith wrote:
I hate CSS

Have you read a book specifically addressing CSS? Confused | :confused:

Who knows, you might learn to use it properly? D'Oh! | :doh:

PS - it is the different browsers that are the cause of the problems, not CSS. Unsure | :~

Simply Elegant Designs JimmyRopes Designs
Think inside the box! ProActive Secure Systems

I'm on-line therefore I am.
JimmyRopes

Fred_Smith17-Aug-07 3:52

17-Aug-07 3:52

Yes, I have - more than one. But if you read the above posts, I think you'll accept that this particular issue wasn't *entirely* my fault... it's not that I can't use CSS - just that it's so much more cumbersome to use, and "clumsy", than it ought to be...
Fred

JimmyRopes17-Aug-07 4:06

17-Aug-07 4:06

Fred_Smith wrote:
I think you'll accept that this particular issue wasn't *entirely* my fault... it's not that I can't use CSS - just that it's so much more cumbersome to use, and "clumsy", than it ought to be...

The reason that it is cumbersome is because not all browsers are implemented the same. That is a browser implementation problem. Even table implementation is not totally consistent between all browsers.

Getting browsers to behave is like trying to herd cats, they all have their own agenda.

I don't agree that CSS implementation is "clumsy" (your words). It is a different paradigm that must be learned, but when you do finally figure out how to implement it properly you will have a very versatile tool to work with.

Simply Elegant Designs JimmyRopes Designs
Think inside the box! ProActive Secure Systems

I'm on-line therefore I am.
JimmyRopes

Fred_Smith17-Aug-07 4:36

17-Aug-07 4:36

HTML:

<font face="abc,def" size="X" color="#cccccc">hello world</font>

CSS:

Hello world

Now, I want to know how this is styled - perhaps to change it.

In HTML it's there in your face.

In CSS, I have to look back up through the document hierarchy to find out the parent element the text is in, and very possibly the parent of that too, and it's parent.. (depending on how the CSS is written) - I must then find out the CSS file linked to... then find that file... then find the references to the element(s) I noted earlier, and finally I can work out (not "see" but "work out") the style! Then I have to work out what steps are needed to alter it as I require, without some knock-on effect buggering up some style elsewhere....

That isn't clumsy?

Look, I *know* the reasons for all this, and do appreciate them... I just can't help feeling there ought to be a better way...

JimmyRopes17-Aug-07 10:34

17-Aug-07 10:34

I didn't realize that you were going to limit yourself to simple "Hello World" applications.

In those cases CSS is overkill. In real world websites it is a step in the right direction, and used in competent hands can make many jobs simpler. Think, no more tracking down and editing each occurrence of some style on every page just to change the shade of green or some other sit wide style alteration.

But then on your type of "Hello World" applications there isn't much to edit anyway.

Simply Elegant Designs JimmyRopes Designs
Think inside the box! ProActive Secure Systems

I'm on-line therefore I am.
JimmyRopes

Fred_Smith17-Aug-07 10:55

17-Aug-07 10:55

JimmyRopes wrote:
I didn't realize that you were going to limit yourself to simple "Hello World" applications.

I'm workng towards a "Call home" one.... Laugh | :laugh:

Of course I can see the point of it - I just wish it.. I don't know.. wasn't so cumbersome. I find it so.

So I can change all my H1's green instead of red if I want - great; but in my experience clients rearely want that - they are more likely as not to want a complete re-design anwyay.

And while such re-writes may be easier and quicker, the original write isn't - given that most sites only get written once, I have to wonder...

Yeah, I know I'm pissing against the wind, and believe it or not I don't even really want to; I just wanted to let off some steam at an annoying "bug" that wasted the best part of my day.

I suppose I do tend to go agrainst the grain for the sake of it sometimes - but I can't help feeling this obsession with table-les layouts is just that: an obsession, and like most obsessions it isn't rooted in good reason.

The most oft-said reason for it for accessibility reasons - screen-readers don't like it - but that is not, to me, a good reason. It's a good reason to develop better screen reader technology, not a good reason to force everyone else to change theirs.

blah blah ok CSS is great. I take it all back. And by the way, I've been writing code since before you were born (probably)

As an irrelevant aside: Did you know, if you (tried to) build a stack of those old-fashioned punch cards we used to code on (do you even know what they are, youngster?) with one card for each possible combination of holes punched - that there wouldn't be enough atoms in the universe to fulfil the dream?

Fred

JimmyRopes17-Aug-07 11:15

17-Aug-07 11:15

Fred_Smith wrote:
Of course I can see the point of it - I just wish it.. I don't know.. wasn't so cumbersome. I find it so.

I did at first also, but after working with it a while I got the hang of it.

We humans don't like to change very much and once we get used to doing something a certain way we don't like to shift paradigms.

Fred_Smith wrote:
And while such re-writes may be easier and quicker, the original write isn't

After you develop some templates it becomes easier to get a site up because you have the basic structure coded and tested so all you need to do is add copy.

Fred_Smith wrote:
I can't help feeling this obsession with table-les layouts is just that

I agree that people get fanatical about the latest design paradigms but I have seen tables used to excess also (nested way too many levels). Bad designers will produce bad designs regardless of the technology.

Fred_Smith wrote:
And by the way, I've been writing code since before you were born (probably)

I'm glad you qualified that with probably since I was born when ENIAC was in the process of being moved from the U of PA to the Aberdeen Proving Grounds. Not a lot of programming went on back then unless you were on the original project toggling switches or plugging in jumper cables.

Simply Elegant Designs JimmyRopes Designs
Think inside the box! ProActive Secure Systems

I'm on-line therefore I am.
JimmyRopes

div tutorial

chris_wanaka16-Aug-07 0:07

chris_wanaka

16-Aug-07 0:07

Hi,

I'm trying to create a page with a header div, a left sidebar div and a right content div, with a footer div at the bottom.

Sounds simple doesn't it! Have been trying for a couple of hours and so far it's just not working.

Wondered if anyone knows of any good tutorials or articles, or has any sample code, that explain how to do this?

I've looked at loads of different articles, but a lot of them don't do quite what I want, or simply the code isn't cross-browser compatible.

Some idea of where to look would be much appreciated Smile | :)

Thanks
Chris

Re: div tutorial

Pete O'Hanlon16-Aug-07 2:01

Pete O'Hanlon

16-Aug-07 2:01

Take a look at the site http://www.alistapart.com[^]. They have lots and lots of tutorials on this. Plus, consider buying the Eric Meyer books on CSS. They are bibles if you want to work with CSS.

Deja View - the feeling that you've seen this post before.

Re: div tutorial

Fred_Smith16-Aug-07 3:02