Posts tagged ie

Fast and dirty CSS trick for IE

0
698 days
by in CSS

I actually think that we the developers need IE, it is like the bad guy in an action movie, the good guy wouldn't have a life without him, although sometimes you really wish it never existed! Haha just kidding, we all wish it didn't exist... But well, there are some times when we need something to work, we need it fast, and we just don't have time to care for the standards at that moment. For those times, we can use a simple trick like this:

Underscore to comment out lines

This is probably the simplest tip, you can use underscores preceding style definitions to set them as comments... for all good browsers out there, except of course IE. This way you can easily define specific IE rules by putting an underscore before the style.

#underscore{
	width:300px;
	_width:320px; /* This rule is only for IE */
}

This way we can easily add a different width, padding, or anything to an element in order to "get it right"

The clean way:

Now we are not going to do that with every single rule we need fixed! When we are going to fix more things, it's much better to put the fixes in a different stylesheet, and link it using a conditional statement. Basically, we want only IE6 for example to use those fixes, how is that done?

<!--[if lte IE 6]> <link media="screen" rel="stylesheet" href="something.css" /> <![endif]-->

But this doesn't validate! We need to find a solution then, and it is not as hard as one could think :)

We are going to include that, inside another conditional comment, but this time inside one that is valid! So we would write it as follows:

<!--[if IE]><![if lte IE 6]><![endif]-->
<link media="screen" rel="stylesheet" href="something.css" />
<!--[if IE]><![endif]><![endif]-->

Now it validates! We have achieved using valid conditional comments to do this! I will now explain a bit more about these and how they work:

Conditional comments at a glance

You're smart (I hope) So let's race through this, conditional comments allow you to tell the browser to use some parts of your html only if a specific version is running (Or not) Let me show you the options we have: (Please note that this is the html valid version for each of them)

  • <!--[if IE]> To select Internet Explorer
  • <!--[if IE]><![if !IE]> Only if the browser is not Internet Explorer
  • <!--[if IE 5.0]> Only if it is Internet Explorer 5.01 (There are other options as well)
  • <!--[if !IE 5.0]> To select for IE 5.5 or 6 or 7.0

We also have some keywords that will allow for more control:

  • gt = Selects greater than
  • lt = Selects less than
  • gte = Selects greater than or equal to
  • lte = Selects less than or equal to
  • ! = Selects all but what the expression says (i.e. It negates the expression)

For more information on conditional comments check out this guide by Manfred Staudinger

Apply a background image to an image

0
1240 days
by in CSS

this is quite a neat trick, and it can look really good depending on your design and the image you put as background...

To get it to work all you need is to apply a padding and display:block; to the image. So the CSS would be:

 
img{
	display:block;
	padding:10px;
	background-image:url(image.gif);
}
 

Here is a very smart use of this technique, where a div contains the sky, the image is a little man running, with an animated background that simulates motion.

Read the post that explains how that was achieved if you have any doubts.

Enjoy,

If browsers were like…

4
1369 days
by in Browsers, General talk, Web-related

How many times have you seen those great "If browsers were like... boats/women/cars/houses..." articles? I always wanted to make one of those, but I don't know exactly which "technology" to use, so I'll do one that basically says almost everything:

  • Firefox:
    • If Firefox was a car: It would probably be a BMW or a Porshe, something elegant, with lots of extras to add, fast and secure.
    • If Firefox was a woman it would be that great woman you thought it didn't exist, that knows how to do everything and does it perfectly, she's hot, and you finally found her
    • If Firefox was a house it would be a complex empty two story house plus a basement with a great core. It would have the option to customize it as wanted, and almost every single person that knew about houses or contruction would own one like yours.
  • Opera:
    • If Opera was a car: It would be one of those tiny "sport" cars, fast, two seats, almost no room in the trunk for anything else, a very good engine and very slick.
    • If Opera was a woman it would be a simple woman, pretty, with not much makeup, wearing normal clothes, you would probably be with her because you don't need/want anything better, although from time to time you always think of going back to your Firefox woman.
    • If Opera was a house it would be a small one story house, beautiful, simple, modern, and classic, almost casual.
  • Safari:
    • If Safari was a car: It would be one of those lovely Minis, or a Smart. Quite nice, stylish although with some "retro" design combined greatly with modern curves. A fast engine, lots of extras and for only a few people.
    • If Safari was a woman it would be stunning, hard to find and to get used to, but once you are accustomed to her you'll probably stick with her for a long time. She's stylish, looks like a model, always following fashion in a very discrete way.
    • If Safari was a house it would be "modern art" designed. A bit weird at first and only a few people would now how to live in it and enjoy the experience.
  • Internet Explorer:
    • If IE was a car it would be some sort of common car. A family car, a standard design, for people that don't understand cars it would look great, but inside it it would be a disaster. You would have to go to the garage every month to fix something. It would have a standard engine that at first would look nice, although in reality it wouldn't follow any standards at whatsoever. It wouldn't be a car made to drive on the road, the road would have to be built for the car.
    • If IE was a woman it would be your first "love", she'd be quite hot, and easy too. And you would be feeling great until you found out that everyone "used her" and that she "carried" lots of "viruses".
    • If IE was a house it would be the first house you bought for yourself, the first time you walk in it would seem great, easy to use, nice. After a while using it some cracks would appear on the walls, and you would find out that there were water leaks, broken pipes, and all sorts of failures, and you'd switch to a better house...

