IE not support text-indent on buttons fileds?

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.

How to set Cross Browser Min Height in Via CSS?

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.

HTML Web Safe Font List?

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

How to create wp curve menu css ?

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; }

Curve Bg Css

.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;
}

Single Image background

/* ################################### */
/*    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;
}

Css padding techniques

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;

For Magento left navigation IE7 issue css Problem Solved.

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.

Text Shadow

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;

CSS Border Radius

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/

© 2020 Spirituality