IE not support text-indent on buttons fileds?

November 21st, 2011 Posted in CSS Tutorials, Web Tutorials
No Comments

You can do just below things in your style inside.

.your-class{
font:12px Arial;
text-indent:-999px;
display:block;
line-height:0; /* For IE purpose */
}

that’s all this working. you can added here for IE purpose the “line-height:0” only.

, ,
Read More

How to set Cross Browser Min Height in Via CSS?

November 12th, 2011 Posted in CSS Tutorials, HTML Techniques, HTML Tutorial, Web Tutorials
No Comments

You Can Just Below Code in your style sheet OR where you want you can put this.

min-height:741px;
height:auto !important;
height:741px;

that is all this is working well i can find this in google via.

, , , ,
Read More

HTML Web Safe Font List?

July 26th, 2011 Posted in CSS Tutorials, HTML Tutorial, Web Tutorials
No Comments

Serif Fonts

font-family Example text
Georgia, serif

This is a heading

This is a paragraph
“Palatino Linotype”, “Book Antiqua”, Palatino, serif

This is a heading

This is a paragraph
“Times New Roman”, Times, serif

This is a heading

This is a paragraph

Sans-Serif Fonts

font-family Example text
Arial, Helvetica, sans-serif

This is a heading

This is a paragraph
Arial Black, Gadget, sans-serif

This is a heading

This is a paragraph
“Comic Sans MS”, cursive, sans-serif

This is a heading

This is a paragraph
Impact, Charcoal, sans-serif

This is a heading

This is a paragraph
“Lucida Sans Unicode”, “Lucida Grande”, sans-serif

This is a heading

This is a paragraph
Tahoma, Geneva, sans-serif

This is a heading

This is a paragraph
“Trebuchet MS”, Helvetica, sans-serif

This is a heading

This is a paragraph
Verdana, Geneva, sans-serif

This is a heading

This is a paragraph

Monospace Fonts

font-family Example text
“Courier New”, Courier, monospace

This is a heading

This is a paragraph
“Lucida Console”, Monaco, monospace

This is a heading

This is a paragraph

Another one Reference Site : http://web.mit.edu/jmorzins/www/fonts.html

, , , , , , , , , , , , , , , , , , , , ,
Read More

How to create wp curve menu css ?

April 20th, 2011 Posted in CSS Tutorials, HTML Techniques, PHP Tutorials, Web Tutorials, Wordpress
No Comments

You can use below coding that is useful for curve menu creation.

/* =Menu
————————————————————– */
#top-bar-bg{
background: #820086;
border-bottom:8px solid #000;
padding:20px 0 0 0;

}
div.search_container{
position:absolute;
top:0;
right:0;
}
div.search_container input.keywords{
font:12px Arial, Helvetica, sans-serif;
float:left;
}
#access {
display: block;
margin: 0 auto;
width: 940px;
position:relative;
}
#access .menu-header,
div.menu {
font-size: 13px;
margin-left: 12px;
width: 928px;
}
#access .menu-header ul,
div.menu ul {
list-style: none;
margin: 0;
}
#access .menu-header li,
div.menu li {
float: left;
position: relative;
}
#access a {
display: block;
line-height: 38px;
text-decoration: none;
/*-moz-border-radius-topleft:5px;
-moz-border-radius-topright:5px;*/
font:14px Arial, Helvetica, sans-serif;
padding:10px;
}
#access ul li {
color: #9D9B9B;
background:url(images/menu-normal-right.jpg) no-repeat top right;
margin-right:10px;
}
#access ul li a{
color: #9D9B9B;
background:url(images/menu-normal-left.jpg) no-repeat top left;
}

