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

**StuartD** · 07-27-2008, 06:50 AM

Originally posted by smack

one of my favorite CSS tricks is when using it in conjunction with ASP.NET to show/hide controls.

those of you who work with .NET know that if you set the visible property of a server control to false, it won't render to the browser at all, so you can't make it visible without using a postback.

so what i like to do is leave the visible property as true, but during the page load add a "display: none" CSS attribute to the control, then use a javascript to change that to "display: inline" on the client side so i can avoid at least one more trip back to the server.

makes the page much smoother since the show/hide is all done client side.

Indeed, I do this quite a bit... now I also add in some AJAX to streamline things even further using this same method.

Great tip

**smack** · 07-27-2008, 07:19 AM

i've just started messing around with AJAX not too long ago. at the moment it is more of a curiosity to me than anything, but i think i am going to incorporate some of it's functionality in to one of the current projects i am working on.

it makes life a hell of alot easier than writing all kinds of wacky java functions myself, and while it seems i will still need to augment it with custom java work, i don't think it will be nearly as much as before. (i hate java. i have never had any patience for any language that is case sensitive of requires ; to terminate lines, but for client side functionality, you can't beat it).

other than that though i don't really utilize all that much CSS. i am slowly starting to incorporate it more and more as needed, but i still do things relatively old school. old habits die hard. ;)

**datnukkabroke** · 12-16-2008, 05:58 PM

I cannot lie I have not built a site from scratch in a while and #1 saved me $30. I was about to pay a guy to remind me how to get the cross browser compatibility. Maybe I just smoke to much, Ya never can tell. Thanks alot for the free tip, the rest I had fresh in my memory so it wasn't helpful to me but Im sure someone else will find something useful.

**Ecchi22** · 12-17-2008, 09:39 PM

Awesome thread

I bookmarked it yesterday.

About doctype issue, from my own experience, yes, it affects layout in some cases. I can't give an example at the moment (you can call me lazy if you want), but I have to mention that StuartD is right when it comes to doctypes.

**CIVMatt** · 12-18-2008, 05:09 AM

I just want to learn how to make a simple text box on a layout

**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.

**potter** · 12-21-2008, 11:56 AM

Originally posted by calmlikeabomb

[SIZE="5"]bunch of stuff

Stuart was saying that one doc type will render padding, margin, or 0px differently than another.

This is not true, and any decent web tech should know that. Nothing you provided proved that one doc type would display margin, padding, or 0px differently. Go ahead and email Jeff and ask him.

**testpie** · 12-21-2008, 12:57 PM

Originally posted by V_RocKs

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.

Welcome to the web as the W3C sees it - where the more the number of convoluted and gratuitous standards you can make, the "better" everything is.

Or to put it another way, if the W3C built motorways, the number of lanes it had, speed you could go and distance to be kept between cars would vary depending on the car you were in, colour of eyes you saw the road through and whether or not your car manufacturer had the greatest market dominance, and so just did everything differently, just for the shit of it.

**StuartD** · 12-21-2008, 02:44 PM

Originally posted by potter

Stuart was saying that one doc type will render padding, margin, or 0px differently than another.

This is not true, and any decent web tech should know that. Nothing you provided proved that one doc type would display margin, padding, or 0px differently. Go ahead and email Jeff and ask him.

Actually, I said "no matter what make or model, will try their very best to make sure that 0px really means 0px."

Which is true.

0px means the top left corner of the browser, but the different browsers interpret the "top left corner" differently.

**potter** · 12-22-2008, 03:56 PM

Originally posted by StuartD

Actually, I said "no matter what make or model, will try their very best to make sure that 0px really means 0px."

Which is true.

0px means the top left corner of the browser, but the different browsers interpret the "top left corner" differently.

What?!

For starters 0px means zero pixels. 0px has nothing to do with corners, it's a definition of measurement.

Secondly, if different browsers render 0px differently. And if "top left" is different in different browsers. I'd love to see some information on it.

I guarantee you can't find me one shred of information stating how 0px will be rendered as say 0px in firefox but .5 pixels in internet explorer, or 1.3456 pixels in opera.

I'd also love to see some information that states "top left", is not defined as the top left corner of an element in some browser.

Like whoa, what you're saying is happening goes against every thing that is known about the browser rendering and css.

**Deej** · 12-22-2008, 05:03 PM

Originally posted by potter

Stuart was saying that one doc type will render padding, margin, or 0px differently than another.

This is not true, and any decent web tech should know that. Nothing you provided proved that one doc type would display margin, padding, or 0px differently. Go ahead and email Jeff and ask him.

no offense - but this is wrong...

true, a pixel itself isnt changed or 'measured' differently - but - browers will use them differently or see the formulas and output them differently...

**StuartD** · 12-22-2008, 06:27 PM

Originally posted by potter

What?!

For starters 0px means zero pixels. 0px has nothing to do with corners, it's a definition of measurement.

Secondly, if different browsers render 0px differently. And if "top left" is different in different browsers. I'd love to see some information on it.

