Grow your CSS skills. Land your dream job.

IE and Quirks

  • Tam
    # May 1, 2009 at 5:59 am

    Hello all,

    I’ve been making a portfolio site over the last couple days, pretty much following through the Photoshop to CSS videos.
    The site is here.

    The site is working great in FF, but IE is not happy.
    1) The page wrap to centre the content doesnt work
    2)There is some stretching going on with the background of the nav buttons.

    I have done some searching in regard to the page wrap and it seems to be the problem is Quirks mode. I must confess, i have no idea what that is. However, i tried changing my doctype to exactly what Chris had in his html file in the videos but that just caused the site to format all over the page.
    As for the buttons, i have no idea what is causing that problem. I have looked over the CSS but cant see where the problem is.

    I’m not sure if posting code up will help as i’m not certain where the problem is, but i will include my nav code.
    HTML -

    CSS -

    Code:
    ul.sidenav {
    font-size: 1.2em;
    float: left;
    width: 180px;
    margin: 0;
    padding: 0;
    list-style: none;
    background: #a6517a;
    border-bottom: 1px solid #9b406c;
    border-top: 1px solid #b06b8c;
    }
    ul.sidenav li a{
    display: block;
    color: #000000;
    text-decoration: none;
    width: 155px;
    padding: 10px 0 10px 25px;
    background: url(sidenav_a.gif) no-repeat 5px 7px;
    border-bottom: 1px solid #9b406c;
    border-top: 1px solid #b06b8c;

    }
    ul.sidenav li a:hover {
    background: #cbd9e8 no-repeat 5px 7px;
    border-top: 1px solid #b06b8c;
    }
    ul.sidenav li span{ display: none; }
    ul.sidenav li a:hover span {
    display: block;
    font-size: 0.8em;
    padding: 10px 0;
    }

    div#page-wrap{
    width: 780;
    margin: 0 auto;
    }

    ul#nav {
    height: 252; width: 780;
    background: url(images/header-bg.jpg) no-repeat;
    list-style: none;
    text-indent: -9999px;
    }
    ul#nav li a {
    display: block;
    width: 780px;
    height: 210;
    float: left;
    margin-top: 42px;
    text-decoration: none;
    background: none;
    }

    div#main-content{
    padding-bottom: 30px;
    background: url(images/content-bg.png) repeat-y;
    }
    div#main-content img{
    border: 1;
    border-color: #a8b9cc;
    }
    div#main-content div#left-content{
    float: left;
    width: 180;
    }
    div#main-content div#left-content ul#sidenav{
    float: left;
    width: 180;
    }

    # May 1, 2009 at 9:38 am

    To center stuff in IE use this ol’ hack (add it to your existing CSS):

    Code:
    body {
    text-align: center;
    }

    and

    Code:
    div#page-wrap {
    text-align: left;
    }

    Make sure you give proper measurements, e.g., (210 px). Don’t let the browser guess. :)

    Also, use a full DTD:

    Code:
    < !DOCTYPE HTML PUBliC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">

    As far as that wonkiness in IE, float the li, not the a. See what that does. Good luck!

    Tam
    # May 1, 2009 at 11:41 am

    ah ha! That fixed it :)
    Thanks for the help!

    # May 1, 2009 at 3:50 pm

    Yer welcome. Now you can remove that "Site best viewed in FF" silliness. Have a nice weekend. :mrgreen:

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

You must be logged in to reply to this topic.

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