17 CSS/HTML Effects with Cross-Browsing Alternatives

Posted in Coding, HTML & CSS3 years ago • Written by 51 Comments

Well, we surely have a lot of different ways to achieve similar effects and with CSS the hardest part is to make it look good in almost every browser.

You don’t need to reinvent the wheel every time, if you get one good snippet that does what you want (and you understand what is happening) you don’t need to reinvent it every time you need a simple round corner, right?

Thus, our point here is to collect some cool CSS effects that you should be using:

• Min / Max width (IE included)
• RGBA (IE included)
• Opacity (IE included)
• Image rotation / scaling (IE included)
• FullScreen Background (IE included)
• Background pattern or bullet without image file
• Text Shadow (IE included)
• Multiple borders (IE included)
• Box Shadows (IE included)
• Rounded corners
• Screen reader only accessible content
• Don’t use negative text-indent
• Clearfix (IE included)
• @font-face (IE included)
• Pull quotes without image
• CSS for iPhone4 (higher resolution)
• CSS landscape / portrait orientation for mobiles

So, Let’s rock!

Min / Max width (IE included)

Well, many of you are used to just replace the lack of min / max width / height for IE with fixed dimensions, right? But you don’t need to do it anymore. IE is not a strict standards browser and sometimes we can take advantage of this to code things that would be awful to see in standard CSS code.

You can, in this case, insert some IE expressions (basically, JavaScript code) to check current body width and adjust element’s width as follows:

#content {
	width: expression(document.body.clientWidth < 762? "760px" : document.body.clientWidth > 1242? "1240px" : "auto");
	min-width: 760px;
	max-width: 1240px;
}

RGBA (IE included)

This time we will need some IE filters to get the job done. You’ll have the standard markup, IE6 correction and IE8 correction.

IE corrections is based on gradient filter, that actually we put just one color to the beginning and the end, and BAM! We have a pretty RGBA background.

The first two digits should be the opacity and the last one should be the color itself. Don’t know why, it just don’t get the opacity right… Maybe its just a bug inside a bug :)

.element {
  background-color: transparent;
  background-color: rgba(255, 255, 255,0.8);
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#80ffffff,endColorstr=#80ffffff);
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#80ffffff,endColorstr=#80ffffff)";
}

Opacity (IE included)

Wow, filters again! But this time we have a different syntax for IE8 and earlier versions. And again be sure to put khtml, moz and standard declarations.

.selector {
	ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; /* internet explorer 8 */
	filter: alpha(opacity=50); /* internet explorer 5~7 */
	-khtml-opacity: 0.5;      /* khtml, old safari */
	-moz-opacity: 0.5;       /* mozilla, netscape */
	opacity: 0.5;           /* fx, safari, opera */
}

Image rotation / scaling (IE included)

Another pretty cool and virtually unused feature is image rotation / scaling. There is another filter that allows you to rotate images, but unfortunately it just allows you 90º increments.

Although you can also mirror images, that makes cool image editing possible to almost every real browser and IE. For real browsers we will use the transform property with each vendor prefix.

	img {
		transform:
			rotate(180deg)
			scale(-1, 1);

		/* for firefox, safari, chrome, etc. */
		-webkit-transform:
			rotate(180deg)
			scale(-1, 1);
		-moz-transform:
			rotate(180deg)
			scale(-1, 1);

		/* for ie */
		filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1);

		/* opera */
		-o-transform:
			rotate(180deg)
			scale(-1, 1);
	}

Fullscreen Background (IE included)

Sometimes we just need a quick way to get full screen backgrounds. Well, hope you don’t use JavaScript just to do this, because you can do it with a few lines of CSS.

The magic here is to set a div that goes fullscreen and inside it you can put a landscape, portrait or full sized image.

	.content {
		position: relative;
		width: 760px;
		z-index: 10;
	 }
	 .background {
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		position: absolute;
		z-index:2;
	 }
		.portrait {
			height: 100%;
		}
		.landscape {
			width: 100%;
		}
		.full {
			width: 100%;
			height: 100%;
		}
<div class="content">
	<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
</div>
<div class="background">
	<img class="full | portrait | landscape" src="imgURL" alt="" />
</div>

Background pattern or bullet without image file

Pretty sad that IE doesn’t allows you to use base64 encoding instead of real files. The best part is to use it for mobiles, since it saves you some http requests and precious time.
I’ve used it for a custom list style image without images. I just generated the base64 from Patternfy and pasted it in my CSS, like this:

	 ul {
		list-style-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAJCAYAAAAVb42gAAAAFklEQVQImWNgIAro56z9T4Ygbg5BAABTdwtkrDt7swAAAABJRU5ErkJggg==);
	 }

