OK, here's a little CSS trick - GoFuckYourself.com

harvey · 11-30-2009, 03:47 PM

so I really got tired of fixing some CSS sheets with HORRORS (they're not even errors), therefore here's a tip for you guys to save bandwidth, make spacing coherent and clear floats all at once while saving time.

First, for those that still don't know (the vast majority for what I see), you should do something at the top of every stylesheet: reset everything. I won't go further on that since there are gazillions of tutorials on it.

So while you're resetting everything, add this:

Code:

hr{clear:both; visibility:hidden; margin:10px 0;}

/* modify the margin to whatever you want */

Now, every time you need some spacing or clear floats, instead of redefining or adding elements, simply add the <hr/> tag and that's it

of course, in the event that you need a real <hr> simply define it like <hr class="whatever" />, but chances are 99 times out of 100 you won't need the hr tag. Hell, if I remember right the last time I used the hr tag was in 1998!

Anyway, hope you like it

JD · 11-30-2009, 03:56 PM

nifty trick

and yeah i agree on the 1998 thing about HR's

I do the same thing with a clear class like

Code:

.clear {clear:both;}

and use it on page with

Code:

<div class="clear" style="height:xxpx;"></div>

different strokes for different folks :D

CS-Jay · 11-30-2009, 04:01 PM

I use the JD method, but I like the hr idea too.

AIbenjamink · 11-30-2009, 04:19 PM

Quote:

Originally Posted by JD

Code:

.clear {clear:both;}

Code:

<div class="clear" style="height:xxpx;"></div>

HighEnergy · 11-30-2009, 04:24 PM

Quote:

Originally Posted by JD

nifty trick

and yeah i agree on the 1998 thing about HR's

I do the same thing with a clear class like

Code:

.clear {clear:both;}

and use it on page with

Code:

<div class="clear" style="height:xxpx;"></div>

different strokes for different folks :D

All's well that ends well .... but ....
1) for predictable cross-browser results call every variable at the beginning of the style sheet.

ie:
font-family
font-size
font-style
line-height
margin
padding
p margin
p padding
div margin
div padding
i margin
i padding
em margin
em padding
etc
etc
etc
Just obey cascading for the best results.

I keep all base (global) styling in a 'base' file to be read 1st.
Then unique page/site styling in a unique CSS file to be read 2nd.

...

RyuLion · 11-30-2009, 04:32 PM

guess what this does?

#index_table IMG:hover {
BORDER-RIGHT: #f09 2px ridge;
border-top: #f09 2px ridge;
border-bottom: #f09 2px ridge;
border-left: #f09 2px ridge;
FLOAT: left; MARGIN: 0px 5px 0px 0px;

HighEnergy · 11-30-2009, 04:39 PM

Quote:

Originally Posted by RyuLion

guess what this does?

#index_table IMG:hover {
BORDER-RIGHT: #f09 2px ridge;
border-top: #f09 2px ridge;
border-bottom: #f09 2px ridge;
border-left: #f09 2px ridge;
FLOAT: left; MARGIN: 0px 5px 0px 0px;

It doesn't do jack shit unless you have an element named index_table

StuartD · 11-30-2009, 05:11 PM

http://www.gfy.com/fucking-around-and-business-discussion/750159-css-please-share-post12733093.html

Deej · 11-30-2009, 05:28 PM

Quote:

Originally Posted by StuartD

http://www.gfy.com/fucking-around-and-business-discussion/750159-css-please-share-post12733093.html

Yea what the fuck you posers!

StuartD invented CSS

Basic_man · 11-30-2009, 06:31 PM

I like the simplicity of your HR trick! I should start using it

dallasnovelty · 11-30-2009, 06:47 PM

Thanks for sharing your tips. I am just learning how to do all the css stuff.

harvey · 11-30-2009, 09:02 PM

Quote:

Originally Posted by JD

nifty trick

and yeah i agree on the 1998 thing about HR's

I do the same thing with a clear class like

Code:

.clear {clear:both;}

and use it on page with

Code:

<div class="clear" style="height:xxpx;"></div>

different strokes for different folks :D

yeah, but my solution is for lazy mofos like me who just want to type 5 chars

Quote:

Originally Posted by RyuLion

guess what this does?

#index_table IMG:hover {
BORDER-RIGHT: #f09 2px ridge;
border-top: #f09 2px ridge;
border-bottom: #f09 2px ridge;
border-left: #f09 2px ridge;
FLOAT: left; MARGIN: 0px 5px 0px 0px;

any time a girl sees that code she feels an irresistible urge to get her ass bitten

Quote:

Originally Posted by StuartD

http://www.gfy.com/fucking-around-and-business-discussion/750159-css-please-share-post12733093.html

nice thread indeed

Quote:

Originally Posted by Deej

Yea what the fuck you posers!

StuartD invented CSS

yeah, but my thing is CZZ, which is only for l33t people

