Difference between div and span

The basic difference between them is ,div is block level element and span is inline level element. Most of us do not know what is block level and inline level elements.

As their name implies , block level elements make their presence like a block , like a photo frame, whereas inline element make their presence like a chain, one by one.

This can be illustrated more by HTML example. Suppose we have two divs and two spans in following orders:

<div>This is block one</div>
<div>This is block two </div>
<br />
<span>This is inline element one </span>
<span>This is inline element two </span>


div{border:1px solid #000; padding:10px;}
span{border:1px solid #000; padding:10px;}

Here is the output:

demo

You will notice that div elements are coming in a row, in other words automatic break is inserted. Whereas in case of span elements all are coming one after the other without any breaks.

    Tips:

  • Inline elements does not take margin from top and bottom unless you change them into block level element.
  • You can change inline element into block level element through CSS and vise-versa. That is :
div{display:inline}
span{display:block}

Author: Steve

input[type=submit] css not working in IE6

<style type="text/css">
form input[type=submit]{
background-color:#FE9900;
font-weight:bold;
font-family:Arial,Helvetica,sans-serif;
border:1px solid #000066;
}
</style>

the above code wont work in IE6, either i cant put class or id in it.

The Internet Explorer 6 doesn’t support the attribute selector
[attr="value"]. 

So there is no way to address that submit input element with CSS only 
(IE 6 doesn’t support the adjacence selector + and :last-of-type selector 
neither that would help in this case).

So the only options you have is to either make that element uniquely addressable
by adding a class or ID or wrapping it into an additional span element.

Or – use JavaScript to select that element and apply the CSS rule to it. 
jQuery can make this fairly easy:

$("form input[type=submit]").css({
    "background-color": "#FE9900",
    "font-weight": "bold",
    "font-family": "Arial,Helvetica,sans-serif",
    "border": "1px solid #000066"
});

or another way you can call is using javascript,

Let’s just change our HTML to this.


<input type="text" class="text" value="" />
<input type="button" class="button" value="I am a button" />
<input type="submit" class="button" value="I am a submit" />

Then have the complimenting CSS:


input.text { /* my text css */ }
input.button { /* my button css */ }

Simple enough… but I’m still not satisifed. I’m thinking to myself, What a hassle. Who really wants to append all those classes.

Javascript will do it for you

Need I say more….

A plus i added to the code is that instead of hardcoding in text strings the types,

you the type assign as the class for each element, like:

window.onload = function()
{
var coll = document.getElementsByTagName(”input”);
for(var i=0; i<coll.length; i++)
{
if(coll[i].type)
{
coll[i].className += ‘ ‘ + coll[i].type + ‘ ‘;
}
}
}

This way, all inputs are assigned classes with their own names 
(without overwriting any additional classes the input might have)

Author: Gumbo and Ded

The Internet Explorer 6 doesn’t support the attribute selector [attr="value"]. So there is no way to address that submit input element with CSS only (IE 6 doesn’t support the adjacence selector + and :last-of-type selector neither that would help in this case).

So the only options you have is to either make that element uniquely addressable by adding a class or ID or wrapping it into an additional span element.

Or – as you’ve already stated that you can’t do that – use JavaScript to select that element and apply the CSS rule to it. jQuery can make this fairly easy:

What’s difference between display: none and visibility: hidden?

just when you tread into the world of dhtml or javascript, you can require the display property of CSS more than expected. So it becomes necessary to clearly understand some of the facts behind this powerful language. Here is the difference between the visibility and display property of an element.

visibility: hidden hides the element, but it still takes up space in the layout.

display: none removes the element completely from the document. It does not take up any space, even though the HTML for it is still in the source code.

Author: Realin !

Making stylish button with CSS Sliding Door

sliding door button with css

sliding door button with css

Recently I saw the Sliding Door like buttons in WordPress.com site, I am so liked that and thought of making a sample one and I was all most success. So I thought of sharing that with you. It’s not a hard part, but I spend around thirty minutes to do this, I was so sad because I spent much time to do this, but finally I was really happy I learned some CSS in that thirty minutes. But any way will dive in and just have a look on how to make.

Download: http://www.box.net/shared/8u1h5xsk0t

Download PSD: http://www.box.net/shared/a5rvfz3yzs

That’s it, if you want to try out by yourself, get the files, try your seft and optimize as you wish, use it In your site, if possible else if you have a optimized why shout out in the comments. So far this solution is checked with following browsers;

  • Safari 4
  • Mozilla 3.5
  • Internet Explorer 8

Just checked with Opera 9.64 and Internet Explore 7, it’s working fine 🙂

For lower browser check I don’t have much resource, if possible try it yourself :).

Author: Yoosufs