Text Shadow (IE included)

Again we will need some IE filters. But this time IE filters can destroy your font’s readability, so try not to use it too much and preferably, only when working with larger fonts.

	p {
		text-shadow: #000000 0 0 1px;
		zoom:1;
		filter: progid:DXImageTransform.Microsoft.Glow(Color=#000000,Strength=1);

		-ms-filter: "progid:DXImageTransform.Microsoft.dropshadow(OffX=-1, OffY=-1, Color=#000000)progid:DXImageTransform.Microsoft.dropshadow(OffX=0, OffY=-1, Color=#000000)progid:DXImageTransform.Microsoft.dropshadow(OffX=1, OffY=-1, Color=#000000)progid:DXImageTransform.Microsoft.dropshadow(OffX=1, OffY=0, Color=#000000)progid:DXImageTransform.Microsoft.dropshadow(OffX=1, OffY=1, Color=#000000)progid:DXImageTransform.Microsoft.dropshadow(OffX=0, OffY=1, Color=#000000)progid:DXImageTransform.Microsoft.dropshadow(OffX=-1, OffY=1, Color=#000000)progid:DXImageTransform.Microsoft.dropshadow(OffX=-1, OffY=0, Color=#000000)";
	}

Multiple borders (IE included)

When you want more than one border, for real browsers you’ll need to use an outline or :before and :after elements. For IE you could use filters to gain some an extra border.

	div {
		-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(color=#212121,direction=180,strength=0)"; /* IE 8 */
		filter: progid:DXImageTransform.Microsoft.Shadow(color=#212121,direction=180,strength=0); /* IE 7- */
	}
	div:before {
		position: absolute;
		top: 0px;
		width: 100%;
		height: 100%;
		border-top: 1px solid #212121; /* top border! */
		content: '';
	}
	div:after {
		position: absolute;
		width: 100%;
		height: 100%;
		top: 1px;
		border-bottom: 1px solid #212121; /* bottom border! */
		content: '';
	}

Box Shadows (IE included)

The same filter we’ve used to create a second border can be used to generate box shadows. Be aware that this filter can mess up an element’s width, so if you want to use it with any grid system, prepare for the headache.

	.shadow {
	    -moz-box-shadow: 0 0 4px #000;
		-webkit-box-shadow: 0 0 4px #000;
		-ms-filter: "progid:DXImageTransform.Microsoft.Glow(color=#666666,strength=3)";
		filter:
				progid:DXImageTransform.Microsoft.Shadow(color=#666666,direction=0,strength=3)
				progid:DXImageTransform.Microsoft.Shadow(color=#666666,direction=90,strength=3)
				progid:DXImageTransform.Microsoft.Shadow(color=#666666,direction=180,strength=3)
				progid:DXImageTransform.Microsoft.Shadow(color=#666666,direction=270,strength=3);
		box-shadow: 0 0 4px #000;
	}

Rounded corners

The bad part about almost-standard properties is that each browser implements its syntax differently. So for round corners we have a pretty strange behavior, where standards browsers have different ways to say same thing:

.rounded  {
	-moz-border-radius: 10px; /* gecko */
	-webkit-border-radius: 10px; /* webkit */
	border-radius: 10px; /* CSS3 standard */
	-khtml-border-radius: 10px; /* old konkeror */

	-webkit-border-bottom-right-radius: 10px;
	-webkit-border-bottom-left-radius: 10px;
	-webkit-border-top-right-radius: 10px;
	-webkit-border-top-left-radius: 10px;

	-khtml-border-radius-bottomright: 10px;
	-khtml-border-radius-bottomleft: 10px;
	-khtml-border-radius-topright: 10px;
	-khtml-border-radius-topleft: 10px;

	-moz-border-radius-bottomright: 10px;
	-moz-border-radius-bottomleft: 10px;
	-moz-border-radius-topright: 10px;
	-moz-border-radius-topleft: 10px;

	border-bottom-right-radius: 10px;
	border-bottom-left-radius: 10px;
	border-top-right-radius: 10px;
	border-top-left-radius: 10px;
 }

Screen reader only accessible content

Sometimes you want to improve the accessibility of your site, so you put some fancy links like “Jump to content” or “Jump to navigation”. So you just put “display: none” or “visibility: hidden” and hope it works, right? Well, it doesn’t. Some tests show that many screen readers just ignore the display:none or visibility: hidden part, so you don’t have any accessibility improvement.

What you can do instead is to use position absolute and hide this content above browsers visible area. But you have some risks on this technique, since it hides content, Google can consider it gray or black hat.

.hidden  {
	position: absolute;
	top: -10000px;
	left: -10000px;
 }

Don’t use negative text-indent

Since we’re talking about hidden content, take one more note, never use negative text-indent again. This is a known technique so you have a lot of SEO downsides by using it, since many bots can recognize it nowadays.
Just use alt attribute, that is much safer than hide content.

<h1><img src="myLogo" alt="My company" /></h1>

Clearfix (IE included)

Many of you know about .clearfix method for correcting heights when you use floats. Well, in many of these cases, that amount of code could be replaced by just two lines:

	.clearfix {
		zoom:1;
		overflow:hidden;
	}

@font-face (IE included)

If you’re still using cufon just because you don’t trust @font-face, think again.
Font Squirrel provides an amazing @font-face generator service, that allows you to put really good looking fonts in your site without worrying about all that JavaScript stuff.
The final code provided is something like this:

@font-face {
    font-family: 'MandatoryRegular';
    src: url('font/mandator-webfont.eot');
    src: url('font/mandator-webfont.eot?#iefix') format('embedded-opentype'),
         url('font/mandator-webfont.woff') format('woff'),
         url('font/mandator-webfont.ttf') format('truetype'),
         url('font/mandator-webfont.svg#MandatoryRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

Pull quotes without image

We talked about this before, but it is possible to create curly quotes without any image. And it is not that hard. You just need a :before and blockquote:

	blockquote:before {
		display: block;
		float: left;
		margin: 10px 15px 0 0;
		font-size: 100px; /* let's make it a big quote! */
		content: open-quote; /* here we define our :before as a smart quote. It could be any content, even the HTML entity alternative to this opening quote, that is “ */
		color: #bababa;
		text-shadow: 0 1px 1px #909090;
	}

CSS for iPhone4 (higher resolution)

As time goes by we get more and more powerful mobile devices. It is a good practice to give create a mobile version, with reduced images and overall files size, but we have also to give a better experience for the ones with newer devices.
Since iPhone4 has a higher resolution, if you don’t provide a better (and larger) version of you logo, for example, your users will get a blurry version of it. This is a problem that can be solved with a very few lines:

@media handheld, only screen and (max-width: 767px) {
	.logo {
		/* common low-res and low-size, of course */
		background: url(logo.jpg) no-repeat;
	}
}

@media only screen and (-webkit-min-device-pixel-ratio: 2) {
	.logo {
		background: url(logo2x.jpg) no-repeat;
		background-size: 212px 303px;
	}
}

CSS landscape / portrait orientation for mobiles

This is a nice starting point for correcting layout bugs in each version of each layout mode for many mobiles, provided by stuffAndNoise

	/* Smartphones (portrait and landscape) ----------- */
	@media only screen
	and (min-device-width : 320px)
	and (max-device-width : 480px) {
		/* Styles */
	}

	/* Smartphones (landscape) ----------- */
	@media only screen
	and (min-width : 321px) {
		/* Styles */
	}

	/* Smartphones (portrait) ----------- */
	@media only screen
	and (max-width : 320px) {
		/* Styles */
	}

	/* iPads (portrait and landscape) ----------- */
	@media only screen
	and (min-device-width : 768px)
	and (max-device-width : 1024px) {
		/* Styles */
	}

	/* iPads (landscape) ----------- */
	@media only screen
	and (min-device-width : 768px)
	and (max-device-width : 1024px)
	and (orientation : landscape) {
		/* Styles */
	}

	/* iPads (portrait) ----------- */
	@media only screen
	and (min-device-width : 768px)
	and (max-device-width : 1024px)
	and (orientation : portrait) {
		/* Styles */
	}

	/* Desktops and laptops ----------- */
	@media only screen
	and (min-width : 1224px) {
		/* Styles */
	}

	/* Large screens ----------- */
	@media only screen
	and (min-width : 1824px) {
		/* Styles */
	}

	/* iPhone 4 ----------- */
	@media
	only screen and (-webkit-min-device-pixel-ratio : 1.5),
	only screen and (min-device-pixel-ratio : 1.5) {
		/* Styles */
	}

43 Written ArticlesWebsiteGoogle+

I'm a web designer and entrepreneur from Itajubá (MG), Brasil. I love writing about obscure topics and doing some cool stuff. And also I do some FREE stuff, check it out: http://www.roch.com.br/

51 Comments Best Comments First
  • Dinesh Kumar Shaw

    Friday, July 29th, 2011 09:50

    19

    Awesome collection dude.I liked specially for IE families fixes.Thanks for sharing the gr8 posts.

    0
    • Rochester Oliveira

      Monday, August 1st, 2011 14:23

      22

      Hey Dinesh,

      IE fixes are always handy, you know :)

      Thank you!
      []‘s

      0
  • Daniel

    Tuesday, July 26th, 2011 15:24

    16

    Great list of tips thanks

    I’ve already used a few of these, the CSS box shadow for IE is a good one (It’s surprising the number of people who’ve never heard of this!)

    A few others are new to me, so I’ll be adding them to my CSS arsenal!

    0
    • Rochester Oliveira

      Tuesday, July 26th, 2011 21:03

      15

      Hi Daniel!

      Oh, those box shadows are oldies, isn’t it?

      And from all these snippets, which one do you like most?

      Thank you!
      []‘s

      0
  • shaik

    Saturday, August 6th, 2011 12:59

    24

    thanks a lot dude , awesome collection

    0
    • Rochester Oliveira

      Sunday, August 7th, 2011 04:36

      25

      Hey shaik,

      I’m glad you liked it, and hope it helps!

      []‘s

      0
  • Rochester Oliveira

    Monday, August 1st, 2011 14:26

    23

    Agreed!

    But unfortunately we will still have IE6/7 (worst one) for a couple of years.. It’s sad to know that even IE8/9 still not as good as we wanted :(

    []‘s

    0
  • Naylon

    Monday, July 25th, 2011 18:33

    14

    Great article! Will definitely use some of them. Thanks a lot.

    0
  • rcrg

    Saturday, July 23rd, 2011 15:29

    1

    great list of css hacks! this is very useful in cross browser testing. thanks for sharing!

    0
    • Rochester Oliveira

      Sunday, July 24th, 2011 04:38

      6

      Hey guy, thank you! Hope it helps you in your work as it helps me! :)

      []‘s

      +1
  • Rali Sravya

    Saturday, July 23rd, 2011 18:49

    3

    Most useful this article for every designer and developer, thanks for posing. If you interest i will post this article to my blog.

    0
    • Rochester Oliveira

      Sunday, July 24th, 2011 04:44

      5

      Hey Rali, how are you?
      It would be good if you put a link pointing to us! :)
      [BTW, I tryed to follow you link but it seems to be broken..]

      []‘s

      0
  • Tanya

    Saturday, July 23rd, 2011 18:00

    2

    Thanks a lot, no words how useful it is.

    0
    • Rochester Oliveira

      Sunday, July 24th, 2011 04:39

      4

      Hey Tanya,
      That’s what I’m talking about! I use this things all the time :)

      I’m glad you liked it!
      []‘s

      0
  • Lucas Rolff

    Sunday, July 24th, 2011 18:21

    7

    I don’t know where people get it from, but using text-indent isn’t black or gray hat, or “bad” seo, using Cufon text should be bad too then..

    The reason is, that cufon using cufontext width 0 pixel, height 0 pixel – Would it be okay then to make

    h1 { background: url('some_background.jpg'); display:block; width 200px; height 300px; }
    span { width: 0px !important; height: 0px !important }

    Heading

    I’m just wondering, because then you can’t hide an element, or some part of text (Dropdown menu etc.)

    0
    • Rochester Oliveira

      Monday, July 25th, 2011 14:38

      9

      Hi Lucas,
      As far as I know it is black hat (even Google team talks about it) since you hide content. Cufon wouldn’t be black hat just because it relies on javascript, so without it you see the plain text.
      Actually I think it is the best way of doing it, use javascript just to hide content when you want to (dropdowns should hide via js also, isn’t it?).
      []‘s

      0
  • Jay Karsandas

    Sunday, July 24th, 2011 21:49

    8

    Great list. An all in one place :) This is one for the bookmarks… Thank you for putting it all together especially with the IE fixes!!

    0
    • Rochester Oliveira

      Monday, July 25th, 2011 14:40

      10

      Hi Jay Karsandas, I’m glad you liked it! Hope it helps you in tough times!

      []‘s

      0
  • Gavin

    Monday, July 25th, 2011 11:13

    12

    Really good list, I will be using some of these. Quite a few wouldn’t validate though would they? I suppose it’s a compromise, do we want validating websites, or sites that support i.e6.

    I choose the former to be honest.

    0
    • Rochester Oliveira

      Monday, July 25th, 2011 14:43

      11

      Hi Galvin!

      I think almost all ie fixes (filters and expressions) wouldn’t validate, but it is just keep them in a separate stylesheet and you’re done!

      But all standard declarations validates, of course…

      []‘s

      0
  • Bjorn van der Neut

    Tuesday, August 9th, 2011 13:01

    27

    Nice! Would be nice if you could make an example for all 17 css html effects. Than its even more clear what it does.

    Good luck!
    Bjorn

    0
    • Rochester Oliveira

      Tuesday, August 9th, 2011 17:33

      26

      Hi Bjorn, That’s a nice tip!

      I’ll do that next time.

      Thank you!
      []‘s

      0
  • Rochester Oliveira

    Monday, January 2nd, 2012 19:22

    44

    Hey Harry Jaan,

    Yeah, I’m glad you liked! :)

    []‘s

    0
  • Rochester Oliveira

    Tuesday, October 25th, 2011 13:28

    42

    Hi trần công nghiệp

    Thanks! :)

    []‘s

    0
  • Francis

    Tuesday, October 4th, 2011 19:32

    41

    I did not know you could use JavaScript inside of CSS, I actually use CSS to avoid JavaScript.

    0
    • Rochester Oliveira

      Tuesday, October 4th, 2011 22:10

      40

      ??

      What are you talking about?

      []‘s

      0
  • Rochester Oliveira

    Monday, January 23rd, 2012 03:05

    45

    Thanks! :)

    0
  • Robert

    Sunday, February 19th, 2012 20:06

    46

    Hi Rochester,
    What I really like about this article is the IE fixes. IE is known to be notoriously buggy and very rigid when it comes to supporting latest technologies such as HTML5 & CSS3. Only the latest versions such as IE8 & 9 may support these. But there are other versions such as IE7 ( I am not sure if someone is still using IE6 ), which is still being used and its a real pain trying to provide support to such obsolete browsers. A fix/hack such as the ones mentioned in this article, certainly helps other designers & developers in keeping things similar in IE as well.

    So I really wanted to take this moment to thank you especially for the IE fixes that you have provided. So if you can include IE hacks and tips in your future articles as well, that would be really helpful to others and will be much appreciated. Thank you.

    0
    • Rochester Oliveira

      Thursday, February 23rd, 2012 03:59

      47

      Hi Robert,

      IE6 is not a concern actually. But IE still have a good share, so you’ll need to keep an eye on it yet.

      But now my best bet is just go doing cool stuff (like round corners and so on) and when there is alternatives for IE I use them, where there isn’t, well, I just let it be :)

      []‘s

      0
  • Dave

    Monday, April 2nd, 2012 14:02

    50

    Awfully hard to take this site seriously when it’s serious broken in safari 5.1.5

    0
    • Rean John Uehara

      Tuesday, April 3rd, 2012 07:11

      51

      That’s odd, I’m using Safari 5.1.5 and the site’s looking awesome on my end. :)

      0
  • Rochester Oliveira

    Thursday, February 23rd, 2012 04:03

    49

    Wow, thanks :)

    []‘s

    0
  • Rochester Oliveira

    Thursday, February 23rd, 2012 04:01

    48

    Hey Pynk, thanks a lot :)

    I always like it when we have good links pointing to us, keep them coming! :)

    []‘s

    0
  • Mark

    Thursday, August 11th, 2011 23:02

    30

    Hi Rochester

    For the IE RGBA filter you can use this to calculate IE Aplha Hex:

    Math.floor(0.6 * 255).toString(16);

    You can type it in firebug console and it will return the hex needed

    0
    • Rochester Oliveira

      Friday, August 12th, 2011 14:48

      31

      Hey Mark,

      Sorry, but I don’t get it. Why did you put “0.6* [rgb]” ?

      If you are saying to just use a solid “converted” color, that’s good, but won’t work if you have any image or if your element is in top of others also, I guess..

      []‘s

      0
      • Mark

        Monday, August 15th, 2011 12:59

        33

        Hi Rochester

        I have used this for a site I developed.

        To get the opacity hex used in the IE filter ( the 2 first chars after the # ) you can use the form:
        Math.floor(your opacity * 255).toString(16); For example for 0.6 the form will return 99 which is the hex for IE opacity

        filter:progid:DXImageTransform.Microsoft.Gradient(StartColorStr=’#99000000′, EndColorStr=’#99000000′);

        0
        • Rochester Oliveira

          Tuesday, August 16th, 2011 15:12

          34

          Oh, now I see..

          That’s a nice tip, thank you very much!

          []‘s

          0
  • Renato Alves

    Wednesday, August 10th, 2011 17:14

    29

    I’m not used to using media queries but when I was testing on my blog redesign it didn’t work. So somebody knows why?
    At first it was because my design is elastic, it used %(percentage) is there something to do with media queries?

    0
  • sahity

    Saturday, August 13th, 2011 20:52

    32

    Hi Guys !

    I need fixed width select box , css. I tried to fix the width in css. But it is not working in IE. Please help me.

    This is the code i written in my css file.

    Select{
    width:200px;
    }

    0
    • Rochester Oliveira

      Wednesday, August 17th, 2011 15:09

      36

      Try
      select {
      width: 200px; /* maybe with display: block */
      }

      []‘s

      0
  • sekar

    Wednesday, August 17th, 2011 11:24

    35

    Dont use overflow:hidden for clearfix. It never works for positioned elements..

    0
    • Rochester Oliveira

      Wednesday, August 17th, 2011 15:11

      37

      Hi sekar,
      Don’t know how do you do it, but for me it always works.

      Could you give me some context?

      []‘s

      0
      • sekar

        Tuesday, August 30th, 2011 06:49

        38

        Hi Rochester Oliveira,
        In Same cases overflow: hidden works. But not usable for all situations.
        See this link http://fordinteractive.com/2009/12/goodbye-overflow-clearing-hack/

        0
        • Rochester Oliveira

          Tuesday, August 30th, 2011 18:26

          39

          Yeah, sometimes you can’t put overflow:hidden but it really works for positioned elements. It won’t works only if your child element goes outside parent.

          But if your parent is smaller than child it doesn’t has same “logic” as we are using here (simple clearfix for floats), so you will need a different approach.

          Thanks for pointing it out!
          []‘s

          0
  • Rochester Oliveira

    Friday, October 28th, 2011 12:30

    43

    Hi Dave,

    You just made my day! Thanks :)

    []‘s

    0
  • Dave

    Monday, April 2nd, 2012 14:02

    50

    Awfully hard to take this site seriously when it’s serious broken in safari 5.1.5

    0
    • Rean John Uehara

      Tuesday, April 3rd, 2012 07:11

      51

      That’s odd, I’m using Safari 5.1.5 and the site’s looking awesome on my end. :)

      0
  • Rochester Oliveira

    Thursday, February 23rd, 2012 04:03

    49

    Wow, thanks :)

    []‘s

    0
  • Rochester Oliveira

    Thursday, February 23rd, 2012 04:01

    48

    Hey Pynk, thanks a lot :)

    I always like it when we have good links pointing to us, keep them coming! :)

    []‘s

    0
  • Robert

    Sunday, February 19th, 2012 20:06

    46

    Hi Rochester,
    What I really like about this article is the IE fixes. IE is known to be notoriously buggy and very rigid when it comes to supporting latest technologies such as HTML5 & CSS3. Only the latest versions such as IE8 & 9 may support these. But there are other versions such as IE7 ( I am not sure if someone is still using IE6 ), which is still being used and its a real pain trying to provide support to such obsolete browsers. A fix/hack such as the ones mentioned in this article, certainly helps other designers & developers in keeping things similar in IE as well.

    So I really wanted to take this moment to thank you especially for the IE fixes that you have provided. So if you can include IE hacks and tips in your future articles as well, that would be really helpful to others and will be much appreciated. Thank you.

    0
    • Rochester Oliveira

      Thursday, February 23rd, 2012 03:59

      47

      Hi Robert,

      IE6 is not a concern actually. But IE still have a good share, so you’ll need to keep an eye on it yet.

      But now my best bet is just go doing cool stuff (like round corners and so on) and when there is alternatives for IE I use them, where there isn’t, well, I just let it be :)

      []‘s

      0
  • Rochester Oliveira

    Monday, January 23rd, 2012 03:05

    45

    Thanks! :)

    0
  • Rochester Oliveira

    Monday, January 2nd, 2012 19:22

    44

    Hey Harry Jaan,

    Yeah, I’m glad you liked! :)

    []‘s

    0
  • Rochester Oliveira

    Tuesday, October 25th, 2011 13:28

    42

    Hi trần công nghiệp

    Thanks! :)

    []‘s

    0
  • Francis

    Tuesday, October 4th, 2011 19:32

    41

    I did not know you could use JavaScript inside of CSS, I actually use CSS to avoid JavaScript.

    0
    • Rochester Oliveira

      Tuesday, October 4th, 2011 22:10

      40

      ??

      What are you talking about?

      []‘s

      0
  • sekar

    Wednesday, August 17th, 2011 11:24

    35

    Dont use overflow:hidden for clearfix. It never works for positioned elements..

    0
    • Rochester Oliveira

      Wednesday, August 17th, 2011 15:11

      37

      Hi sekar,
      Don’t know how do you do it, but for me it always works.

      Could you give me some context?

      []‘s

      0
      • sekar

        Tuesday, August 30th, 2011 06:49

        38

        Hi Rochester Oliveira,
        In Same cases overflow: hidden works. But not usable for all situations.
        See this link http://fordinteractive.com/2009/12/goodbye-overflow-clearing-hack/

        0
        • Rochester Oliveira

          Tuesday, August 30th, 2011 18:26

          39

          Yeah, sometimes you can’t put overflow:hidden but it really works for positioned elements. It won’t works only if your child element goes outside parent.

          But if your parent is smaller than child it doesn’t has same “logic” as we are using here (simple clearfix for floats), so you will need a different approach.

          Thanks for pointing it out!
          []‘s

          0
  • sahity

    Saturday, August 13th, 2011 20:52

    32

    Hi Guys !

    I need fixed width select box , css. I tried to fix the width in css. But it is not working in IE. Please help me.

    This is the code i written in my css file.

    Select{
    width:200px;
    }

    0
    • Rochester Oliveira

      Wednesday, August 17th, 2011 15:09

      36

      Try
      select {
      width: 200px; /* maybe with display: block */
      }

      []‘s

      0
  • Mark

    Thursday, August 11th, 2011 23:02

    30

    Hi Rochester

    For the IE RGBA filter you can use this to calculate IE Aplha Hex:

    Math.floor(0.6 * 255).toString(16);

    You can type it in firebug console and it will return the hex needed

    0
    • Rochester Oliveira

      Friday, August 12th, 2011 14:48

      31

      Hey Mark,

      Sorry, but I don’t get it. Why did you put “0.6* [rgb]” ?

      If you are saying to just use a solid “converted” color, that’s good, but won’t work if you have any image or if your element is in top of others also, I guess..

      []‘s

      0
      • Mark

        Monday, August 15th, 2011 12:59

        33

        Hi Rochester

        I have used this for a site I developed.

        To get the opacity hex used in the IE filter ( the 2 first chars after the # ) you can use the form:
        Math.floor(your opacity * 255).toString(16); For example for 0.6 the form will return 99 which is the hex for IE opacity

        filter:progid:DXImageTransform.Microsoft.Gradient(StartColorStr=’#99000000′, EndColorStr=’#99000000′);

        0
        • Rochester Oliveira

          Tuesday, August 16th, 2011 15:12

          34

          Oh, now I see..

          That’s a nice tip, thank you very much!

          []‘s

          0
  • Renato Alves

    Wednesday, August 10th, 2011 17:14

    29

    I’m not used to using media queries but when I was testing on my blog redesign it didn’t work. So somebody knows why?
    At first it was because my design is elastic, it used %(percentage) is there something to do with media queries?

    0
  • Bjorn van der Neut

    Tuesday, August 9th, 2011 13:01

    27

    Nice! Would be nice if you could make an example for all 17 css html effects. Than its even more clear what it does.

    Good luck!
    Bjorn

    0
    • Rochester Oliveira

      Tuesday, August 9th, 2011 17:33

      26

      Hi Bjorn, That’s a nice tip!

      I’ll do that next time.

      Thank you!
      []‘s

      0
  • shaik

    Saturday, August 6th, 2011 12:59

    24

    thanks a lot dude , awesome collection

    0
    • Rochester Oliveira

      Sunday, August 7th, 2011 04:36

      25

      Hey shaik,

      I’m glad you liked it, and hope it helps!

      []‘s

      0
  • Rochester Oliveira

    Monday, August 1st, 2011 14:26

    23

    Agreed!

    But unfortunately we will still have IE6/7 (worst one) for a couple of years.. It’s sad to know that even IE8/9 still not as good as we wanted :(

    []‘s

    0
  • Dinesh Kumar Shaw

    Friday, July 29th, 2011 09:50

    19

    Awesome collection dude.I liked specially for IE families fixes.Thanks for sharing the gr8 posts.

    0
    • Rochester Oliveira

      Monday, August 1st, 2011 14:23

      22

      Hey Dinesh,

      IE fixes are always handy, you know :)

      Thank you!
      []‘s

      0
  • Daniel

    Tuesday, July 26th, 2011 15:24

    16

    Great list of tips thanks

    I’ve already used a few of these, the CSS box shadow for IE is a good one (It’s surprising the number of people who’ve never heard of this!)

    A few others are new to me, so I’ll be adding them to my CSS arsenal!

    0
    • Rochester Oliveira

      Tuesday, July 26th, 2011 21:03

      15

      Hi Daniel!

      Oh, those box shadows are oldies, isn’t it?

      And from all these snippets, which one do you like most?

      Thank you!
      []‘s

      0
  • Naylon

    Monday, July 25th, 2011 18:33

    14

    Great article! Will definitely use some of them. Thanks a lot.

    0
  • Gavin

    Monday, July 25th, 2011 11:13

    12

    Really good list, I will be using some of these. Quite a few wouldn’t validate though would they? I suppose it’s a compromise, do we want validating websites, or sites that support i.e6.

    I choose the former to be honest.

    0
    • Rochester Oliveira

      Monday, July 25th, 2011 14:43

      11

      Hi Galvin!

      I think almost all ie fixes (filters and expressions) wouldn’t validate, but it is just keep them in a separate stylesheet and you’re done!

      But all standard declarations validates, of course…

      []‘s

      0
  • Jay Karsandas

    Sunday, July 24th, 2011 21:49

    8

    Great list. An all in one place :) This is one for the bookmarks… Thank you for putting it all together especially with the IE fixes!!

    0
    • Rochester Oliveira

      Monday, July 25th, 2011 14:40

      10

      Hi Jay Karsandas, I’m glad you liked it! Hope it helps you in tough times!

      []‘s

      0
  • Lucas Rolff

    Sunday, July 24th, 2011 18:21

    7

    I don’t know where people get it from, but using text-indent isn’t black or gray hat, or “bad” seo, using Cufon text should be bad too then..

    The reason is, that cufon using cufontext width 0 pixel, height 0 pixel – Would it be okay then to make

    h1 { background: url('some_background.jpg'); display:block; width 200px; height 300px; }
    span { width: 0px !important; height: 0px !important }

    Heading

    I’m just wondering, because then you can’t hide an element, or some part of text (Dropdown menu etc.)

    0
    • Rochester Oliveira

      Monday, July 25th, 2011 14:38

      9

      Hi Lucas,
      As far as I know it is black hat (even Google team talks about it) since you hide content. Cufon wouldn’t be black hat just because it relies on javascript, so without it you see the plain text.
      Actually I think it is the best way of doing it, use javascript just to hide content when you want to (dropdowns should hide via js also, isn’t it?).
      []‘s

      0
  • Rali Sravya

    Saturday, July 23rd, 2011 18:49

    3

    Most useful this article for every designer and developer, thanks for posing. If you interest i will post this article to my blog.

    0
    • Rochester Oliveira

      Sunday, July 24th, 2011 04:44

      5

      Hey Rali, how are you?
      It would be good if you put a link pointing to us! :)
      [BTW, I tryed to follow you link but it seems to be broken..]

      []‘s

      0
  • Tanya

    Saturday, July 23rd, 2011 18:00

    2

    Thanks a lot, no words how useful it is.

    0
    • Rochester Oliveira

      Sunday, July 24th, 2011 04:39

      4

      Hey Tanya,
      That’s what I’m talking about! I use this things all the time :)

      I’m glad you liked it!
      []‘s

      0
  • rcrg

    Saturday, July 23rd, 2011 15:29

    1

    great list of css hacks! this is very useful in cross browser testing. thanks for sharing!

    0
    • Rochester Oliveira

      Sunday, July 24th, 2011 04:38

      6

      Hey guy, thank you! Hope it helps you in your work as it helps me! :)

      []‘s

      +1
  • Rochester Oliveira

    Friday, October 28th, 2011 12:30

    43

    Hi Dave,

    You just made my day! Thanks :)

    []‘s

    0

Comments are closed.

54.204.59.230 - unknown - unknown - US