Css3pie support - html

I am using cs3pie and facing some issue with it. It's working but instead of border-radius 160 it's taking 4 . How can i solve it.
/* Buttons and button links */
input[type=submit],
.actions ul li a,
.actions a {
font-weight:normal;
padding: 4px 8px;
background: #FDC00D;
background-image: -webkit-gradient(linear, left top, left bottom, from(#FDC00D), to(#F68C1E));
background-image: -webkit-linear-gradient(top, #FDC00D, #F68C1E);
background-image: -moz-linear-gradient(top, #FDC00D, #F68C1E);
background-image: -ms-linear-gradient(top, #FDC00D, #F68C1E);
background-image: -o-linear-gradient(top, #FDC00D, #F68C1E);
background-image: linear-gradient(top, #FDC00D, #F68C1E);
-pie-background: linear-gradient(#FDC00D, #F68C1E); /*PIE*/
color:#333;
border:1px solid #F69C1E;
text-decoration: none;
text-shadow: #ccc 0px 1px 0px;
min-width: 0;
-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0px 1px 1px rgba(0, 0, 0, 0.2);
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0px 1px 1px rgba(0, 0, 0, 0.2);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0px 1px 1px rgba(0, 0, 0, 0.2);
-webkit-user-select: none;
user-select: none;
}
.actions ul li a:hover,
.actions a:hover {
background: #FDC00D;
border-color: #acacac;
text-decoration: none;
}
input[type=submit]:active,
.actions ul li a:active,
.actions a:active {
background: #F68C1E;
background-image: -webkit-gradient(linear, left top, left bottom, from(#F68C1E), to(#FDC00D));
background-image: -webkit-linear-gradient(top, #F68C1E,#FDC00D);
background-image: -moz-linear-gradient(top, #F68C1E,#FDC00D);
background-image: -ms-linear-gradient(top, #F68C1E,#FDC00D);
background-image: -o-linear-gradient(top, #F68C1E,#FDC00D);
background-image: linear-gradient(top, #F68C1E,#FDC00D);
-pie-background: linear-gradient(#F68C1E,#FDC00D); /*PIE*/
text-decoration: none;
}
input[type=submit],.actions a {
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
position:relative;
z-index: 0;
}
/** Actions **/
.actions ul {
margin: 0;
padding: 0;
}
.actions li {
margin:0 0 0.5em 0;
list-style-type: none;
white-space: nowrap;
padding: 0;
}
.actions ul li a {
display: block;
clear: both;
-webkit-border-top-right-radius: 161px;
-webkit-border-bottom-right-radius: 161px;
-moz-border-radius-topright: 161px;
-moz-border-radius-bottomright: 161px;
border-top-right-radius: 161px;
border-bottom-right-radius: 161px;
position:relative;
z-index: 0;
}
.actions ul li a:before,.actions ul li a.highlight:hover:before {
content: "\2665" ;
font-size: 18px;
padding-right:3px;
color: #16224C;
}
.actions ul li a.highlight:before,.actions ul li a:hover:before {
color: red;
}
.actions ul.subcategory{
margin-left:10px;
display: none;
}
.actions ul.subcategory li a {}
This is how i am using pie
<script>
$(function() {
if (window.PIE) {
$('.actions ul li a, .actions a, input[type="submit"], .success,.message,.cake-error,p.error,.error-message').each(function() {
PIE.attach(this);
});
}
});
</script>

CSS3PIE only supports short-hand notation.
Excerpt from http://css3pie.com/documentation/known-issues/#shorthand
For all CSS properties which PIE parses, only the shorthand versions
of those properties will be recognized. For example, while
border-radius is supported, the individual longhand
border-top-left-radius etc. properties are not.
The reason for this is the same reason URLs are not resolved relative
to the CSS file (see above): PIE does not have visibility into where
each style property comes from. If there is both a shorthand and a
longhand property present, PIE cannot determine the order in which the
CSS author specified those properties, nor can it determine the
specificity of the selector for each property. It cannot therefore
make an informed decision about which property should take precedence.
To avoid making dumb guesses, we have opted to only support shorthand
properties. Shorthand was chosen over longhand to keep file size small
and avoid tedious repetition.

This won't be really needed for optimization of your CSS, but alphabetically sorted properties theoretically will be more similar for parser. Except that if you would like to make some change you will faster find property that you are looking for.
Also be consistent in way you are writing your RGB for colors, because some of them is uppercase and others are not.
Also instead of input[type=submit] use input[type="submit"] as specification says.

Related

How can I show my upper menu, above any icons and text?

I have an upper menu with the following CSS:-
nav {
background: -webkit-gradient(linear, center top, center bottom, from(#fff), to(#ccc));
background-image: linear-gradient(#fff, #ccc);
border-radius: 6px;
box-shadow: 0px 0px 4px 2px rgba(0,0,0,0.4);
padding: 0 10px;
position: relative;
}
.menu li {
float: left;
position: relative;
list-style-type: none;
/*background: url('img/denim.png');
font-family: 'Droid Sans', sans-serif;*/
}
.menu li a {
color: #444;
display: block;
font-size: 12px;
line-height: 5px;
padding: 6px 12px;
margin: 8px 8px;
vertical-align: middle;
text-decoration: none;
}
.menu li a:hover {
background: -webkit-gradient(linear, center top, center bottom, from(#ededed), to(#fff));
background-image: linear-gradient(#ededed, #fff);
border-radius: 12px;
box-shadow: inset 0px 0px 1px 1px rgba(0,0,0,0.1);
color: #222;
}
/* Dropdown styles */
.menu ul {
position: absolute;
left: -9999px;
list-style: none;
opacity: 0;
transition: opacity 1s ease;
}
.menu ul li {
float: none;
}
.menu ul a {
white-space: nowrap;
}
/* Displays the dropdown on hover and moves back into position */
.menu li:hover ul {
background: rgba(255,255,255,0.7);
border-radius: 0 0 6px 6px;
box-shadow: inset 0px 2px 4px rgba(0,0,0,0.4);
left: 5px;
opacity: 1;
}
/* Persistant Hover State */
.menu li:hover a {
background: -webkit-gradient(linear, center top, center bottom, from(#ccc), to(#ededed));
background-image: linear-gradient(#ccc, #ededed);
border-radius: 12px;
box-shadow: inset 0px 0px 1px 1px rgba(0,0,0,0.1);
color: #222;
}
.menu li:hover ul a {
background: none;
border-radius: 0;
box-shadow: none;
}
.menu li:hover ul li a:hover {
background: -webkit-gradient(linear, center top, center bottom, from(#eee), to(#fff));
background-image: linear-gradient(#ededed, #fff);
border-radius: 12px;
box-shadow: inset 0px 0px 4px 2px rgba(0,0,0,0.3);
}
Currently when the menu is displayed above an icon , the icon will occur above the menu text as follow:-
So is there a way to force the menu to be displayed above any text and icons ?
Thanks
Use Z-index to a high level on the menu and set the background color to solid white on the .menu li class as shown below:
nav {
background: -webkit-gradient(linear, center top, center bottom, from(#fff), to(#ccc));
background-image: linear-gradient(#fff, #ccc);
border-radius: 6px;
box-shadow: 0px 0px 4px 2px rgba(0,0,0,0.4);
padding: 0 10px;
position: relative;
z-index: 1000;
}
.menu li {
float: left;
position: relative;
list-style-type: none;
/*background: url('img/denim.png');
font-family: 'Droid Sans', sans-serif;*/
z-index: 1000;
}
.menu li:hover ul {
/*background: rgba(255,255,255,0.7);*/
background: rgba(255,255,255,1); /* use this to make the background solid white */
border-radius: 0 0 6px 6px;
box-shadow: inset 0px 2px 4px rgba(0,0,0,0.4);
left: 5px;
opacity: 1;
z-index:1000;
}
You need to change the background-color opacity to 1 block out the rear elements.
.menu li:hover ul {
background: rgba(255,255,255,1);
...

apply background image to vertical submenu

I have an image I would like to apply to a submenu:
I have added css to apply it but is not working, How can I achieve something like?:
instead of
I have tried to put submenu to the left padding left <ul class="sub-menu" style="padding-left: -30px;"> but it does not work, to apply image I added
#menu ul.sub-menu li {
width: 200px;
background: no-repeat url(menu.png);
border-width: 0 1px 1px 1px;
border-style: solid;
}
But that does not work.
Here is html
<div id="menu">
<nav>
<ul style="padding-left: 0px;">
<li>menu 1
</li>
<li>menu 2
<ul class="sub-menu" style="padding-left: -30px;">
<li>1 submenu
</li>
<br/>
<li>2 submenu
</li>
<br/>
<li>3 submenu
</li>
<br/>
<li>4 submenu
</li>
<br/>
</ul>
</li>
<li>menu 3
</li>
<li>menu 4
</li>
<li>menu 5
</li>
<li>menu 6
</li>
<li>menu 7
</li>
</ul>
</nav>
</div>
here is css:
#menu {
width: 100%;
-webkit-box-shadow: 0px 1px 1px 0px rgba(250, 250, 250, .5);
-moz-box-shadow: 0px 1px 1px 0px rgba(250, 250, 250, .5);
box-shadow: 0px 1px 1px 0px rgba(250, 250, 250, .5);
padding-top: 15px;
}
hgroup, main, nav {
margin-bottom: 30px;
width: 100%;
background: -moz-linear-gradient(top, #353535 0%, #222222 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #353535), color-stop(100%, #222222));
background: -webkit-linear-gradient(top, #353535 0%, #222222 100%);
background: -o-linear-gradient(top, #353535 0%, #222222 100%);
background: -ms-linear-gradient(top, #353535 0%, #222222 100%);
background: linear-gradient(top, #353535 0%, #222222 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#353535', endColorstr='#222222', GradientType=0);
border-top:1px solid #000;
border-bottom:1px solid #000;
}
nav ul {
height: 45px;
margin: 0 auto;
}
nav li {
float: left;
list-style-type:none;
}
nav li a {
display: inline-block;
width:auto;
padding: 0 12px;
height: 45px;
font: bold 14px'Arial', sans-serif;
color: #fff;
text-decoration: none;
text-align: center;
line-height: 48px;
text-shadow: 1px 1px 0px #111;
filter: dropshadow(color=#111, offx=1, offy=1);
border-left: 1px solid #444;
border-right: 1px solid #111;
background-color:#2B2B2B;
}
nav li a:hover {
background: -moz-linear-gradient(top, #444 0%, #222 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #444), color-stop(100%, #222));
background: -webkit-linear-gradient(top, #444 0%, #222 100%);
background: -o-linear-gradient(top, #444 0%, #222 100%);
background: -ms-linear-gradient(top, #444 0%, #222 100%);
background: linear-gradient(top, #444 0%, #222 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#444', endColorstr='#222', GradientType=0);
}
nav li a:active {
background: #222;
-webkit-box-shadow: inset 0px 0px 3px 1px rgba(0, 0, 0, .3);
-moz-box-shadow: inset 0px 0px 3px 1px rgba(0, 0, 0, .3);
box-shadow: inset 0px 0px 3px 1px rgba(0, 0, 0, .3);
}
nav li a:active:after {
content:"";
display: block;
width: 100%;
height: 4px;
position: relative;
bottom: 6px;
background: -moz-linear-gradient(top, #ff5e1f 0%, #ff3410 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ff5e1f), color-stop(100%, #ff3410));
background: -webkit-linear-gradient(top, #ff5e1f 0%, #ff3410 100%);
background: -o-linear-gradient(top, #ff5e1f 0%, #ff3410 100%);
background: -ms-linear-gradient(top, #ff5e1f 0%, #ff3410 100%);
background: linear-gradient(top, #ff5e1f 0%, #ff3410 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5e1f', endColorstr='#ff3410', GradientType=0);
}
#menu ul.sub-menu {
display: none;
position: absolute;
}
#menu ul.sub-menu li {
width: 200px;
background: no-repeat url(http://www.eurekavi.com/amores/images/menu.png);
border-width: 0 1px 1px 1px;
border-style: solid;
}
#menu ul.sub-menu li a {
text-align: center;
margin: 5px 10px;
padding: 5px 10px;
}
#menu ul.sub-menu li a:hover {
color: #FFF;
background-color: #b80063;
}
#menu li:hover ul.sub-menu {
display: block;
z-index: 90;
}
HERE IS jsfiddle
Made a couple changes which you can find here:
http://jsfiddle.net/wWx6f/
LexLusa's answer had the right idea but it was incomplete but I do want to give him/her credit. Like he said you can't just add the styling to each li or else the background gets applied to each list item.
You also need to remove this block because you no longer want the borders
/* Removed this because you don't want borders anymore
#menu ul.sub-menu li {
width: 200px;
border-width: 0 1px 1px 1px;
border-style: solid;
}
*/
Another issue that would come up was that because your submenus received the same styling as your main menu, it would get the black/gray box. In order to avoid this, you should make the styling more specific so the styling does not trickle down. You can do this by using the child operator
nav > ul > li > a {
However, you still wanted some of these stylings like the font text and the lineheight, so I simply added them in. I'm sure there is a more elegant solution but for now this works. If you want other stylings you can just add it here too.
/* copied stylings from parent */
#menu ul.sub-menu li a {
font: bold 14px'Arial', sans-serif;
color: #fff;
text-decoration: none;
text-align: center;
margin: 5px 10px;
padding: 5px 10px;
line-height: 48px;
text-shadow: 1px 1px 0px #111;
filter: dropshadow(color=#111, offx=1, offy=1);
}
You have to apply the background to the <ul>, not the <li>'s.
Givbe it a min-height to see the full bg-image and don't use the element style with the nagative padding.
#menu ul.sub-menu {
display: none;
position: absolute;
background: no-repeat url(http://www.eurekavi.com/amores/images/menu.png);
min-height: 264px;
margin: 0;
padding: 0;
}
Here you go:
http://jsfiddle.net/qGX5U/1/
Have you tried to set the background at the UL level? and then the LI's background: transparent? You could also set the UL background as a cover, like in http://css-tricks.com/perfect-full-page-background-image/?
First of all change this
#menu ul.sub-menu li {
width: 200px;
background: no-repeat url(http://www.eurekavi.com/amores/images/menu.png);
border-width: 0 1px 1px 1px;
border-style: solid;
}
to
#menu > ul > li {
width: 200px;
background: no-repeat url(http://www.eurekavi.com/amores/images/menu.png);
border-width: 0 1px 1px 1px;
border-style: solid;
}

Hovering on <li> on menu item causes expantion by 1px

I am creating a menu which I am trying to base on this menu:
http://www.yootheme.com/widgetkit
However I have run into a small problem where if you hover over the middle of the menu item, it works ok, but if you hover over the edge of it (where the border line is), it moves itself and the other menu items in front of it to the right by 1px.
I have been messing around with the code for a fair amount of time now and can't seem to figure it out.
HTML:
<div class="nav">
<ul>
<li>Home</li>
<li class="active">Structure</li>
<li>Buttons</li>
<li>Forms</li>
<li>Download</li>
</ul>
</div>
CSS:
.nav {
max-width: 100%;
}
.nav ul {
max-width: 100%;
margin: 0 auto;
background: #FFFFFF;
background: -webkit-linear-gradient(top, #FFFFFF 1%, #F5F6F6 100%);
background: -moz-linear-gradient(top, #FFFFFF 1%, #F5F6F6 100%);
background: -ms-linear-gradient(top, #FFFFFF 1%, #F5F6F6 100%);
background: -o-linear-gradient(top, #FFFFFF 1%, #F5F6F6 100%);
background: linear-gradient(top, #FFFFFF 1%, #F5F6F6 100%);
background-attachment: scroll;
background-clip: border-box;
background-origin: padding-box;
background-position: 0 0;
background-repeat: repeat-x;
background-size: 100% 100%;
border: 1px solid #c8c9ca;
border-radius: 6px 6px 6px 6px;
height: 40px;
}
.nav ul li {
margin-top: -1px;
padding-top: 1px;
float: left;
height: 39px;
list-style: none outside none;
}
.nav ul li:first-child {
border-left: none;
}
.nav ul li.active{
border-left: 1px solid #DCDDDE;
border-right: 1px solid #DCDDDE;
padding-top: 1px;
float: left;
list-style: none outside none;
background: -webkit-linear-gradient(center top , #F7F8F9 0%, #FBFCFD 15%, #FEFEFE 100%);
background: -moz-linear-gradient(center top , #F7F8F9 0%, #FBFCFD 15%, #FEFEFE 100%);
background: -ms-linear-gradient(center top , #F7F8F9 0%, #FBFCFD 15%, #FEFEFE 100%);
background: -o-linear-gradient(center top , #F7F8F9 0%, #FBFCFD 15%, #FEFEFE 100%);
background: linear-gradient(center top , #F7F8F9 0%, #FBFCFD 15%, #FEFEFE 100%);
border-left: 1px solid #DCDDDE;
border-top: 1px solid #D2D3D4;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) inset;
color: #000000;
}
.nav ul li.active:hover{
padding-left: 1px;
padding-right: 1px;
}
.nav ul li:hover{
border-right: 1px solid #DCDDDE;
border-left: 1px solid #DCDDDE;
border-top: 1px solid #D2D3D4;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.07) inset;
color: #000000;
}
.nav ul li a {
float: left;
text-decoration: none;
display: block;
font-family: 'YanoneKaffeesatzLight', Arial, sans-serif;
height: 38px;
line-height: 38px;
padding-left: 22px;
padding-right: 22px;
display: block;
color: #444444;
font-size: 17px;
text-shadow: 0 1px 0 #FFFFFF;
}
.nav ul li a:hover{
padding-left: 21px;
padding-right: 21px;
}
I have also made a JSFiddle for a proper preview.
Can anyone help me figure out why this is happening and provide a possible solution? It's probably something stupid I'm not seeing.
That's because you put borders on LI:HOVER and after that you change the padding on A:HOVER not on LI:HOVER again. Just change the place of :hover like this:
.nav ul li:hover a{
padding-left: 21px;
padding-right: 21px;
}
And I think it should be fine now.

CSS Block hover state for menu item

Probably an easy solution but I'm having problems. My hover state for the main nav of the site I wish to be in a big block. At current it only displays a hover selector over the current link. I'd like it to have padding on either site.
Design example -> http://www.garyrevell.co.uk/student-i/screenshot_01.jpg
This is the current WIP site. http://www.garyrevell.co.uk/student-i/index.html
The NAV css
header nav {
cursor:pointer;
font-family: GeoSlb712XBdBT;
text-transform:uppercase;
float: left;
color:#fff;
/* WebKit (Safari/Chrome) Only */
-webkit-text-stroke: 0.5px #F47B20;
/* If we weren't using text-shadow, we'd set a fallback color
and use this to set color instead
-webkit-text-fill-color: white; */
color: white;
text-shadow:1px 1px 0 #F47B20,
/* Simulated effect for Firefox and Opera
and nice enhancement for WebKit */
-1px -1px 0 #F47B20,
1px -1px 0 #F47B20,
-1px 1px 0 #F47B20,
1px 1px 0 #F47B20;
font-size:17px;
text-align: right;
padding-top: 5px;
padding-bottom:5px;
padding-left:2px;
padding-right:2px;
/*background-color: #ffffff;*/
background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0.20)), to(rgba(255, 255, 255, 0.20)));
background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.20), rgba(255, 255, 255, 0.20));
background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.20), rgba(255, 255, 255, 0.20));
background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0.20), rgba(255, 255, 255, 0.20));
background-image: -ms-linear-gradient(top, rgba(255, 255, 255, 0.20), rgba(255, 255, 255, 0.20));
background-image: linear-gradient(top, rgba(255, 255, 255, 0.20), rgba(255, 255, 255, 0.20));
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#ffffff', EndColorStr='#ffffff');
margin-top:15px;
margin-left:20px;
-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;
color:#FFFFFF;
}
header nav ul {
list-style: none;
}
header nav li {
float: left;
margin: 0px 30px 0 30px;
}
.navi {
width: 500px;
height:35px;
padding: 0px;
margin: 0px 0;
overflow: hidden;
}
.navi li {
float: left;
margin-right: 5px;
list-style: none;
color: #ffffff;
outline: none;
text-align: center;
text-transform: uppercase;
letter-spacing: 0;
display: block;
}
.navi li a {
display:block;
list-style: none;
color: #ffffff;
outline: none;
text-align: center;
text-transform: uppercase;
letter-spacing: 0;
display: block;
padding:3px;
}
.navi li:hover {
background-color: #F47B20;
color: #ffffff;
}
.navi li.current-menu-item {
}
Any help would be great. Many thanks
add this css
header nav {
padding:0;
}
.navi {
height: 40px;
}
.navi li{
border-radius:5px;
margin:0;
padding:0 20px;
}
.navi li a{
line-height:40px;
}
.navi li {
line-height: 30px;
border-radius: 7px;
margin-left: 20px
}
.navi li a{
padding: 0 15px;
}
.navi li:hover {
background-color: #F47B20;
}
Add These properties to your existing code, (dont replace add only)

Move Menu Navigation (Margin?)

I need to move this navigation menu above the content box and below the logo. In other words, the order should be: (1) logo, (2) menu, and (3) content box.
I tried various margin adjustments to the CSS for #navigation to no avail.
How do I do this?
URL: http://ec2-174-129-169-80.compute-1.amazonaws.com/
See screenshot:
You could add top: -57px; to your #navigation CSS like so:
#navigation {
position: relative;
top: -57px;
clear: both;
margin-bottom: 3em;
display: none;
font: 14px/14px sans-serif;
border: 1px solid #D9D9D9;
background: white;
background: -webkit-gradient(linear, left top, left bottom, from(white), to(whiteSmoke));
background: -webkit-linear-gradient(white, whiteSmoke);
background: -moz-linear-gradient(center top, white 0%, whiteSmoke 100%);
background: -moz-gradient(center top, white 0%, whiteSmoke 100%);
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.03);
-webkit-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.03);
-moz-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.03);
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
Make a jsFiddle or post your code please. Without seeing code, first thoughts are that you put the #navigation in the content area. If that's the case, then:
#navigation { margin-top: -50px; }
If #navigation is absolutely positioned:
#navigation { top: -50px; }