How can I get this CSS to display properly in IE8? - html

Question

So I don't have to post too much code the page is: http://www.ketchikanvet.com . The problem is I can't get the tabs to be attached to the pane in IE8. The majority of the vets clients use IE8 apparently so this is making it a pain in the ass for me. Anyone know why? CSS is:
html {
margin: 0;
padding: 0;
}
body {
width: 100%;
text-align: center;
margin: 0;
padding: 0;
background-color: #17BFEE;
color: #111111;
font-family: Arial, sans-serif;
}
h1 {
margin: 0;
font-family: 'Marmelad', sans-serif;
font-size: 5em;
color: #111111;
text-shadow: 0px 2px 3px #efefef;
}
#header {
text-align: center;
margin-top: 10px;
margin-bottom: 30px;
}
#content {
text-align: left;
margin: 0 auto;
width: 70%;
}
/* root element for tabs */
ul.tabs {
margin:0 !important;
margin-bottom: 0;
padding:0;
height:30px;
}
/* single tab */
ul.tabs li {
float:left;
padding:0;
margin:0;
list-style-type:none;
}
/* link inside the tab. uses a background image */
ul.tabs a {
float:left;
font-size:13px;
display:block;
padding:5px 30px;
text-decoration:none;
border:2px solid #001401;
border-bottom:0px;
height:18px;
background-color:#ddd;
color:#000;
margin-right:2px;
margin-bottom: 0;
position:relative;
outline:0;
border-radius:5px 5px 0 0;
}
ul.tabs a:hover {
background-color:#F7F7F7;
color:#000;
}
/* selected tab */
ul.tabs a.current {
background-color:#F0F0FF;
border-bottom:2px solid #F0F0FF;
color:#000;
cursor:default;
}
/* tab pane */
.panes div {
display:none;
border:2px solid #001401;
min-height:150px;
padding:15px 20px;
background-color:#F0F0FF;
border-radius: 0 5px 5px 5px;
box-shadow: 1px 1px 8px #C4C4C4;
}
/*End of Tabs*/
#gallery img {
border: 2px solid #001401;
border-radius: 5px;
margin-right: 5px;
}
#gallery img:hover {
border: 2px solid #494949;
}
#footer a {
color: #111111;
text-decoration: none;
}
#footer a:hover {
color: #efefef;
}
#addhours {
width: 100%;
}
#addhours td {
width: 50%;
}
.clear {
clear: both;
}
a {
text-decoration: none;
color: #890224;
}
a:hover {
text-decoration: none;
color: #890224;
}
a:visited {
text-decoration: none;
color: #890224;
}
.falselink {
cursor: pointer;
}
.bioimage {
box-shadow: 1px 1px 8px #C4C4C4;
border: 2px solid #001401;
border-radius: 10px;
}
.photo {
box-shadow: 1px 1px 8px #C4C4C4;
border: 2px solid #001401;
border-radius: 10px;
}
#browsercheck {
color: #ff0000;
}

Answer 1

add to UL.tabs A
border-bottom-color:rgb(221, 221, 221);
border-bottom-style:solid;
border-bottom-width:2px;

Answer 2

I added a height of 32px to your anchors inside the ul.tabs and it seemed to be what you're looking for.
ul.tabs a {height:32px;}
If you're using the html5 boiler plate you can target ie alone.
.ie8 ul.tabs a {height:32px;}