Hi all,
I have a problem with hover in that in IE it creates a margin at the bottom of the link. How can i get rid of it without changing the layout in the other browsers.
The code:
<!DOCTYPE html>
<html lang=“en”>
<head>
<title>Brynarth Country Guest House</title>
<style type=“text/css”>
body {
margin:0;
padding:0;
font-family:Arial, Helvetica, sans-serif;
background-color:#ABBCC8;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#wrapper {
width:1400px;
margin:0 auto;
}
#header {
height:230px;
background-color:#5e8197;
border-bottom:3px solid #eee;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#topnav {
background-color:#8aa2b3;
}
#topnav ul {
height:30px;
margin:0;
margin-left:250px;
padding:0;
list-style-type:none;
}
#topnav li{
float:left;
}
#topnav a {
display:block;
text-decoration:none;
color:#fff;
padding:5px 10px 5px 10px;
}
#topnav a:hover {
background-color:#000;
}
</style>
</head>
<body>
<!–wrapper–>
<div id=“wrapper”>
<!–header–>
<div id=“header”>
</div>
<!–end of header–>
<!–topnav–>
<div id=“topnav”>
<ul>
<li><a href=“#”>Home</a></li>
<li><a href=“#”>Accommodation</a></li>
<li><a href=“#”>Eating</a></li>
<li><a href=“#”>Relaxing</a></li>
<li><a href=“#”>Exploring</a></li>
<li><a href=“#”>Availability & Booking</a></li>
<li><a href=“#”>Offers/News</a></li>
<li><a href=“#”>Map & Directions</a></li>
</ul>
</div>
<!–end of topnav–>
<!–main_content wrapper–>
<div id=“main_content”>
</div>
<!–end of main_content wrapper–>
<!–footer–>
<div id=“footer”>
</div>
<!–end of footer–>
</div>
<!–end of wrapper–>
</body>
</html>