Jump to content
Sign in to follow this  
afish674

Display Bug In Ie9. Ignoring Div Boundaries?

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
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

Share this post


Link to post
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.

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...