Whats wrong with my CSS Code?

Question

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

May want to look in to a CSS Reset. Though browsers commonly have the same default values for margins, borders, etc. they sometimes do not (leaving you with oddities where their settings have not been overwritten by your own style). — Brad Christie
– Brad Christie, Commented Nov 11, 2011 at 14:44
A normalise can be better than a reset in many situtations, as you don't have to redeclare all the styles that were removed in the reset. http://html5boilerplate.com/ is an excellent place to start; they have a detailed explanation of the normalize.css — Larry
– Larry, Commented Nov 11, 2011 at 14:47
The CSS Reset, but I think thats a creppy solution somehow :D As already mentioned I think the Problem is that the title is not included in the main tag and that i defined the position of the title and the main tag twice which is not necessary :D but as a css beginner I am not skilled enough to fix it on my own :( — S3iOp
– S3iOp, Commented Nov 11, 2011 at 15:04

user1041890 · Accepted Answer · 2011-11-11 15:03:09Z

2

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.

answered Nov 11, 2011 at 15:03

user1041890

462 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Guy · Accepted Answer · 2011-11-11 14:45:32Z

0

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

answered Nov 11, 2011 at 14:45

Guy

3572 gold badges5 silver badges16 bronze badges

1 Comment

Guy Over a year ago

Ok, try what another said and add a broser reset file to your head above your main css file. Yahoo do a good CSS reset file.

Serkan Yersen · Accepted Answer · 2011-11-11 16:06:39Z

0

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.

answered Nov 11, 2011 at 16:06

Serkan Yersen

1,3133 gold badges10 silver badges20 bronze badges

Collectives™ on Stack Overflow

Whats wrong with my CSS Code?

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related