Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS [Solved] Working in IE, Safari, and Chrome. But not Firefox?!?

  • This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #30405
    MaskdTux
    Member

    Well I have ran into a weird problem. I have written the rough draft for a new site and ran into a wall at the footer. This is the first time I am using html5 and css3.

    My problem is the background color isn’t appearing in Firefox. I have looked over my code a bunch of times and can’t find what could be the problem. I’m sure it is something simple but I could use some help.

    I have tested it in Safari, Chrome, and even IE. But for some reason it isn’t showing up in Firefox.







    Red ADvenir














    Red ADvenir










    Fuente de AGUA VIVA



    News


    Missionary Volunteers in Action



    God has been gracious in sending missionaries from around the world to help finish this building project on time for satellite broadcasting. Read about God’s perfect timing in organizing has warriors.





    Current Broadcasts


    video


    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.



    audio


    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.











    And the css….

    /*


    Colors:
    Dark Blue: #040b41
    Light Blue: #33aadd
    Purple: #412366
    Off-white: #f4f0e6
    Light Grey: #f5f2e7

    Add Size:
    Aside: 260×125
    Main: 1000x ?
    Content Top 615x190 ?



    */


    html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, font, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-weight: inherit;
    font-style: inherit;
    font-size: 100%;
    font-family: inherit;
    vertical-align: baseline;
    }

    html { background-color: #eeeeff; font-family: Verdana, Arial, Helvetica, sans-serif; }

    /* remember to define focus styles! */
    :focus {
    outline: 0;
    }

    body {
    line-height: 1;
    color: black;
    width: 1000 px;
    }

    ol, ul {
    list-style: none;
    }

    /* tables still need 'cellspacing="0"' in the markup */
    table {
    border-collapse: separate;
    border-spacing: 0;
    }

    caption, th, td {
    text-align: left;
    font-weight: normal;
    }

    blockquote:before, blockquote:after,
    q:before, q:after {
    content: "";
    }

    blockquote, q {
    quotes: "" "";
    }

    p { font-size: 12px; padding-bottom: 12px; }
    h1 { font-size: 22px; padding-bottom: 22px; }
    h2 { font-size: 18px; padding-bottom: 14px; }

    .clear { clear: both }

    /*Content Style*/

    #page-wrap { position: relative; width: 1000px; margin: auto; background: #ffffff; }

    nav ul { position: relative; top: -1px; list-style-type: none; background: #383d3f url(../images/nav-bg.gif); height: 33px; width: 1000px; margin-bottom: 10px; }
    nav li { float: left; }

    nav ul a {
    background-repeat: no-repeat;
    background-position: right;
    padding-right: 13px;
    padding-left: 13px;
    display: block;
    line-height: 32px;
    text-decoration: none;
    font-size: 14px;
    color: #040b41;
    }

    nav ul a:hover { color: #412366; }

    #search {
    position: relative;
    right: 25px;
    top: 5px;
    float: right;
    color: #666666;
    line-height: 21px;
    width: 185px;
    padding-left: 10px;
    padding-bottom: 0px;
    background-color: white;
    border: #CCCCCC 1px solid;*/
    }

    aside {
    position: relative;
    display: block;
    right: 10px;
    float: right;
    padding: 10px;
    width: 280px;
    height: 500px;
    background: #f5f2e7;
    }

    .shadow {
    -moz-box-shadow: 5px 5px 5px #ccc;
    -webkit-box-shadow: 5px 5px 5px #ccc;
    box-shadow: 5px 5px 5px #ccc;
    }

    figure img {
    margin: 20px 42px;
    }

    #news {
    position: relative;
    display: block;
    float: left;
    margin: 10px;
    padding: 10px;
    width: 250px;
    height: 215px;
    }

    #broadcast {
    position: relative;
    display: block;
    float: right;
    margin: 10px;
    padding: 10px;
    width: 350px;
    height: 215px;
    }

    .banner {
    height: 32px;
    line-height: 30px;
    padding: 0 10px;
    margin-bottom: 10px;
    font-size: 26px;
    font-family: "ff-nuvo-sc-web-pro-1","ff-nuvo-sc-web-pro-2", verdana;
    color: #33aadd;
    background: #040b41;
    }

    footer {
    position: relative;
    desplay: block;
    margin-top: 10px;
    color: #ffffff;
    background: #33aadd;
    }
    #78654
    Barspin
    Participant

    clearfix maybe?

    #78652
    MaskdTux
    Member

    Thanks Barspin, clearfix worked.
    If possible could someone explain why it worked? I can’t figure it out.

    #78655
    coffeendonut
    Member

    see in your CSS code you have


    footer {
    position: relative;
    desplay: block;
    margin-top: 10px;
    color: #ffffff;
    background: #33aadd;
    }

    you just got display: block; wrong you put an “e” instead of an “i”

    #78656
    MaskdTux
    Member

    hehe,
    Thanks a bunch coffeendonut, that also fixed it.

    I think it’s time for bed :P.

    Is it worth using clearfix over a extra div?

Viewing 5 posts - 1 through 5 (of 5 total)
  • The forum ‘CSS’ is closed to new topics and replies.