Some CSS "must knows" from me, and please share yours

Let's see either of you make a quick design, copy it, and use a different doctype on each one. I'd love to see what you're talking about.

Here's one of my older designs, 100% pure css of course.

http://pulsedesign.biz/printer/css.html 100% pure CSS using xhtml strict code. CSS has positive and relative positions, also has some floats. Should be a more "advanced example" for you.

w3c valid code; http://validator.w3.org/check?uri=ht...ter%2Fcss.html

w3c valid (no warnings) css; http://jigsaw.w3.org/css-validator/v...er/printer.css

Now we'll take the same page, and change nothing but the doc type. Changing it from xhtml 1.0 strict, to html 4.01 strict.
- http://pulsedesign.biz/printer/css-doctype.html
Page is displayed EXACTLY the same. I tested in FF 2.0x and Safari on OSX, and IE 6.0x on Windows XP.

I could pull out hundreds more designs and show you the same thing over and over. Instead, I showed an example on my end. Let's see one on your end.

Ok, first of all... I was talking about the differences between strict and transitional (and also included is loose) used in doctypes. Not about the differences between xhtml and html 4.

Secondly, your html 4 infact does not validate as you have left in the close tags ( /> ) items from your xhtml document. Those aren't required nor valid in html.

Ok.
http://pulsedesign.biz/printer/css-transitional.html
&
http://pulsedesign.biz/printer/css-frameset.html
& the original (strict)
http://pulsedesign.biz/printer/css.html

Again, only changing the doctype. This time as per "what you were talking about", keeping it the same xhtml but changing the strict/transitional. Tested in FF 2.0x and Safari on OSX, and IE 6.0x on Windows XP. All still render EXACTLY the same.

What???? Wow, no kidding? It's written for xhtml 1.0 strict. You did notice only the DOCTYPE was changed right? Because we're talking about changing doctypes, not rewriting an entire page after changing the doctype. Yet even in the example shown, a design written in xhtml strict code, can still have the doctype changed to a totally different type (html 4.01) which completely invalidates the code, and it still renders EXACTLY the same in all browsers.


.........So would you please just post up an example of two designs. Code on both exactly the same, with just the doctype changed. Where the end result is the design being rendered differently?

Also, if you're against using xhtml as an example. I'll even do the same with a design coded in html 4.01. 100% css, w3c valid page, w3c valid css (no warnings). I'll keep the code exactly the same but just change the doctypes from html 4.01 strict, to html 4.01 loose - html 4.01 frameset - and even xhtml strict - xhtml frameset - xhtml transitional. Six pages, all the same code, each with different doctypes. All will render the same in all browsers.

hey good thread - somebody posted a link to this website the other day in a thread http://www.soulacreative.com/about_us.html

so i clicked it cuz i was bored - on the right there's a menu with a Flash animation background. I like it. So I looked at the source and the style sheet to see how they put a Flash animation in the background underneath a menu and I couldn't find out how they got it there.

i'd appreciate an explanation - it's mostly a CSS layout.

thanks

excellent thread. bump.

Question... when using on page javascript and styles, you'd comment it out so that it wouldn't fuck up on some browsers.... eg:

How are you supposed to do that on the newer XML/XHTML doc types?

Like this???

or???

Yes, <![CDATA[ tells the browser to NOT parse anything within those tags as XML... so it will try to ignore &'s and &#37;'s and everything else that would otherwise break XML.

I hate the <![CDATA[

But what can ya do... it's a necessary UGLY evil that seems to be coming on strong, especially with RSS as popular as it is now.

I don't really have time to be making examples.... I barely have time to revisit this thread from time to time. Besides, you seem pretty convinced and can't be told otherwise anyway.

However, suffice to say... there are differences. Otherwise they wouldn't have bothered making the doctypes in the first place. Right?

There's plenty of examples, tutorials, descriptions and so on with a few quick searches in Google... for example: http://htmlfixit.com/tutes/tutorial_...ferences.shtml

You can continue to make pages designed with tables if that's what works for you, but CSS is still a better method. Or you can use CSS and not bother with DOCTYPES if that's what works for you, but using proper DOCTYPES is still a better method.

I believe your answer lies in the "wmode=transparent" parameters within Flash.. and of course, keeping your DIV set to a higher z-index.

Read more: http://www.google.ca/search?q=wmode%3Dtransparent

Yes, there are differences. Differences in how the code is written, not in how a layout will be displayed in a browser. Seriously, I'm beginning to wonder if you even do know the true differences between each doctype.

It's sad you can't admit you're wrong. You were all about me being the stupid one at first, but as soon as I go a bit more in depth and provide some examples you back off.

Seems to me you're the one using CSS and not using proper doctypes. Since you're so naive to doctypes and how they effect a page. I truly wonder if you realize what each one is designed for and how using different ones can benefit different types of web pages.

Of course I do, which I've been stating. You're the one who continues on with "it makes no difference" over and over again, and now you're saying that there are differences in how the code is written.

Did you actually read what I wrote? Ok man, I'll dumb it down and reexplain.

Changing a doctype has no effect on a layout, or design. Creating a layout that works in say strict xhtml, will also work in transitional xhtml and/or html strict/transitional. Both layouts will look exactly the same. Doctypes will not change positioning, margins, or 0px as you say they will.

The differences in code, in say strict xhtml compared to html 4.01 are nothing to do with layout discrepancies. Such as, In xhtml an image tag must have a closing bar.

Valid image tag for xhtml strict doctype.
Whereas, in html 4.01 or less strict doctypes. the closing "/" is not needed. Also, stated in the article you provided originally, <font> tags are not allowed in xhtml strict doctypes. However, in html less strict doctypes it is.

So I'll quote you again;
Yes, there are differences in the way the code is written (I never argued that or said there wasn't). However, font and closing bars for image tags will not change a layout. Which is what I had stated. Not that the code was the same, but that the layout/design would still remain the same. Why you replied to that menial piece of my post makes no sense. Again, just admit you're wrong. It's cool of you to come here with CSS tips, and I'm sure they'll be useful to alot of people. But in your #1 tip, you're giving people the wrong information. You were wrong. You'll continue to argue with me and attack meaningless bits of my posts which have nothing to do with what I'm saying. If you want to somehow prove you're right. Just show me one example of a layout written for one doctype, and then have it look different in another doctype. It would end the discussion, and should be real simple for you to do since you say doctypes have effects on floats, margins, 0px, or positioning. You've got yourself plenty of options to make an example of.

Uhg, this just makes absolutely no sense. You're telling me you'll code a layout that doesn't work properly. But setting the doctype to strict makes it suddenly work? It's just ludicrous. I'd love to see what kind of fucked up code you could muster up to do that. Because since doctype won't effect the way a layout's displayed. You could create said layout without a doctype, and then make 6 different copies with six different doctypes and they'll all look exactly the same as the one without a doctype.

Me thinks you can't make this mysterious layout that will magically look different with different doctypes.