I guarantee you can't find me one shred of information stating how 0px will be rendered as say 0px in firefox but .5 pixels in internet explorer, or 1.3456 pixels in opera.

I'd also love to see some information that states "top left", is not defined as the top left corner of an element in some browser.

Like whoa, what you're saying is happening goes against every thing that is known about the browser rendering and css.

After all this, you seriously think that I don't know that 0px is a measurement... and are trying to be so anal that my reference to 0px as the top left corner is anything but... you know what? I'm done talking to you.
There's obviously no point in it since you are nitpicking this crap just for the sake of arguing at this point.

You go about doing things your way, you're the best. All hail you, king of css.

**Azlord** · 12-22-2008, 07:06 PM

Originally posted by testpie

Welcome to the web as the W3C sees it - where the more the number of convoluted and gratuitous standards you can make, the "better" everything is.

Or to put it another way, if the W3C built motorways, the number of lanes it had, speed you could go and distance to be kept between cars would vary depending on the car you were in, colour of eyes you saw the road through and whether or not your car manufacturer had the greatest market dominance, and so just did everything differently, just for the shit of it.

Interesting way to look at it, but it's not the w3c's fault really. It's actually the browser company's fault during the browser wars in the 90's. They just made up their own tags that were independent of any standards. The w3c made recommendations on what tags should do what, and how they would work, but none of the browser makers listened. It's not like the w3c is out to fuck anyone over, or make things hard on people. They wanted the complete opposite actually.

**brandonstills** · 12-22-2008, 07:08 PM

Strict is not strict. Why can't I do <iframe/> or <script src="..."/> without the browser crapping out on me?

Another good one. Don't do display: none in the css if you want to change it with JS later on. Do it inline on the actual element. You can't change it since it's not on the DOM if you declare it none in the CSS.

**Azlord** · 12-22-2008, 07:09 PM

Another tip to keep the thread rolling

display property...

display: inline;
display: block;

Both very useful. display block has helped me fix 1px differences between IE and FF... such a pain.

**Azlord** · 12-22-2008, 07:12 PM

Originally posted by brandonstills

Strict is not strict. Why can't I do <iframe/> or <script src="..."/> without the browser crapping out on me?

Another good one. Don't do display: none in the css if you want to change it with JS later on. Do it inline on the actual element. You can't change it since it's not on the DOM if you declare it none in the CSS.

You can do script with strict, but you can't do iframe. That's not a standards valid markup...

And your point about using display: none; inline is a good tip. And display: none; is better than visibility: hidden; hidden seemed to leave the space that the hidden element took up on the page, but display none, removes that space and continues the normal flow of the document.

**brandonstills** · 12-22-2008, 07:12 PM

Originally posted by potter

What?!

For starters 0px means zero pixels. 0px has nothing to do with corners, it's a definition of measurement.

Secondly, if different browsers render 0px differently. And if "top left" is different in different browsers. I'd love to see some information on it.

I guarantee you can't find me one shred of information stating how 0px will be rendered as say 0px in firefox but .5 pixels in internet explorer, or 1.3456 pixels in opera.

I'd also love to see some information that states "top left", is not defined as the top left corner of an element in some browser.

Like whoa, what you're saying is happening goes against every thing that is known about the browser rendering and css.

Actually it's supposed to be 0 not 0px. Only include px if it's non-zero. It will work fine but it's not compliant.

**Azlord** · 12-22-2008, 07:33 PM

Originally posted by brandonstills

Actually it's supposed to be 0 not 0px. Only include px if it's non-zero. It will work fine but it's not compliant.

using 0 is compliant... either one is compliant.

**potter** · 12-23-2008, 12:06 AM

Originally posted by brandonstills

Actually it's supposed to be 0 not 0px. Only include px if it's non-zero. It will work fine but it's not compliant.

It's compliant.

**potter** · 12-23-2008, 12:12 AM

Originally posted by StuartD

After all this, you seriously think that I don't know that 0px is a measurement... and are trying to be so anal that my reference to 0px as the top left corner is anything but... you know what? I'm done talking to you.
There's obviously no point in it since you are nitpicking this crap just for the sake of arguing at this point.

You go about doing things your way, you're the best. All hail you, king of css.

And again, when I ask you to simply reference your statements you back out. Figures. Pages back I even went ahead and created pages to back my statements. You never provided links or references to back what you were saying. Yet again, you do not provide any proof.

You had the right idea starting this thread. It had good intent. However you're providing misleading and wrong information. It's counter productive to what you tried to accomplish.

**uno** · 12-23-2008, 12:31 AM

Amazing thread stuart. I'm going to bookmark it.

**kahell** · 12-23-2008, 12:48 AM

bumpity for these great tread on css thanks stuartd for starting it and Merry Christmas

**tranza** · 12-23-2008, 01:51 AM

Man, this is very usefull, thanks for this!
Bump!

**chupachups** · 12-23-2008, 01:54 AM

Good post Stuart!

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

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment