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 :thumbsup

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. ;)

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.

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.

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

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

bookmarked.

I made a small typo on that one...

potter, stop shitting on a good thread.

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 :winkwink:

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.

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.

So, did you actually read what I wrote?

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

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

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

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.

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. :2 cents:

Great thread...

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. :)

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.

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.

:1orglaugh

Udamang..

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

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

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

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.

:2 cents:

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.

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.

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

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.

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.

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.

Another tip to keep the thread rolling

display property...

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

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.

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.

It's compliant.

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.

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

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

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

Good post Stuart! :thumbsup