PDA

View Full Version : IE6 displaying layout incorrectly


afield69
01-02-2009, 04:56 PM
Good evening folks,

I'm having an issue whilst viewing a template I'm creating in IE6. The pictures below may help me explain a little more, but whilst viewing the layout in Firefox everything is where it should be and looks fine, then i open up almighty IE and the content boxes appear to be directly next to each other or in different positions. I'm pretty new to CSS so I'm still learning.

IE6 Result

http://img227.imageshack.us/img227/4895/internetexplorerthemeze2.jpg

Firefox Result

http://img171.imageshack.us/img171/295/firefoxthemepy9.jpg

Finally, the CSS code. Any help is greatly appreciated.


@charset "utf-8";
* {
margin: 0px;
padding: 0px;
}
#Wrapper {
width: 100%;
margin-right: auto;
margin-left: auto;
border-right-style: none;
border-left-style: none;
border-top-style: none;
border-bottom-style: none;
position: relative;
}
#Wrapper #User_bar {
height: 48px;
width: 902px;
margin-right: auto;
margin-left: auto;
background-image: url(images/1111111111111111111111111111111111111_02.jpg);
position: relative;
}
#Wrapper #User_bar #smalllogo {
background-image: url(images/smalllogo.jpg);
height: 39px;
width: 109px;
margin-top: 3px;
margin-left: 9px;
float: left;
position: relative;
}


#Wrapper #Main_Navigation {
height: 49px;
width: 100%;
background-image: url(images/Sliced-Up-CC_07.jpg);
margin-top: 35px;
background-repeat: repeat-x;
position: relative;
text-align: left;
}
#Wrapper #Content_Area {
height: 827px;
width: 974px;
background-image: url(images/content_area_03.jpg);
margin-right: auto;
margin-left: auto;
margin-top: 20px;
border: 0px none #F9D21F;
position: relative;
}
#Wrapper #Quick_navigation {
background-image: url(images/morecontent_03.jpg);
height: 214px;
width: 980px;
margin-right: auto;
margin-left: auto;
margin-top: 15px;
}
#Wrapper #advertisement_area {
background-image: url(images/advertisement_Area_03.jpg);
height: 137px;
width: 975px;
margin-right: auto;
margin-left: auto;
}
#Wrapper #copyright_area {
background-image: url(images/copyright_area_03.jpg);
height: 63px;
width: 975px;
margin-right: auto;
margin-left: auto;
}
#Wrapper #footer_area {
background-image: url(images/footer_area_02.jpg);
height: 55px;
width: 100%;
margin-top: 12px;
}
#Wrapper #Content_Area #content_box {
background-image: url(images/images/images/content_main_02_03.jpg);
height: 428px;
width: 581px;
margin-left: 19px;
margin-top: 15px;
float: left;
}
#Wrapper #Content_Area #sign_in_box {
background-image: url(images/images/signIn_03.jpg);
float: right;
height: 215px;
width: 332px;
margin-top: 14px;
margin-right: 16px;
position: relative;
overflow: visible;
}
#Wrapper #Content_Area #shoutoutbox {
background-image: url(images/images/shoutoutbox_03.jpg);
float: right;
height: 202px;
width: 333px;
margin-right: 15px;
margin-top: 14px;
}
#Wrapper #Content_Area #content_main2 {
background-image: url(images/images/content_main2_03.jpg);
float: left;
height: 359px;
width: 597px;
margin-top: 13px;
margin-left: 18px;
}
#Wrapper #Content_Area #advertisements {
background-image: url(images/images/advertisements_03.jpg);
float: right;
height: 145px;
width: 349px;
margin-right: 6px;
margin-top: 12px;
position: relative;
}
#Wrapper #Content_Area #advertisements2 {
background-image: url(images/images/images/advertisements2_03.jpg);
float: right;
height: 206px;
width: 348px;
margin-right: 6px;
margin-top: 7px;