WeLoveCSS Logo
Home Profile Members Search Rules Help New Posts



WeLoveCSS > WEB DESIGN > Browser Compatibility > css3 doing weird things in IE9

Reply
  Thread Tools Display Modes
Old 29th June 12, 11:20 AM   #1
ianhaney
WLC Member
 
Join Date: Jun 2012
Posts: 11
Default css3 doing weird things in IE9

Hi
in my website www.irhtoys.co.uk, if I hover out the toys and then mattel toys, there should be a another menu that flies out from there, I can see a bit of it, by looks of it, it looks cut off

Any ideas

Below is the CSS3 styles for that menu

Code:
#nav {
	margin: 0;
	padding: 7px 6px 0;
	line-height: 100%;
	-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
	-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
	background: #8b8b8b; /* for non-css3 browsers */
	background-color: #18D418;
	border: solid 1px #6d6d6d;
	behavior: url(PIE.htc);
}
#nav li {
	margin: 0 4px;
	margin-left: 25px;
	padding: 0 0 8px;
	float: left;
	position: relative;
	list-style: none;
	behavior: url(PIE.htc);
}
/* main level link */
#nav a {
	border-radius: 2em;
	-moz-border-radius: 2em;
	font-weight: bold;
	color: #000000;
	text-decoration: none;
	display: block;
	padding:  8px 20px;
	margin: 0;
	text-shadow: 0 0px 0px rgba(0, 0, 0, .3);
	background-color: #F6A828;
	behavior: url(PIE.htc);
}
/* main level link hover */
#nav .current a, #nav li:hover > a {
	background: #d1d1d1; /* for non-css3 browsers */
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ebebeb', endColorstr='#a1a1a1'); /* for IE */
	background: -webkit-gradient(linear, left top, left bottom, from(#ebebeb), to(#a1a1a1)); /* for webkit browsers */
	background: -moz-linear-gradient(top,  #ebebeb,  #a1a1a1); /* for firefox 3.6+ */
	color: #FFFFFF;
	border-top: solid 1px #f8f8f8;
	-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
	-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
	box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
	text-shadow: 0 0px 0 rgba(255, 255, 255, .8);
	behavior: url(PIE.htc);
}
/* sub levels link hover */
#nav ul li:hover a, #nav li:hover li a {
	background: none;
	border: none;
	color: #666;
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	behavior: url(PIE.htc);
}
#nav ul a:hover {
	background: #0399d4 !important; /* for non-css3 browsers */
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#04acec', endColorstr='#0186ba'); /* for IE */
	background: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba)) !important; /* for webkit browsers */
	background: -moz-linear-gradient(top,  #04acec,  #0186ba) !important; /* for firefox 3.6+ */

	color: #fff !important;
	text-shadow: 0 1px 1px rgba(0, 0, 0, .1);
	behavior: url(PIE.htc);
}
/* level 2 list */
#nav ul {
	border-radius: 2em;
	-moz-border-radius: 2em;
	background: #ddd; /* for non-css3 browsers */
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#cfcfcf'); /* for IE */
	background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#cfcfcf)); /* for webkit browsers */
	background: -moz-linear-gradient(top,  #fff,  #cfcfcf); /* for firefox 3.6+ */

	display: none;
	margin: 0;
	padding: 0;
	width: 185px;
	position: absolute;
	top: 35px;
	left: 0;
	border: solid 1px #b4b4b4;
	-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
	-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
	box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
	z-index: 1000;
	behavior: url(PIE.htc);
}
/* dropdown */
#nav li:hover > ul {
	display: block;
	behavior: url(PIE.htc);
}
#nav ul li {
	float: none;
	margin: 0;
	padding: 0;
	behavior: url(PIE.htc);
}
#nav ul a {
	font-weight: normal;
	text-shadow: 0 1px 1px rgba(255, 255, 255, .9);
	behavior: url(PIE.htc);
}
/* level 3+ list */
#nav ul ul {
	left: 181px;
	top: -3px;
	behavior: url(PIE.htc);
}
/* rounded corners for first and last child */
#nav ul li:first-child > a {
	-webkit-border-top-left-radius: 9px;
	-moz-border-radius-topleft: 9px;
	-webkit-border-top-right-radius: 9px;
	-moz-border-radius-topright: 9px;
	position: relative;
}
#nav ul li:last-child > a {
	-webkit-border-bottom-left-radius: 9px;
	-moz-border-radius-bottomleft: 9px;
	-webkit-border-bottom-right-radius: 9px;
	-moz-border-radius-bottomright: 9px;
}
/* clearfix */
#nav:after {
	content: ".";
	display: block;
	clear: both;
	visibility: visible;
	line-height: 0;
	height: 0;
}
#nav {
	display: inline-block;
	behavior: url(PIE.htc);

}
html[xmlns] #nav {
	display: block;
	behavior: url(PIE.htc);
}
* html #nav {
	height: 1%;
	behavior: url(PIE.htc);
}
ianhaney is offline   Reply With Quote
Old 29th June 12, 12:29 PM   #2
ianhaney
WLC Member
 
Join Date: Jun 2012
Posts: 11
Default Re: css3 doing weird things in IE9

Hello

I have fixed it

I had the following in my stylesheet.css, I just removed it

filter: progidXImageTransform.Microsoft.gradient(startCo lorstr='#ebebeb', endColorstr='#a1a1a1'); /* for IE */
ianhaney is offline   Reply With Quote
Reply


Thread Tools
Display Modes
Linear Mode Linear Mode

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 07:46 PM.



Home | Advertise | Contact Us | Top
Home | Advertise | Contact Us | Top

Copyright© 2006 WeLoveCSS.com. All Rights Reserved.
Powered by vBulletin Version 3.8.4 Copyright ©2000 - 2013, Jelsoft Enterprises Ltd.