Some CSS "must knows" from me, and please share yours - Page 2 - GoFuckYourself.com

LadyMischief · 09-02-2007, 05:01 PM

Awesome thread, Stu, bookmarked! You know how much I LOOOOVE Css... grrr

MicDoohan · 09-03-2007, 01:56 AM

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 ?

AlienQ - BANNED FOR LIFE · 09-03-2007, 01:58 AM

CSS is the suck and not necessary.

mrthumbs · 09-03-2007, 03:02 AM

Quote:

Originally Posted by AlienQ

CSS is the suck and not necessary.

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

quantum-x · 09-03-2007, 03:10 AM

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.

Twisted Dave · 09-03-2007, 03:50 AM

Quote:

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.

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

cykoe6 · 09-03-2007, 03:55 AM

Ths is a really great thread. I hate CSS with a passion but as a full time blogger I am always dealing with it in my WP themes. I find that even the simplest adjustment takes forever to figure out in CSS.... but maybe this thread will help me.

Grisey · 09-03-2007, 03:56 AM

Not mine but an old bookmark

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

testpie · 09-03-2007, 04:09 AM

Quote:

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 ?

Just adapt the code from this site: http://www.tanfa.co.uk/css/layouts/c...-layout-v1.asp and remove the footer if you don't want it.

testpie · 09-03-2007, 04:10 AM

Quote:

Originally Posted by Lycanthrope

The single best thing you can do to "zero out" every browser across the board

What do you mean?

Sorry for the double post.

potter · 09-03-2007, 04: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, 05:17 AM

Quote:

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, 05:30 AM

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

StuartD · 09-03-2007, 05:57 AM

Quote:

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, 07:01 AM

Quote:

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, 09:19 AM

Quote:

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, 09:26 AM

bookmarking

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

Quote:

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, 09:48 AM

awesome thread

great tips, StuartD

bookmarked

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

Quote:

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, 12:02 PM

Quote:

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, 12:07 PM

Quote:

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, 03:55 PM

Quote:

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, 04:07 PM

Quote:

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, 06:10 PM

Quote:

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.

potter · 09-04-2007, 08:17 AM

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.

potter · 09-04-2007, 08:37 AM

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...r%2 Fcss.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.

StuartD · 09-04-2007, 09:02 AM

Quote:

Originally Posted by potter

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...r%2 Fcss.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.

potter · 09-04-2007, 09:25 AM

Quote:

Originally Posted by StuartD

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.

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.

Quote:

Originally Posted by StuartD

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.

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?

potter · 09-04-2007, 09:31 AM

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.

Mutt · 09-04-2007, 09:43 AM

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

SCtyger · 09-04-2007, 11:29 AM

excellent thread. bump.

Tempest · 09-04-2007, 03:02 PM

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

Code:

<style type="text/css"><!--
--></style>
<script language="JavaScript" type="text/javascript"><!--
// --></script>

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

Like this???

Code:

<style type="text/css"><![CDATA[
]]></style>
<script language="JavaScript" type="text/javascript">// <![CDATA[
// ]]></script>

or???

StuartD · 09-04-2007, 03:05 PM

