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

**potter** · 09-03-2007, 03:47 AM

I'm sorry, but your number one tip??? What does css designing have to do with doctype? If you design a website, in tables or css the doctype has nothing to do with how it's displayed in a browser. I've been doing pure css design for a long time now, and can write my code in either doctype properly with no errors or warnings off hand. However, even if you say wrote xhtml strict code, with a html 4.0 doctype. It would still end up rendering the same in a browser.

**StuartD** · 09-03-2007, 04:17 AM

Originally posted by potter

I'm sorry, but your number one tip??? What does css designing have to do with doctype? If you design a website, in tables or css the doctype has nothing to do with how it's displayed in a browser. I've been doing pure css design for a long time now, and can write my code in either doctype properly with no errors or warnings off hand. However, even if you say wrote xhtml strict code, with a html 4.0 doctype. It would still end up rendering the same in a browser.

CSS designing has everything to do with DOCTYPE.

The official differences are found here: http://www.w3schools.com/tags/tag_doctype.asp

You can read more about how they function differently here:
http://www.oreillynet.com/pub/a/java...8/doctype.html

Personally, I have found that I can really struggle getting my CSS layouts to look exactly the same in all browsers until I make the doctype strict.

Certain things like top 0 and left 0 can be very different in FF and in IE... until you set things to strict.

**Fletch XXX** · 09-03-2007, 04:30 AM

K.I.S.S. is my only rule.

**StuartD** · 09-03-2007, 04:57 AM

Originally posted by Grisey

Not mine but an old bookmark

http://www.smashingmagazine.com/2007...-live-without/

That's quite the awesome link, some very good stuff in there. I don't like that most of it uses javascript in some way, it isn't pure CSS tricks.
But then, CSS isn't meant to be used entirely by itself. It's meant to be used in conjunction with javascript, so it's not all bad

**quantum-x** · 09-03-2007, 06:01 AM

Originally posted by twisted Illustration

What are you talking about? CSS is useable without being hacky in the slightest.

I don't believe you :P

**Matt 26z** · 09-03-2007, 08:19 AM

Originally posted by StuartD

there will still be some things that IE simply will refuse to do according to standards. That's M$ for you.

You know what's funny though, is that MS went against the standards and supported CSS many years before W3C recommended it. It didn't even work in Netscape at all when MS introduced support for it. So one could say that it was MS's rogue behavior that got the ball rolling.

Now we've got W3C (whom MS has never been on great terms with) and Firefox demanding things be done a certain way. Fact is, they have no room to talk. As long as MS controls 90-95% of the market, they don't need to listen to the little guys creating their "official" standards. In reality, whatever MS does is THE standard that designers will live by.

Yeah, it really sucks that MSIE and Firefox don't work exactly the same. But my point is, MS needs to have most of the influence at W3C given their market position.

**BOSS1** · 09-03-2007, 08:26 AM

bookmarking

**Matt 26z** · 09-03-2007, 08:30 AM

Originally posted by mrthumbs

Start using it and maybe one day your designs will advance the mid 90's

Actually, CSS has nothing to do with the end design. If you put an all HTML design next to the CSS version of the same design, you shouldn't be able to spot any differences.

The original CSS construction is more time consuming than an HTML design. So if we are talking about one off "build it and forget it" pages then I stick with HTML. But if this is for a major site that may require a little tweak that is on every page, then CSS is the way to go.

**martinsc** · 09-03-2007, 08:48 AM

awesome thread

great tips, StuartD

bookmarked

**StuartD** · 09-03-2007, 08:49 AM

Originally posted by Matt 26z

Actually, CSS has nothing to do with the end design. If you put an all HTML design next to the CSS version of the same design, you shouldn't be able to spot any differences.

The original CSS construction is more time consuming than an HTML design. So if we are talking about one off "build it and forget it" pages then I stick with HTML. But if this is for a major site that may require a little tweak that is on every page, then CSS is the way to go.

