This turorial does not seem to work on Firefox


#1


My code is all perfect, I have aced every screen. But all my divs are still sitting on top of each other without moving even though the tutorial seems very happy happy with me.
Why doesn't it work and why doesn't the tutorial tell me what I'm doing wrong?

Thanks.


div {
    border-radius: 5px;
    border: 1px solid #006600;
    height: 300px;
    width: 300px;
    background-color: #0000bb;
    }
    
#header {
    position: fixed;
    z-index: 1;
    }    
    
.left {
    float: left;
    }   
    
.right {
    float: right;
    }   
    
#footer {
    clear: both;
    } 


<!DOCTYPE html>
<html>
    <head>
        <link type="text/css" rel="stylesheet" href="stylesheet.css"/>
        <title></title>
    </head>
    <body>
    <div id="header"><div>
    <div class="left"><div>
    <div class="right"><div>
    <div id="footer"><div>
    </body>
</html>


#2

It's tough to nail down what the issue is. I made some changes that still permit a pass in lesson 6.

First, I added a wrapper div to contain everything on the page.

    <body>
    <div id="wrapper">
        <div id="header"></div>
        <div class="left"></div>
        <div class="right"></div>
        <div id="footer"></div>
    </div>
    </body>

Then I tweaked the style sheet to get everything to line up (using Firefox)...

body {
    width: 100%;
    margin: 0;
}
div {
    border-radius: 5px;
}
#wrapper {
    width: 100%;
    border-radius: 0;
}
#header {
    width:100%;
    position: fixed;
    margin-top: 5px;
}
#header,
#footer {
    height: 60px;
    background-color: #668284;
    z-index: 1;
}
.left,
.right {
    margin-top: 70px;
    margin-bottom: 5px;
}
.left {
    width: 10%;
    height: 400px;
    float: left;
    background-color: #B9D7D9;
}
.right {
    width: 89%;
    height: 400px;
    float: right;
    background-color: #F4EBC3;
}
#footer {
    clear: both;
}

I tried to not change too much so it would very closely match the instructions. Browsers have subtle differences in how they parse a web document, and this is not a good time to go down that road. We can spend a year just studying the finer points of CSS and consistent layouts across all devices.


#3

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.