Skeleton column adding weird space on top in Firefox

StackOverflow https://stackoverflow.com/questions/14103808

Pregunta

I am new to skeleton and am trying to get a simple site going, but am running into problems with firefox already. The code is VERY simple, here it is:

<!DOCTYPE html>
<!--[if lt IE 7 ]><html class="ie ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]><html class="ie ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--><html lang="en"> <!--<![endif]-->
<head>

    <!-- Basic Page Needs
  ================================================== -->
    <meta charset="utf-8">
    <title>Title</title>
    <meta name="description" content="">
    <meta name="author" content="">

    <!-- Mobile Specific Metas
  ================================================== -->
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

    <!-- CSS
  ================================================== -->
    <link href="stylesheets/fonts.css" media="all" rel="stylesheet" type="text/css" />
<link href="stylesheets/base.css" media="all" rel="stylesheet" type="text/css" />
<link href="stylesheets/skeleton.css" media="all" rel="stylesheet" type="text/css" />
<link href="stylesheets/layout.css" media="all" rel="stylesheet" type="text/css" />


    <!--[if lt IE 9]>
        <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

    <!-- Favicons
    ================================================== -->
    <link rel="shortcut icon" type="image/x-icon" href="images/favicon.ico" />
    <link rel="icon" type="image/x-con" href="images/favicon.ico" />
    <link rel="apple-touch-icon" href="images/apple-touch-icon.png">
    <link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png">
    <link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png">

</head>

<body>
    <!-- Primary Page Layout
    ================================================== -->


    <div class="container" style="background-color:#399;"><!-- container START -->




        <div class="fifteen columns" style="background-color:#CF0">
            ENGLISH
        </div>

    </div><!-- container END -->


<!-- End Document
================================================== -->
</body>
</html>

It shows up fine on all browsers except firefox when I use columns. If instead I use "Two thirds" as the class, or even "Three thirds" it shows up fine.

Here is what firefox does when I use any columns at all (Picture) (It ads a weird space at the top 102px)

If I use "two thirds" firefox shows it fine again (Picture)

I've looked through all of the code and just cannot figure out what is going on. Why are columns not playing nice with Firefox? I'm on 17.0.1 if that matters.

Thanks for any help.

¿Fue útil?

Solución

Ok I figured it out, for some reason "clear:both" doesn't play nice in firefox. SO I had to add: clarfix to the container div.

Working now!

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top