100% entirely false.... sorry to say.

An all HTML design is actually quite not possible, especially in today's world of tours and layouts.
I say that because tables were never meant for designs, they were meant for data organization... such as spreadsheets.

The only way to do many designs strictly in HTML is to have nested tables and that's very bad form. Especially in IE which requires the entire contents of the table to be downloaded before rendering any single part of it to the screen.

HTML is a markup language which is little more than a way to present information to the browser in lists, forms, tables and so on.

CSS is the styling tool that is used to make that information look good.

And if you begin creating your pages with CSS, it will take WAY less time than to do it strictly with HTML alone.... as you will require 1/3 or less HTML to accomplish your goals.

**Tempest** · 09-03-2007, 11:02 AM

Originally posted by MicDoohan

one problem i have with my 3 column wordpress css layouts is how to make the 2 colored sidebar columns go all the way to the bottom - as it stands they only go down as far as there is content in them.

any tips css gurus ?

Can't remember what I did now but I think it can't be done the way you'd "think" it could be done... I think I ended up setting the main div (with the height 100%, overflow

dden as in the thread below) background color to what I wanted to side bars to be and then set the background color of the content (middle column).

Check out what I went thru over here
http://www.gofuckyourself.com/showthread.php?t=756104

**Tempest** · 09-03-2007, 11:07 AM

Originally posted by quantum-x

I must say, to me 'pure css' designs, still seem in the realm of 'hacky' at best, but I love making hybrids : let tables make the main structure, throw in divs and css for the rest, match made in heaven.

I still use tables for thumb blocks and for things I want the SEs to treat with a lower priority, but over the last month I've spent the time to figure out how to do my main layouts in css... everything I design is done with an eye to SEO and I've found doing it this way works out really well..

**potter** · 09-03-2007, 02:55 PM

Originally posted by StuartD

CSS designing has everything to do with DOCTYPE.

The official differences are found here: http://www.w3schools.com/tags/tag_doctype.asp

You can read more about how they function differently here:
http://www.oreillynet.com/pub/a/java...8/doctype.html

Personally, I have found that I can really struggle getting my CSS layouts to look exactly the same in all browsers until I make the doctype strict.

Certain things like top 0 and left 0 can be very different in FF and in IE... until you set things to strict.

Go reread those articles yourself. The ONLY differences it mentions is font styling. Like I said, the actual design of a website will not be changed at all even if the doctype is changed.

Seriously, I could go through my portfolio and make a copy of every single design and change the doctype on the copies. They'll all look exactly the same.

Example;

Code:

<table>
 <tr>
   <td>&nbsp;</td>
 </tr>
</table>

&

Code:

<div style="position: relative; top: 0px; left: 0px; height: 100px; width: 100px;"></div>

No matter what doctype is applied to either of those, the end result will look EXACTLY the same. I'm willing to put money on it.

**Tempest** · 09-03-2007, 03:07 PM

Originally posted by potter

No matter what doctype is applied to either of those, the end result will look EXACTLY the same. I'm willing to put money on it.

You may be right in that example, but I can say for a fact that changing the doc type can make a page that used to look good get all fucked up.

**StuartD** · 09-03-2007, 05:10 PM

Originally posted by potter

Go reread those articles yourself. The ONLY differences it mentions is font styling. Like I said, the actual design of a website will not be changed at all even if the doctype is changed.

Seriously, I could go through my portfolio and make a copy of every single design and change the doctype on the copies. They'll all look exactly the same.

Example;

Code:

<table>
 <tr>
   <td>&nbsp;</td>
 </tr>
</table>

&

Code:

<div style="position: relative; top: 0px; left: 0px; height: 100px; width: 100px;"></div>

No matter what doctype is applied to either of those, the end result will look EXACTLY the same. I'm willing to put money on it.

That's a very simplistic example... start floating some divs, add margins and padding and lists within them.... and then see if the DOCTYPES make any difference.

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

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment