The following HTML code looks good in chrome but it doesn't look that good in firefox(the distance between the title and the links is not the same as in Chrome)...anyone who know how to optimize it?
This is how it should looks like (Chromium Screenshot): https://i.sstatic.net/m64jf.png
This is how it looks in firefox: https://i.sstatic.net/TEZWj.png
This is the css code:
html, body {
height: 100%;
width: 100%;
padding: 0px;
margin: 0px;
}
body {
background-image: url(background.png);
background-repeat: repeat;
background-position: top left;
}
#main {
font-family: 'Raleway', sans-serif;
position: absolute;
left: 190px;
top: 240px;
font-size: 26px;
}
#title {
position: absolute;
left: 180px;
top: 110px;
font-family: 'Vollkorn', serif;
font-size: 26px;
}
a:link, a:visited {
text-decoration: none;
font-family: 'Raleway', sans-serif;
color: #000000;
}
a:hover {
text-decoration: underline;
}
::-moz-selection {
background: #fe57a1;
color: #fff;
text-shadow: none;
}
::selection {
background: #fe57a1;
color: #fff;
text-shadow: none;
}
This is the html code:
<div id="title">
<h1>Title</h1>
</div>
<div id="main">
<ul>
<li><a href="">Link</a></li>
<li><a href="">Link</a></li>
<li><a href="">Link</a></li>
<li><a href="">Link</a></li>
<li><a href="">Link</a></li>
<li><a href="">Link</a></li>
</ul>
</div>
Well I personly think that it would be easier to put the title into the main div:
<div id="main">
<h1>Title</h1>
<ul>
<li><a href="">Link</a></li>
<li><a href="">Link</a></li>
<li><a href="">Link</a></li>
<li><a href="">Link</a></li>
<li><a href="">Link</a></li>
<li><a href="">Link</a></li>
</ul>
</div>
and then in the css:
h1 { font-family: 'Vollkorn', serif; font-size: 26px; font-weight: bold; }
But that doesn't work as it should :/
On my machine, I'm not seeing any difference in the spacing of the Title and the body between chrome and firefox, but I am with IE. So, I added the additional css style for the h1 tag.
h1 {
padding: 0px;
font-family: 'Vollkorn', serif;
font-size: 26px;
}
That seems to help the spacing be more consistent.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With