[banjolin]

Er yes this ole chestnut again I'm afraid...please help...

Website www.jillyjarman.co.uk. Looks fine is every browser except IE. IE throws it all over the place. Have tried so many tweaks and changes nothing works...can somebody please help??

Here is my CSS - the HTML source can be viewed at www.jillyjarman.co.uk

body {
background-color: #ffffff;
top:0px;
left: 0px;
text-align: center;
width: 1024px;
height: 100%;
z-index: 1;
}

img.floatLeftClear {
float: right;
margin: 10px;
}

#centered {
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 80%;
text-align: left;
height: 100%;
margin: 0 auto;
}

#header {
width: 800px;
height: 533px;
position: relative;
text-align: left;
background-image: url(images/jilly1.jpg); background-repeat:no-repeat;
z-index: 1;
}


#maintext {
position: relative;
width: 600px;
height: auto;
top: 50px;
text-align: left;
left:160px;
padding: 20px;
z-index: 2;
}

#menucontainer {
position: relative;
width: 100px;
height: auto;
text-align: left;
top: -350px;
left:30px;
padding: 10px;
z-index: 3;

}


h1 {
font-family:arial, sans-serif;
color: #333333;
font-size: 12px;
font-weight: 100;
padding: 0px;
letter-spacing: 0px;
text-align: left;
}
h2 {
font-family:arial, sans-serif;
color: #993300;
font-size: 14px;
font-weight: 100;
padding: 0px;
letter-spacing: 0px;
text-align: left;
}

h3 {
font-family:brushstroke, fantasy;
color: #993300;
font-size: 40px;
font-weight: 120;
padding: 0px;
letter-spacing: 0px;
text-align: right;
}

h4 {
font-family:arial, sans-serif;
color: #333333;
font-size: 14px;
font-weight: 120;
padding: 0px;
letter-spacing: 0px;
text-align: right;
}


a:link {
color: #336699;
text-decoration: none;
cursor: pointer;

}
a:visited {
color: #336699;
text-decoration: none;
cursor: pointer;

}
a:hover {
color: #ff0000;
text-decoration: underline;
cursor: pointer;
}

[BlueDreamer]

Welcome to WDF!

Try removing position: relative; from all your styles, floating is much more reliable...

For #main text add float: right;
For #menucontainer add float: left;

[banjolin]

bluedreamer, on Feb 11 2009, 18:07, said:

Welcome to WDF!

Try removing position: relative; from all your styles, floating is much more reliable...

For #main text add float: right;
For #menucontainer add float: left;

Thank you thats really got IE centralising..in FF and Netscape tho the page is now pinned to the right, any ideas? This forum is awesoem by the way.

[BlueDreamer]

Change the "centerd" id to...

#centered {
width: 800px;
margin: 0 auto;
}

[banjolin]

Right I'm winning...thank you SO much for your help so far. Just one little bug left, in IE the menucontainer is pinned to the top of the screen, FF and Netscape are taking heed of my top: 130px; command.

IE is ignoring this, what can I do???

[neilp]

banjolin, on Feb 14 2009, 09:45, said:

Right I'm winning...thank you SO much for your help so far. Just one little bug left, in IE the menucontainer is pinned to the top of the screen, FF and Netscape are taking heed of my top: 130px; command.

IE is ignoring this, what can I do???

Try taking the float away, i wouldn't have it floated right if you have it absolute positioned.

#menucontainer {
position: absolute;
width: 100px;
height: 600px;
text-align: left;
top: 130px;
left:30px;
padding: 10px;
z-index: 2;

}

Hope that worked? If not then perhaps add another 30 or so to the top declaration: top: 160px;