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 Mitchell Collins
Mitchell Collins
1,592 Points

CSS Template looks different when uploaded to Web Host (iPage)

I created a simple login css template today for my website, but the template looks completely different in IE9 when it is uploaded to the host.

I mean, if I load the .html file into IE9 that's on my computer, it looks perfect. Though, when I visit my website, it looks completely different.

The website is here: http://vaiatech.com/

Here is the dropbox folder with the html and css file, so you can download them and see what I am talking about.

https://www.dropbox.com/sh/kpikh5g1mmbop8m/luQ5t43x_b

Mitchell Collins
Mitchell Collins
1,592 Points

Also, I know that I am not using any links to local files, and it IS loading the style1.css file, because only HALF of the items are styled. It looks like it just threw away the alignment rules...

Mitchell Collins
Mitchell Collins
1,592 Points

Here is an image of the issue: https://www.dropbox.com/s/zoectcqhf9kg1il/WTF.png

3 Answers

Tom Bedford
Tom Bedford
15,645 Points
Tom Bedford
Tom Bedford
15,645 Points

I would first compare your local stylesheet to the one online, are any styles missing?

Your #login div has a text align of "center" which is putting your inputs etc in the center of the 500px div. Your #logo div has a text-align of "left" which is moving the logo to the left. You could fix this by changing the logo align to center (or removing it as the #login style would be inherited). However "text-align" is meant for aligning text, not images.

It would be better to add something like this for the logo:

#logo img {
  display: block; /* makes the image into its own block so you can position it */
  margin: 0 auto 30px auto; /* a left and right margin of auto will center an element, I added the 30px bottom margin as you already had that set */
}
Mitchell Collins
Mitchell Collins
1,592 Points

Thanks. I was using text-align: center, on the image, but the css wasn't updating. I will switch it to the block method though for convenience. Thanks for the answer!

Tom Bedford
Tom Bedford
15,645 Points
Tom Bedford
Tom Bedford
15,645 Points

Ah ok, this is the code from when I was looking at it:

* {
    margin: 0;
    outline: none;
}

body {
    background: #eee;
}

input {
    border: none;
    border-radius: 5px;
    margin-bottom: 15px;
}

input[type="text"], input[type="password"] {
    width: 235px;
    height: 40px;
    border: solid 1px #aaa;
    padding-left: 15px;
    color: #aaa;
    font-size: 1.2em;
}

input[type="text"]:focus, input[type="password"]:focus {
    background-color: #ccc;
    color: #fff;
}

input[type="submit"] {
    width: 75px;
    height: 35px;
    background: #aaa;
    color: #fff;
    float: left;
    margin-left: 125px;
}

input[type="submit"]:hover {
    background: #b0b0b0;
}

input[type="submit"]:active {
    background: #fff;
    border: solid 1px #aaa;
    color: #aaa;
}

#forgot a{
    color: #aaa;
    text-decoration: none;
}

#forgot a:hover {
    text-decoration: underline;
}

#forgot p {
    text-align: left;
    margin-left: 125px;
}

#login {
    width: 500px;
    margin: 20vh auto;
    text-align: center;
}

#logo {
  text-align: left;
    margin-bottom: 30px;
}

#logo a {
    color: inherit;
    text-decoration: none;
}

#logo img {
    -webkit-filter: invert(100%);
}

#logo h1 {
    font-size: 4em;
    letter-spacing: .375em;
    color: #aaa;
}

.clearfix {
    clear: left;
}
Mitchell Collins
Mitchell Collins
1,592 Points

Yes then, you've confirmed it. The issue was just the css file not updating for some reason. Thanks!

Dave Thomson
Dave Thomson
3,157 Points
Dave Thomson
Dave Thomson
3,157 Points

I can't comment on what or how the browser is rendering for your local copy, but it would appear to be correct for the hosted version. It would be a good idea to review both the html and css as both could be made more concise, but to get you started...

Your logo is being bumped out of alignment by this align declaration

#logo {
    text-align: left;
    margin-bottom: 30px;
}

and your footer text is missing a <p> tag

<footer>

&copy; vaiatech 2013

    <br />
    <br />

    all rights reserved.
    </p>

</footer>
Mitchell Collins
Mitchell Collins
1,592 Points

Thanks for the answer! Though, I had these changes already made in the css I uploaded to my domain, I think the issue was with the css file not updating.

Mitchell Collins
Mitchell Collins
1,592 Points
Mitchell Collins
Mitchell Collins
1,592 Points

Thank you both for answering. Though, I actually DO have the #Logo aligned center through inherit, and there are also footer tags. Apparently it was my domain having issues updating on ipage.com, because all looks fine now... Maybe it just took a REALLY long time to update for some odd reason, because it usually updates instantly.

This is actually the code I had at the time I posted this question.

HTML

<!DOCTYPE html>

<html>

    <head>

        <!-- title -->
        <title></title>

        <!-- css -->
        <link rel="stylesheet" href="css/style1.css" type="text/css" />

    </head>

    <body>

        <!-- container -->
        <div id="container">

            <!-- login -->
            <div id="login">

                <!-- logo -->
                <div id="logo">

                    <img src="images/vaiatech.png" href="#" width="300" height="90" />

                </div>

                <!-- userpass -->
                <div id="userpass">

                    <!-- username -->
                    <div id="username">

                        <input type="text" placeholder="username" maxlength="18" />

                    </div>

                    <!-- password -->
                    <div id="password">

                        <input type="password" placeholder="password" maxlength="15" />

                    </div>

                </div>

                <!-- submit -->
                <div id="submit">

                    <!-- signin -->
                    <div id="signin">

                        <input type="submit" value="sign in" />

                    </div>

                    <br />

                    <!-- forgot -->
                    <div id="forgot" class="clearfix">

                        <p>
                        <a href="#">forgot password?</a>
                        </p>

                    </div>

                </div>

            </div>

            <!-- footer -->
            <footer>

                &copy; vaiatech 2013

                <br />
                <br />

                all rights reserved.
                </p>

            </footer>

        </div>

    </body>

</html>

CSS:

* {
    margin: 0;
    outline: none;
}

body {
    background: #eee;
}

footer {
    text-align: center;
    color: #aaa;
    letter-spacing: .5em;
    font-variant: small-caps;
    font-weight: bold;
}

input {
    border: none;
    border-radius: 5px;
    margin-bottom: 15px;
}

input[type="text"], input[type="password"] {
    width: 235px;
    height: 40px;
    border: solid 1px #aaa;
    padding-left: 15px;
    color: #aaa;
    font-size: 1.2em;
}

input[type="text"]:focus, input[type="password"]:focus {
    background-color: #ccc;
    color: #fff;
}

input[type="submit"] {
    width: 75px;
    height: 35px;
    background: #aaa;
    color: #fff;
    float: left;
    margin-left: 125px;
}

input[type="submit"]:hover {
    background: #b0b0b0;
}

input[type="submit"]:active {
    background: #fff;
    border: solid 1px #aaa;
    color: #aaa;
}

#forgot a{
    color: #aaa;
    text-decoration: none;
}

#forgot a:hover {
    text-decoration: underline;
}

#forgot p {
    text-align: left;
    margin-left: 125px;
}

#login {
    width: 500px;
    margin: 20vh auto;
    text-align: center;
}

#logo {
    margin-bottom: 30px;
}

#logo img {
    -webkit-filter: invert(50%);
    filter: invert(50%);
}

.clearfix {
    clear: left;
}