September 3rd, 2012, 02:14 PM
|
|
Registered User
|
|
Join Date: Sep 2012
Posts: 1
Time spent in forums: 34 m 21 sec
Reputation Power: 0
|
|
|
CSS compatibility issues with IE browser (margin not working)
Hi,
I have encountered an issue with the alignment of my website when I preview it in IE browser. IE 7 has no "compatibility mode" (IE 9 has one), and what seems to work in Safari, firefox and chrome doesn't work in IE. I have a live website uploaded so it's easier to see where the problem lies.
Does anyone has any idea how to fix this problem for IE user? I have read some notes online and from MS official website. It's something about older IE version doesn't render these stuff properly if a width wasn't set. But in my case, it's anything from the logo image downwards, looks scrambled. There's no margin at the top of every page. So the logo went halfway through the browser screen and looks "cut off"...
I have tried "display=inline" and "float" tag, but none seems to work. There's also a reset.css file.
/* CONTAINER
------------------------------------------------------*/
#container{
margin:0px auto;
}
#header-container{
width:100%;
}
#header-box{
width:1090px;
margin:0px auto;
#header-box{
margin:50px auto 0px auto;
}
}
#slideshow-container{
width:1090px;
margin:30px auto 48px auto;
}
#headerimage-container{
width:1090px;
margin:48px auto 0px auto;
}
#slide-top, #headerimage-top{
width:1090px;
height:99px;
background-image:url(../images/bg-top-slide2.png);
background-repeat:no-repeat;
position:absolute;
z-index:100;
float:left;
}
#slide-bottom{
width:1090px;
height:121px;
margin-top:414px;
background-image:url(../images/bg-bottom-slide.png);
background-repeat:no-repeat;
position:absolute;
z-index:100;
float:left;
}
#headerimage-bottom{
width:1090px;
height:137px;
margin:-170px 0px -300px 0px;
background-image:url(../images/bg-bottom-slide-inner.png);
background-repeat:no-repeat;
position:absolute;
z-index:100;
float:left;
}
#footer-container{
width:1090px;
margin:0px auto -40px auto;
background-image:url(../images/footer-glow.png);
background-position:top center;
background-repeat:no-repeat;
background-color:#d8d8d8;
border-top:4px solid #cacaca;
}
Last edited by lazyjaws : September 4th, 2012 at 12:14 AM.
Reason: provide more information
|
Del.icio.us
Digg
Google
Spurl
Blink
Furl
Simpy
Y! MyWeb
Linear Mode
