I want to make a nice navigation bar, but for some reason, I can't get the borders of the cells on the ends of the bar to be rounded. If you look closely at the corners, you should be able to see a bit of rounding happening to the background, but not to the border for some reason.
You can see what I mean here: http://jsfiddle.net/7veZQ/299/
Here is my code:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">
table {
border-collapse: collapse;
border: none;
box-shadow: 0px 5px 10px #BBB;
}
.nav tr td {
width: 160px;
height: 40px;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
text-transform: uppercase;
color: #666;
border: 1px solid #999;
vertical-align: middle;
text-align: center;
background: #eeeeee; /* Old browsers */
background: -moz-linear-gradient(top, #eeeeee 0%, #cccccc 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eeeeee), color-stop(100%,#cccccc)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #eeeeee 0%,#cccccc 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #eeeeee 0%,#cccccc 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #eeeeee 0%,#cccccc 100%); /* IE10+ */
background: linear-gradient(to bottom, #eeeeee 0%,#cccccc 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#cccccc',GradientType=0 ); /* IE6-9 */
text-shadow: 1px 1px 0px #FFFFFF;
letter-spacing: 3px;
}
.nav tr td:hover {
background: #F4F4F4; /* Old browsers */
background: -moz-linear-gradient(top, #F4F4F4 0%, #E0E0E0 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#F4F4F4), color-stop(100%,#E0E0E0)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #F4F4F4 0%,#E0E0E0 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #F4F4F4 0%,#E0E0E0 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #F4F4F4 0%,#E0E0E0 100%); /* IE10+ */
background: linear-gradient(to bottom, #F4F4F4 0%,#E0E0E0 100%); /* W3C */
}
.nav tr td#first {
border-radius: 5px 0px 0px 5px;
-moz-border-radius: 5px 0px 0px 5px;
-webkit-border-radius: 5px 0px 0px 5px;
}
.nav tr td#last {
color: #09C;
border-radius: 0px 5px 5px 0px;
-moz-border-radius: 0px 5px 5px 0px;
-webkit-border-radius: 0px 5px 5px 0px;
}
</style>
</head>
<body>
<table class="nav" width="960" border="0" cellspacing="0" cellpadding="0">
<tr>
<td id="first">Home</td>
<td>Options</td>
<td>Prices</td>
<td>Showcase</td>
<td>Help</td>
<td id="last">Order Now!</td>
</tr>
</table>
</body>
</html>
So what am I doing wrong?
So what am I doing wrong?
Using a table for layout.
Tables are not layout tools. Some browsers won't round corners on table cells. You have a list of data, use list markup.
change your table css to
border-collapse: separate;
Unfortunately, this is not cross browser CSS. CSS3 is not found in all browsers. That being said, there are a few changes I'd suggest. First, you shouldn't really use exact heights & widths for anything.
Second, you should be using DIVs.
Decent forum post as to why...
In any case, here is the "fix" (I'm personally against floating anything, but oh well. It is what happens sometimes:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">
.nav {
float:left;
width:960px;
height:40px;
border: 1px solid #999;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
box-shadow: 0px 5px 10px #BBB;
}
.nav a {
float:left;
display:inline-block;
margin:0;
padding:0;
line-height:40px;
text-decoration:none;
width: 160px;
height: 40px;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
text-transform: uppercase;
color: #666;
text-align: center;
background: #eeeeee; /* Old browsers */
background: -moz-linear-gradient(top, #eeeeee 0%, #cccccc 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eeeeee), color-stop(100%,#cccccc)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #eeeeee 0%,#cccccc 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #eeeeee 0%,#cccccc 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #eeeeee 0%,#cccccc 100%); /* IE10+ */
background: linear-gradient(to bottom, #eeeeee 0%,#cccccc 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#cccccc',GradientType=0 ); /* IE6-9 */
text-shadow: 1px 1px 0px #FFFFFF;
letter-spacing: 3px;
}
.nav a:hover {
background: #F4F4F4; /* Old browsers */
background: -moz-linear-gradient(top, #F4F4F4 0%, #E0E0E0 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#F4F4F4), color-stop(100%,#E0E0E0)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #F4F4F4 0%,#E0E0E0 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #F4F4F4 0%,#E0E0E0 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #F4F4F4 0%,#E0E0E0 100%); /* IE10+ */
background: linear-gradient(to bottom, #F4F4F4 0%,#E0E0E0 100%); /* W3C */
}
.nav a#first {
border-radius: 5px 0px 0px 5px;
-moz-border-radius: 5px 0px 0px 5px;
-webkit-border-radius: 5px 0px 0px 5px;
}
.nav a#last {
color: #09C;
border-radius: 0px 5px 5px 0px;
-moz-border-radius: 0px 5px 5px 0px;
-webkit-border-radius: 0px 5px 5px 0px;
}
</style>
</head>
<body>
<div id="main-menu" class="nav">
Home
Options
Prices
Showcase
Help
Order Now!
</div>
</body>
</html>
This should be all you need for it to work... If you are having trouble with CSS Layouts, check out YUI3 Grids. I'm a fan of YUI 3, so yes, this is a shameful plug.
YUI Library
Look at this:
http://jsfiddle.net/7veZQ/313/
The table is converted into div + ul.
Look at line-height (used here to center the text vertically).
Also, I changed first and last to be classes (instead of id's) as they are very common names and id's should be unique in document.
At last, look at the borders. We don't have border-collapse in lists so the last item is a little different than the others.
Related
I created a hover effect for my navigation bar / the list inside it. On hover I want to create a "pressed button" effect by applying a box shadow. But the shadow only is casted in a small box. (check picture below)
I want the shadow to fill out the whole navbar around the hovered area.
I have no idea where to put my code and would be glad about any help :)
HTML CODE:
<nav>
<div class="nav-wrapper">
<ul>
<li>Home</li>
<li>Projekte</li>
</ul>
</div>
</nav>
CSS CODE:
html, body {
margin: 0;
padding: 0;
height: 100%;
background-color:white;
font-family: 'Open Sans', sans-serif;
}
.nav-wrapper {
margin: 0 auto;
margin-top: 50px;
width: 60%;
padding-top: 5px;
padding-bottom: 5px;
color:#787878;
box-shadow: 2px 2px 3px #BDBDBD;
border-radius: 5px;
background: #f9f9f9; /* Old browsers */
background: -moz-linear-gradient(top, #f9f9f9 0%, #ededed 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f9f9f9), color-stop(100%,#ededed)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #f9f9f9 0%,#ededed 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #f9f9f9 0%,#ededed 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #f9f9f9 0%,#ededed 100%); /* IE10+ */
background: linear-gradient(to bottom, #f9f9f9 0%,#ededed 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9f9f9', endColorstr='#ededed',GradientType=0 ); /* IE6-9 */
}
ul {
list-style: none;
}
li {
display: inline;
padding: 0 15px;
}
li:hover {
box-shadow: 2px 2px 3px #BDBDBD inset;
}
a {
text-decoration: none;
color:#787878;
}
Add this:
li:hover {
box-shadow: 2px 2px 3px #BDBDBD inset, 2px 2px 3px #BDBDBD;
}
Preview:
Or the bevelled effect here:
li:hover {
box-shadow: 2px 2px 3px #BDBDBD inset, -2px -2px 3px #BDBDBD inset;
}
Preview:
Fiddle: http://jsbin.com/wolotuxico/1/edit?html,css,output
Update from Comments
Remove padding for .nav-wrapper and give it to li
.nav-wrapper {
padding: 0;
}
li {
display: inline-block;
padding: 15px;
}
Preview:
Fiddle: http://jsbin.com/bowawodode/2/edit
Remove the padding from the navigation and add it to the li's. Remember the border is outside the padding and inside the margin.
Example:
https://jsfiddle.net/m98yedk6/1/
.nav-wrapper {
position: relative;
margin: 0 auto;
margin-top: 50px;
width: 60%;
color:#787878;
box-shadow: 2px 2px 3px #BDBDBD;
border-radius: 5px;
background: #f9f9f9; /* Old browsers */
background: -moz-linear-gradient(top, #f9f9f9 0%, #ededed 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f9f9f9), color-stop(100%,#ededed)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #f9f9f9 0%,#ededed 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #f9f9f9 0%,#ededed 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #f9f9f9 0%,#ededed 100%); /* IE10+ */
background: linear-gradient(to bottom, #f9f9f9 0%,#ededed 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9f9f9', endColorstr='#ededed',GradientType=0 ); /* IE6-9 */
}
li {
display: inline-block;
padding: 10px;
}
I searched SO and found this thread but it only mentioned problems with IE8. I am having this problem in all browsers including Chrome Version 33.0.1750.117 and Firefox 27.0.1.
My first step was to make sure my HTML was correct,
Link
Click Here to Submit Your Testimonial
Target
<div name="Submit-Testimonial" id="Submit-Testimonial">
I used this code outside of frameworks and also with Foundation, and it always worked fine.
I thought it might be the way I set up my files in my project but even on this demo where I link to Skeleton via CDN, I still have this problem. so I am led to believe that there is a problem being caused by Skeleton.
EDIT:
A user suggested that I look into the button class to see if there could be a conflict caused by it. When I removed the button class, the problem still existed that the page would not redirect down to the target. Here is the CSS
/* #Buttons
================================================== */
.button,
button,
input[type="submit"],
input[type="reset"],
input[type="button"] {
background: #eee; /* Old browsers */
background: #eee -moz-linear-gradient(top, rgba(255,255,255,.2) 0%, rgba(0,0,0,.2) 100%); /* FF3.6+ */
background: #eee -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,.2)), color-stop(100%,rgba(0,0,0,.2))); /* Chrome,Safari4+ */
background: #eee -webkit-linear-gradient(top, rgba(255,255,255,.2) 0%,rgba(0,0,0,.2) 100%); /* Chrome10+,Safari5.1+ */
background: #eee -o-linear-gradient(top, rgba(255,255,255,.2) 0%,rgba(0,0,0,.2) 100%); /* Opera11.10+ */
background: #eee -ms-linear-gradient(top, rgba(255,255,255,.2) 0%,rgba(0,0,0,.2) 100%); /* IE10+ */
background: #eee linear-gradient(top, rgba(255,255,255,.2) 0%,rgba(0,0,0,.2) 100%); /* W3C */
border: 1px solid #aaa;
border-top: 1px solid #ccc;
border-left: 1px solid #ccc;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
color: #444;
display: inline-block;
font-size: 11px;
font-weight: bold;
text-decoration: none;
text-shadow: 0 1px rgba(255, 255, 255, .75);
cursor: pointer;
margin-bottom: 20px;
line-height: normal;
padding: 8px 10px;
font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; }
.button:hover,
button:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover {
color: #222;
background: #ddd; /* Old browsers */
background: #ddd -moz-linear-gradient(top, rgba(255,255,255,.3) 0%, rgba(0,0,0,.3) 100%); /* FF3.6+ */
background: #ddd -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,.3)), color-stop(100%,rgba(0,0,0,.3))); /* Chrome,Safari4+ */
background: #ddd -webkit-linear-gradient(top, rgba(255,255,255,.3) 0%,rgba(0,0,0,.3) 100%); /* Chrome10+,Safari5.1+ */
background: #ddd -o-linear-gradient(top, rgba(255,255,255,.3) 0%,rgba(0,0,0,.3) 100%); /* Opera11.10+ */
background: #ddd -ms-linear-gradient(top, rgba(255,255,255,.3) 0%,rgba(0,0,0,.3) 100%); /* IE10+ */
background: #ddd linear-gradient(top, rgba(255,255,255,.3) 0%,rgba(0,0,0,.3) 100%); /* W3C */
border: 1px solid #888;
border-top: 1px solid #aaa;
border-left: 1px solid #aaa; }
.button:active,
button:active,
input[type="submit"]:active,
input[type="reset"]:active,
input[type="button"]:active {
border: 1px solid #666;
background: #ccc; /* Old browsers */
background: #ccc -moz-linear-gradient(top, rgba(255,255,255,.35) 0%, rgba(10,10,10,.4) 100%); /* FF3.6+ */
background: #ccc -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,.35)), color-stop(100%,rgba(10,10,10,.4))); /* Chrome,Safari4+ */
background: #ccc -webkit-linear-gradient(top, rgba(255,255,255,.35) 0%,rgba(10,10,10,.4) 100%); /* Chrome10+,Safari5.1+ */
background: #ccc -o-linear-gradient(top, rgba(255,255,255,.35) 0%,rgba(10,10,10,.4) 100%); /* Opera11.10+ */
background: #ccc -ms-linear-gradient(top, rgba(255,255,255,.35) 0%,rgba(10,10,10,.4) 100%); /* IE10+ */
background: #ccc linear-gradient(top, rgba(255,255,255,.35) 0%,rgba(10,10,10,.4) 100%); /* W3C */ }
.button.full-width,
button.full-width,
input[type="submit"].full-width,
input[type="reset"].full-width,
input[type="button"].full-width {
width: 100%;
padding-left: 0 !important;
padding-right: 0 !important;
text-align: center; }
/* Fix for odd Mozilla border & padding issues */
button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
padding: 0;
}
I want to create button from three images. I use CSS3 with multiple backgrounds.
I need this:
http://i.stack.imgur.com/LxyIQ.png
But I get this:
http://i.stack.imgur.com/5vUHz.png
This is my code:
a.activemenu
{
font-family:"Arial",Arial, serif;
font-size:25px;
text-align:center;
text-decoration:none;
color:white;
background-image:url("buttonleft.png"),url("buttonmid.png"),url("buttonright.png");
background-repeat:no-repeat,repeat-x,no-repeat;
padding:0 33px 62px 33px;
}
What could I be doing wrong?
I create this button using just css without image.
a.activemenu {
background: #931e5b; /* Old browsers */
background: -moz-linear-gradient(top, #931e5b 0%, #3c0c25 100%); /* FF3.6+ */
background:A -webkit-gradient(linear, left top, left bottom, colorQ-stop(0%,#931e5b), color-stop(100%,#3c0c25)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #931e5b 0%,#3c0c25 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #931e5b 0%,#3c0c25 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #931e5b 0%,#3c0c25 100%); /* IE10+ */
background: linear-gradient(to bottom, #931e5b 0%,#3c0c25 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#931e5b', endColorstr='#3c0c25',GradientType=0 ); /* IE6-9 */
border:0px;
font-family:"Arial",Arial, serif;
font-size:25px;
text-align:center;
padding:10px;
border-radius: 0px 0px 10px 10px;
color:#fff;
text-decoration:none;
}
http://jsfiddle.net/parslook/LhMWn/2/
Try this:
background: url(buttonleft.png) left bottom no-repeat,
url(buttonmid.png) left bottom repeat-x,
url(buttonright.png) right bottom no-repeat;
Ref. http://www.css3.info/preview/multiple-backgrounds/
If you're using CSS3 (as mentioned in your tags), you could simplify it by using some gradients and border-radius.
a.activemenu {
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
font-family: arial, sans-serif;
color: #fff;
text-decoration: none;
text-align: center;
padding: 10px 33px;
background: #931e5b;
background: -webkit-linear-gradient(bottom, #3e0c26, #931e5b);
background: -moz-linear-gradient(bottom, #3e0c26, #931e5b);
background: -ms-linear-gradient(bottom, #3e0c26, #931e5b);
background: -o-linear-gradient(bottom, #3e0c26, #931e5b);
background: linear-gradient(bottom, #3e0c26, #931e5b);
}
See this fiddle: http://jsfiddle.net/LcW6K/
When I put the navigation background image is not coming in ie8 ie7. all other browsers are ok. I Have added the code below . Can anyone please help me to fix this is issue?/
<nav class="navigation">
<ul>
<li><a href="http://www.ticketstosrilanka.co.uk/" >Home</a></li>
<li>Flights</li>
<li>Travel Guide</li>
<li>Tours & Holidays</li>
<li>About us</li>
<li>Contact Us</li>
</ul>
</nav>
.navigation {
margin: 0px 0;
font: bold 12px/18px "Helvetica Neue", Helvetica, Arial, sans-serif;
text-transform: uppercase;
color: #444;
width:100%;
background: url("../images/menubg.png")repeat-x scroll left top transparent;
-webkit-box-shadow: 0 1px rgba(255,255,255,1) inset;
}
.navigation:after {
clear: both;
content: ".";
display: block;
height: 0;
visibility: hidden;
}
.navigation ul {
float: left;
border-radius: 0px;
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.07);
-webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.07);
overflow: hidden;
}
.navigation li {
float: left;
border-style: solid;
border-width: 1px;
border-color: #BABABA #BABABA #BABABA #FFF;
box-shadow: 0 1px rgba(255,255,255,1) inset;
-webkit-box-shadow: 0 1px rgba(255,255,255,1) inset;
background: #F7F7F7; /* Old browsers */
background: -moz-linear-gradient(top, #F7F7F7 0%, #EDEDED 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#F7F7F7), color-stop(100%,#EDEDED)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #F7F7F7 0%,#EDEDED 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #F7F7F7 0%,#EDEDED 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #F7F7F7 0%,#EDEDED 100%); /* IE10+ */
background: linear-gradient(top, #F7F7F7 0%,#EDEDED 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#F7F7F7', endColorstr='#EDEDED',GradientType=0 ); /* IE6-9 */
}
.navigation li:hover, navigation li.current {
box-shadow: 0 1px rgba(255,255,255,0.2) inset;
-webkit-box-shadow: 0 1px rgba(255,255,255,0.2) inset;
border-color: #262626 !important;
background: #4D4D4D; /* Old browsers */
background: -moz-linear-gradient(top, #4D4D4D 0%, #262626 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4D4D4D), color-stop(100%,#262626)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #4D4D4D 0%,#262626 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #4D4D4D 0%,#262626 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #4D4D4D 0%,#262626 100%); /* IE10+ */
background: linear-gradient(top, #4D4D4D 0%,#262626 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4D4D4D', endColorstr='#262626',GradientType=0 ); /* IE6-9 */
}
.navigation a {
display: block;
padding: 10px 15px;
color: #444;
text-decoration: none;
text-shadow: 0 1px #FFF;
}
.navigation a.active{
box-shadow: 0 1px rgba(255,255,255,0.2) inset;
-webkit-box-shadow: 0 1px rgba(255,255,255,0.2) inset;
border-color: #262626 !important;
background: #4D4D4D; /* Old browsers */
background: -moz-linear-gradient(top, #4D4D4D 0%, #262626 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4D4D4D), color-stop(100%,#262626)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #4D4D4D 0%,#262626 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #4D4D4D 0%,#262626 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #4D4D4D 0%,#262626 100%); /* IE10+ */
background: linear-gradient(top, #4D4D4D 0%,#262626 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4D4D4D', endColorstr='#262626',GradientType=0 ); /* IE6-9 */
color:#fff;
}
.navigation a:hover, #navigation li.current a {
color: #FFF;
text-shadow: 0 1px #000;
}
.navigation li:first-child {
border-left-color: #BABABA;
border-radius: 0px 0 0 0px;
}
.navigation li:last-child {
border-radius: 0 0px 0px 0;
}
Just add float: left; to your .navigation this may solve your problem, if not , try by adding
* html .navigation{height: 1%;}
Now add this
.navigation {
background: url("../images/menubg.png") repeat-x left top; // add this line
background: url("../images/menubg.png")repeat-x scroll left top transparent; // remove this line
}
Live demo
In IE8 one of my buttons background's is overflowing it's border. Here is an image that highlights the problem:
A live example can be seen here: http://rcnhca.org.uk/sites/first_steps/
The markup for the button is:
<a class="button alpha bold" href="#">
<img alt="rcn icon" src="http://rcnhca.org.uk/sites/first_steps/wp-content/themes/megaamazing/library/images/rcn-icon.png">
</a>
And the css (I use filters to draw a gradient instead of an image):
a.button.alpha, a.button.alpha:focus {
margin-left: 0px;
}
a.button.omega, a.button.omega:focus {
margin-right: 0px;
}
a.button{
display: block;
position: relative;
float: left;
margin: 10px 5px;
right: 0px;
height: 2.438em;
line-height: 2.438em;
padding: 0 0.938em;
border: #3a90a7 2px solid;
font-size: 0.938em;
text-decoration: none;
color: #202d32;
background: #ffffff;
background: -moz-linear-gradient(top, #ffffff 0%, #e5e5e5 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#e5e5e5));
background: -webkit-linear-gradient(top, #ffffff 0%,#e5e5e5 100%);
background: -o-linear-gradient(top, #ffffff 0%,#e5e5e5 100%);
background: -ms-linear-gradient(top, #ffffff 0%,#e5e5e5 100%);
background: linear-gradient(top, #ffffff 0%,#e5e5e5 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5e5e5',GradientType=0 );
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
.oldie a.button{
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5e5e5',GradientType=0 );
}
a.button:hover {
border: #202d32 solid 2px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25), 0 0 3px #FFFFFF inset;
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25), 0 0 3px #FFFFFF inset;
}
a.button:active{
padding-top: 0.125em;
padding-left: 1.063em;
padding-right: 0.813em;
height: 2.313em;
background: #e5e5e5; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: #cccccc;
background: -moz-linear-gradient(top, #cccccc 0%, #cccccc 3%, #e5e5e5 5%, #ffffff 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cccccc), color-stop(3%,#cccccc), color-stop(5%,#e5e5e5), color-stop(100%,#ffffff));
background: -webkit-linear-gradient(top, #cccccc 0%,#cccccc 3%,#e5e5e5 5%,#ffffff 100%);
background: -o-linear-gradient(top, #cccccc 0%,#cccccc 3%,#e5e5e5 5%,#ffffff 100%);
background: -ms-linear-gradient(top, #cccccc 0%,#cccccc 3%,#e5e5e5 5%,#ffffff 100%);
background: linear-gradient(top, #cccccc 0%,#cccccc 3%,#e5e5e5 5%,#ffffff 100%);
-moz-box-shadow: 0 1px 2px #AAAAAA inset;
box-shadow: 0 1px 2px #AAAAAA inset;
}
.oldie a.button:active {
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e5e5e5', endColorstr='#ffffff',GradientType=0 );
}
a.button img {
position: relative;
margin-right: 15px;
vertical-align: middle;
}
Does anyone know what's going on? Thanks.
I can't explain why, but when you remove the horizontal margins on the anchor it fixes the problem (both left and right)
My best guess is that the IE filter is doing something unpredictable.
If you wrap the element then apply a margin to that instead, it should solve it.
there is no way to do this for IE8 because its not support css3 BTW its work in IE9.
for more details about IE & CSS compatibility check this
http://msdn.microsoft.com/en-us/library/cc351024%28v=vs.85%29.aspx