Can someone see why this nav bar looks different in chrome compared to IE and FF?
Question
I have created a simple nav bar which you can see here . I have no idea why it looks the same in IE and FF but different in Chrome. I am using:
IE 10, FF 20 and Chrome 27.
Here is the HTML:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Gem Training services</title>
<meta name="description" content="Gem training services">
<meta name="keywords" content="">
<meta name="author" content="Raymond Leadingham">
<meta name="dcterms.rightsHolder" content="Raymond Leadingham">
<meta name="viewport" content="width=1040" />
<link rel="shortcut icon" href="images/favicon.ico" />
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<ul id="nav">
<li><a href="index.php">Home</a></li>
<li><a href="ourexpertise.php">Our Expertise</a></li>
<li><a href="aboutus.php">About Us</a></li>
<li><a href="ourservices.php">Our Services</a></li>
<li><a href="learningmethods.php">Learning Methods</a></li>
<li ><a href="contactus.php">Contact Us</a></li>
</ul>
</body>
</html>
And the CSS:
#nav {
width: 1000px;
float: left;
margin: 0 0 48px 0;
padding: 0;
list-style: none;
background-color: #f2f2f2;
border-bottom: 1px solid #ccc;
border-top: 1px solid #ccc;
}
#nav li {
float: left;
}
#nav li a {
display: block;
padding: 10px 40px;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
color: #1C4688;
border-right: 1px solid #ccc;
}
#nav li a:hover {
color: #45176E;
background-color: #fff;
}
ul li:first-child{
border-left: 1px solid #ccc;
}
There is a little gap at the right of the nav bar in FF and IE, but a bigger gap in Chrome, I have no idea how to style this nav bar so it is the same in all browsers, any insight is appreciated.
2 answers
solution1
1 2013-06-28 11:19:24
mayt i sure try this completly working in FF, CHROME, IE
#nav {
width: 1000px;
margin: 0 auto;
padding: 0;
list-style: none;
background-color: #f2f2f2;
border-bottom: 1px solid #ccc;
border-top: 1px solid #ccc;
}
#nav li {
display:inline-block;
}
solution2
1 ACCPTED 2013-06-28 11:22:53
#nav {
width: auto;}
or delete width form this class
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.