#access ul ul {
/*box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
-moz-box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
-webkit-box-shadow: 0px 3px 3px rgba(0,0,0,0.2);*/
display: none;
position: absolute;
top: 38px;
left: 0;
float: left;
width: 180px;
z-index: 99999;
}
#access ul ul li {
min-width: 180px;
}
#access ul ul ul {
left: 100%;
top: 0;
}
#access ul ul a {
background: #333;
line-height: 1em;
padding: 10px;
width: 160px;
height: auto;
}
#access li:hover {
background:url(images/menu-hilight-right.jpg) no-repeat top right;
color: #000;
}
#access li:hover > a,
#access ul ul :hover > a {
background:url(images/menu-hilight-left.jpg) no-repeat top left;
color: #000;
}
#access ul li:hover > ul {
display: block;
}
#access ul li.current_page_item,
#access ul li.current-menu-ancestor,
#access ul li.current-menu-item,
#access ul li.current-menu-parent {
background:url(images/menu-hilight-right.jpg) no-repeat top right;
color: #000;

}
#access ul li.current_page_item > a,
#access ul li.current-menu-ancestor > a,
#access ul li.current-menu-item > a,
#access ul li.current-menu-parent > a {
background:url(images/menu-hilight-left.jpg) no-repeat top left;
color: #000;

}
* html #access ul li.current_page_item,
* html #access ul li.current-menu-ancestor,
* html #access ul li.current-menu-item,
* html #access ul li.current-menu-parent,
* html #access ul li{
background:url(images/menu-hilight-right.jpg) no-repeat top right;
color: #000;
}
* html #access ul li.current_page_item a,
* html #access ul li.current-menu-ancestor a,
* html #access ul li.current-menu-item a,
* html #access ul li.current-menu-parent a,
* html #access ul li a:hover {
background:url(images/menu-hilight-left.jpg) no-repeat top left;
color: #000;
}

that’s all. ЁЯЩВ

Other one Option :

/* =Menu
————————————————————– */

#access {
display: block;
float: left;
margin: 0 auto 0 auto;
width: 500px;
height:29px;
position:absolute;
top:39px;
right:0px;
}
#access .menu-header,
#access .menu-header ul.menu {
font:12px “Myriad Pro”, Arial, Helvetica, sans-serif, Verdana;
color:#9CB2E4;
margin-left: 12px;
width: 420px;
float:right;
}
#access .menu-header ul,
#access .menu-header ul.menu ul {
list-style: none;
margin: 0;
}
#access .menu-header li,
#access .menu-header ul.menu li {
float: left;
position: relative;
padding:0 0 0 0;
}
#access .menu-header a {
color:#9CB2E4;
font:bold 12px “Trebuchet MS”, Arial, Helvetica, sans-serif;
text-decoration:none;
padding:13px 0 13px 0;
text-decoration: none;
background: url(images/topmenuright.gif) no-repeat right;
}
#access .menu-header ul li a span { padding:13px 15px; background: url(images/topmenuleft.gif) no-repeat left;}
#access .menu-header ul ul {
box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
-moz-box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
-webkit-box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
display: none;
position: absolute;
top: 38px;
left: 0;
float: left;
width: 180px;
z-index: 99999;
}
#access .menu-header ul li a{
margin:0 5px;
float:left;
}
#access .menu-header ul ul li {
min-width: 180px;
padding:13px 10px;
}
#access .menu-header ul ul ul {
left: 100%;
top: 0;
}
#access .menu-header ul ul a {
/*background: transparent;*/
line-height: 1em;
padding: 15px;
width: 160px;
height: auto;
}
#access .menu-header li:hover > a,
#access .menu-header ul ul :hover > a {

color:#fff; background: url(images/topmenurighthover.gif) no-repeat right;
}
#access .menu-header li:hover > a span,
#access .menu-header ul ul :hover > a span{color:#fff; background:url(images/topmenulefthover.gif) no-repeat left; }

