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

**Azlord** · 12-18-2008, 05:47 AM

Floats are fragile and I hate to rely on it for my positioning.... good thing they have position: I use position 90% of the time to build sites.

A lot of the CSS that I see out there is so div heavy, it's the same as using tables. Try to use the least amount of divs. Don't forget that every standard tag can have css applied to it...

I didn't see this tip out here so here's my 1 cent

Code:

h1#branding {
width: 200px;
height: 200px;
background: url(../images/banner.jpg) no-repeat;
display: block;
text-align: -9999px;
}

**eroticsexxx** · 12-18-2008, 08:48 AM

bookmarked.

**Azlord** · 12-18-2008, 06:04 PM

Originally posted by Azlord

Floats are fragile and I hate to rely on it for my positioning.... good thing they have position: I use position 90% of the time to build sites.

A lot of the CSS that I see out there is so div heavy, it's the same as using tables. Try to use the least amount of divs. Don't forget that every standard tag can have css applied to it...

I didn't see this tip out here so here's my 1 cent

Code:

h1#branding {
width: 200px;
height: 200px;
background: url(../images/banner.jpg) no-repeat;
display: block;
text-align: -9999px;
}

I made a small typo on that one...

text-align: -9999px;

should really be

text-indent: -9999px;

**calmlikeabomb** · 12-19-2008, 04:25 PM

potter, stop shitting on a good thread.

Originally posted by potter

Yes, there are differences. Differences in how the code is written, not in how a layout will be displayed in a browser.

As StuartD said, a DOCTYPE does have everything to do with how a web page is rendered. You say it doesn't matter and it will not effect the appearance of a web page, but what you clearly don't understand is that DOCTYPE's are used to tell the client how to render a web page.

So don't forget to add a DOCTYPE

Originally posted by World Wide Web Consortium

Why specify a doctype? Because it defines which version of (X)HTML your document is actually using, and this is a critical piece of information needed by browsers or other tools processing the document.

For example, specifying the doctype of your document allows you to use tools such as the Markup Validator to check the syntax of your (X)HTML (and hence discovers errors that may affect the way your page is rendered by various browsers). Such tools won't be able to work if they do not know what kind of document you are using.

But the most important thing is that with most families of browsers, a doctype declaration will make a lot of guessing unnecessary, and will thus trigger a "standard" parsing mode, where the understanding (and, as a result, the display) of the document is not only faster, it is also consistent and free of any bad surprise that documents without doctype will create.

Also your CSS attributes are old school bro. Those ones have pretty much been around forever and you probably wouldn't notice a difference in the rending of code as basic as yours. Try using some more advanced CSS features such as those in HTML5.

Originally posted by potter

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.

Here is your prove. Maybe you should read up on the different formatting standards for each DOCTYPE.

I suggest you read the following article as well:

Fix Your Site With the Right DOCTYPE!
Written by Jeffery Zeldman who is a huge advocate of web standards.

Originally posted by Jeffery Zeldman

DOCTYPEs are a key component of compliant web pages: your markup and CSS won’t validate without them.

Using an incomplete or outdated DOCTYPE—or no DOCTYPE at all—throws these same browsers into “Quirks” mode, where the browser assumes you’ve written old-fashioned, invalid markup and code per the depressing industry norms of the late 1990s.

In this setting, the browser will attempt to parse your page in backward–compatible fashion, rendering your CSS as it might have looked in IE4, and reverting to a proprietary, browser–specific DOM. (IE reverts to the IE DOM; Mozilla and Netscape 6 revert to who knows what.)

Clearly, this is not what you want. But it is often what you’ll get, due to the preponderance of incorrect or incomplete DOCTYPE information this article hopes to correct.

So, did you actually read what I wrote?

Originally posted by potter

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.

Not it's called a web standard and a DOCTYPE is clearly something you didn't, but hopefully now to understand.

Originally posted by potter

Properly written code also has nothing to do with w3c valid code.

Wrong, because it wouldn't be 'proper' without that W3C standard.

Originally posted by potter

You can make a shit layout but have valid code. Just like you can write a shit sentence but it'll pass through spell check ;) .

Code structure and design should never be intertwined. However, this is a whole separate discussion.

**NY Jester** · 12-20-2008, 12:14 AM

Stuart great thread/ Ive been looking for this type of info, as I'd like to do my galleries using CSS.

I have a question. How can I create a a 15 pic gallery say thumbs 135 x 180 - using background images sliced for faster loading. Would that be a mix of css and tables?

Would I create <div> for each area Id like to lay out a number of thumbs? I hope that made sense.

**MetaMan** · 12-20-2008, 12:18 AM

what this thread boils down to is most people are idiots. most of you wannabe designers cannot even hack out a half decent CSS page if you were payed for it.

you claim proper code but you suck, i dont need to name names because i wish you the best of luck anyway, stuart you are a fucking programmer stick to it. its called fucking style sheets for a reason programmers have 0 style.

**munki** · 12-20-2008, 12:26 AM

Great thread...

**The Sultan Of Smut** · 12-20-2008, 01:41 AM

Awesome thread and I thought I'd share one tip that's helped get my layouts look the same with IE and Firefox. When creating a stylesheet I type it out adhering to CSS2 standards and it always works out fine with Firefox but when viewing it in IE sometimes there is the odd div that isn't positioned exactly the same so I create an extra rule for IE only by adding !ie:

#wrapper {
top: 0px;
top: 5px !ie;
}

In this example the div snuggles up to the top nicely with Firefox but with IE it was nudged up slightly higher so I added a little padding that Firefox ignores but IE reads.

**V_RocKs** · 12-20-2008, 03:18 AM

Seems CSS is ALL FUCKED UP and you have to do umpteenth work arounds to get anything to look right.

HTML had shit just about perfect.

**StuartD** · 12-20-2008, 03:21 AM

Originally posted by NY Jester

Stuart great thread/ Ive been looking for this type of info, as I'd like to do my galleries using CSS.

I have a question. How can I create a a 15 pic gallery say thumbs 135 x 180 - using background images sliced for faster loading. Would that be a mix of css and tables?

Would I create <div> for each area Id like to lay out a number of thumbs? I hope that made sense.

http://www.9xs.net/thumbs.html

If you view the source in this page, you'll see that the images go side by side quite neatly, and wrap to the edge of the browser window.

There's nothing stopping you from creating a div that's say... 180px wide (135 x 2 + padding) and putting the images inside that. Then the images would wrap 2 by 2 within that div, rather than the entire browser window.

It means having to do a little math on your part to get the divs the right size to make everything fit snug, but you make your divs, put your thumbs in and the galleries will just work.

**StuartD** · 12-20-2008, 03:21 AM

Originally posted by MetaMan

what this thread boils down to is most people are idiots. most of you wannabe designers cannot even hack out a half decent CSS page if you were payed for it.

you claim proper code but you suck, i dont need to name names because i wish you the best of luck anyway, stuart you are a fucking programmer stick to it. its called fucking style sheets for a reason programmers have 0 style.

**Jon Clark - BANNED FOR LIFE** · 12-20-2008, 03:21 PM

Udamang..

Si · 12-20-2008, 06:08 PM

This could be: CSS for dummies, you should sell it to them, very good thread

**born4porn** · 12-21-2008, 04:47 AM

excellent thread StuarD and thanks 4 taking the time to share it with us!

:

**StuartD** · 12-21-2008, 10:41 AM

Thank you everyone. I'm glad that it has been of some use to some of you.

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