And that'd be basically it. If you are reading my blog using IE I really discourage you to do it again. First get a good browser, like Firefox, and then yea, come read my blog as much as you want.
You'll also notice that the design improves greatly when you switch. It is my way of protesting against IE I'll never fix my CSS to look nice in IE!

And I personally think that this should be done by all serious web developers on their blogs. Come on, we write for proffessionals, and proffessionals don't use IE! ;)

Enjoy,

Reseting CSS default browser settings:

6
1379 days
by in CSS, Graphic Design, Layout/Styling, Reviews, Web-related

One of the biggest problems when designing a website is that after all work is done it looks different on different browsers.
The solution usually used by most web developers consists on manually changing every bit of CSS they have to make it look all the same, resulting on a very hard and time-consuming approach.

A great solution that requires absolutely no extra-work is to reset all CSS settings so that there is absolutely no style assigned to any html elements.
This way you'll have to reapply all styles to all elements, but you'll be sure that once you are done, it looks the same on all browsers.

Here is the CSS code you'll use, developed by David Hellsing at Tripoli:

 
@charset "utf-8";
/* CSS Document */
 
/*
    Tripoli is a generic CSS standard for HTML rendering.
    Copyright ( C ) 2007  David Hellsing
 
    This program is free software: you can redistribute it and/or modify
    it under the terms of the GNU General Public License as published by
    the Free Software Foundation, either version 3 of the License, or
    (at your option) any later version.
 
    This program is distributed in the hope that it will be useful,
    but WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    GNU General Public License for more details.
 
    You should have received a copy of the GNU General Public License
    along with this program.  If not, see <http ://www.gnu.org/licenses/>.
*/
 
* {
	text-decoration: none;
	font-size: 1em;
	outline: none;
	padding: 0;
	margin: 0;
}
code, kbd, samp, pre, tt, var, textarea,
input, select, isindex, listing, xmp, plaintext {
	white-space: normal;
	font-size: 1em;
	font: inherit;
}
dfn, i, cite, var, address, em {
	font-style: normal;
}
th, b, strong, h1, h2, h3, h4, h5, h6 {
	font-weight: normal;
}
a, img, a img, iframe, form, fieldset,
abbr, acronym, object, applet, table {
	border: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
caption, th, td, center {
	vertical-align: top;
	text-align: left;
}
body {
	background: white;
	line-height: 1;
	color: black;
}
q {
	quotes: "" "";
}
ul, ol, dir, menu {
	list-style: none;
}
sub, sup {
	vertical-align: baseline;
}
a {
	color: inherit;
}
hr {
	display: none;
}
font {
	color: inherit !important;
	font: inherit !important;
	color: inherit !important; /* editor's note: necessary? */
}
marquee {
	overflow: inherit !important;
}
blink {
	text-decoration: none;
}
nobr {
	white-space: normal;
}
 

Note that this is just one option, you can find a lot more on this article, down at perishablepress.com

I've been using it in all my websites and I have to say that it really cuts down on developing time. And the results in IE are astounding, I've had to tweak no more than two lines to get it look perfect.
It will reset all margins, colors, underlines, bullet styles...
Remember to place it BEFORE your custom styling, because if not it will override any new setting you have!
The version placed here is "condensed" and hard to read, but taking into account it's purpose I consider this to be a benefit, since it will decrease page size and thus load time...

Try it, test it, and comment here what you think of it!

Go to Top