#access .menu-header ul li:hover > ul {
display: block;
}
#access .menu-header ul li.current_page_item > a,
#access .menu-header ul li.current-menu-ancestor > a,
#access .menu-header ul li.current-menu-item > a,
#access .menu-header ul li.current-menu-parent > a {
color:#fff; background:url(images/topmenurighthover.gif) no-repeat right;
}
#access .menu-header ul li.current_page_item > a span,
#access .menu-header ul li.current-menu-ancestor > a span,
#access .menu-header ul li.current-menu-item > a span,
#access .menu-header ul li.current-menu-parent > a span{
color:#fff; background:url(images/topmenulefthover.gif) no-repeat left; }

* html #access .menu-header ul li.current_page_item a,
* html #access .menu-header ul li.current-menu-ancestor a,
* html #access .menu-header ul li.current-menu-item a,
* html #access .menu-header ul li.current-menu-parent a,
* html #access .menu-header ul li a:hover {
color:#fff; background:url(images/topmenurighthover.gif) no-repeat right;
}
* html #access .menu-header ul li.current_page_item a span { color:#fff; background:url(images/topmenulefthover.gif) no-repeat left; }

, , , , , , , , , , , , , , , , , , ,
Read More

Curve Bg Css

March 30th, 2011 Posted in CSS Tutorials, General, HTML Techniques, Web Tutorials
No Comments

.left-panel{
width:605px;
float:left;
margin:25px 0;
}
div.panel-t-l{
background:url(images/curve-bg-t-l.png) no-repeat top left;
}
div.panel-t-l div.panel-t-r{
background:url(images/curve-bg-t-r.png) no-repeat top right;
padding:8px 0 0 0;
}

div.panel-b-l{
background:url(images/curve-bg-b-l.png) no-repeat bottom left;
}
div.panel-b-l div.panel-b-r{
background:url(images/curve-bg-b-r.png) no-repeat bottom right;
padding:0 0 8px 0;
}
.panel-white-bg{
background:#fff;
padding:10px 15px;
min-height:235px;
}

.right-panel{
margin:25px 0;
width:325px;
float:right;
}
div.panel-r-t-l{
background:url(images/panel-r-t-l.png) no-repeat top left;
}
div.panel-r-t-l div.panel-r-t-r{
background:url(images/panel-r-t-r.png) no-repeat top right;
padding:8px 0 0 0;
}

div.panel-b-r-l{
background:url(images/panel-b-r-l.png) no-repeat bottom left;
}
div.panel-b-r-l div.panel-b-r-r{
background:url(images/panel-b-r-r.png) no-repeat bottom right;
padding:0 0 8px 0;
}

Read More

Single Image background

March 30th, 2011 Posted in CSS Tutorials, HTML Techniques, Web Tutorials
No Comments

/* ################################### */
/*┬а┬а ┬аMenu Start┬а */
/* ################################### */
.menu-container{
width:580px;
margin:7px auto 15px auto;
}

a.menu-nor{
text-decoration:none;
color:#000000;
font:16px “Myriad Pro”, Verdana, Tahoma, Arial, Helvetica, sans-serif;
outline:0;
margin-right:30px;
}
a.menu-nor span{
background:url(images/menu-nor.png) no-repeat 100% 0;
text-decoration:none;
font:16px “Myriad Pro”, Verdana, Tahoma, Arial, Helvetica, sans-serif;
color:#000000;
padding:10px 0 10px 0;
height:18px;

}
a.menu-nor span span{
background-position: 0 -100%;
padding:10px 20px 10px 20px;
height:18px;
font:16px “Myriad Pro”, Verdana, Tahoma, Arial, Helvetica, sans-serif;
margin-left:-10px;
}
a.menu-nor:hover{
color:#ffffff !important;
font:16px “Myriad Pro”, Verdana, Tahoma, Arial, Helvetica, sans-serif;
}
a.menu-nor span:hover{
background:url(images/menu-hil.png) no-repeat 100% 0;
padding:10px 0 10px 0;
height:18px;
color:#ffffff !important;
font:16px “Myriad Pro”, Verdana, Tahoma, Arial, Helvetica, sans-serif;
}
a.menu-nor span span:hover{
background-position: 0 -100%;
padding:10px 20px 10px 20px;
height:18px;
color:#ffffff !important;
font:16px “Myriad Pro”, Verdana, Tahoma, Arial, Helvetica, sans-serif;
margin-left:-10px;
}

