Hidden Pixels » CSS Tips & Tricks http://www.hiddenpixels.com Web Design Resources, Web Design Tools, Web Design Tutorials, Website Design Inspirations Freebies Wed, 25 Aug 2010 13:10:31 +0000 en hourly 1 http://wordpress.org/?v=3.0 CSS Hacks http://www.hiddenpixels.com/css-stuffs/css-hacks/ http://www.hiddenpixels.com/css-stuffs/css-hacks/#comments Fri, 29 Aug 2008 08:47:36 +0000 HPadmin http://hiddenpixels.com/?p=378

Different browsers has different standards for understating CSS attributes, so some CSS properties are not working in all browsers, the easy way to eliminate this issue to use CSS Hacks. Here are some basic CSS Hacks which we can use in regular development and help us to keep our website look same in all browsers. I get a good help from webdevout.net, W3School, stylizedweb.com to learn about CSS Hacks, I try to list CSS Hacks as much as I know, please let me know if anything is missing or wrong in that. Here i am listing about Conditions in CSS, !important, @import, Abstract (*) Hack, Opacity, “min-height” Hack, CSS Reset Hacks.

Conditions in CSS

The most beneficial aspect of conditional comments is that you are not relying on browser bugs when using them. When you use CSS hacks that rely on browser bugs, you run into the possibility of those bugs being fixed at an unwanted time or other browsers showing the same bugs. Conditional comments only work in browsers that specifically support them and claim to be based on Internet Explorer, which in this case all known browsers are honest about.

  1. Positive
    <!--[if condition]> HTML <![endif]-->
  2. Negative
    <!--[if !condition]><![IGNORE[--><![IGNORE[]]> HTML <!--<![endif]-->

Conditional comments can be used as a CSS hack by including links to stylesheets based on the layout engine. Here is an example of how stylesheets can be separated in this way:


<link href="common.css" rel="stylesheet" type="text/css">
<!--[if IE]> <link href="ie.css" rel="stylesheet" type="text/css"> <![endif]-->
<!--[if lt IE 7]> <link href="ie6.css" rel="stylesheet" type="text/css"> <![endif]-->
<!--[if !lt IE 7]><![IGNORE[--><![IGNORE[]]> <link href="ie7.css" rel="stylesheet" type="text/css"> <!--<![endif]-->
<!--[if !IE]>--> <link href="nonie.css" rel="stylesheet" type="text/css"> <!--<![endif]-->

!important

The !important rule is a way to make your CSS cascade but also have the rules you feel are most crucial always be applied. A rule that has the !important property will always be applied no matter where that rule appears in the CSS document. So if you wanted to make sure that a property always applied, you would add the !important property to the tag.

Internet Explorer 6 and below had a problem with the !important identifier that caused it to be ignored if another declaration of the same property appeared later in the same style declaration block. This can be used to feed Internet Explorer 6 and below special property values that are ignored by other browsers. Internet Explorer 7 fixed this issue.

.div { color: #cc0000 !important; }
div { color: #000000; }

@import

If you’ve ever struggled with Netscape Navigator 4.x, this trick is for you. It all hinges on the fact that NN4.x doesn’t understand what @import means. This is by far the most widely used trick, even though it’s only good for hiding external style sheets.

@import url(http://www.example.org/styles/other-style.css);

Abstract (*) Hack

Abstract used when you want to apply some CSS class especially in ie. here is the way we can use it.

Only for IE6
/* the following rules apply only to IE6 */
* html{}
* html body{}
* html .maindiv{width:500px;}


Only for IE7
/* the following rules apply only to IE7 */
*+html .maindiv{width:800px;}

Opacity

Opacity is use to create transparent element, This is not yet a CSS standard. However, it works in all modern browsers, and is a part of the W3C CSS 3 recommendation.

<html>
<head>
<style type="text/css">
div.background
{
width: 500px;
height: 250px;
background: url(test.jpg) repeat;
border: 2px solid black;
}
div.transbox
{
width: 400px;
height: 180px;
margin: 30px 50px;
background-color: #ffffff;
border: 1px solid black;
/* for IE */
filter:alpha(opacity=60);
/* CSS3 standard */
opacity:0.6;
/* for Firefox*/
-moz-opacity:.60;
}
div.transbox p
{
margin: 30px 40px;
font-weight: bold;
color: #000000;
}
</style>
</head>


<body>
<div class="background">
<div class="transbox">
<p>This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
</p>
</div>
</div>

</body>
</html>

"min-height" Hack

The min-height property sets the minimum height of an element.

CSS .divcss {
min-width:500px;
width:auto; !important
width:600px;
background-color:#CCCCCC;
}

HTML <div class="divcss">&nbsp;</div>

CSS Reset

<html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
border:0pt none;
font-family:inherit;
font-size:100%;
font-style:inherit;
font-weight:inherit;
margin:0pt;
outline-color:invert;
outline-style:none;
outline-width:0pt;
padding:0pt;
vertical-align:baseline;
}
table {
border-collapse:separate;
border-spacing:0pt;
}
caption, th, td {
font-weight:normal;
text-align:left;
}
blockquote:before, blockquote:after, q:before, q:after {
content:"";
}
blockquote, q {
quotes:"" "";
}
strong {
font-weight:bold;
}
em {
font-style:italic;
}
* {
margin:0pt;
padding:0pt;
}

]]> http://www.hiddenpixels.com/css-stuffs/css-hacks/feed/ 5 CSS Tips & Tricks http://www.hiddenpixels.com/css-stuffs/css-tips-tricks/ http://www.hiddenpixels.com/css-stuffs/css-tips-tricks/#comments Mon, 04 Aug 2008 08:26:43 +0000 HPadmin http://hiddenpixels.com/?p=179 CSS Tips & Tricks

Rounded corners and shadowed boxes (fixed Width)


CSS3 will have properties to make rounded borders, borders consisting of images and boxes with shadows, but with some work you can simulate some of them already with CSS2 — and without any tables or extra mark-up. But unfortunatly CSS3 is not supported by IE, here is CSS2.1 example to create Rounded corners and shadowed boxes.

Rounded corners in CSS (Fluid Width)


Rounded corners in CSS has become sort of a holy grail. The problem with most of the rounded corner techniques is that they require alteration of the HTML document itself, which means that retrofitting it onto an existing design may require a lot of effort. However, there is a solution that will allow you to retrofit this to existing designs without altering any markup. Take a look at the example.

Rounded Corners Without Images!

A very nice tool from where you can generate CSS and HTML code for code for Rounded Corners Without Images..

A pinned-down menu


The menu you see in the left of this page is simply a DIV with some A elements inside. All the work to make it stay fixed in its place is done by rules in the style sheet. Here is the mark-up, it is taken straight from the source of this page:


A confetti menu


The colorful menu you see abovc is simply a DIV element with a few P elements inside. The visual effect is due to the fact that each P element is positioned individually and has its own font and color. It works best with short texts, because the visual effect is based on overlap, but if the text is too long, it overlaps so much that it becomes hard to read.

Text Tricks

Daisy likes the way the drop cap makes its own little box, which is a good reminder that everything in CSS is a box. And because it is a box we can take our crayons out and color the background and outline the box. The letter "D" for Daisy is in a box, the paragraph is a box, and every piece of text here is in a box. The code for the dropcap is simple, but we can fancy it up a bit. We use the inline CSS for fiddling with the look. We put our drop cap in a span




CSS-Based Forms

Web 2.0 registration and feedback forms can be found everywhere. Every start-up tries to attract visitors’ attention, so web-forms are becoming more and more important for the success of any company. In the end, exactly those web-forms are responsible for the first contact with potential customers. Let’s take a look, which modern solutions a web-developer can use, designing his/her next css-based form


Image floats, without the text wrap

How many times do you have an image floated left in a block of content, but want to keep that content from wrapping around your image? You’ve tried to accomplish this before, but what you really need is something that plays nicely with any HTML & any amount of content you, or more realistically, your database can throw at it. The example below can easily fall apart without the proper CSS in place:


CSS-Based Tables

We coninue to present some of the best CSS-techniques which web-developers can always use working on their current web-project. Recently we’ve taken a look at the best css-based forms, today we present some useful techniques for displaying information in a tabular mode. In fact, tables can present data quite efficiently, particularly if you can use some sorting or filtering functions in order to improve the legibility of the text stored in the table. Furthermore, Zebra tables are becoming more and more popular, and the techniqies supposed to enhance their functionality appear on a weekly basis.


More CSS Tips & Tricks

Here are around 10 new and 10 older version of Tips & Tricks of CSS, they all are nice…

]]> http://www.hiddenpixels.com/css-stuffs/css-tips-tricks/feed/ 0