Display Bug In Ie9. Ignoring Div Boundaries?

[afish674]

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): Whereas in IE it looks like this (Note right hand side of main content div): 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

[Ingolme]

I can't think of why that would happen. If I could see the actual page I might be able to find something with the DOM inspector.

[afish674]

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

[Ingolme]

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.

[afish674]

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

[Ingolme]

I checked in Internet Explorer's developer tools which you can find in the menu. Then I just selected the element and checked the CSS properties.