Deej · 11-30-2009, 09:09 PM

Quote:

Originally Posted by harvey

yeah, but my thing is CZZ, which is only for l33t people

O i sees - Well you mis titled then

Keep up the good shit

11-30-2009, 09:24 PM

Code:

.clearFix:after {
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
}
.clearFix {
	display: inline-block;
}
/* start commented backslash hack \*/
* html .clearFix {
	height: 1%;
}
.clearFix {
	display: block;
}
/* close commented backslash hack */
*, html {
	margin: 0;
}

Deej · 11-30-2009, 09:27 PM

Code:

* {margin:0;padding:0;}

tops all...

calmlikeabomb · 11-30-2009, 09:28 PM

Here is another tip - minify your style sheets to save bandwidth:

http://code.google.com/p/minify/

JD · 11-30-2009, 09:43 PM

Quote:

Originally Posted by Deej

Code:

* {margin:0;padding:0;}

tops all...

lol

11-30-2009, 03:47 PM	#1
harvey Confirmed User Industry Role: Join Date: Jul 2001 Location: 127.0.0.1 Posts: 9,266	OK, here's a little CSS trick so I really got tired of fixing some CSS sheets with HORRORS (they're not even errors), therefore here's a tip for you guys to save bandwidth, make spacing coherent and clear floats all at once while saving time. First, for those that still don't know (the vast majority for what I see), you should do something at the top of every stylesheet: reset everything. I won't go further on that since there are gazillions of tutorials on it. So while you're resetting everything, add this: Code: hr{clear:both; visibility:hidden; margin:10px 0;} /* modify the margin to whatever you want */ Now, every time you need some spacing or clear floats, instead of redefining or adding elements, simply add the <hr/> tag and that's it of course, in the event that you need a real <hr> simply define it like <hr class="whatever" />, but chances are 99 times out of 100 you won't need the hr tag. Hell, if I remember right the last time I used the hr tag was in 1998! Anyway, hope you like it __________________ This post is endorsed by CIA, KGB, MI6, the Mafia, Illuminati, Kim Jong Il, Worldwide Ninjas Association, Klingon Empire and lolcats. Don't mess around with it, just accept it and embrace the truth

11-30-2009, 03:56 PM	#2
JD Too lazy to set a custom title Industry Role: Join Date: Sep 2003 Posts: 22,651	nifty trick and yeah i agree on the 1998 thing about HR's I do the same thing with a clear class like Code: .clear {clear:both;} and use it on page with Code: <div class="clear" style="height:xxpx;"></div> different strokes for different folks :D

11-30-2009, 04:01 PM	#3
CS-Jay Confirmed User Join Date: Oct 2003 Location: Command Central, West Palm Beach, Fl Posts: 1,794	I use the JD method, but I like the hr idea too. __________________ I do stuff - aIm CS_Jay_D

11-30-2009, 04:32 PM	#6
RyuLion ClubDomCash.com Industry Role: Join Date: Mar 2003 Location: San Diego Posts: 32,174	guess what this does? #index_table IMG:hover { BORDER-RIGHT: #f09 2px ridge; border-top: #f09 2px ridge; border-bottom: #f09 2px ridge; border-left: #f09 2px ridge; FLOAT: left; MARGIN: 0px 5px 0px 0px; __________________ Adult Biz Consultant A tech head since 1995

11-30-2009, 05:11 PM	#8
StuartD Sofa King Band Join Date: Jul 2002 Location: Outside the box Posts: 29,903	http://www.gfy.com/fucking-around-and-business-discussion/750159-css-please-share-post12733093.html __________________ This is me on facebook This is me on twitter

11-30-2009, 06:31 PM	#10
Basic_man Programming King Pin Industry Role: Join Date: Oct 2003 Location: Montreal Posts: 27,360	I like the simplicity of your HR trick! I should start using it __________________ UUGallery Builder - automated photo/video gallery plugin for Wordpress! Stop looking! Checkout Naked Hosting, online since 1999 !

11-30-2009, 06:47 PM	#11
dallasnovelty Confirmed User Industry Role: Join Date: Aug 2009 Location: Dallas, TX Posts: 1,056	Thanks for sharing your tips. I am just learning how to do all the css stuff. __________________ \| Dallas Novelty Blog \| Facebook

11-30-2009, 09:27 PM	#15
Deej I make pixels work Industry Role: Join Date: Jun 2005 Location: I live here... Posts: 24,386	Code: * {margin:0;padding:0;} tops all... __________________ Deej's Designs n' What Not Hit me up for Design, CSS & Photo Retouching Icq#30096880

11-30-2009, 09:28 PM	#16
calmlikeabomb Confirmed User Join Date: May 2004 Location: SW Palm Bay, Florida Posts: 1,323	Here is another tip - minify your style sheets to save bandwidth: http://code.google.com/p/minify/ __________________ subarus.