I have a page that I’m working on that has the following HTML markup:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>TileTabs</title>
<link rel="stylesheet" href="css/style.css" type="text/css">
<link rel="stylesheet" href="css/veramono.css" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script src="js/element_sequentials.js"></script>
</head>
<body>
<header>
<h1>
TileTabs.com
</h1>
</header>
<div id="content">
<ul>
<li>
<img src="images/sites/truncated/google_trunc.png" />
</li>
<li>
<img src="images/sites/truncated/google_trunc.png" />
</li>
<li>
<img src="images/sites/truncated/google_trunc.png" />
</li>
<li>
<img src="images/sites/truncated/google_trunc.png" />
</li>
</ul>
</div>
<footer>
<a href="index.html">Home</a> | <a href="about.html">About</a> | <a href="contact.html">Contact</a>
</footer>
</body>
</html>
style.css:
body {
background: #333;
font-family: 'BitstreamVeraSansMonoRoman', 'Myriad-Pro', 'Myriad', helvetica, arial, sans-serif;
}
h1 {
font-size: 100px;
color: #fff;
margin-top: 0;
margin-bottom: 0;
text-shadow: 2px 3px 3px #292929;
letter-spacing: -1px;
-webkit-text-stroke: 1px white;
}
a:link, a:visited, a:active, a:hover {
color: #fff;
text-shadow: 2px 3px 3px #292929;
letter-spacing: 2px;
-webkit-text-stroke: 1px white;
}
header {
width: 920px;
background: #666;
margin: 0px auto;
margin-top: 0;
text-align: center;
-webkit-border-top-left-radius: 20px;
-webkit-border-top-right-radius: 20px;
-moz-border-radius-topleft: 20px;
-moz-border-radius-topright: 20px;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
}
#content {
width: 920px;
height: 600px;
background: #666;
margin: 0px auto;
text-align: center;
}
footer {
width: 920px;
background: #666;
margin: 0px auto;
text-align: center;
-webkit-border-bottom-right-radius: 20px;
-webkit-border-bottom-left-radius: 20px;
-moz-border-radius-bottomright: 20px;
-moz-border-radius-bottomleft: 20px;
border-bottom-right-radius: 20px;
border-bottom-left-radius: 20px;
}
ul {
padding-top: 20px;
margin: 0px auto;
}
li {
float: left;
list-style: none;
margin: 0 125px 60px 0;
}
veramano.css:
@font-face {
font-family: 'BitstreamVeraSansMonoRoman';
src: url('veramono-webfont.eot');
src: local('☺'), url('veramono-webfont.woff') format('woff'), url('veramono-webfont.ttf') format('truetype'), url('veramono-webfont.svg#webfonttPkD6dqa') format('svg');
font-weight: normal;
font-style: normal;
}
For some reason, everything looks terribly off in FireFox, but not in Chrome. I’m running Mac OS X, I’ve seen that sometimes that matters.
I’m trying to upload this live for you guys, sorry for the temporary inconvenience.
Thanks!
fixed by adding
display:block;in footer’s css.