Jump to content

Display Bug In Ie9. Ignoring Div Boundaries?


afish674
 Share

Recommended Posts

Hi, I am currently designing a website using CSS3 properties such as gradient but have found a strange display bug in IE9 that I really can't fathom currently. The website should look like this (Firefox): Layout_FF.jpg Whereas in IE it looks like this (Note right hand side of main content div):Layout_IE.jpg My CSS is as follows:

@charset "utf-8";/* CSS Document */body {background-color: #B0C7E5;margin: 0px;}body,td,th {color: #FFF;}@font-face {    font-family: 'TangerineBold';    src: url('../fonts/Tangerine_Bold-webfont.eot');    src: url('../fonts/Tangerine_Bold-webfont.eot?#iefix') format('embedded-opentype'),		 url('../fonts/Tangerine_Bold-webfont.woff') format('woff'),		 url('../fonts/Tangerine_Bold-webfont.ttf') format('truetype'),		 url('../fonts/Tangerine_Bold-webfont.svg#TangerineBold') format('svg');    font-weight: normal;    font-style: normal;}h1, h2, h3 {font-family: TangerineBold;font-weight: bold;text-decoration:underline;}a {color: #FFF;text-decoration: none;}.txt_shadow{text-shadow: 5px 5px 10px #000;-ms-filter:"progid:DXImageTransform.Microsoft.Shadow(Strength=2,Direction=135, Color='#000')";filter: progid:DXImageTransform.Microsoft.Shadow(Strength=2,Direction=135,Color='#000');}.centre_txt {text-align: center;}#sidebars{color: #fff;background: #b0c7e5;background-image: -moz-linear-gradient(top,#85a8d5, #b0c7e5);background-image: -webkit-gradient(lineaer,left top,left bottom,color-stop(0,#85a8d5),color-stop(1,#b0c7e5));-ms-filter: "progid:DXImageTransform.Microsoft.gradient(StartColorStr='#85a8d5', EndColorStr='#b0c7e5')";filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#85a8d5',EndColorStr='#b0c7e5');}#wrapper{width:960px;color: #fff;background: #b0c7e5;background-image: -moz-linear-gradient(top,#85a8d5, #b0c7e5);background-image: -webkit-gradient(lineaer,left top,left bottom,color-stop(0,#85a8d5),color-stop(1,#b0c7e5));-ms-filter: "progid:DXImageTransform.Microsoft.gradient(StartColorStr='#85a8d5', EndColorStr='#b0c7e5')";filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#85a8d5',EndColorStr='#b0c7e5');margin: 0 auto 0 auto;}#header{width:960px;margin: 0px;padding-top: 25px;padding-right: 15px;padding-bottom: 25px;padding-left: 15px;font-family: TangerineBold;font-weight: bold;font-size: 60px;}#date {float: right;font-size: 24px;color: #000;}#top_nav{width:960px;font-family: TangerineBold;font-weight: bold;font-size: 38px;}#top_nav ul {margin: 0px;padding-top: 10px;padding-right: 0px;padding-bottom: 10px;padding-left: 15px;}#top_nav li {display: inline;list-style-type: none;}#top_nav a:hover, a:focus, a:active{color: #000;}#main_content {width: 960px;-moz-border-radius: 20px;-webkit-border-radius: 20px;border-radius: 20px;box-shadow: 5px 5px 10px #000;padding: 15px;background-image:url(../assets/backgrounds/main_div_bg.png);color: #000;  } #footer{clear:both;padding: 15px;font-size:24px;font-family: TangerineBold;font-weight: bold;color: #000;}

Can anyone please suggest why this is happening and how I would go about fixing it? Many thanks, Anthony

Link to comment
Share on other sites

Thanks for your reply. The site is not live on a web server yet. However, I've put it into the public folder of my dropbox so it can be viewed albeit, slowly. http://dl.dropbox.co...nal/layout.html Any further feedback would be very much appreciated. p.s. As a sidenote. I also don't understand why the background gradient doesn't show in Chrome despite the webkit gradient property being declared. Regards, Anthony

Edited by afish674
Link to comment
Share on other sites

For some odd reason, the left and right padding of the main content box is causing this. The problem continues even when I remove the border radius and the box shadow. When I remove the "width" declaration from the element, it seems to work fine. Apparently, Internet Explorer only is putting the background image as far as the width of the element. The problem is probably that, since the width+padding of the element is wider than the parent element, then the parent only allows the element to display the background as far as its width.

Link to comment
Share on other sites

Ahh, I see. Thanks for this. I changed the main_content width to 930px so that when added to the 15px left and right off padding it totalled 960px across. This seems to have solved it! As a matter of interest. How did you find out what was causing the issue? I'm new to web design and this would help me troubleshoot in future. Regards, Anthony

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...