CODEWITHSUNDEEP
htmlcssfirefox
S3iOp
S3iOp

Reputation: 35

Whats wrong with my CSS Code?

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

Upvotes: 3

Views: 656

Answers (3)

Serkan Yersen
Serkan Yersen

Reputation: 1313

You should remove the padding and margin for UL elements by setting them to zero.

ul{
  margin:0;
  padding:0;
}

You can also use CSS reset codes to get the same view on most browsers easily.

Upvotes: 0

user1041890
user1041890

Reputation: 46

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.

Upvotes: 2

Guy
Guy

Reputation: 357

It could be a Line Height issue. try setting the line height in both your Title and Main Divs.

Upvotes: 0

Related Questions