Page not looking right in IE6! Please Help! [Archive] - Web Design & Web Development Forum: HTML, CSS, JavaScript, PHP

bwolv14

24 Sep 2007, 08:20 AM

My site is looking exactly the way I want it to look in mozilla - http://www.wildeimagination.com/default.aspx?skinid=3

However when I switch to IE6 the bg overlay image that I have on there seems to be getting pushed down by something at the top of the screen which is throwing the whole page off. Could someone please help me out with this. Thanks!

Here is the css code I am using for the tree overlay image:
#WrapperOverlay {
width: 1000px;
height: 838px;
margin: 0;
top: 0;
padding: 0 0 0 0;
background: url("/images/bg_overlay.png");
background-repeat: repeat-none;
background-position:center top;
background-attachment:scroll;
position:relative;
z-index: 5;
}

*html #WrapperOverlay {
display: block;
cursor:pointer;
background:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/bg_overlay.png', sizingMethod='image');
}

Wickham

24 Sep 2007, 12:27 PM

To be honest, there's a lot wrong with your page but I have done the minimum to get it to display as you want.

Add a doctype right at the top of the html page before the <html> tag:-
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

The tree outline needs to be at the top left of the screen so I moved the start of the div to just after the wrapper div so that it starts higher up and encloses the lower divs:-

.........<div id="wrapper">

<div id="WrapperOverlay">

<div id="TopText">........

but the closing tag is still in the same place:-

.............</form>
</div>



</div> 

<div id="footer">..........

Some changes were needed in the css file:-

adding left:0 in #WrapperOverlay

#WrapperOverlay {
width: 1000px;
height: 838px;
margin: 0;
top: 0; left: 0; /*left added*/
padding: 0 0 0 0;
background: url("/images/bg_overlay.png");
background-repeat: repeat-none;
background-position:center top;
background-attachment:scroll;
position:relative;
z-index: 5;
}

and I raised the #Mailing List:-

#MailingList {
width: 174px;
height: auto;
padding: 0 0 0 0;
position:relative;
top: 700px;/*was 850px;*/
left: 10px;
z-index: 15;
}

It seems to be OK in IE6, IE7, Firefox, Opera and Safari for Windows.