Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Roman Gulevskiy
Roman Gulevskiy
822 Points

Two pages with have same structure but with strange different margin

Hello!

I'm stack with the problem.

I have two html pages (index.html, catalogue.html) with identical structure with just one difference - index page main div has a paragraph, catalogue page main div has a table.

When I open index page, everything is fine, when I click menu link "catalogue" and go to the catalogue page I see that the whole page moves a little to the left and I can't understand why. The most strange thing is that when I use browser inspector to find out the problem I can't catch the "moving".

Any help please! Thanx in advance!

Here is my code:

index.html

<!DOCTYPE html>
<html>
    <head>
        <title>Page Title</title>
        <meta charset=utf-8">
        <link href="style.css" rel="stylesheet" type="text/css">
    </head>
    <body>
        <header>
            <div class="container">
                <div class="logo">
                    <img src="images/logo.png" class="logo"></img>
                </div>
                <nav class="main-menu">
                    <ul>
                        <li><a href="index.html">Home</a></li>
                        <li><a href="catalogue.html">Catalogue</a></li>
                    </ul>           
                </nav>
            </div>
        </header>   
        <main class="container">
            <div>
                <h1>H1 header</h1>
                <h2>H2 header</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            </div>
        </main>
        <footer class="container">
            <hr>
            <p>&copy; 2016.</p>
            <p>All rights reserved.</p>
        </footer>
    </body>
</html>

catalogue.html

<!DOCTYPE html>
<html>
    <head>
        <title>Page Title</title>
        <meta charset=utf-8">
        <link href="style.css" rel="stylesheet" type="text/css">
    </head>
    <body>
        <header>
            <div class="container">
                <div class="logo">
                    <img src="images/logo.png" class="logo"></img>
                </div>
                <nav class="main-menu">
                    <ul>
                        <li><a href="index.html">Home</a></li>
                        <li><a href="catalogue.html">Catalogue</a></li>
                    </ul>           
                </nav>
            </div>
        </header>       
        <main class="container">                    
            <h1>H1 header</h1>
            <table>
                <tr>
                    <td>
                        <h2>H2 header</h2>
                        <a href="images/atlas.png" target="_blank"><img src="images/atlas_thumb.png" alt="Atlas"></img></a>
                        <p class="description">Some text</p>                    
                    </td>
                    <td>
                        <h2>H2 header</h2>
                        <a href="images/spot.jpg" target="_blank"><img src="images/spot_thumb.png" alt="Spot"></img></a>
                        <p class="description">Some text</p>                        
                    </td>
                    <td>
                        <h2>H2 header</h2>
                        <a href="images/wildcat.jpg" target="_blank"><img src="images/wildcat_thumb.png" alt="WildCat"></img></a>
                        <p class="description">Some text</p>                    
                    </td>
                </tr>
                <tr>
                    <td>
                        <h2>H2 header</h2>
                        <a href="images/petman.jpg" target="_blank"><img src="images/petman_thumb.png" alt="Petman"></img></a>
                    </td>
                </tr>
            </table>
        </main>     
        <footer class="container">
            <hr>
            <p>&copy; 2016.</p>
            <p>All rights reserved.</p>
        </footer>
    </body>
</html>

style.css

body {
    background-color: #f8f8f8;
    font-family: Helvetica, sans-serif;
}

h1 {
    color: #FF69B4;
    font-family: "Comic Sans MS";
    text-shadow: 2px 4px 3px rgba(0,0,0,0.2);
}

h2 {
    color: black;
    font-size: 18px;
    font-weight: 400;
    background-color: #eaeaea;
}

a {
    color: #4169E1;
    font-style: bold;
}

a:hover {
    background: #EE82EE;
}

td {
    max-width: 250px;
    width: 30%;
    vertical-align: top;    
}

ul.menu:hover a {
    color: #191970;
}

input[type="text"], textarea {
    background: #FFFAFA;
}

.container {
    width: 750px;
    margin: 0 auto;
}

.logo {
    float: left;    
}

.main-menu {
    list-style-image: url(images/icon_small.png);
}

.main-menu li {
    margin-left: 20px;
    display: inline-block;
    font-family: "Comic Sans MS";
}

.main-menu li::before {
    content: url(images/icon_small.png);
    position: relative;
    top: 10px;
    left: -5px;
}

ul {
    list-style-image: url(images/list.png);
}

li {
    color: #8B7765;
    font-size: 16px;
    font-weight: 400;
    font-style: italic;
}

.description {
    color: #707070;
    font-size: 14px;
    font-style: italic;
    line-height: 16px;
}

.detailed {
    color: #484343;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    text-align: left;
}

.selected {
    background: #FFF0F5;
}
Steven Parker
Steven Parker
243,331 Points
Steven Parker
Steven Parker
243,331 Points

I don't see it. Maybe it has something to do with the images.

Carlos José
Carlos José
Courses Plus Student 12,431 Points

What is this Main element ? New element, are we at HTML6 ? XD In the Catalogue.html file

Steven Parker
Steven Parker
243,331 Points
Steven Parker
Steven Parker
243,331 Points

Carlos José, "main" is a normal (if perhaps not commonly used) HTML5 tag. See the MDN page and/or this W3Schools list of HTML5 New Elements.

1 Answer

Carlos José
PLUS
Carlos José
Courses Plus Student 12,431 Points
Carlos José
Carlos José
Courses Plus Student 12,431 Points

I can't reproduce the problem, I don't have the images and margins look same. Could you provide a screenshot ?