Grow your CSS skills. Land your dream job.

Positioning differences

  • # June 4, 2008 at 6:55 pm

    Guys

    I’ve attached some pics of my website which clearly shows positioning differences in IE 5.5 –> 7

    [attachment=2]IE5_5.png[/attachment]

    [attachment=1]IE6.png[/attachment]

    [attachment=0]IE7(myComp).jpg[/attachment]

    Could somebody explain why there could be a difference between the browsers.

    CSS

    Code:
    html, body {height:100%;}

    .container {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -60px;
    position:relative;
    }

    /*—CONTENT AREA — */

    div#content{
    max-width:980px;
    min-height:100%;
    }

    /*—-SIDEBAR —-*/

    #sidebar{
    float:left;
    color:#1A1A1A;
    margin:0 auto;
    clear: right;
    text-align: center;
    }

    /*—-FOOTER—-*/
    #footer
    {
    background:#ABC0E9 url(./images/bkg_ftr.png) bottom repeat-x;
    clear:both;
    height:60px;
    color:#000066;
    text-align:center;
    overflow: hidden;
    width:100%;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-size:2.0em !important;
    font-weight:bold;
    }

    —————————

    —HTML CODE—

    PAGE CONTENT HERE

    Ta muchy

    box
    # June 4, 2008 at 7:05 pm

    I would love to explain – but my head would explode.

    # June 5, 2008 at 4:55 am

    forgot to say there is a 1em push between the content and footer divs. Looks OK in FF / opera etc.

    Box,

    do you mean it’s so simple i should know what i’ve done wrong….or you do know and it would take you ages to explain….

    edit * for early morning sarcasm which could offend!

    box
    # June 5, 2008 at 7:03 pm

    I meant its far from simple lol. Essentially, the problems with IE (all of them), is a matter of how it interprets and renders its html/css combination. You’ll have heard of web standards (just Google it if you haven’t), well IE 5.5 and IE6 don’t really behave according the the now established rules and guidelines of the web standards movement. Thankfully IE7 has addressed many of these issues. The upshot of this is that when you’ve designed and built your site with good, correct semantic mark up and separated your styling into a stylesheet, most new browsers will render it in much the same way – and hopefully just as you wish, but IE 6 and earlier will often show errors or positional anomalies. It is the bane of every web designers life and all you can do is learn the main differences and target IE 6 (and earlier) with its own ‘corrective’ stylesheet using conditional comments. To give an example of how frustrating IE6 can be – in all other browsers 60 + 40 (ie pixels, percentage etc) would equal 100. Makes sense. But in IE6, 60 + 40 is >100! This action forces an element that should fit into a space to be dropped down the page in IE6, which can really mess up a design as you can imagine. Another well documented problem is the box-model variation (google ‘css box model’ for that for more info – too complicated to go into here) which will have you tearing your hair out.

    For this specific problem, post a link to a live page and it’ll be much easier for someone to diagnose.

    # June 6, 2008 at 7:07 am

    thanks chap for the reply….after a night shift my response was a bit shirty!

    anyways

    link to page is http://www.housecallphysio.co.uk/index.php. Thanks

    I have implemented a stylesheet using conditional comments for lte IE 6 so hopefully it looks a bit better.

    I’ve got a program called IE Tester for looking at IE 5.5 / 6 / 7 / 8 and it show different positions of the images to those from browserscreenshots.org.

    hence the confusion.

    thanks if you get a chance to take a look for me.

    box
    # June 6, 2008 at 8:15 am

    As far as I know, IE Tester is still in Alpha-version – so although it looks promising, its accuracy cannot be guaranteed.

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

You must be logged in to reply to this topic.

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