Yes, <![CDATA[ tells the browser to NOT parse anything within those tags as XML... so it will try to ignore &'s and %'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.

StuartD · 09-04-2007, 03:10 PM

Quote:

Originally Posted by potter

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.

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.

StuartD · 09-04-2007, 03:16 PM

Quote:

Originally Posted by Mutt

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

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

potter · 09-04-2007, 08:04 PM

Quote:

Originally Posted by StuartD

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

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.

Quote:

Originally Posted by StuartD

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.

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.

StuartD · 09-04-2007, 08:09 PM

Quote:

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

potter · 09-05-2007, 12:46 AM

Quote:

Originally Posted by StuartD

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.

Code:

<img src="image.jpg" alt="thisimage" />

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;

Quote:

Originally Posted by StuartD

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.

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.

potter · 09-05-2007, 12:59 AM

Quote:

Originally Posted by StuartD

CSS designing has everything to do with DOCTYPE.

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.

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.

potter · 09-05-2007, 01:12 AM

I'm bored right now by the way, waiting for my gf to finish her nap. So one more post before I wake her up to head out.

Quote:

Originally Posted by StuartD

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

Goes to figure I missed this originally. Ok, it's clear to me now you're just writing your code wrong. Properly written code will not be displayed differently in different browsers. Properly written code also has nothing to do with w3c valid code. 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 ;) .

If you're having discrepancies in cross browser compatibility. Even with anything, but in this case specifically with pixel dimensions. Then you're most likely getting in over your head with advanced css design and using more complex margin or padding rules. Which is what most beginners have trouble with. They'll get good at css and try to expand into more complex designs but just run into more problems with how bad code can be rendered. I'm willing to bet the problem you had in your example had to do with improperly using either margin or padding styling.

Matt 26z · 09-05-2007, 01:40 AM

Quote:

Originally Posted by StuartD

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

If I were to replicate a CSS design into HTML and put the two side by side, you'd be able to tell the difference without looking at the source?

Of course not.

From the surfer experience standpoint, there is no compelling reason to take an HTML plus graphics site and convert it to CSS plus graphics. The end result to the surfer will be exactly the same.

Don't think I am slamming CSS though. It's a great tool for a site with hundreds of pages. If you want to change the appearance of one thing on each page, you just update one file. But if we were to talk about gallery builders switching to CSS, what would be the point in that?

Angie77 · 09-05-2007, 06:33 AM

this is the first time i've seen a legitimately helpful thread such as this.

fris · 09-05-2007, 06:39 AM

Something I came across last night which is kinda cool

text-transform:lowercase;
text-transform:uppercase;

testpie · 09-05-2007, 06:42 AM

Quote:

Originally Posted by Mutt

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

If you look in their stylesheet at http://www.soulacreative.com/style.css it seems they just position the menu element accordingly to be over the top of the flash movie, and then ensure it's high presence on the Z-axis by setting the value to 9:

Code:

#right_menu #menu {margin: 30px 30px 30px 17px; width: 180px; position: absolute; z-index: 9;}

I could be wrong though.

Elli · 07-27-2008, 12:13 AM

Bump for a great thread!

jact · 07-27-2008, 12:17 AM

Fourth time in history I'm bookmarking a GFY thread. Amazing.

Good thread Stu.

Would have been better if I checked the date first too. LOL

Supz · 07-27-2008, 01:54 AM

Quote:

Originally Posted by jact

Fourth time in history I'm bookmarking a GFY thread. Amazing.

Good thread Stu.

Would have been better if I checked the date first too. LOL

still a good thread today

StuartD · 07-27-2008, 07:18 AM

Quote:

Originally Posted by AlienQ

CSS is the suck and not necessary.

I guess some things never change

smack · 07-27-2008, 07:38 AM

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.

09-02-2007, 05:01 PM	#51
LadyMischief Orgasms N Such! Industry Role: Join Date: Sep 2002 Location: Oakville, Ontario Posts: 18,135	Awesome thread, Stu, bookmarked! You know how much I LOOOOVE Css... grrr __________________ ICQ 3522039 Content Manager - orgasm.com [email protected]

09-03-2007, 01:58 AM	#53
AlienQ - BANNED FOR LIFE best designer on GFY Join Date: Mar 2003 Location: IALIEN.COM - High Definition Video and Photographic Productions -ICQ 78943384 Posts: 30,307	CSS is the suck and not necessary. __________________ NAKED HOSTING FTW!11 I'm On The INSANE PLAN $9.95/mo! \| The Alien Blog Adult News Worth Reading Updated Daily \| Content For Sale! 641 PICS 216 MINUTES OF VIDEO $350.00 \|ICQ: 78943384 \|

09-03-2007, 03:55 AM	#57
cykoe6 Confirmed User Industry Role: Join Date: Apr 2005 Location: Vegas Posts: 4,499	Ths is a really great thread. I hate CSS with a passion but as a full time blogger I am always dealing with it in my WP themes. I find that even the simplest adjustment takes forever to figure out in CSS.... but maybe this thread will help me. __________________ бабки, шлюхи, сила

09-03-2007, 03:56 AM	#58
Grisey Confirmed User Join Date: Jan 2004 Location: Uk Posts: 1,805	Not mine but an old bookmark http://www.smashingmagazine.com/2007...-live-without/ __________________ Segpay Suck Ass Worse Billing Company Allurecash Scammers and don't pay

09-03-2007, 04:47 AM	#61
potter Confirmed User Industry Role: Join Date: Dec 2004 Location: Denver Posts: 6,559	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. __________________

09-03-2007, 01:56 AM	#52
MicDoohan Confirmed User Join Date: Apr 2003 Location: California Posts: 791	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 ?

09-03-2007, 03:10 AM	#55
quantum-x Confirmed User Join Date: Feb 2002 Location: ICQ: 251425 Fr/Au/Ca Posts: 6,863	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.

09-03-2007, 05:30 AM	#63
Fletch XXX GFY HALL OF FAME DAMMIT!!! Join Date: Jan 2002 Location: that 504 Posts: 60,840	K.I.S.S. is my only rule. __________________ Want an Android App for your tube, membership, or free site? Need banners or promo material? Hit us up (ICQ Fletch: 148841377) or email me fletchxxx at gmail.com - recent work - About me

09-03-2007, 09:26 AM	#67
BOSS1 Confirmed User Join Date: Sep 2005 Location: Montreal / Sparta Posts: 4,331	bookmarking __________________ NEW SITE: Stockings Kingdom Lesbians in Latex, Lesbians in Stockings, Granny Sex, BDSM Porn, Latex and Sex, Custom Foot Fetish, Femdom Movies and Kinky Porn Pass. 300+ hosted flvs, 500+ hosted galleries, Page Peel ADs.. NATS export and payouts twice a month

09-03-2007, 09:48 AM	#69
martinsc Too lazy to set a custom title Industry Role: Join Date: Jun 2005 Location: 127.0.0.1 Posts: 27,047	awesome thread great tips, StuartD bookmarked __________________ Make Money

09-04-2007, 08:17 AM	#76
potter Confirmed User Industry Role: Join Date: Dec 2004 Location: Denver Posts: 6,559	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. __________________

09-04-2007, 08:37 AM	#77
potter Confirmed User Industry Role: Join Date: Dec 2004 Location: Denver Posts: 6,559	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...r%2 Fcss.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. __________________

09-04-2007, 09:31 AM	#80
potter Confirmed User Industry Role: Join Date: Dec 2004 Location: Denver Posts: 6,559	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. __________________

09-04-2007, 09:43 AM	#81
Mutt Too lazy to set a custom title Industry Role: Join Date: Sep 2002 Posts: 34,431	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 __________________ I moved my sites to Vacares Hosting. I've saved money, my hair is thicker, lost some weight too! Thanks Sly!

09-04-2007, 11:29 AM	#82
SCtyger Confirmed User Join Date: May 2003 Posts: 564	excellent thread. bump. __________________ http://www.silvercash.com/

09-04-2007, 03:02 PM	#83
Tempest Too lazy to set a custom title Industry Role: Join Date: May 2004 Location: West Coast, Canada. Posts: 10,217	Question... when using on page javascript and styles, you'd comment it out so that it wouldn't fuck up on some browsers.... eg: Code: <style type="text/css"><!-- --></style> <script language="JavaScript" type="text/javascript"><!-- // --></script> How are you supposed to do that on the newer XML/XHTML doc types? Like this??? Code: <style type="text/css"><![CDATA[ ]]></style> <script language="JavaScript" type="text/javascript">// <![CDATA[ // ]]></script> or???

09-04-2007, 03:05 PM	#84
StuartD Sofa King Band Join Date: Jul 2002 Location: Outside the box Posts: 29,903	Yes, <![CDATA[ tells the browser to NOT parse anything within those tags as XML... so it will try to ignore &'s and %'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. __________________ This is me on facebook This is me on twitter

09-05-2007, 06:33 AM	#93
Angie77 Confirmed User Join Date: Aug 2007 Location: Netherlands Posts: 1,356	this is the first time i've seen a legitimately helpful thread such as this. __________________ Best Conversions, Highest Payouts in the industry, Dedicated affiliate support: What more could you ask for? Sign up Today!

09-05-2007, 06:39 AM	#94
fris Too lazy to set a custom title Industry Role: Join Date: Aug 2002 Posts: 55,248	Something I came across last night which is kinda cool text-transform:lowercase; text-transform:uppercase; __________________ Since 1999: 69 Adult Industry awards for Best Hosting Company and professional excellence. WP Stuff

07-27-2008, 12:13 AM	#96
Elli Reach for those stars! Industry Role: Join Date: Apr 2003 Location: Vancouver, BC Posts: 17,991	Bump for a great thread! __________________ Make More Money with Cams and Dating at FFN.com! email: [email protected]

07-27-2008, 12:17 AM	#97
jact Confirmed User Join Date: Sep 2002 Location: Oakville, Canada Posts: 9,134	Fourth time in history I'm bookmarking a GFY thread. Amazing. Good thread Stu. Would have been better if I checked the date first too. LOL __________________ Free agent

07-27-2008, 07:38 AM	#100
smack Push Porn Like Weight. Industry Role: Join Date: Mar 2002 Location: Inside .NET Posts: 10,652	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. __________________ Cry havoc and let slip the dogs of war.