Grow your CSS skills. Land your dream job.

website looks different on some other computers

  • # November 30, 2012 at 3:20 am

    My website http://www.thedanesband.com looks different on some other computers. how can I make it so it looks the same where ever I look at it from. Do i need to change the positioning?

    # November 30, 2012 at 3:55 am

    @Zienali

    Having a look at your CSS, you’ve absolutely positioned nearly everything! Although this isn’t a bad thing, however your website isn’t wrapped in any sort of containing div and everything is just assigned in the body tag.

    Run your HTML and CSS code through the [W3C Validator](http://validator.w3.org/ “”), I did and it had quite a few errors, some you can’t avoid such as the device-width meta tag for mobile devices, but there are a few you can sort out.

    I’d suggest having something like this;

    < div class="page-wrap" >

    All of your other divs inside of this

    < /div >

    Then in your CSS you would have something like;

    .page-wrap {
    width: 960px;
    margin: 0 auto;
    }

    This will help keep your page nicely centered in the browser and neatly formatted.

    Good luck!

    # November 30, 2012 at 4:58 am

    @watson90

    Thanks a lot! Is the w3c validator trustable? or should I be carful with some of the “errors”

    # November 30, 2012 at 5:00 am

    Yeah, it’s obviously trustworthy, but it will throw up the odd error here and there that you can’t avoid, especially when trying to accommodate all of the various browser sizes etc.

    # December 1, 2012 at 5:18 pm

    You’ll probably want to put the rule “postion: relative” in there too. Like so

    .page-wrap {
    width: 960px;
    margin: 0 auto;
    position: relative;
    }

    That way, anything that is absolutely positioned will stay inside your wrapper.

    If you are wanting to move away from an absolutely positioned-based layout, take a look at using css floats.

    Here are some resources :

    [ “Siz Keys to Understanding CSS Layouts”](http://snook.ca/archives/html_and_css/six_keys_to_understanding_css_layouts “Siz Keys to Understanding CSS Layouts”)

    [CSS Float Theories](http://coding.smashingmagazine.com/2007/05/01/css-float-theory-things-you-should-know/ “CSS Float Theories”)

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".