Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Whats wrong with my CSS Code?

Tags:

html

css

firefox

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 :/

like image 239
S3iOp Avatar asked Dec 23 '25 02:12

S3iOp


1 Answers

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.

like image 151
user1041890 Avatar answered Dec 24 '25 20:12

user1041890



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!