Forums

Nodster

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



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---
<body>
<div id=\"container\">
     <div id=\"content\"> PAGE CONTENT HERE </div>     
     <div id=\"sidebar\"> IMAGES HERE </div>
</div>
<div id=\"footer\">FOOTER STUFF HERE</div>

Ta muchy

box

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

Nodster

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

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.

Nodster

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

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

treehouse : what would you like to learn today?

Forums

Positioning differences