Read More

Css padding techniques

March 22nd, 2011 Posted in CSS Tutorials, HTML Techniques, Web Tutorials
No Comments

Here i mention some of css techniques.

1.┬а /*padding: top right+left bottom;*/

padding:20px 22px 18px;

2.┬а /*padding: top right bottom left;*/

padding:20px┬а 10px 18px 22px;

3.┬а /*padding: top+bottom left+right;*/

padding:20px┬а 22px;
4.┬а /*┬а┬а ┬а margin: top left+right bottom !important;*/

margin: 0 6px 20px !important;

Read More

For Magento left navigation IE7 issue css Problem Solved.

March 18th, 2011 Posted in CSS Tutorials, magento, Web Tutorials
No Comments

First you set #left-nav li {

position:relative;

}

#left-nav li ul, #left-nav li:hover ul ul, #left-nav li a:hover ul ul, #left-nav li ul li:hover ul ul, #left-nav li ul li a:hover ul ul, #left-nav li ul li ul li:hover ul ul, #left-nav li ul li a ul li a:hover ul ul, #left-nav li ul li ul li ul li:hover ul ul, #left-nav li ul li a ul li a ul li a:hover ul ul, #left-nav li ul li ul li ul li ul li:hover ul ul, #left-nav li ul li a ul li a ul li a ul li a:hover ul ul{
left:-1000px;
position:absolute;
z-index:999;
}
#left-nav li:hover ul, #left-nav li a:hover ul, #left-nav li ul li:hover ul, #left-nav li ul li a:hover ul, #left-nav li ul li ul li:hover ul, #left-nav li ul li ul li a:hover ul, #left-nav li ul li ul li ul li:hover ul, #left-nav li ul li ul li ul li a:hover ul, #left-nav li ul li ul li ul li ul li:hover ul, #left-nav li ul li ul li ul li ul li a:hover ul, #left-nav li ul li ul li ul li ul li ul li:hover ul, #left-nav li ul li ul li ul li ul li ul li a:hover ul{
position:relative;
left:0px;
top:0;
z-index:999;
width:193px;
}

this is very intersting. I found this solution for IE 7 drop down menu purpose.

Read More

Text Shadow

March 17th, 2011 Posted in CSS Tutorials, General, HTML Techniques, Web Tutorials
No Comments

This is “text-shadow” proberty. Below I mention the some of example for text shdow proberty.

Ex:
color: #000;
background: #fff;
text-shadow: 2px 0px 10px #000;

Below i mention text-shadow property field explantion.

text-shadow: x-offset y-offset Blur color;

Read More

CSS Border Radius

August 17th, 2010 Posted in CSS Tutorials, Web Tutorials
No Comments

Ex 1 :
—————————————-
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;

Ex 2 – Without Top Right:
———————————-
-webkit-border-radius: 5px;
-webkit-border-top-right-radius: 0;
-moz-border-radius: 5px;
-moz-border-radius-topright: 0;
border-radius: 5px;
border-top-right-radius: 0;

Ex 3 – Without Top Right & Left:
———————————-
-webkit-border-bottom-right-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-moz-border-radius-bottomright: 5px;
-moz-border-radius-bottomleft: 5px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;

Ex 4 – Without Top Right & Left + Bottom Right :
————————————————
-webkit-border-bottom-left-radius: 5px;
-moz-border-radius-bottomleft: 5px;
border-bottom-left-radius: 5px;

Note : Mostly This is supported in Firefox.

Below CSS Radius Generator, This is all your reference. Kindly check below URL.
More Best Css Border Radius URL : http://border-radius.com/

Read More
Older Entries

┬й 2020 Spirituality